@sealcode/jdd-editor 0.1.9 → 0.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/@types/controllers/component-debugger.stimulus.d.ts +2 -0
  2. package/assets/styles/component-debugger.jdd-page.css +20 -16
  3. package/assets/styles/components.jdd-page.css +1 -0
  4. package/dist/src/controllers/component-debugger.stimulus.js +26 -7
  5. package/dist/src/controllers/component-debugger.stimulus.js.map +2 -2
  6. package/lib/src/component-preview-actions.js +367 -429
  7. package/package.json +1 -1
  8. package/src/controllers/component-debugger.stimulus.ts +29 -11
package/@types/controllers/component-debugger.stimulus.d.ts CHANGED
@@ -11,11 +11,13 @@ export default class ComponentDebugger extends Controller {
11
11
  main_form: HTMLFormElement;
12
12
  origin_x: number;
13
13
  origin_width: number;
14
+ hover_overlay: HTMLDivElement | null;
14
15
  connect(): void;
15
16
  update_width_display(): void;
16
17
  resizeHandler(e: MouseEvent): void;
17
18
  setPreviewWidth(width: number): void;
18
19
  handleWidthDropdown(): void;
20
+ getHoverOverlay(): HTMLDivElement;
19
21
  handleBlockHover(e: MouseEvent): void;
20
22
  handleBlockUnhover(e: MouseEvent): void;
21
23
  componentBlockTargetConnected(block_element: HTMLDivElement): void;
package/assets/styles/component-debugger.jdd-page.css CHANGED
@@ -41,22 +41,6 @@
41
41
  &:after {
42
42
  transition: all 200ms;
43
43
  }
44
-
45
- &.highlighted {
46
- outline: 2px solid blue;
47
- &:after {
48
- display: block;
49
- height: 100%;
50
- content: " ";
51
- background-color: transparent;
52
- top: 0;
53
- position: absolute;
54
- width: 100%;
55
- z-index: 10;
56
- pointer-events: none;
57
- background-color: #00f6;
58
- }
59
- }
60
44
  }
61
45
 
62
46
  .jdd-editor__component-block__title {
@@ -68,4 +52,24 @@
68
52
  font-size: 10px;
69
53
  }
70
54
  }
55
+
56
+ .hover-overlay {
57
+ box-sizing: border-box;
58
+ border: 3px dashed var(--color-brand-accent);
59
+ display: block;
60
+ position: absolute;
61
+ z-index: 10;
62
+ background-color: color(
63
+ from var(--color-brand-accent) srgb r g b / 0.25
64
+ );
65
+ pointer-events: none;
66
+
67
+ &.inactive {
68
+ opacity: 0;
69
+ }
70
+ }
71
+
72
+ .jdd-outer-container {
73
+ position: relative; /* for the overlay to work properly */
74
+ }
71
75
  }
package/assets/styles/components.jdd-page.css CHANGED
@@ -33,6 +33,7 @@ body.jdd-editor {
33
33
 
34
34
  .component-preview {
35
35
  width: var(--resizable-column-width);
36
+ background-color: var(--color-brand-canvas);
36
37
 
37
38
  min-width: 0; /* default is min-content and that causes overflow*/
38
39
  overflow-x: auto;
package/dist/src/controllers/component-debugger.stimulus.js CHANGED
@@ -75,19 +75,38 @@ class ComponentDebugger extends Controller {
75
75
  const value = this.sizeSelectTarget.value;
76
76
  this.setPreviewWidth(parseInt(value));
77
77
  }
78
+ getHoverOverlay() {
79
+ var _a;
80
+ if (!this.hover_overlay) {
81
+ this.hover_overlay = document.createElement("div");
82
+ this.hover_overlay.classList.add("hover-overlay");
83
+ (_a = this.element.querySelector(".jdd-outer-container")) == null ? void 0 : _a.append(this.hover_overlay);
84
+ }
85
+ return this.hover_overlay;
86
+ }
78
87
  handleBlockHover(e) {
79
- var _a, _b;
88
+ var _a;
80
89
  const index = parseInt(
81
90
  ((_a = e.target.closest(".jdd-editor__component-block")) == null ? void 0 : _a.getAttribute("data-component-index")) || "0"
82
91
  );
83
- (_b = this.element.querySelector(`.component-number-${index}`)) == null ? void 0 : _b.classList.add("highlighted");
92
+ const selector = `.component-number-${index}`;
93
+ const target_element = this.element.querySelector(selector);
94
+ if (!target_element) {
95
+ console.warn(`Didn't find an element matching: ${selector}`);
96
+ return;
97
+ }
98
+ const width = target_element.clientWidth;
99
+ const height = target_element.clientHeight;
100
+ const top = target_element.scrollTop;
101
+ const overlay = this.getHoverOverlay();
102
+ overlay.classList.remove("inactive");
103
+ overlay.style.setProperty("width", `${width}px`);
104
+ overlay.style.setProperty("height", `${height}px`);
105
+ overlay.style.setProperty("top", `${top}px`);
84
106
  }
85
107
  handleBlockUnhover(e) {
86
- var _a;
87
- const index = parseInt(
88
- ((_a = e.target.closest(".jdd-editor__component-block")) == null ? void 0 : _a.getAttribute("data-component-index")) || ""
89
- );
90
- this.element.querySelectorAll(`.component-number-${index}.highlighted`).forEach((e2) => e2.classList.remove("highlighted"));
108
+ const overlay = this.getHoverOverlay();
109
+ overlay.classList.add("inactive");
91
110
  }
92
111
  componentBlockTargetConnected(block_element) {
93
112
  const index = parseInt(
package/dist/src/controllers/component-debugger.stimulus.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/controllers/component-debugger.stimulus.ts"],
4
- "sourcesContent": ["/* eslint-disable @typescript-eslint/no-non-null-assertion */\n/* eslint-disable @typescript-eslint/consistent-type-assertions */\n/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport { Controller } from \"stimulus\";\n\nexport default class ComponentDebugger extends Controller {\n\tdeclare sizeSelectTarget: HTMLSelectElement;\n\tdeclare gutterTarget: HTMLDivElement;\n\tdeclare checkboxTarget: HTMLInputElement;\n\tdeclare checkboxTargets: HTMLInputElement[];\n\tdeclare previewTarget: HTMLDivElement;\n\tdeclare componentBlockTargets: HTMLDivElement[];\n\tstatic targets = [\n\t\t\"gutter\",\n\t\t\"componentBlock\",\n\t\t\"checkbox\",\n\t\t\"preview\",\n\t\t\"sizeSelect\",\n\t];\n\n\tid: string;\n\tmain_form: HTMLFormElement;\n\torigin_x: number;\n\torigin_width: number;\n\n\tconnect() {\n\t\tconst main_form = document\n\t\t\t.querySelector(\"#component-debugger\")\n\t\t\t?.closest(\"form\");\n\t\tif (!main_form) {\n\t\t\tthrow new Error(\"No main form\");\n\t\t}\n\t\tthis.main_form = main_form;\n\t\tdocument.documentElement.addEventListener(\"ts-rebuilt\", () => {\n\t\t\tthis.main_form.requestSubmit();\n\t\t});\n\t\tthis.main_form.addEventListener(\"turbo:submit-end\", () => {\n\t\t\t// this clears the values of file inputs, so they don't get unecessarily\n\t\t\t// re-uploaded on future submissions - the file is alreade there on the server\n\t\t\tthis.main_form\n\t\t\t\t.querySelectorAll(\"input[type=file]\")\n\t\t\t\t.forEach((input: HTMLInputElement) => (input.value = \"\"));\n\t\t});\n\n\t\twindow.addEventListener(\"load\", () => {\n\t\t\tthis.update_width_display();\n\t\t});\n\t\tdocument.addEventListener(\"turbo:render\", () => {\n\t\t\t// not calling that to see if that improves performance\n\t\t\t// console.log(\"UWD because of render event\");\n\t\t\t// this.update_width_display();\n\t\t});\n\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\tconst gutter = this.gutterTarget;\n\t\tgutter.addEventListener(\"mousedown\", (e) => {\n\t\t\tthis.origin_x = e.clientX;\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tconst resizable = this.targets.find(\"preview\") as HTMLSpanElement;\n\t\t\tthis.origin_width = resizable.getBoundingClientRect().width;\n\t\t\tconst handler = (e: MouseEvent) => this.resizeHandler(e);\n\t\t\tdocument.addEventListener(\"mousemove\", handler);\n\t\t\tconst remove_move_listener = () => {\n\t\t\t\tdocument.removeEventListener(\"mousemove\", handler);\n\t\t\t\tdocument.removeEventListener(\"mouseup\", remove_move_listener);\n\t\t\t\tdocument.dispatchEvent(\n\t\t\t\t\tnew Event(\"component-debugger--resize-done\")\n\t\t\t\t);\n\t\t\t};\n\t\t\tdocument.addEventListener(\"mouseup\", remove_move_listener);\n\t\t\te.preventDefault();\n\t\t});\n\t}\n\n\tupdate_width_display() {\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\tconsole.log(\"uwd\");\n\t\tconst preview = this.targets.find(\"preview\") as HTMLSpanElement;\n\t\tconst component_width = preview.offsetWidth;\n\t\tthis.sizeSelectTarget\n\t\t\t.querySelectorAll(\"option\")\n\t\t\t.forEach((e) => e.removeAttribute(\"selected\"));\n\t\tlet option: HTMLOptionElement | null =\n\t\t\tthis.sizeSelectTarget.querySelector(\"option.dynamic\");\n\t\tif (!option) {\n\t\t\toption = document.createElement(\"option\");\n\t\t\toption.classList.add(\"dynamic\");\n\t\t\toption.setAttribute(\"selected\", \"\");\n\t\t\tthis.sizeSelectTarget.insertBefore(\n\t\t\t\toption,\n\t\t\t\tthis.sizeSelectTarget.childNodes[0]!\n\t\t\t);\n\t\t}\n\t\toption.setAttribute(\"selected\", \"\");\n\t\toption.innerHTML = `${component_width} px`;\n\t\toption.value = String(component_width);\n\t\tthis.sizeSelectTarget.value = String(component_width);\n\t}\n\n\tresizeHandler(e: MouseEvent) {\n\t\tconst width_offset = this.origin_x - e.clientX;\n\t\tconst new_width = Math.max(this.origin_width + width_offset, 1);\n\t\tthis.setPreviewWidth(new_width);\n\t\tthis.update_width_display();\n\t\tdocument.dispatchEvent(new Event(\"component-debugger--resize\"));\n\t}\n\n\tsetPreviewWidth(width: number) {\n\t\tdocument\n\t\t\t.getElementById(\"component-debugger\")\n\t\t\t?.style.setProperty(\n\t\t\t\t\"--resizable-column-width\",\n\t\t\t\twidth.toString() + \"px\"\n\t\t\t);\n\t\tthis.update_width_display();\n\t}\n\n\thandleWidthDropdown() {\n\t\tconst value = this.sizeSelectTarget.value;\n\t\tthis.setPreviewWidth(parseInt(value));\n\t}\n\n\thandleBlockHover(e: MouseEvent) {\n\t\tconst index = parseInt(\n\t\t\t(e.target as HTMLDivElement)\n\t\t\t\t.closest(\".jdd-editor__component-block\")\n\t\t\t\t?.getAttribute(\"data-component-index\") || \"0\"\n\t\t);\n\t\tthis.element\n\t\t\t.querySelector(`.component-number-${index}`)\n\t\t\t?.classList.add(\"highlighted\");\n\t}\n\n\thandleBlockUnhover(e: MouseEvent) {\n\t\tconst index = parseInt(\n\t\t\t(e.target as HTMLDivElement)\n\t\t\t\t.closest(\".jdd-editor__component-block\")\n\t\t\t\t?.getAttribute(\"data-component-index\") || \"\"\n\t\t);\n\t\tthis.element\n\t\t\t.querySelectorAll(`.component-number-${index}.highlighted`)\n\t\t\t.forEach((e) => e.classList.remove(\"highlighted\"));\n\t}\n\n\tcomponentBlockTargetConnected(block_element: HTMLDivElement) {\n\t\tconst index = parseInt(\n\t\t\tblock_element.getAttribute(\"data-component-index\") || \"0\"\n\t\t);\n\t\tblock_element.addEventListener(\"focusin\", () => {\n\t\t\tthis.scrollToComponentPreview(index);\n\t\t});\n\n\t\tconst summary = block_element.querySelector(\"summary\");\n\t\tif (summary) {\n\t\t\tsummary.addEventListener(\n\t\t\t\t\"mouseenter\",\n\t\t\t\tthis.handleBlockHover.bind(this)\n\t\t\t);\n\t\t\tsummary.addEventListener(\n\t\t\t\t\"mouseleave\",\n\t\t\t\tthis.handleBlockUnhover.bind(this)\n\t\t\t);\n\t\t}\n\t}\n\n\tpreviewTargetConnected(preview_element: HTMLDivElement) {\n\t\tpreview_element.addEventListener(\"click\", ({ target }) => {\n\t\t\tif (!(target instanceof HTMLElement)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst closest = target.closest(\".jdd-component\");\n\t\t\tif (!closest) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst index = parseInt(\n\t\t\t\tString(\n\t\t\t\t\tArray.from(closest.classList)\n\t\t\t\t\t\t.find((c) => c.startsWith(\"component-number-\"))\n\t\t\t\t\t\t?.replace(\"component-number-\", \"\")\n\t\t\t\t)\n\t\t\t);\n\t\t\tif (isNaN(index)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tthis.focusComponentBlock(index);\n\t\t});\n\t}\n\n\tfocusComponentBlock(index: number) {\n\t\tconst block = this.componentBlockTargets[index];\n\t\tif (!block) {\n\t\t\treturn;\n\t\t}\n\t\tthis.checkboxTargets[index]!.checked = true;\n\t\tthis.checkboxTargets[index]!.dispatchEvent(new Event(\"change\")); // to help with refreshing markdown editor\n\t\tblock.scrollIntoView({ behavior: \"smooth\" });\n\t\t(\n\t\t\tblock.querySelector(\n\t\t\t\t\".component-preview-parameters input\"\n\t\t\t) as HTMLInputElement\n\t\t)?.focus();\n\t}\n\n\tgetIndex(block_element: HTMLDivElement) {\n\t\tconst index = parseInt(\n\t\t\tString(block_element.getAttribute(\"data-component-index\"))\n\t\t);\n\t\treturn index;\n\t}\n\n\tlabelClicked(element: MouseEvent) {\n\t\tconst block_element = (element.target as HTMLDivElement).closest(\n\t\t\t`[data-component-debugger-target=\"componentBlock\"]`\n\t\t) as HTMLDivElement;\n\t\tconst index = this.getIndex(block_element);\n\t\tif (!this.checkboxTargets?.[index]?.checked) {\n\t\t\tthis.scrollToComponentPreview(index);\n\t\t}\n\t}\n\n\tgetPreviewElementForComponentIndex(index: number) {\n\t\tconst element = this.element.querySelector(\n\t\t\t`.component-number-${index}`\n\t\t) as HTMLDialogElement;\n\t\treturn element;\n\t}\n\n\tscrollToComponentPreview(index: number) {\n\t\tconst element = this.getPreviewElementForComponentIndex(index);\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\t\tconst preview_element =\n\t\t\tthis.element.querySelector(\".component-preview\");\n\t\tif (!preview_element) {\n\t\t\tthrow new Error(\"Missing preview element!\");\n\t\t}\n\t\tif (element.clientHeight > preview_element.clientHeight) {\n\t\t\tpreview_element.scrollTop = element.offsetTop - 44;\n\t\t} else {\n\t\t\tpreview_element.scrollTop =\n\t\t\t\telement.offsetTop -\n\t\t\t\t(preview_element.clientHeight - element.clientHeight) / 2 -\n\t\t\t\t44;\n\t\t}\n\t}\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable @typescript-eslint/no-non-null-assertion */\n/* eslint-disable @typescript-eslint/consistent-type-assertions */\n/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport { Controller } from \"stimulus\";\n\nexport default class ComponentDebugger extends Controller {\n\tdeclare sizeSelectTarget: HTMLSelectElement;\n\tdeclare gutterTarget: HTMLDivElement;\n\tdeclare checkboxTarget: HTMLInputElement;\n\tdeclare checkboxTargets: HTMLInputElement[];\n\tdeclare previewTarget: HTMLDivElement;\n\tdeclare componentBlockTargets: HTMLDivElement[];\n\tstatic targets = [\n\t\t\"gutter\",\n\t\t\"componentBlock\",\n\t\t\"checkbox\",\n\t\t\"preview\",\n\t\t\"sizeSelect\",\n\t];\n\n\tid: string;\n\tmain_form: HTMLFormElement;\n\torigin_x: number;\n\torigin_width: number;\n\n\thover_overlay: HTMLDivElement | null;\n\n\tconnect() {\n\t\tconst main_form = document\n\t\t\t.querySelector(\"#component-debugger\")\n\t\t\t?.closest(\"form\");\n\t\tif (!main_form) {\n\t\t\tthrow new Error(\"No main form\");\n\t\t}\n\t\tthis.main_form = main_form;\n\t\tdocument.documentElement.addEventListener(\"ts-rebuilt\", () => {\n\t\t\tthis.main_form.requestSubmit();\n\t\t});\n\t\tthis.main_form.addEventListener(\"turbo:submit-end\", () => {\n\t\t\t// this clears the values of file inputs, so they don't get unecessarily\n\t\t\t// re-uploaded on future submissions - the file is alreade there on the server\n\t\t\tthis.main_form\n\t\t\t\t.querySelectorAll(\"input[type=file]\")\n\t\t\t\t.forEach((input: HTMLInputElement) => (input.value = \"\"));\n\t\t});\n\n\t\twindow.addEventListener(\"load\", () => {\n\t\t\tthis.update_width_display();\n\t\t});\n\t\tdocument.addEventListener(\"turbo:render\", () => {\n\t\t\t// not calling that to see if that improves performance\n\t\t\t// console.log(\"UWD because of render event\");\n\t\t\t// this.update_width_display();\n\t\t});\n\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\tconst gutter = this.gutterTarget;\n\t\tgutter.addEventListener(\"mousedown\", (e) => {\n\t\t\tthis.origin_x = e.clientX;\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tconst resizable = this.targets.find(\"preview\") as HTMLSpanElement;\n\t\t\tthis.origin_width = resizable.getBoundingClientRect().width;\n\t\t\tconst handler = (e: MouseEvent) => this.resizeHandler(e);\n\t\t\tdocument.addEventListener(\"mousemove\", handler);\n\t\t\tconst remove_move_listener = () => {\n\t\t\t\tdocument.removeEventListener(\"mousemove\", handler);\n\t\t\t\tdocument.removeEventListener(\"mouseup\", remove_move_listener);\n\t\t\t\tdocument.dispatchEvent(\n\t\t\t\t\tnew Event(\"component-debugger--resize-done\")\n\t\t\t\t);\n\t\t\t};\n\t\t\tdocument.addEventListener(\"mouseup\", remove_move_listener);\n\t\t\te.preventDefault();\n\t\t});\n\t}\n\n\tupdate_width_display() {\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\tconsole.log(\"uwd\");\n\t\tconst preview = this.targets.find(\"preview\") as HTMLSpanElement;\n\t\tconst component_width = preview.offsetWidth;\n\t\tthis.sizeSelectTarget\n\t\t\t.querySelectorAll(\"option\")\n\t\t\t.forEach((e) => e.removeAttribute(\"selected\"));\n\t\tlet option: HTMLOptionElement | null =\n\t\t\tthis.sizeSelectTarget.querySelector(\"option.dynamic\");\n\t\tif (!option) {\n\t\t\toption = document.createElement(\"option\");\n\t\t\toption.classList.add(\"dynamic\");\n\t\t\toption.setAttribute(\"selected\", \"\");\n\t\t\tthis.sizeSelectTarget.insertBefore(\n\t\t\t\toption,\n\t\t\t\tthis.sizeSelectTarget.childNodes[0]!\n\t\t\t);\n\t\t}\n\t\toption.setAttribute(\"selected\", \"\");\n\t\toption.innerHTML = `${component_width} px`;\n\t\toption.value = String(component_width);\n\t\tthis.sizeSelectTarget.value = String(component_width);\n\t}\n\n\tresizeHandler(e: MouseEvent) {\n\t\tconst width_offset = this.origin_x - e.clientX;\n\t\tconst new_width = Math.max(this.origin_width + width_offset, 1);\n\t\tthis.setPreviewWidth(new_width);\n\t\tthis.update_width_display();\n\t\tdocument.dispatchEvent(new Event(\"component-debugger--resize\"));\n\t}\n\n\tsetPreviewWidth(width: number) {\n\t\tdocument\n\t\t\t.getElementById(\"component-debugger\")\n\t\t\t?.style.setProperty(\n\t\t\t\t\"--resizable-column-width\",\n\t\t\t\twidth.toString() + \"px\"\n\t\t\t);\n\t\tthis.update_width_display();\n\t}\n\n\thandleWidthDropdown() {\n\t\tconst value = this.sizeSelectTarget.value;\n\t\tthis.setPreviewWidth(parseInt(value));\n\t}\n\n\tgetHoverOverlay(): HTMLDivElement {\n\t\tif (!this.hover_overlay) {\n\t\t\tthis.hover_overlay = document.createElement(\"div\");\n\t\t\tthis.hover_overlay.classList.add(\"hover-overlay\");\n\t\t\tthis.element\n\t\t\t\t.querySelector(\".jdd-outer-container\")\n\t\t\t\t?.append(this.hover_overlay);\n\t\t}\n\t\treturn this.hover_overlay;\n\t}\n\n\thandleBlockHover(e: MouseEvent) {\n\t\tconst index = parseInt(\n\t\t\t(e.target as HTMLDivElement)\n\t\t\t\t.closest(\".jdd-editor__component-block\")\n\t\t\t\t?.getAttribute(\"data-component-index\") || \"0\"\n\t\t);\n\t\tconst selector = `.component-number-${index}`;\n\t\tconst target_element = this.element.querySelector(selector);\n\t\tif (!target_element) {\n\t\t\tconsole.warn(`Didn't find an element matching: ${selector}`);\n\t\t\treturn;\n\t\t}\n\t\tconst width = target_element.clientWidth;\n\t\tconst height = target_element.clientHeight;\n\t\tconst top = target_element.scrollTop;\n\t\tconst overlay = this.getHoverOverlay();\n\t\toverlay.classList.remove(\"inactive\");\n\t\toverlay.style.setProperty(\"width\", `${width}px`);\n\t\toverlay.style.setProperty(\"height\", `${height}px`);\n\t\toverlay.style.setProperty(\"top\", `${top}px`);\n\t}\n\n\thandleBlockUnhover(e: MouseEvent) {\n\t\tconst overlay = this.getHoverOverlay();\n\t\toverlay.classList.add(\"inactive\");\n\t}\n\n\tcomponentBlockTargetConnected(block_element: HTMLDivElement) {\n\t\tconst index = parseInt(\n\t\t\tblock_element.getAttribute(\"data-component-index\") || \"0\"\n\t\t);\n\t\tblock_element.addEventListener(\"focusin\", () => {\n\t\t\tthis.scrollToComponentPreview(index);\n\t\t});\n\n\t\tconst summary = block_element.querySelector(\"summary\");\n\t\tif (summary) {\n\t\t\tsummary.addEventListener(\n\t\t\t\t\"mouseenter\",\n\t\t\t\tthis.handleBlockHover.bind(this)\n\t\t\t);\n\t\t\tsummary.addEventListener(\n\t\t\t\t\"mouseleave\",\n\t\t\t\tthis.handleBlockUnhover.bind(this)\n\t\t\t);\n\t\t}\n\t}\n\n\tpreviewTargetConnected(preview_element: HTMLDivElement) {\n\t\tpreview_element.addEventListener(\"click\", ({ target }) => {\n\t\t\tif (!(target instanceof HTMLElement)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst closest = target.closest(\".jdd-component\");\n\t\t\tif (!closest) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst index = parseInt(\n\t\t\t\tString(\n\t\t\t\t\tArray.from(closest.classList)\n\t\t\t\t\t\t.find((c) => c.startsWith(\"component-number-\"))\n\t\t\t\t\t\t?.replace(\"component-number-\", \"\")\n\t\t\t\t)\n\t\t\t);\n\t\t\tif (isNaN(index)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tthis.focusComponentBlock(index);\n\t\t});\n\t}\n\n\tfocusComponentBlock(index: number) {\n\t\tconst block = this.componentBlockTargets[index];\n\t\tif (!block) {\n\t\t\treturn;\n\t\t}\n\t\tthis.checkboxTargets[index]!.checked = true;\n\t\tthis.checkboxTargets[index]!.dispatchEvent(new Event(\"change\")); // to help with refreshing markdown editor\n\t\tblock.scrollIntoView({ behavior: \"smooth\" });\n\t\t(\n\t\t\tblock.querySelector(\n\t\t\t\t\".component-preview-parameters input\"\n\t\t\t) as HTMLInputElement\n\t\t)?.focus();\n\t}\n\n\tgetIndex(block_element: HTMLDivElement) {\n\t\tconst index = parseInt(\n\t\t\tString(block_element.getAttribute(\"data-component-index\"))\n\t\t);\n\t\treturn index;\n\t}\n\n\tlabelClicked(element: MouseEvent) {\n\t\tconst block_element = (element.target as HTMLDivElement).closest(\n\t\t\t`[data-component-debugger-target=\"componentBlock\"]`\n\t\t) as HTMLDivElement;\n\t\tconst index = this.getIndex(block_element);\n\t\tif (!this.checkboxTargets?.[index]?.checked) {\n\t\t\tthis.scrollToComponentPreview(index);\n\t\t}\n\t}\n\n\tgetPreviewElementForComponentIndex(index: number) {\n\t\tconst element = this.element.querySelector(\n\t\t\t`.component-number-${index}`\n\t\t) as HTMLDialogElement;\n\t\treturn element;\n\t}\n\n\tscrollToComponentPreview(index: number) {\n\t\tconst element = this.getPreviewElementForComponentIndex(index);\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\t\tconst preview_element =\n\t\t\tthis.element.querySelector(\".component-preview\");\n\t\tif (!preview_element) {\n\t\t\tthrow new Error(\"Missing preview element!\");\n\t\t}\n\t\tif (element.clientHeight > preview_element.clientHeight) {\n\t\t\tpreview_element.scrollTop = element.offsetTop - 44;\n\t\t} else {\n\t\t\tpreview_element.scrollTop =\n\t\t\t\telement.offsetTop -\n\t\t\t\t(preview_element.clientHeight - element.clientHeight) / 2 -\n\t\t\t\t44;\n\t\t}\n\t}\n}\n"],
5
+ "mappings": "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",
6
6
  "names": ["e"]
7
7
  }
package/lib/src/component-preview-actions.js CHANGED
@@ -2,438 +2,376 @@ import { List, Table } from "@sealcode/jdd";
2
2
  import { isTableData, isTableRegularRow } from "@sealcode/jdd";
3
3
  import objectPath from "object-path";
4
4
  function moveElement(array, fromIndex, toIndex) {
5
- const element = array.splice(fromIndex, 1)[0];
6
- array.splice(toIndex, 0, element);
7
- return array;
5
+ const element = array.splice(fromIndex, 1)[0];
6
+ array.splice(toIndex, 0, element);
7
+ return array;
8
8
  }
9
9
  function getComponentData(state, arg_path, registry) {
10
- var _a, _b;
11
- const index_arg = arg_path[1];
12
- if (!index_arg) {
13
- throw new Error("Missing component index in arg path");
14
- }
15
- const component_index = parseInt(index_arg);
16
- const component_args = ((_a = state.components[component_index]) == null ? void 0 : _a.args) || {};
17
- const component_name = ((_b = state.components[component_index]) == null ? void 0 : _b.component_name) || "";
18
- const component = registry.get(component_name);
19
- const arg_path_within_component = arg_path.slice(3);
20
- const [argument, , argument_value] = (component == null ? void 0 : component.getArgumentAtPath(
21
- arg_path_within_component,
22
- component_args
23
- )) || [null, null, null];
24
- return {
25
- component_index,
26
- component_args,
27
- component_name,
28
- component,
29
- argument,
30
- argument_value,
31
- arg_path_within_component
32
- };
10
+ var _a, _b;
11
+ const index_arg = arg_path[1];
12
+ if (!index_arg) {
13
+ throw new Error("Missing component index in arg path");
14
+ }
15
+ const component_index = parseInt(index_arg);
16
+ const component_args =
17
+ ((_a = state.components[component_index]) == null ? void 0 : _a.args) ||
18
+ {};
19
+ const component_name =
20
+ ((_b = state.components[component_index]) == null
21
+ ? void 0
22
+ : _b.component_name) || "";
23
+ const component = registry.get(component_name);
24
+ const arg_path_within_component = arg_path.slice(3);
25
+ const [argument, , argument_value] = (component == null
26
+ ? void 0
27
+ : component.getArgumentAtPath(
28
+ arg_path_within_component,
29
+ component_args
30
+ )) || [null, null, null];
31
+ return {
32
+ component_index,
33
+ component_args,
34
+ component_name,
35
+ component,
36
+ argument,
37
+ argument_value,
38
+ arg_path_within_component,
39
+ };
33
40
  }
34
41
  const ComponentPreviewActions = {
35
- add_array_item: async ({
36
- ctx,
37
- state,
38
- args: [arg_path],
39
- page
40
- }) => {
41
- const {
42
- component_name,
43
- component,
44
- argument,
45
- arg_path_within_component,
46
- argument_value
47
- } = getComponentData(state, arg_path, page.registry);
48
- if (!component) {
49
- console.error("unknown component: ", component_name);
50
- return state;
51
- }
52
- if (!argument) {
53
- console.error(
54
- "Didn't find a list argument at this path",
55
- arg_path_within_component
56
- );
57
- return state;
58
- }
59
- if (!(argument instanceof List)) {
60
- throw new Error(
61
- `Expected argument in path ${arg_path.join(
62
- "."
63
- )} to be an instance of List`
64
- );
65
- }
66
- objectPath.insert(
67
- state,
68
- arg_path,
69
- await argument.item_type.getExampleValue(
70
- page.makeJDDContext(ctx)
71
- ),
72
- Array.isArray(argument_value) ? argument_value.length : 0
73
- );
74
- return state;
75
- },
76
- remove_array_item: ({
77
- state,
78
- args: [arg_path, index_to_remove]
79
- }) => {
80
- objectPath.del(state, [...arg_path, index_to_remove]);
81
- return state;
82
- },
83
- move_array_item_up: async ({
84
- state,
85
- args: [arg_path, element_index]
86
- }) => {
87
- const array_values = objectPath.get(state, arg_path);
88
- const curr = array_values[element_index];
89
- const prev = array_values[element_index - 1];
90
- if (!prev || !curr) {
91
- throw new Error("No element at such index or cannot move it up");
92
- }
93
- [array_values[element_index - 1], array_values[element_index]] = [
94
- curr,
95
- prev
96
- ];
97
- return state;
98
- },
99
- move_array_item_down: async ({
100
- state,
101
- args: [arg_path, element_index]
102
- }) => {
103
- const array_values = objectPath.get(state, arg_path);
104
- const curr = array_values[element_index];
105
- const next = array_values[element_index + 1];
106
- if (!next || !curr) {
107
- throw new Error("No element at such index or cannot move it up");
108
- }
109
- [array_values[element_index], array_values[element_index + 1]] = [
110
- next,
111
- curr
112
- ];
113
- return state;
114
- },
115
- change_component: async ({
116
- ctx,
117
- inputs,
118
- state,
119
- page
120
- }) => {
121
- const component_name = inputs.component;
122
- if (!component_name || typeof component_name !== "string") {
123
- throw new Error(
124
- "Missing input: 'component' for action change_component. It should contain the name of the new component type"
125
- );
126
- }
127
- const component = page.registry.get(component_name);
128
- if (!component) {
129
- throw new Error(
130
- `Unknown or disallowed component name: ${component_name}`
131
- );
132
- }
133
- return {
134
- ...state,
135
- components: [
136
- {
137
- component_name,
138
- args: await (component == null ? void 0 : component.getExampleValues(
139
- page.makeJDDContext(ctx)
140
- )) || {}
141
- }
142
- ]
143
- };
144
- },
145
- randomize_args: async ({
146
- ctx,
147
- state,
148
- page,
149
- args: [component_index_str]
150
- }) => {
151
- const { component_index, component } = getComponentData(
152
- state,
153
- ["components", component_index_str],
154
- page.registry
155
- );
156
- const component_data = state.components[component_index];
157
- if (!component_data) {
158
- throw new Error("Missing component data");
159
- }
160
- component_data.args = await (component == null ? void 0 : component.getExampleValues(
161
- page.makeJDDContext(ctx)
162
- )) || {};
163
- return {
164
- ...state
165
- };
166
- },
167
- add_table_row: async ({
168
- ctx,
169
- state,
170
- page,
171
- args: [arg_path, columns, type = "row"]
172
- }) => {
173
- const jdd_context = page.makeJDDContext(ctx);
174
- const { component_args, argument } = getComponentData(
175
- state,
176
- arg_path,
177
- page.registry
178
- );
179
- let row;
180
- if (!argument) {
181
- console.error("Unknown component at path", arg_path);
182
- return state;
183
- }
184
- if (!(argument instanceof Table)) {
185
- throw new Error(
186
- `Expected argument at path ${arg_path.join(
187
- "."
188
- )} to be of type Table`
189
- );
190
- }
191
- if (type == "header") {
192
- row = {
193
- type: "header",
194
- header_content: await argument.header_type.getExampleValue(
195
- jdd_context
196
- )
197
- };
198
- } else {
199
- const cells = [];
200
- for (let i = 0; i < columns; i++) {
201
- cells.push(
202
- await argument.cell_type.getExampleValue(jdd_context)
203
- );
204
- }
205
- row = { type: "row", cells };
206
- }
207
- objectPath.push(state, [...arg_path, "rows"], row);
208
- return state;
209
- },
210
- add_table_column: async ({
211
- ctx,
212
- state,
213
- page,
214
- args: [arg_path]
215
- }) => {
216
- const { argument } = getComponentData(
217
- state,
218
- arg_path,
219
- page.registry
220
- );
221
- if (!argument) {
222
- console.error("Unknown component at path", arg_path);
223
- return state;
224
- }
225
- const tableData = objectPath.get(
226
- state,
227
- arg_path
228
- );
229
- if (!isTableData(tableData)) {
230
- throw new Error("wrong table data");
231
- }
232
- for (const i in tableData.rows) {
233
- const row = tableData.rows[i];
234
- if (isTableRegularRow(row)) {
235
- row.cells.push(
236
- await argument.cell_type.getExampleValue(
237
- page.makeJDDContext(ctx)
238
- )
239
- );
240
- }
241
- }
242
- objectPath.set(state, arg_path, tableData);
243
- console.log("NEW STATE AFTER ADDING THE COLUN");
244
- console.dir(state, { depth: 10 });
245
- return state;
246
- },
247
- remove_table_column: ({
248
- state,
249
- args: [arg_path, column_index_to_remove]
250
- }) => {
251
- const tableData = objectPath.get(
252
- state,
253
- arg_path
254
- );
255
- if (!isTableData(tableData)) {
256
- throw new Error("wrong table data");
257
- }
258
- for (const i in tableData.rows) {
259
- const row = tableData.rows[i];
260
- if (isTableRegularRow(row)) {
261
- row.cells = row.cells.filter(
262
- (_, i2) => i2 != column_index_to_remove
263
- );
264
- }
265
- }
266
- objectPath.set(state, arg_path, tableData);
267
- return state;
268
- },
269
- remove_table_row: ({
270
- state,
271
- args: [arg_path, row_index]
272
- }) => {
273
- objectPath.del(state, [...arg_path, "rows", row_index]);
274
- return state;
275
- },
276
- move_table_column_right: ({
277
- state,
278
- page,
279
- args: [arg_path, column_index]
280
- }) => {
281
- const { component_args } = getComponentData(
282
- state,
283
- arg_path,
284
- page.registry
285
- );
286
- const last_path_element = arg_path.at(-1);
287
- if (!last_path_element) {
288
- throw new Error("arg path is empty");
289
- }
290
- const data = objectPath.get(
291
- component_args,
292
- last_path_element,
293
- ""
294
- );
295
- if (!isTableData(data)) {
296
- throw new Error(
297
- "Expected arg value for a table to be properly shaped"
298
- );
299
- }
300
- for (const row of data.rows) {
301
- if (row.type == "row") {
302
- moveElement(row.cells, column_index, column_index + 1);
303
- }
304
- }
305
- objectPath.set(state, [...arg_path, "rows"], data.rows);
306
- return state;
307
- },
308
- move_table_row_down: ({
309
- state,
310
- page,
311
- args: [arg_path, row_index]
312
- }) => {
313
- const { component_args } = getComponentData(
314
- state,
315
- arg_path,
316
- page.registry
317
- );
318
- const last_path_element = arg_path.at(-1);
319
- if (!last_path_element) {
320
- throw new Error("arg path is empty");
321
- }
322
- const data = objectPath.get(
323
- component_args,
324
- last_path_element,
325
- ""
326
- );
327
- if (!isTableData(data)) {
328
- throw new Error(
329
- "Expected arg value for a table to be properly shaped"
330
- );
331
- }
332
- moveElement(data.rows, row_index, row_index + 1);
333
- objectPath.set(state, [...arg_path, "rows"], data.rows);
334
- return state;
335
- },
336
- change_size: ({
337
- state,
338
- inputs
339
- }) => {
340
- return {
341
- ...state,
342
- preview_size: inputs.size
343
- };
344
- },
345
- add_component: async ({
346
- ctx,
347
- state,
348
- inputs,
349
- page
350
- }) => {
351
- const component_name = inputs.component;
352
- if (!component_name) {
353
- throw new Error("Missing component name");
354
- }
355
- const component = page.registry.get(component_name);
356
- return {
357
- ...state,
358
- components: [
359
- ...state.components,
360
- {
361
- component_name,
362
- args: await (component == null ? void 0 : component.getExampleValues(
363
- page.makeJDDContext(ctx)
364
- )) || {}
365
- }
366
- ]
367
- };
368
- },
369
- remove_component: async ({
370
- state,
371
- args: [component_index]
372
- }) => {
373
- const newComponentState = [...state.components];
374
- newComponentState.splice(component_index, 1);
375
- return {
376
- ...state,
377
- components: newComponentState
378
- };
379
- },
380
- move_component_up: async ({
381
- state,
382
- args: [component_index]
383
- }) => {
384
- const newComps = [...state.components];
385
- const prev = newComps[component_index - 1];
386
- const curr = newComps[component_index];
387
- if (!prev || !curr) {
388
- throw new Error("No component at such index or cannot move it up");
389
- }
390
- [newComps[component_index], newComps[component_index - 1]] = [
391
- prev,
392
- curr
393
- ];
394
- return { ...state, components: newComps };
395
- },
396
- move_component_down: async ({
397
- state,
398
- args: [component_index]
399
- }) => {
400
- const newComps = [...state.components];
401
- const next = newComps[component_index + 1];
402
- const curr = newComps[component_index];
403
- if (!next || !curr) {
404
- throw new Error("No component at such index or cannot move it up");
405
- }
406
- [newComps[component_index], newComps[component_index + 1]] = [
407
- next,
408
- curr
409
- ];
410
- return { ...state, components: newComps };
411
- },
412
- remove_file: async ({
413
- state,
414
- args: [arg_path]
415
- }) => {
416
- objectPath.set(state, arg_path, null);
417
- return state;
418
- },
419
- replace_state: async ({
420
- ctx,
421
- state,
422
- inputs,
423
- page
424
- }) => {
425
- const new_state = await page.deserializeState(
426
- ctx,
427
- inputs["state_override"] || "{}"
428
- );
429
- return {
430
- ...new_state,
431
- preview_size: state.preview_size
432
- };
433
- }
434
- };
435
- export {
436
- ComponentPreviewActions,
437
- getComponentData
42
+ add_array_item: async ({ ctx, state, args: [arg_path], page }) => {
43
+ const {
44
+ component_name,
45
+ component,
46
+ argument,
47
+ arg_path_within_component,
48
+ argument_value,
49
+ } = getComponentData(state, arg_path, page.registry);
50
+ if (!component) {
51
+ console.error("unknown component: ", component_name);
52
+ return state;
53
+ }
54
+ if (!argument) {
55
+ console.error(
56
+ "Didn't find a list argument at this path",
57
+ arg_path_within_component
58
+ );
59
+ return state;
60
+ }
61
+ if (!(argument instanceof List)) {
62
+ throw new Error(
63
+ `Expected argument in path ${arg_path.join(
64
+ "."
65
+ )} to be an instance of List`
66
+ );
67
+ }
68
+ objectPath.insert(
69
+ state,
70
+ arg_path,
71
+ await argument.item_type.getExampleValue(page.makeJDDContext(ctx)),
72
+ Array.isArray(argument_value) ? argument_value.length : 0
73
+ );
74
+ return state;
75
+ },
76
+ remove_array_item: ({ state, args: [arg_path, index_to_remove] }) => {
77
+ objectPath.del(state, [...arg_path, index_to_remove]);
78
+ return state;
79
+ },
80
+ move_array_item_up: async ({ state, args: [arg_path, element_index] }) => {
81
+ const array_values = objectPath.get(state, arg_path);
82
+ const curr = array_values[element_index];
83
+ const prev = array_values[element_index - 1];
84
+ if (!prev || !curr) {
85
+ throw new Error("No element at such index or cannot move it up");
86
+ }
87
+ [array_values[element_index - 1], array_values[element_index]] = [
88
+ curr,
89
+ prev,
90
+ ];
91
+ return state;
92
+ },
93
+ move_array_item_down: async ({
94
+ state,
95
+ args: [arg_path, element_index],
96
+ }) => {
97
+ const array_values = objectPath.get(state, arg_path);
98
+ const curr = array_values[element_index];
99
+ const next = array_values[element_index + 1];
100
+ if (!next || !curr) {
101
+ throw new Error("No element at such index or cannot move it up");
102
+ }
103
+ [array_values[element_index], array_values[element_index + 1]] = [
104
+ next,
105
+ curr,
106
+ ];
107
+ return state;
108
+ },
109
+ change_component: async ({ ctx, inputs, state, page }) => {
110
+ const component_name = inputs.component;
111
+ if (!component_name || typeof component_name !== "string") {
112
+ throw new Error(
113
+ "Missing input: 'component' for action change_component. It should contain the name of the new component type"
114
+ );
115
+ }
116
+ const component = page.registry.get(component_name);
117
+ if (!component) {
118
+ throw new Error(
119
+ `Unknown or disallowed component name: ${component_name}`
120
+ );
121
+ }
122
+ return {
123
+ ...state,
124
+ components: [
125
+ {
126
+ component_name,
127
+ args:
128
+ (await (component == null
129
+ ? void 0
130
+ : component.getExampleValues(
131
+ page.makeJDDContext(ctx)
132
+ ))) || {},
133
+ },
134
+ ],
135
+ };
136
+ },
137
+ randomize_args: async ({
138
+ ctx,
139
+ state,
140
+ page,
141
+ args: [component_index_str],
142
+ }) => {
143
+ const { component_index, component } = getComponentData(
144
+ state,
145
+ ["components", component_index_str],
146
+ page.registry
147
+ );
148
+ const component_data = state.components[component_index];
149
+ if (!component_data) {
150
+ throw new Error("Missing component data");
151
+ }
152
+ component_data.args =
153
+ (await (component == null
154
+ ? void 0
155
+ : component.getExampleValues(page.makeJDDContext(ctx)))) || {};
156
+ return {
157
+ ...state,
158
+ };
159
+ },
160
+ add_table_row: async ({
161
+ ctx,
162
+ state,
163
+ page,
164
+ args: [arg_path, columns, type = "row"],
165
+ }) => {
166
+ const jdd_context = page.makeJDDContext(ctx);
167
+ const { component_args, argument } = getComponentData(
168
+ state,
169
+ arg_path,
170
+ page.registry
171
+ );
172
+ let row;
173
+ if (!argument) {
174
+ console.error("Unknown component at path", arg_path);
175
+ return state;
176
+ }
177
+ if (!(argument instanceof Table)) {
178
+ throw new Error(
179
+ `Expected argument at path ${arg_path.join(
180
+ "."
181
+ )} to be of type Table`
182
+ );
183
+ }
184
+ if (type == "header") {
185
+ row = {
186
+ type: "header",
187
+ header_content: await argument.header_type.getExampleValue(
188
+ jdd_context
189
+ ),
190
+ };
191
+ } else {
192
+ const cells = [];
193
+ for (let i = 0; i < columns; i++) {
194
+ cells.push(
195
+ await argument.cell_type.getExampleValue(jdd_context)
196
+ );
197
+ }
198
+ row = { type: "row", cells };
199
+ }
200
+ objectPath.push(state, [...arg_path, "rows"], row);
201
+ return state;
202
+ },
203
+ add_table_column: async ({ ctx, state, page, args: [arg_path] }) => {
204
+ const { argument } = getComponentData(state, arg_path, page.registry);
205
+ if (!argument) {
206
+ console.error("Unknown component at path", arg_path);
207
+ return state;
208
+ }
209
+ const tableData = objectPath.get(state, arg_path);
210
+ if (!isTableData(tableData)) {
211
+ throw new Error("wrong table data");
212
+ }
213
+ for (const i in tableData.rows) {
214
+ const row = tableData.rows[i];
215
+ if (isTableRegularRow(row)) {
216
+ row.cells.push(
217
+ await argument.cell_type.getExampleValue(
218
+ page.makeJDDContext(ctx)
219
+ )
220
+ );
221
+ }
222
+ }
223
+ objectPath.set(state, arg_path, tableData);
224
+ console.log("NEW STATE AFTER ADDING THE COLUN");
225
+ console.dir(state, { depth: 10 });
226
+ return state;
227
+ },
228
+ remove_table_column: ({
229
+ state,
230
+ args: [arg_path, column_index_to_remove],
231
+ }) => {
232
+ const tableData = objectPath.get(state, arg_path);
233
+ if (!isTableData(tableData)) {
234
+ throw new Error("wrong table data");
235
+ }
236
+ for (const i in tableData.rows) {
237
+ const row = tableData.rows[i];
238
+ if (isTableRegularRow(row)) {
239
+ row.cells = row.cells.filter(
240
+ (_, i2) => i2 != column_index_to_remove
241
+ );
242
+ }
243
+ }
244
+ objectPath.set(state, arg_path, tableData);
245
+ return state;
246
+ },
247
+ remove_table_row: ({ state, args: [arg_path, row_index] }) => {
248
+ objectPath.del(state, [...arg_path, "rows", row_index]);
249
+ return state;
250
+ },
251
+ move_table_column_right: ({
252
+ state,
253
+ page,
254
+ args: [arg_path, column_index],
255
+ }) => {
256
+ const { component_args } = getComponentData(
257
+ state,
258
+ arg_path,
259
+ page.registry
260
+ );
261
+ const last_path_element = arg_path.at(-1);
262
+ if (!last_path_element) {
263
+ throw new Error("arg path is empty");
264
+ }
265
+ const data = objectPath.get(component_args, last_path_element, "");
266
+ if (!isTableData(data)) {
267
+ throw new Error(
268
+ "Expected arg value for a table to be properly shaped"
269
+ );
270
+ }
271
+ for (const row of data.rows) {
272
+ if (row.type == "row") {
273
+ moveElement(row.cells, column_index, column_index + 1);
274
+ }
275
+ }
276
+ objectPath.set(state, [...arg_path, "rows"], data.rows);
277
+ return state;
278
+ },
279
+ move_table_row_down: ({ state, page, args: [arg_path, row_index] }) => {
280
+ const { component_args } = getComponentData(
281
+ state,
282
+ arg_path,
283
+ page.registry
284
+ );
285
+ const last_path_element = arg_path.at(-1);
286
+ if (!last_path_element) {
287
+ throw new Error("arg path is empty");
288
+ }
289
+ const data = objectPath.get(component_args, last_path_element, "");
290
+ if (!isTableData(data)) {
291
+ throw new Error(
292
+ "Expected arg value for a table to be properly shaped"
293
+ );
294
+ }
295
+ moveElement(data.rows, row_index, row_index + 1);
296
+ objectPath.set(state, [...arg_path, "rows"], data.rows);
297
+ return state;
298
+ },
299
+ change_size: ({ state, inputs }) => {
300
+ return {
301
+ ...state,
302
+ preview_size: inputs.size,
303
+ };
304
+ },
305
+ add_component: async ({ ctx, state, inputs, page }) => {
306
+ const component_name = inputs.component;
307
+ if (!component_name) {
308
+ throw new Error("Missing component name");
309
+ }
310
+ const component = page.registry.get(component_name);
311
+ return {
312
+ ...state,
313
+ components: [
314
+ ...state.components,
315
+ {
316
+ component_name,
317
+ args:
318
+ (await (component == null
319
+ ? void 0
320
+ : component.getExampleValues(
321
+ page.makeJDDContext(ctx)
322
+ ))) || {},
323
+ },
324
+ ],
325
+ };
326
+ },
327
+ remove_component: async ({ state, args: [component_index] }) => {
328
+ const newComponentState = [...state.components];
329
+ newComponentState.splice(component_index, 1);
330
+ return {
331
+ ...state,
332
+ components: newComponentState,
333
+ };
334
+ },
335
+ move_component_up: async ({ state, args: [component_index] }) => {
336
+ const newComps = [...state.components];
337
+ const prev = newComps[component_index - 1];
338
+ const curr = newComps[component_index];
339
+ if (!prev || !curr) {
340
+ throw new Error("No component at such index or cannot move it up");
341
+ }
342
+ [newComps[component_index], newComps[component_index - 1]] = [
343
+ prev,
344
+ curr,
345
+ ];
346
+ return { ...state, components: newComps };
347
+ },
348
+ move_component_down: async ({ state, args: [component_index] }) => {
349
+ const newComps = [...state.components];
350
+ const next = newComps[component_index + 1];
351
+ const curr = newComps[component_index];
352
+ if (!next || !curr) {
353
+ throw new Error("No component at such index or cannot move it up");
354
+ }
355
+ [newComps[component_index], newComps[component_index + 1]] = [
356
+ next,
357
+ curr,
358
+ ];
359
+ return { ...state, components: newComps };
360
+ },
361
+ remove_file: async ({ state, args: [arg_path] }) => {
362
+ objectPath.set(state, arg_path, null);
363
+ return state;
364
+ },
365
+ replace_state: async ({ ctx, state, inputs, page }) => {
366
+ const new_state = await page.deserializeState(
367
+ ctx,
368
+ inputs["state_override"] || "{}"
369
+ );
370
+ return {
371
+ ...new_state,
372
+ preview_size: state.preview_size,
373
+ };
374
+ },
438
375
  };
376
+ export { ComponentPreviewActions, getComponentData };
439
377
  //# sourceMappingURL=component-preview-actions.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sealcode/jdd-editor",
3
- "version": "0.1.9",
3
+ "version": "0.1.11",
4
4
  "main": "dist/src/index.js",
5
5
  "scripts": {
6
6
  "build": "node ./esbuild.cjs",
package/src/controllers/component-debugger.stimulus.ts CHANGED
@@ -23,6 +23,8 @@ export default class ComponentDebugger extends Controller {
23
23
  origin_x: number;
24
24
  origin_width: number;
25
25
 
26
+ hover_overlay: HTMLDivElement | null;
27
+
26
28
  connect() {
27
29
  const main_form = document
28
30
  .querySelector("#component-debugger")
@@ -120,26 +122,42 @@ export default class ComponentDebugger extends Controller {
120
122
  this.setPreviewWidth(parseInt(value));
121
123
  }
122
124
 
125
+ getHoverOverlay(): HTMLDivElement {
126
+ if (!this.hover_overlay) {
127
+ this.hover_overlay = document.createElement("div");
128
+ this.hover_overlay.classList.add("hover-overlay");
129
+ this.element
130
+ .querySelector(".jdd-outer-container")
131
+ ?.append(this.hover_overlay);
132
+ }
133
+ return this.hover_overlay;
134
+ }
135
+
123
136
  handleBlockHover(e: MouseEvent) {
124
137
  const index = parseInt(
125
138
  (e.target as HTMLDivElement)
126
139
  .closest(".jdd-editor__component-block")
127
140
  ?.getAttribute("data-component-index") || "0"
128
141
  );
129
- this.element
130
- .querySelector(`.component-number-${index}`)
131
- ?.classList.add("highlighted");
142
+ const selector = `.component-number-${index}`;
143
+ const target_element = this.element.querySelector(selector);
144
+ if (!target_element) {
145
+ console.warn(`Didn't find an element matching: ${selector}`);
146
+ return;
147
+ }
148
+ const width = target_element.clientWidth;
149
+ const height = target_element.clientHeight;
150
+ const top = target_element.scrollTop;
151
+ const overlay = this.getHoverOverlay();
152
+ overlay.classList.remove("inactive");
153
+ overlay.style.setProperty("width", `${width}px`);
154
+ overlay.style.setProperty("height", `${height}px`);
155
+ overlay.style.setProperty("top", `${top}px`);
132
156
  }
133
157
 
134
158
  handleBlockUnhover(e: MouseEvent) {
135
- const index = parseInt(
136
- (e.target as HTMLDivElement)
137
- .closest(".jdd-editor__component-block")
138
- ?.getAttribute("data-component-index") || ""
139
- );
140
- this.element
141
- .querySelectorAll(`.component-number-${index}.highlighted`)
142
- .forEach((e) => e.classList.remove("highlighted"));
159
+ const overlay = this.getHoverOverlay();
160
+ overlay.classList.add("inactive");
143
161
  }
144
162
 
145
163
  componentBlockTargetConnected(block_element: HTMLDivElement) {