@nordcraft/runtime 1.0.0

package/dist/editor/drag-drop/getInsertAreas.js

@@ -0,0 +1,220 @@
+import { getDOMNodeFromNodeId } from '../../editor-preview.main';
+/**
+ * Somewhat convoluted function to calculate all possible drop insertion areas, as lines between elements.
+ *
+ * Drop locations follows the following rules:
+ * - All lines for a single container are either horizontal or vertical (block or inline layout)
+ * - If the next sibling of an element follows the expected layout (not wrapped) a line is drawn between the two (taking gap/margin into consideration),
+ * - If the next sibling is wrapped, a line is drawn both after and before the next element. Both lines inserts the dragged element at the same index.
+ */
+export function getInsertAreas() {
+    const insertAreas = [];
+    Array.from(document.querySelectorAll('[data-id]:not([data-component])'))
+        .filter((e) => e.getAttribute('data-id')?.includes(')') === false)
+        .map((e) => e.getAttribute('data-id'))
+        .forEach((id) => {
+        const element = getDOMNodeFromNodeId(id);
+        if (!element) {
+            // eslint-disable-next-line no-console
+            console.warn(`Element with path ${id} not found`);
+            return;
+        }
+        const rect = element.getBoundingClientRect();
+        const parent = element.parentElement;
+        if (!parent) {
+            return;
+        }
+        const siblings = Array.from(parent.children).filter((c) => c.hasAttribute('data-node-id') &&
+            c.getAttribute('data-node-id')?.endsWith(')') === false);
+        const index = siblings.indexOf(element);
+        const nextRect = siblings[index + 1]?.getBoundingClientRect();
+        const prevRect = siblings[index - 1]?.getBoundingClientRect();
+        const isBlockLayout = siblings.length > 1 &&
+            siblings
+                .map((c) => c.getBoundingClientRect())
+                .every((r, i, rects) => i === 0 ||
+                r.width + r.height === 0 ||
+                rects[i - 1].bottom <= r.top);
+        if (isBlockLayout) {
+            if (prevRect) {
+                if (prevRect.bottom >= rect.top) {
+                    insertAreas.push({
+                        layout: 'block',
+                        parent,
+                        index,
+                        center: {
+                            x: rect.left + rect.width / 2,
+                            y: rect.top,
+                        },
+                        size: rect.width,
+                        direction: -1,
+                    });
+                }
+            }
+            else if (siblings.length > 0) {
+                insertAreas.push({
+                    layout: 'block',
+                    parent,
+                    index,
+                    center: {
+                        x: rect.left + rect.width / 2,
+                        y: rect.top,
+                    },
+                    size: rect.width,
+                    direction: -1,
+                });
+            }
+            if (nextRect) {
+                if (nextRect.top > rect.bottom) {
+                    insertAreas.push({
+                        layout: 'block',
+                        parent,
+                        index: index + 1,
+                        center: {
+                            x: rect.left + rect.width / 2,
+                            y: (rect.bottom + nextRect.top) / 2,
+                        },
+                        size: rect.width,
+                        direction: 1,
+                    });
+                }
+                else {
+                    insertAreas.push({
+                        layout: 'block',
+                        parent,
+                        index: index + 1,
+                        center: {
+                            x: rect.left + rect.width / 2,
+                            y: rect.bottom,
+                        },
+                        size: rect.width,
+                        direction: 1,
+                    });
+                }
+            }
+            else if (siblings.length > 0) {
+                insertAreas.push({
+                    layout: 'block',
+                    parent,
+                    index: index + 1,
+                    center: {
+                        x: rect.left + rect.width / 2,
+                        y: rect.bottom,
+                    },
+                    size: rect.width,
+                    direction: 1,
+                });
+            }
+        }
+        else {
+            if (prevRect) {
+                if (prevRect.right >= rect.left) {
+                    insertAreas.push({
+                        layout: 'inline',
+                        parent,
+                        index,
+                        center: {
+                            x: rect.left,
+                            y: rect.top + rect.height / 2,
+                        },
+                        size: rect.height,
+                        direction: -1,
+                    });
+                }
+            }
+            else if (siblings.length > 0) {
+                insertAreas.push({
+                    layout: 'inline',
+                    parent,
+                    index,
+                    center: {
+                        x: rect.left,
+                        y: rect.top + rect.height / 2,
+                    },
+                    size: rect.height,
+                    direction: -1,
+                });
+            }
+            if (nextRect) {
+                if (nextRect.left > rect.right) {
+                    insertAreas.push({
+                        layout: 'inline',
+                        parent,
+                        index: index + 1,
+                        center: {
+                            x: (rect.right + nextRect.left) / 2,
+                            y: nextRect.top + nextRect.height / 2,
+                        },
+                        size: rect.height,
+                        direction: 1,
+                    });
+                }
+                else {
+                    insertAreas.push({
+                        layout: 'inline',
+                        parent,
+                        index: index + 1,
+                        center: {
+                            x: rect.right,
+                            y: rect.top + rect.height / 2,
+                        },
+                        size: rect.height,
+                        direction: 1,
+                    });
+                }
+            }
+            else if (siblings.length > 0) {
+                insertAreas.push({
+                    layout: 'inline',
+                    parent,
+                    index: index + 1,
+                    center: {
+                        x: rect.right,
+                        y: rect.top + rect.height / 2,
+                    },
+                    size: rect.height,
+                    direction: 1,
+                });
+            }
+        }
+    });
+    return offsetDropLines(insertAreas);
+}
+/**
+ * As a post-effect, lines are moved towards their element if there are multiple overlapping lines.
+ * Pointing the cursor slightly outside a container will drop the element after the container, and
+ * dropping inside will add as the last child.
+ */
+function offsetDropLines(insertAreas) {
+    return insertAreas.map((area) => {
+        if (area.layout === 'block') {
+            return {
+                ...area,
+                point: {
+                    ...area.center,
+                    y: area.center.y -
+                        insertAreas.filter((area2) => area.parent !== area2.parent &&
+                            area2.layout === 'block' &&
+                            area2.center.y === area.center.y &&
+                            area2.parent.contains(area.parent)).length *
+                            area.direction,
+                },
+            };
+        }
+        else {
+            return {
+                ...area,
+                point: {
+                    ...area.center,
+                    x: area.center.x -
+                        insertAreas.filter((area2) => area.parent !== area2.parent &&
+                            area2.layout === 'inline' &&
+                            area2.center.x === area.center.x &&
+                            area2.parent.contains(area.parent)).length *
+                            area.direction,
+                },
+            };
+        }
+    });
+}
+//# sourceMappingURL=getInsertAreas.js.map

package/dist/editor/drag-drop/getInsertAreas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getInsertAreas.js","sourceRoot":"","sources":["../../../src/editor/drag-drop/getInsertAreas.ts"],"names":[],"mappings":"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"}

package/dist/editor-preview.main.d.ts

@@ -0,0 +1,19 @@
+import type { PluginFormula } from '@nordcraft/core/dist/formula/formulaTypes';
+import type { FormulaHandlerV2, PluginActionV2 } from '@nordcraft/core/dist/types';
+export declare const initGlobalObject: ({ formulas, actions, }: {
+    formulas: Record<string, Record<string, PluginFormula<FormulaHandlerV2>>>;
+    actions: Record<string, Record<string, PluginActionV2>>;
+}) => void;
+export declare const createRoot: (domNode?: HTMLElement | null) => void;
+export declare function getDOMNodeFromNodeId(selectedNodeId: string | null | undefined): Element | null;
+export declare function getRectData(selectedNode: Element | null | undefined): {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    borderRadius: number[];
+} | null;