31:T566,main_canvas = { let canvas = document.createElement("canvas"); let w = s(v(wall[0])); let h = s(v(wall[1])); canvas.width = w + 2; canvas.height = h + 2; canvas.style.width = w + "px"; canvas.style.height = h + "px"; let ctx = canvas.getContext("2d"); ctx.translate(1, 1); ctx.fillStyle = "#efefef"; ctx.fillRect(0, 0, w, h); if (hanging_area_on) { let hw = s(v(hanging_area_dimensions[0])); let hh = s(v(hanging_area_dimensions[1])); let hx = hanging_area_position[0] ? s(v(hanging_area_position[0])) : 0; let hy = hanging_area_position[1] ? s(v(hanging_area_position[1])) : 0; ctx.fillStyle = "#e7e7e7"; ctx.fillRect(hx, hy, hw, hh); ctx.strokeStyle = "#bbb"; ctx.strokeRect(hx, hy, hw, hh); } ctx.font = "12px monospace"; ctx.baseline = "middle"; for (let f = 0; f < placed_frames.length; f++) { let frame = placed_frames[f]; if (frame !== "invalid") { ctx.fillStyle = "black"; ctx.fillRect( s(frame[2] - frame[0] / 2), s(frame[3] - frame[1] / 2), s(frame[0]), s(frame[1]) ); ctx.fillStyle = "white"; let letter = frame_order[f]; let letter_width = ctx.measureText(letter).width; let text = ctx.fillText( letter, s(frame[2]) - letter_width / 2, s(frame[3]) + 3 ); } } return canvas; }32:T81d,{ let list = html`

${frame_order.map((letter, i) => { let p = placed_frames[i]; let index = frame_order_indexes[i]; let f = frames[index]; let label = names[index] ? names[index] : `${v(f[0])}x${v(f[1])}`; if (p !== "invalid") { let placed = p === "unplaced" ? false : true; return html`

${letter}${names[index] ? "-" : ":"}${label}

`; } else { return html``; } })}

`; let invalids = []; for (let i = 0; i < placed_frames.length; i++) { let p = placed_frames[i]; if (p === "invalid") invalids.push(i); } let invalid_info = ""; if (invalids.length > 0) { invalid_info = html`

Invalid:

${invalids.map(index => { let f = frames[frame_order_indexes[index]]; return html`

${ frame_order[index] }:${nan(v(f[0]))}x${nan(v(f[1]))}

`; })}

`; } var sortable = new Sortable(list, { onUpdate: function(e) { let clone = mutable frame_order.slice(); let letter = clone.splice(e.oldIndex, 1)[0]; clone.splice(e.newIndex, 0, letter); mutable frame_order = clone; } }); let info = ""; if (hanging_area_check) { info = html`

⚠ Hanging area is not contained by wall.

`; } return html`

${info}
Order:
${list}

`; }33:Tc66,measurement_canvas = { let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); let key_lines = wrapText(ctx, key_text, s(v(wall[0])), 16); let extra_height = (connection_text.length + 2) * 16 + key_lines.length * 16 - 8; let w = s(v(wall[0])); let h = s(v(wall[1])) + extra_height; canvas.width = w + 2; canvas.height = h + 2; canvas.style.width = w + "px"; canvas.style.height = h + "px"; ctx.translate(1, 1); ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, w, h); ctx.fillStyle = "#efefef"; ctx.fillRect(0, 0, w, h - extra_height); let top_left = [0, 0]; if (hanging_area_on) { let hw = s(v(hanging_area_dimensions[0])); let hh = s(v(hanging_area_dimensions[1])); let hx = hanging_area_position[0] ? s(v(hanging_area_position[0])) : 0; let hy = hanging_area_position[1] ? s(v(hanging_area_position[1])) : 0; top_left = [hx, hy]; ctx.strokeStyle = "#bbb"; ctx.strokeRect(hx, hy, hw, hh); } ctx.font = "12px monospace"; ctx.baseline = "middle"; for (let f = 0; f < placed_frames.length; f++) { let frame = placed_frames[f]; if (frame !== "invalid") { ctx.strokeStyle = "#aaa"; ctx.strokeRect( s(frame[2] - frame[0] / 2), s(frame[3] - frame[1] / 2), s(frame[0]), s(frame[1]) ); ctx.fillStyle = "#aaa"; let letter = frame_order[f]; let letter_width = ctx.measureText(letter).width; let text = ctx.fillText( letter, s(frame[2]) - letter_width / 2, s(frame[3]) + 4 ); } } for (let d of placed_dots) { ctx.fillStyle = "black"; ctx.fillRect(s(d[0]) - 2, s(d[1]) - 2, 4, 4); } ctx.strokeStyle = "#444"; ctx.setLineDash([2, 2]); ctx.beginPath(); ctx.moveTo(top_left[0], top_left[1]); ctx.lineTo( s(placed_frames[0][2]), s(placed_frames[0][3] - placed_frames[0][1] / 2) ); ctx.stroke(); ctx.setLineDash([]); ctx.strokeStyle = "black"; let text = 0; for (let c of connections) { ctx.beginPath(); ctx.moveTo(s(c[0][0]), s(c[0][1])); ctx.lineTo(s(c[1][0]), s(c[1][1])); ctx.stroke(); let text_width = ctx.measureText(text).width; let min_x = Math.min(c[0][0], c[1][0]); let max_x = Math.max(c[0][0], c[1][0]); let mid_x = min_x + (max_x - min_x) / 2; let min_y = Math.min(c[0][1], c[1][1]); let max_y = Math.max(c[0][1], c[1][1]); let mid_y = min_y + (max_y - min_y) / 2; ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(s(mid_x), s(mid_y), 10, 0, 2 * Math.PI); ctx.fill(); ctx.fillStyle = "white"; ctx.fillText(text, s(mid_x) - text_width / 2, s(mid_y) + 4); text++; } ctx.fillStyle = "black"; for (let i = 0; i < key_lines.length; i++) { let line = key_lines[i][0]; ctx.fillText(line, 4, h - extra_height + (i + 1) * 16); } let offset = key_lines.length * 16; ctx.fillText(root_distance_text, 4, h - extra_height + 16 + offset); for (let i = 0; i < connection_text.length; i++) { let text = connection_text[i]; ctx.fillText(text, 4, h - extra_height + (i + 2) * 16 + offset); } return canvas; }34:Tbc4,function placeFrames(frames, bounded_area, padding) { let tuner = 0.125; let [w, h] = bounded_area; let tiles = makeTiles(w, h); // frame raw = [w, h, x, y] function checkBounds(f) { let bounds = getBoundaries(f); return !(bounds.t < 0 || bounds.r > w || bounds.b > h || bounds.l < 0); } function collisionCheck(a, b) { let fa = getBoundaries(a); let fb = getBoundaries(b); return fa.l < fb.r && fa.r > fb.l && fa.t < fb.b && fa.b > fb.t; } function checkOpen(frame, placed) { let bound_check = checkBounds(frame); if (!bound_check) return false; for (let i = 0; i < placed.length; i++) { let place = placed[i]; if (collisionCheck(place, frame)) { return false; } } return true; } function fineTune(picked, placed) { let to_center = { x: picked[2] - w / 2, y: picked[3] - h / 2 }; function tune(attempt, adjust, centerCheck) { if (checkOpen(attempt, placed)) { picked = attempt; if (centerCheck(attempt) !== 0) { let adjusted = adjust(attempt); tune(adjusted, adjust, centerCheck); } } } function yCenterCheck(frame) { return frame[3] - h / 2; } function xCenterCheck(frame) { return frame[2] - w / 2; } if (to_center.y < 0) { function adjust(attempt) { let clone = attempt.slice(); clone[3] += tuner; return clone; } tune(picked, adjust, yCenterCheck); } if (to_center.y > 0) { function adjust(attempt) { let clone = attempt.slice(); clone[3] -= tuner; return clone; } function centerCheck(attempt) { return attempt[3] - h / 2; } tune(picked, adjust, yCenterCheck); } if (to_center.x < 0) { function adjust(attempt) { let clone = attempt.slice(); clone[2] += tuner; return clone; } function centerCheck(attempt) { return attempt[2] - w / 2; } tune(picked, adjust, xCenterCheck); } if (to_center.x > 0) { function adjust(attempt) { let clone = attempt.slice(); clone[2] -= tuner; return clone; } function centerCheck(attempt) { return attempt[2] - w / 2; } tune(picked, adjust, xCenterCheck); } return picked; } let placed = []; for (let frame_raw of frames) { let frame = frame_raw.map(r => v(r)); // validity check if (!isNaN(frame[0]) && !isNaN(frame[1])) { let picked; for (let tile of tiles) { let temp_place = [...frame, tile.x, tile.y]; let open = checkOpen(temp_place, placed); if (open) { picked = temp_place; break; } } if (picked) { picked = fineTune(picked, placed); placed.push(picked); } else { placed.push("unplaced"); } } else { placed.push("invalid"); } } return placed; }35:[] 2f:{"title":"Picture hanging arranger","cells":[{"id":0,"value":"md`# Picture hanging arranger\n\nEnter the dimensions of your picture frames and wall to generate a hanging arrangement. The arranger algorithm places the first frame in the center and spirals out from there. Because arrangement is determined by the frame order, you can adjust the order to generate different arrangements. Look below for information on saving your arragement and a diagram with hanging measurements.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1659,"value":"viewof layout_scale = slider({\n min: 200,\n max: width,\n value: Math.min(width, 600),\n step: 1,\n title: \"Visualization width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1703,"value":"html`save in new tab`","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"{\n let input_order_button = html``;\n input_order_button.onclick = function() {\n mutable frame_order = frame_letters;\n };\n\n let order_button = html``;\n order_button.onclick = function() {\n mutable frame_order = sortFramesByArea();\n };\n\n let shuffle_button = html``;\n shuffle_button.onclick = function() {\n mutable frame_order = _.shuffle(mutable frame_order);\n };\n\n let button_stuff = html`\n

${input_order_button}

${order_button}

${shuffle_button}

`;\n\n return button_stuff;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"viewof frame_input = {\n let default_val = frame_input_default;\n let params_check = params.get(\"f\");\n if (params_check) {\n default_val = parseCommas(params_check)\n .map((pair, i) => {\n let name_check = params.get(\"n\").split(\",\")[i];\n let name = name_check ? \" - \" + decodeURIComponent(name_check) : \"\";\n return (\n parseX(pair)\n .map(val => rts(val))\n .join(\"x\") + name\n );\n })\n .join(\"\\r\\n\");\n }\n let form = html``;\n form.oninput = () => (form.value = form.frames.value);\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"viewof padding_input = text({\n title: \"Padding\",\n placeholder: padding_input_default,\n value: params.get(\"p\") !== null ? rts(params.get(\"p\")) : padding_input_default\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"viewof wall_input = text({\n title: \"Wall size\",\n placeholder: wall_input_fallback.map(f => v(f)).join(\"x\"),\n value:\n params.get(\"w\") !== null\n ? parseX(params.get(\"w\"))\n .map(val => rts(val))\n .join(\"x\")\n : wall_input_default\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"viewof hanging_area_on = checkbox({\n title: \"Hanging area\",\n options: [{ value: \"on\", label: \"On\" }],\n value: params.get(\"h\") !== null ? \"on\" : false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"viewof hanging_area_input = {\n let form = html`\n `;\n form.oninput = () =>\n (form.value = [form.dimensions.value, form.offsets.value]);\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1068,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"md`## Saving\n\nWe can save the current frame arrangement using the URL. Click the save link to save the current arrangment to this URL. You can also copy the arrangement link or open it in a new tab (both can be helpful when comparing several different arrangements).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"{\n let base = document.baseURI;\n let question_check = base.indexOf(\"?\");\n if (question_check > -1) {\n base = base.slice(0, question_check);\n }\n\n let input = html``;\n\n let button = html``;\n button.onclick = function() {\n input.select();\n document.execCommand(\"copy\");\n };\n\n return html`

\n ${input}\n

${html`save current arrangement`} ${button} ${html`save in new tab`}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1353,"value":"md`You can also download an image (PNG) of the arrangement. The file name contains the arragement information.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1342,"value":"DOM.download(\n await new Promise(resolve => main_canvas.toBlob(resolve)),\n \"arrangement-\" + query_string,\n \"Download an image of the arrangement\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1385,"value":"md`## Measurements\n\nMeasurements for doing the actual hanging. Distances between frames are calculated using the top mid-point of the frame. Measurements are rounded to the nearest 1/16.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1387,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1511,"value":"DOM.download(\n await new Promise(resolve => measurement_canvas.toBlob(resolve)),\n \"measurements-\" + query_string,\n \"Download an image of the measurements\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1543,"value":"md`### Measurements and key as text`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1449,"value":"html`

${key_text}

${root_distance_text}

\n${connection_text.map(text => html`

${text}

`)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1488,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1706,"value":"md`## Actual area`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1710,"value":"area = {\n let placed_x_mins = placed_frames\n .filter(f => f !== \"unframed\")\n .map(f => f[2] - f[0] / 2);\n let placed_x_maxs = placed_frames\n .filter(f => f !== \"unframed\")\n .map(f => f[2] + f[0] / 2);\n let placed_y_mins = placed_frames\n .filter(f => f !== \"unframed\")\n .map(f => f[3] - f[1] / 2);\n let placed_y_maxs = placed_frames\n .filter(f => f !== \"unframed\")\n .map(f => f[3] - f[1] / 2);\n let min_x = _.min(placed_x_mins);\n let max_x = _.max(placed_x_maxs);\n let x_dist = max_x - min_x;\n let y_dist = _.max(placed_y_maxs) - _.min(placed_y_mins);\n return {\n dists: [x_dist, y_dist],\n extra_start: min_x,\n extra_end: v(wall[0]) - max_x\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1730,"value":"extra_adjust = (area.extra_start - area.extra_end) / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1733,"value":"area.extra_end + extra_adjust","pinned":false,"hidden":false,"mode":"ojs"},{"id":1735,"value":"area.extra_start - extra_adjust","pinned":false,"hidden":false,"mode":"ojs"},{"id":1705,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"md`**PARSED VALUES**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1074,"value":"query_string = {\n let valid_frames = frames.filter(f => f.length === 2 && v(f[0]) && v(f[1]));\n let frame_string =\n \"f=\" +\n valid_frames\n .map(f => {\n return txs(f);\n })\n .join(\",\")\n .replace(\".\", \"p\");\n let padding_string = \"p=\" + ts(padding);\n let wall_string = \"w=\" + txs(wall);\n\n let frame_order_string = \"o=\" + frame_order.join(\",\");\n\n let string_array = [\n frame_string,\n frame_order_string,\n padding_string,\n wall_string\n ];\n\n if (hanging_area_on) {\n let dimensions = txs(hanging_area_dimensions);\n let position =\n ts(hanging_area_position[0]) + \",\" + ts(hanging_area_position[1]);\n let hanging_area_string = \"h=\" + dimensions + \",\" + position;\n string_array.push(hanging_area_string);\n }\n\n let names_string =\n \"n=\" + names.map(n => (n === null ? \"\" : encodeURIComponent(n))).join(\",\");\n string_array.push(names_string);\n\n return string_array.join(\"&\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"params = new URLSearchParams(new URL(document.baseURI).search)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1370,"value":"bounded_area = {\n if (hanging_area_on) {\n return [v(hanging_area_dimensions[0]), v(hanging_area_dimensions[1])];\n } else {\n return [v(wall[0]), v(wall[1])];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"placed_frames = {\n let ordered_frames = frame_order_indexes.map(index => frames[index]);\n let placed = placeFrames(ordered_frames, bounded_area, v(padding));\n if (hanging_area_on) {\n placed\n .filter(f => f !== \"invalid\" && f !== \"unplaced\")\n .map(f => {\n let clone = f.slice(0);\n f[2] += v(hanging_area_position[0]);\n f[3] += v(hanging_area_position[1]);\n });\n }\n return placed;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"frames = {\n let splits = parseNewlines(frame_input);\n let em = splits.map(x => nMap(parseX(dashDiscard(x))));\n return em;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1603,"value":"names = {\n let comma_splits = parseNewlines(frame_input);\n let _names = comma_splits.map(x => {\n if (x.indexOf(\"-\") > -1) {\n let splits = x.split(\"-\");\n let name = splits[1].trim();\n return name;\n } else {\n return null;\n }\n });\n return _names;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"frame_letters = frames.map((f, i) => letters[i])","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"mutable frame_order = frame_letters","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"mutable order_params_initiated = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":1209,"value":"order_param_set = {\n if (!mutable order_params_initiated) {\n mutable order_params_initiated = true;\n let param_check = params.get(\"o\");\n if (param_check) {\n mutable frame_order = param_check.split(\",\");\n return \"params set\";\n }\n return \"no params\";\n } else {\n return \"custom\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"frame_order_indexes = frame_order.map(letter => letters.indexOf(letter))","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"wall = {\n let [w, h] = nMap(parseX(wall_input || wall_input_default));\n if (isNaN(v(w))) w = wall_input_fallback[0];\n if (isNaN(v(h))) h = wall_input_fallback[1];\n return [w, h];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"padding = {\n let p = n(padding_input);\n if (isNaN(v(p))) p = padding_input_fallback;\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"hanging_area_dimensions = {\n let defaults = hanging_area_dimensions_fallback;\n let [w, h] = nMap(parseX(hanging_area_input[0]));\n if (isNaN(v(w))) w = defaults[0];\n if (isNaN(v(h))) h = defaults[1];\n return [w, h];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"hanging_area_position = {\n let defaults = hanging_area_position_fallback;\n let [x, y] = nMap(parseCommas(hanging_area_input[1]));\n if (isNaN(v(x))) x = defaults[0];\n if (isNaN(v(y))) y = defaults[1];\n return [x, y];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"hanging_area_check = {\n if (hanging_area_on) {\n let [hax, hay] = hanging_area_position.map(h => v(h));\n let [haw, hah] = hanging_area_dimensions.map(d => v(d));\n return (\n hax < 0 || hay < 0 || hax + haw > v(wall[0]) || hay + hah > v(wall[1])\n );\n } else {\n return false;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"md`**INPUT DEFAULTS & FALLBACKS**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"frame_input_default = `5x7\n5x7 - name 1\n10x3 1/4 - name 2\n3x8\n5x4 1/2\n4x5`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1275,"value":"wall_input_fallback = [[40, \"decimal\"], [20, \"decimal\"]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"wall_input_default = txs(wall_input_fallback)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1285,"value":"padding_input_fallback = [\"0.5\", \"fraction\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"padding_input_default = rts(ts(padding_input_fallback))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1303,"value":"hanging_area_dimensions_fallback = [[40, \"decimal\"], [20, \"decimal\"]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1315,"value":"hanging_area_dimensions_default = txs(hanging_area_dimensions_fallback)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1308,"value":"hanging_area_position_fallback = [[0, \"decimal\"], [0, \"decimal\"]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1319,"value":"hanging_area_position_default = hanging_area_position_fallback\n .map(p => ts(p))\n .join(\",\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"md`**LAYOUT FUNCTIONS**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1363,"value":"function getBoundaries(f) {\n let [w, h, x, y] = f;\n let t = y - h / 2 - v(padding) / 2;\n let r = x + w / 2 + v(padding) / 2;\n let b = y + h / 2 + v(padding) / 2;\n let l = x - w / 2 - v(padding) / 2;\n return { t, r, b, l };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"function makeTiles(w, h) {\n // work in pixels\n let tile_size = 1;\n let columns = Math.floor(w / tile_size);\n let coffset = (w - columns * tile_size) / 2;\n let rows = Math.floor(h / tile_size);\n let roffset = (h - rows * tile_size) / 2;\n\n let wall_center = [w / 2, h / 2];\n\n let tiles = [...Array(rows)].map((blank, r) => {\n return [...Array(columns)].map((blank, c) => {\n let i = r * columns + c;\n let x = c * tile_size + tile_size / 2 - coffset;\n let y = r * tile_size + tile_size / 2 - roffset;\n let d = pointDistance([x, y], wall_center);\n return { r, c, i, x, y, d };\n });\n });\n\n let flattened = _.flatten(tiles);\n\n let sorted_tiles = _.sortBy(flattened, \"d\");\n\n return sorted_tiles;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1355,"value":"md`**MEASUREMENT MODE VALUES & FUNCTIONS**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1360,"value":"placed_dots = {\n let filtered_frames = placed_frames.filter(\n f => f !== \"unplaced\" && f !== \"invalid\"\n );\n let filtered_dots = filtered_frames.map((f, i) => {\n let bounds = getBoundaries(f);\n let center = f[2];\n let top = bounds.t + v(padding) / 2;\n let distance = pointDistance(\n [center, top],\n [v(bounded_area) / 2, v(bounded_area) / 2]\n );\n return [center, top, distance, frame_order[i]];\n });\n return filtered_dots;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1408,"value":"sorted_dots = _.sortBy(placed_dots, \"d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1410,"value":"connections = {\n let connected = [];\n for (let i = 1; i < sorted_dots.length; i++) {\n let current = sorted_dots[i];\n let placed = sorted_dots.slice(0, i);\n let placed_distances = placed.map(p => pointDistance(current, p));\n let min = _.min(placed_distances);\n let min_index = placed_distances.indexOf(min);\n let connection = [\n Object.assign({}, placed[min_index]),\n Object.assign({}, current),\n current[3],\n placed[min_index][3]\n ];\n connected.push(connection);\n }\n return connected;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1558,"value":"root_distance_text = {\n let root = \"Wall\";\n let left_top = [0, 0];\n if (hanging_area_on) {\n root = \"Hanging area\";\n left_top = hanging_area_position.map(p => v(p));\n }\n let center_frame = placed_frames[0];\n let x_dist = center_frame[2] - left_top[0];\n let y_dist = center_frame[3] - center_frame[1] / 2 - left_top[1];\n let string = root + \"→\" + frame_order[0] + ` [ x: ${x_dist}, y: ${y_dist} ]`;\n return string;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1516,"value":"connection_text = connections.map(\n (c, i) =>\n `${i}. ${c[0][3]}→${c[1][3]} [ x: ${f3(c[1][0] - c[0][0])}, y: ${f3(\n c[1][1] - c[0][1]\n )} ]`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1621,"value":"key_text =\n \"Key: \" +\n frame_order\n .map((letter, i) => {\n let p = placed_frames[i];\n let index = frame_order_indexes[i];\n let f = frames[index];\n let label = names[index] ? names[index] : `${v(f[0])}x${v(f[1])}`;\n if (p !== \"invalid\") {\n let placed = p === \"unplaced\" ? false : true;\n return `${letter}${names[index] ? \"-\" : \":\"}${label}`;\n } else {\n return html``;\n }\n })\n .join(\", \")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1412,"value":"function f3(number) {\n if (number === 0) return 0;\n let rounded = Math.round(number * denominator_tune) / denominator_tune;\n let f = new Fraction(rounded);\n let fraction = f.toFraction(true);\n if (fraction === \"0\") return 0;\n return fraction;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1417,"value":"denominator_tune = 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":1415,"value":"Fraction = require(\"fraction.js@4.0.9/fraction\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"md`**UTILITY FUNCTIONS**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"md`- v: getNumberValue\n- s: scaleNumber \n- n: parseNumber (fraction or decimal)\n- ts: toString (from fraction decimal pair)\n- rts: reverseToString (from param to number)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"function v(number_pair) {\n if (number_pair) {\n return number_pair[0];\n } else {\n return NaN;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"function s(measurement) {\n return measurement * (layout_scale / v(wall[0]));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"function n(input_string) {\n return parseFractionOrDecimal(input_string);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"function ts(pair) {\n let v = pair[0].toString().replace(\".\", \"p\");\n let t = pair[1] === \"fraction\" ? \"f\" : \"\";\n return t + v;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"function rts(string) {\n if (string[0] === \"f\") {\n let fraction_string = string.slice(1);\n let split = fraction_string.split(\"p\");\n let decimal = precisionRound(parseFloat(\".\" + split[1]), 4);\n let fraction = getFraction(decimal).join(\"/\");\n let start = \"\";\n if (parseFloat(split[0]) > 0) start = split[0] + \" \";\n return start + fraction;\n } else {\n return string.replace(\"p\", \".\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1289,"value":"function pti(pair) {\n if (pair[1] === \"fraction\") {\n let fraction_string = pair[0].toString();\n let split = fraction_string.split(\".\");\n let decimal = precisionRound(parseFloat(\".\" + split[1]), 4);\n let fraction = getFraction(decimal).join(\"/\");\n let start = \"\";\n if (parseFloat(split[0]) > 0) start = split[0] + \" \";\n return start + fraction;\n } else {\n return v(pair);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":936,"value":"function txs(xpair) {\n return ts(xpair[0]) + \"x\" + ts(xpair[1]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"function nan(test) {\n if (isNaN(test)) {\n return \"?\";\n } else {\n return test;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"function nMap(array) {\n return array.map(string => n(string));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"function parseX(input_string) {\n let dims = input_string.split(/x/i).map(s => {\n return s.trim();\n });\n return dims;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1598,"value":"function dashDiscard(string) {\n if (string.indexOf(\"-\") > -1) {\n let splits = string.split(\"-\");\n return splits[0].trim();\n } else {\n return string;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"function pointDistance(p1, p2) {\n var a = p1[0] - p2[0];\n var b = p1[1] - p2[1];\n return Math.sqrt(a * a + b * b);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"function parseCommas(input_string) {\n return input_string\n .trim()\n .split(\",\")\n .map(v => v.trim());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1653,"value":"function parseNewlines(input_string) {\n return input_string\n .trim()\n .split(/\\r?\\n/)\n .map(v => v.trim());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"function sortFramesByArea() {\n let clone = frames.slice();\n let index_and_areas = clone.map((f, i) => {\n return { index: i, area: v(f[0]) * v(f[1]) };\n });\n let sorted = _.sortBy(index_and_areas, \"area\").reverse();\n let new_order = sorted.map(s => letters[s.index]);\n return new_order;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1240,"value":"function precisionRound(number, precision) {\n let factor = Math.pow(10, precision);\n return Math.round(number * factor) / factor;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1629,"value":"function wrapText(ctx, text, width, lh) {\n let words = text.split(\" \");\n let lines = [];\n let maxWidth = width;\n let indent_width = width - lh;\n let line = \"\";\n let x = 0;\n let y = 0;\n for (let n = 0; n < words.length; n++) {\n let testLine = n === 0 ? line + words[n] : line + \" \" + words[n];\n let metrics = ctx.measureText(testLine);\n let testWidth = metrics.width;\n let active_width = maxWidth;\n if (testWidth > active_width && n > 0) {\n lines.push([line, x, y]);\n line = words[n];\n y += lh;\n } else {\n line = testLine;\n }\n }\n lines.push([line, x, y]);\n return lines;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"md`**LIBRARIES & CONSTANTS**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"letters = \"A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,X,Y,Z\".split(\",\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"Sortable = require(\"sortablejs@1.8.0-rc1/Sortable.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"import {parseFractionOrDecimal,getFraction} from '@grantcuster/fraction-or-decimal-input'","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"import {text, textarea, checkbox, slider} from \"@jashkenas/inputs\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}