2f:T5f4,class Frame { #id = uuidv4(); #title; #body; #children; #style = { "flex-grow": 1 }; #nodeStyle = { display: "flex", ...EDITABLES.reduce( (acc, { id, options: [firstOption] }) => ({ ...acc, [id]: firstOption }), {} ) }; #leafStyle = { "text-align": "center", padding: "0px 4px", background: "white" }; constructor({ title, body, children }) { if (!!body && !!children) { throw new Error("Choose between body or children"); } this.#title = title; this.#body = body; this.#children = children; } get title() { return this.#title; } get body() { return this.#body; } get children() { return this.#children; } addChild(child, index) { if (this.isLeaf) { throw new Error("Can't add children to leaf"); } this.#children.splice(index, 0, child); } removeChild(index) { if (this.isLeaf) { throw new Error("Can't remove children from leaf"); } if (index > -1) { this.children.splice(index, 1); } } setAttribute(name, value) { this.#nodeStyle[name] = value; } getAttribute(name) { return this.#nodeStyle[name] || ""; } get id() { return this.#id; } get isLeaf() { return !this.children; } get style() { const style = { ...this.#style, ...(this.isLeaf ? this.#leafStyle : this.#nodeStyle) }; return Object.entries(style) .map(([key, value]) => `${key}: ${value};`) .join(" "); } }30:Ta03,function renderFrame({ state, handleChange }, depth = 0, parent, childIndex) { const { frame, isEditor, debugMode, contentSelector } = state; const { style, body, children, title, isLeaf } = frame; const buttons = []; const hasChildren = !!children; const addButton = (index) => { const button = renderAddButton(() => { contentSelector().then((newFrame) => { frame.addChild(newFrame, index); handleChange(); }); }, frame); buttons.push(button); return button; }; const deleteButton = () => { if (!isEditor || depth === 0) return ""; const button = renderRemoveButton(() => { parent.removeChild(childIndex); handleChange(); }, frame); buttons.push(button); return button; }; const renderChildren = (children) => { const elements = children.map((child, i) => renderFrame( { state: { ...state, frame: child }, handleChange }, depth + 1, frame, i ) ); return isEditor ? elements.reduce( (acc, child, i) => [...acc, child, addButton(i + 1)], [addButton(0)] ) : elements; }; const header = htl.html`

${ !!title ? htl.html`

${title.toUpperCase()}

` : "" } ${deleteButton()}

`; const editPanel = () => { if (!isEditor || isLeaf) return ""; const panel = renderEditPanel(frame, handleChange); buttons.push(panel); return panel; }; const frameElement = html`

${header}

${hasChildren ? renderChildren(children) : body}

${editPanel()}

`; if (!debugMode) { const buttonSelection = d3.selectAll(buttons).style("visibility", "hidden"); d3.select(frameElement) .on("mouseover", (event) => { buttonSelection.style("visibility", "visible"); event.stopPropagation(); }) .on("mouseout", (event) => { buttonSelection.style("visibility", "hidden"); event.stopPropagation(); }); } return frameElement; }31:T723,renderEditPanel = (frame, handleChange) => { const template = (inputs) => { return htl.html`

${inputs}

`; }; const selects = EDITABLES.map(({ id, title, options }) => { const select = Inputs.select(options, { label: title, value: frame.getAttribute(id) }); const input = d3.select(select).on("input", ({ target: { value } }) => { const option = options[value]; frame.setAttribute(id, option); handleChange(); }); input.style("width", "15em"); input.select("label").style("width", "4em"); input.select("select").style("width", "10em"); return select; }); const openButton = renderButton( "◘" //"align-self: start; top: -5px; left: -15px;" // "_line-height: 18px" ); const closeButton = renderRemoveButton(null, null, "align-self: end;"); const panel = htl.html`

${closeButton} ${Inputs.form(selects, { template })}

`; const panelD3 = d3.select(panel); //.style("display", "none"); const openButtonD3 = d3.select(openButton); let showPanel = false; const toggleShow = () => { showPanel = !showPanel; openButtonD3.style("visibility", showPanel ? "hidden" : "visible"); panelD3.style("display", showPanel ? "initial" : "none"); }; d3.select(closeButton).on("click", toggleShow); d3.select(openButton).on("click", toggleShow); toggleShow(); return htl.html`

${panel} ${openButton}

`; }32:[] 2d:{"title":"Frames in Frames","cells":[{"id":0,"value":"# Frames in Frames\n\nName inspired by [📺 Screens in Screens in Screens\n](https://www.youtube.com/watch?v=Q4OIcwt8vcE).","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"frames = {\n const f1 = new Frame({ title: \"Child 0\", body: \"A\" });\n const f2 = new Frame({ title: \"Child 1\", body: \"B\" });\n const s1 = new Frame({ title: \"Section 1\", children: [f1, f2] });\n const f4 = new Frame({ title: \"Child 2\", body: \"1\" });\n const f5 = new Frame({ title: \"Child 1\", body: \"2\" });\n const s2 = new Frame({ title: \"Section 2\", children: [f4, f5] });\n\n return new Frame({ title: \"Root\", children: [s1, s2] });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"frameEditor({ frame: frames, isEditor: true, debugMode: true, contentSelector })","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"frameEditor = statefulApplicationFactory(renderFrameEditor)","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"contentSelector = () =>\n Promise.resolve(new Frame({ title: \"A\", body: `${d3.randomInt(10)()} X` }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"renderFrameEditor = ({ state, handleChange }) => {\n const editSelect = Inputs.toggle({\n label: \"Edit Layout\",\n value: state.isEditor\n });\n\n d3.select(editSelect).on(\"input\", ({ target: { value, checked } }) => {\n state.isEditor = checked;\n handleChange();\n });\n\n const debugMode = Inputs.toggle({\n label: \"Debug Mode\",\n value: state.debugMode\n });\n\n d3.select(debugMode).on(\"input\", ({ target: { value, checked } }) => {\n state.debugMode = checked;\n handleChange();\n });\n\n return htl.html`\n

\n ${editSelect}\n ${debugMode}\n ${renderFrame({ state, handleChange })}\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"value":"renderAddButton = (handleClick, frame) =>\n renderButton(\n \"+\",\n handleClick,\n \"align-self: center; _margin-left: 1.5em; _margin-right: 1.5em;\"\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"renderRemoveButton = (handleClick, frame) =>\n renderButton(\"×\", handleClick, \"align-self: start; top: -15px; left: -5px;\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"renderButton = (\n text,\n handleClick,\n cutomeStyle = \"\",\n customeInnerStyle = \"\"\n) => {\n const size = 20;\n\n const button = htl.html`

\n ${text}\n

`;\n\n d3.select(button).on(\"click\", handleClick);\n\n return button;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":818,"value":"uuidv4 = () => {\n return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>\n (\n c ^\n (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))\n ).toString(16)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"## Constants","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"EDITABLES = [\n {\n id: \"flex-direction\",\n title: \"Direction\",\n options: FLEX_DIRECTION_OPTIONS\n },\n {\n id: \"justify-content\",\n title: \"Justify\",\n options: JUSTIFY_CONTENT_OPTIONS\n },\n {\n id: \"align-items\",\n title: \"Align\",\n options: ALIGN_ITEMS_OPTIONS\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"JUSTIFY_CONTENT_OPTIONS = [\n // \"flex-start\",\n // \"flex-end\",\n \"center\",\n \"start\",\n \"end\",\n \"space-around\",\n \"space-between\",\n \"space-evenly\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"FLEX_DIRECTION_OPTIONS = [\"row\", \"column\", \"row-reverse\", \"column-reverse\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"ALIGN_ITEMS_OPTIONS = [\n \"center\",\n \"stretch\",\n \"start\",\n \"end\"\n // \"flex-start\",\n // \"flex-end\",\n // \"baseline\",\n // \"first baseline\",\n // \"last baseline\",\n // \"self-start\",\n // \"self-end\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"import { statefulApplicationFactory } from \"@trebor/stateful-application-factory\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}