@nordcraft/runtime 1.0.0

package/src/custom-element.main.ts

@@ -0,0 +1,24 @@
+import * as libActions from '@nordcraft/std-lib/dist/actions'
+import * as libFormulas from '@nordcraft/std-lib/dist/formulas'
+import fastDeepEqual from 'fast-deep-equal'
+import { defineComponents } from './custom-element/defineComponents'
+
+const loadCorePlugins = (toddle = window.toddle) => {
+  toddle.isEqual = fastDeepEqual
+
+  // load default formulas and actions
+  Object.entries(libFormulas).forEach(([name, module]) =>
+    toddle.registerFormula(
+      '@toddle/' + name,
+      module.default as any,
+      'getArgumentInputData' in module
+        ? module.getArgumentInputData
+        : undefined,
+    ),
+  )
+  Object.entries(libActions).forEach(([name, module]) =>
+    toddle.registerAction('@toddle/' + name, module.default),
+  )
+}
+
+export { defineComponents, loadCorePlugins }

package/src/debug/logState.ts

@@ -0,0 +1,30 @@
+import type {
+  Component,
+  ComponentData,
+} from '@nordcraft/core/dist/component/component.types'
+import type { Signal } from '../signal/signal'
+
+export function initLogState() {
+  ;(window as any).logState = () => {
+    // eslint-disable-next-line no-console
+    console.table(
+      Object.entries(window.__components ?? {}).map(([name, sig]) => {
+        return {
+          name,
+          ...(sig as any).get(),
+        }
+      }),
+    )
+  }
+}
+
+export function registerComponentToLogState(
+  component: Component,
+  dataSignal: Signal<ComponentData>,
+) {
+  if (!window.__components) {
+    window.__components = {}
+  }
+
+  window.__components[component.name] = dataSignal
+}

package/src/editor/drag-drop/dragEnded.ts

@@ -0,0 +1,75 @@
+import { getRectData } from '../../editor-preview.main'
+import { tryStartViewTransition } from '../../utils/tryStartViewTransition'
+import type { DragState } from '../types'
+import { DRAG_MOVE_CLASSNAME } from './dragMove'
+import { DRAG_REORDER_CLASSNAME } from './dragReorder'
+import { removeDropHighlight } from './dropHighlight'
+
+export async function dragEnded(dragState: DragState, canceled: boolean) {
+  dragState.destroying = true
+  const selectedInsertArea =
+    dragState.insertAreas?.[dragState.selectedInsertAreaIndex ?? -1]
+  const siblings =
+    (dragState.mode === 'insert' && !canceled
+      ? selectedInsertArea?.parent
+      : dragState.initialContainer
+    )?.querySelectorAll('[data-id]') ?? []
+  dragState.element.style.setProperty(
+    'view-transition-name',
+    'dropped-item-self',
+  )
+  siblings.forEach((node, i) => {
+    if (node instanceof HTMLElement) {
+      node.style.setProperty(
+        'view-transition-name',
+        'dropped-item-sibling-' + i,
+      )
+    }
+  })
+  dragState.repeatedNodes.forEach((node, i) => {
+    node.style.setProperty('view-transition-name', 'dropped-item-repeated-' + i)
+  })
+  await tryStartViewTransition(() => {
+    if (canceled) {
+      dragState.copy?.remove()
+      dragState.initialContainer.insertBefore(
+        dragState.element,
+        dragState.initialNextSibling,
+      )
+    } else if (dragState.mode === 'insert') {
+      selectedInsertArea?.parent.insertBefore(
+        dragState.element,
+        selectedInsertArea.parent.childNodes[selectedInsertArea.index],
+      )
+    }
+
+    dragState.element.classList.remove(DRAG_REORDER_CLASSNAME)
+    dragState.element.classList.remove(DRAG_MOVE_CLASSNAME)
+    dragState.element.style.removeProperty('translate')
+    dragState.repeatedNodes.toReversed().forEach((node) => {
+      dragState.element.insertAdjacentElement('afterend', node)
+      node.classList.remove('drag-repeat-node')
+      node.style.removeProperty('rotate')
+      node.style.removeProperty('--drag-repeat-node-width')
+      node.style.removeProperty('--drag-repeat-node-height')
+      node.style.removeProperty('--drag-repeat-node-translate')
+      node.style.removeProperty('--drag-repeat-node-rotate')
+      node.style.removeProperty('--drag-repeat-node-opacity')
+    })
+    removeDropHighlight()
+    window.parent.postMessage(
+      {
+        type: 'selectionRect',
+        rect: getRectData(dragState.element),
+      },
+      '*',
+    )
+  }).finished.then(() => {
+    dragState.element.style.removeProperty('view-transition-name')
+    siblings.forEach((node) => {
+      if (node instanceof HTMLElement) {
+        node.style.removeProperty('view-transition-name')
+      }
+    })
+  })
+}

package/src/editor/drag-drop/dragMove.ts

@@ -0,0 +1,95 @@
+import { findNearestLine } from '../../utils/findNearestLine'
+import type { DragState } from '../types'
+import { DRAG_REORDER_CLASSNAME } from './dragReorder'
+import { removeDropHighlight, setExternalDropHighlight } from './dropHighlight'
+import { getInsertAreas } from './getInsertAreas'
+
+export const DRAG_MOVE_CLASSNAME = '__drag-mode--move'
+
+export function dragMove(dragState: DragState | null, exclude: HTMLElement[]) {
+  if (!dragState) {
+    return
+  }
+
+  // If the drag operation was a reorder operation, we need to switch to insert mode and perform some one-time preparation
+  if (dragState.mode === 'reorder') {
+    dragState.mode = 'insert'
+    dragState.element.style.setProperty('display', 'none')
+    // We only calculate insert locations when dragging outside the container to avoid unnecessary calculations
+    dragState.insertAreas ??= getInsertAreas().filter(
+      (x) =>
+        exclude.every((e) => !e?.contains(x.parent) && e !== x.parent) &&
+        x.parent !== document.body,
+    )
+    dragState.element.style.removeProperty('display')
+    const translate = dragState.element.style.getPropertyValue('translate')
+    dragState.element.style.setProperty('translate', '0')
+    const rect = dragState.element.getBoundingClientRect()
+    document.body.appendChild(dragState.element)
+    dragState.element.classList.add(DRAG_MOVE_CLASSNAME)
+    dragState.element.classList.remove(DRAG_REORDER_CLASSNAME)
+    dragState.element.style.setProperty(
+      '--drag-mode--move-left',
+      `${rect.left}px`,
+    )
+    dragState.element.style.setProperty(
+      '--drag-mode--move-top',
+      `${rect.top}px`,
+    )
+    dragState.element.style.setProperty(
+      '--drag-mode--move-width',
+      `${dragState.initialRect.width}px`,
+    )
+    dragState.element.style.setProperty('translate', translate)
+  }
+  dragState.repeatedNodes.forEach((node, i) => {
+    node.style.setProperty('--drag-repeat-node-opacity', i < 3 ? '0.2' : '0')
+  })
+
+  const lines = dragState.insertAreas?.map((line) => {
+    if (line.layout === 'block') {
+      return {
+        x1: line.center.x - line.size / 2,
+        y1: line.center.y,
+        x2: line.center.x + line.size / 2,
+        y2: line.center.y,
+      }
+    } else {
+      return {
+        x1: line.center.x,
+        y1: line.center.y - line.size / 2,
+        x2: line.center.x,
+        y2: line.center.y + line.size / 2,
+      }
+    }
+  })
+  const { nearestLine, projectionPoint } = findNearestLine(
+    lines ?? [],
+    dragState.lastCursorPosition,
+  )
+  if (!nearestLine || !dragState.insertAreas || !lines) {
+    return
+  }
+
+  const insertArea = dragState.insertAreas.at(lines.indexOf(nearestLine))
+  if (insertArea) {
+    dragState.selectedInsertAreaIndex =
+      dragState.insertAreas?.indexOf(insertArea)
+    window.parent?.postMessage(
+      {
+        type: 'highlight',
+        highlightedNodeId: insertArea.parent.getAttribute('data-id'),
+      },
+      '*',
+    )
+    setExternalDropHighlight({
+      layout: insertArea.layout,
+      center: insertArea.center,
+      length: insertArea.size,
+      color: dragState.elementType === 'component' ? 'D946EF' : '2563EB',
+      projectionPoint,
+    })
+  } else {
+    removeDropHighlight()
+  }
+}

package/src/editor/drag-drop/dragReorder.ts

@@ -0,0 +1,137 @@
+import { tryStartViewTransition } from '../../utils/tryStartViewTransition'
+import type { DragState } from '../types'
+import { DRAG_MOVE_CLASSNAME } from './dragMove'
+import { setDropHighlight } from './dropHighlight'
+
+export const DRAG_REORDER_CLASSNAME = '__drag-mode--reorder'
+const OVERLAP_OFFSET_PX = 100
+
+export function dragReorder(dragState: DragState | null) {
+  if (!dragState || dragState.isTransitioning) {
+    return
+  }
+
+  // If the drag operation was an insert operation, we need to switch to reorder mode and perform some one-time preparation
+  if (dragState.mode === 'insert') {
+    dragState.mode = 'reorder'
+
+    // Move back to the original container
+    const prevRect = dragState.element.getBoundingClientRect()
+    dragState.element.classList.add(DRAG_REORDER_CLASSNAME)
+    dragState.element.classList.remove(DRAG_MOVE_CLASSNAME)
+    dragState.initialContainer.insertBefore(
+      dragState.element,
+      dragState.initialNextSibling,
+    )
+    dragState.repeatedNodes.forEach((node, i) => {
+      node.style.setProperty('--drag-repeat-node-opacity', i < 3 ? '1' : '0')
+    })
+    const nextRect = dragState.element.getBoundingClientRect()
+    dragState.offset.x += nextRect.left - prevRect.left
+    dragState.offset.y += nextRect.top - prevRect.top
+    window.parent?.postMessage(
+      {
+        type: 'highlight',
+        highlightedNodeId: dragState.initialContainer.getAttribute('data-id'),
+      },
+      '*',
+    )
+    setDropHighlight(
+      dragState.element,
+      dragState.initialContainer,
+      dragState.elementType === 'component' ? 'D946EF' : '2563EB',
+    )
+  }
+
+  const bestPermutation = getBestPermutation(dragState)
+  if (
+    bestPermutation &&
+    dragState.element.nextElementSibling !== bestPermutation.nextSibling
+  ) {
+    dragState.isTransitioning = true
+    const siblings = Array.from(dragState.initialContainer.childNodes)
+    siblings.forEach((sibling, i) => {
+      if (sibling instanceof HTMLElement) {
+        sibling.style.setProperty('view-transition-name', 'item-' + i)
+      }
+    })
+    dragState.element.style.setProperty('view-transition-name', '__drag-item')
+
+    const prevLeft = dragState.element.offsetLeft
+    const prevTop = dragState.element.offsetTop
+    const transition = tryStartViewTransition(() => {
+      if (!dragState) {
+        return
+      }
+      dragState.initialContainer.insertBefore(
+        dragState.element,
+        bestPermutation.nextSibling,
+      )
+      dragState.offset.x += dragState.element.offsetLeft - prevLeft
+      dragState.offset.y += dragState.element.offsetTop - prevTop
+      dragState?.element.style.setProperty(
+        'translate',
+        `${dragState.lastCursorPosition.x - dragState.offset.x}px ${
+          dragState.lastCursorPosition.y - dragState.offset.y
+        }px`,
+      )
+      setDropHighlight(
+        dragState.element,
+        dragState.initialContainer,
+        dragState.elementType === 'component' ? 'D946EF' : '2563EB',
+      )
+    })
+
+    transition.finished
+      .then(() => {
+        siblings.forEach((sibling) => {
+          if (sibling instanceof HTMLElement) {
+            sibling.style.removeProperty('view-transition-name')
+          }
+        })
+        if (dragState) {
+          dragState.isTransitioning = false
+        }
+      })
+      .catch(() => {})
+  }
+}
+
+/**
+ * Return the most likely permutation to move the dragged element to based on the current drag position.
+ * The calculation is based on distance from the center of the dragged element to the center of the potential target element,
+ * but only if the dragged element is overlapping with the target element.
+ */
+function getBestPermutation(dragState: DragState) {
+  const { left, top, width, height } = dragState.element.getBoundingClientRect()
+  const dragElementCenterX = left + width / 2
+  const dragElementCenterY = top + height / 2
+  return dragState.reorderPermutations.reduce<null | {
+    rect: DOMRect
+    nextSibling: Node | null
+  }>((prev, curr) => {
+    const isOverlapping =
+      Math.abs(curr.rect.left + curr.rect.width / 2 - dragElementCenterX) <
+        curr.rect.width / 2 + OVERLAP_OFFSET_PX &&
+      Math.abs(curr.rect.top + curr.rect.height / 2 - dragElementCenterY) <
+        curr.rect.height / 2 + OVERLAP_OFFSET_PX
+    if (isOverlapping) {
+      if (!prev) {
+        return curr
+      }
+
+      const prevDist = Math.hypot(
+        prev.rect.left + prev.rect.width / 2 - dragElementCenterX,
+        prev.rect.top + prev.rect.height / 2 - dragElementCenterY,
+      )
+      const nextDist = Math.hypot(
+        curr.rect.left + curr.rect.width / 2 - dragElementCenterX,
+        curr.rect.top + curr.rect.height / 2 - dragElementCenterY,
+      )
+
+      return prevDist < nextDist ? prev : curr
+    }
+
+    return prev
+  }, null)
+}

package/src/editor/drag-drop/dragStarted.ts

@@ -0,0 +1,145 @@
+import type { DragState, Point } from '../types'
+import { DRAG_MOVE_CLASSNAME } from './dragMove'
+import { DRAG_REORDER_CLASSNAME } from './dragReorder'
+import { setDropHighlight } from './dropHighlight'
+
+export function dragStarted({
+  element,
+  lastCursorPosition,
+  repeatedNodes,
+  asCopy,
+  initialContainer = element.parentElement as HTMLElement,
+  initialNextSibling,
+}: {
+  element: HTMLElement
+  lastCursorPosition: Point
+  repeatedNodes: HTMLElement[]
+  asCopy: boolean
+  initialContainer?: HTMLElement
+  initialNextSibling?: Element | null
+}) {
+  // Move repeat nodes as a stack below the dragged element
+  repeatedNodes
+    .map<[HTMLElement, DOMRect]>((node) => [node, node.getBoundingClientRect()])
+    .forEach(([node, rect], i) => {
+      node.classList.add('drag-repeat-node')
+      node.style.setProperty('--drag-repeat-node-width', `${rect.width}px`)
+      node.style.setProperty('--drag-repeat-node-height', `${rect.height}px`)
+      node.style.setProperty(
+        '--drag-repeat-node-translate',
+        `${rect.left}px ${rect.top}px`,
+      )
+      node.style.setProperty(
+        '--drag-repeat-node-rotate',
+        `${Math.random() * 9 - 4.5}deg`,
+      )
+      node.style.setProperty('--drag-repeat-node-opacity', i < 3 ? '1' : '0')
+    })
+
+  initialNextSibling ??= element.nextElementSibling
+
+  const dragState: DragState = {
+    destroying: false,
+    elementType: elementIsComponent(element) ? 'component' : 'element',
+    element,
+    offset: lastCursorPosition,
+    lastCursorPosition,
+    initialContainer,
+    initialNextSibling,
+    initialRect: element.getBoundingClientRect(),
+    reorderPermutations: [],
+    isTransitioning: false,
+    repeatedNodes,
+    mode: 'reorder',
+  }
+
+  if (asCopy) {
+    dragState.copy = element.cloneNode(true) as HTMLElement
+    dragState.copy.style.setProperty('opacity', '0.5')
+    dragState.copy.classList.remove(DRAG_REORDER_CLASSNAME)
+    dragState.copy.classList.remove(DRAG_MOVE_CLASSNAME)
+    dragState.initialContainer.insertBefore(
+      dragState.copy,
+      dragState.initialNextSibling,
+    )
+  }
+
+  // Calculate all possible permutations, by iterating over all siblings of the targetContainer
+  // and moving the draggedElement to before each sibling to calculate the rect and then
+  // store it in the dragState.permutations array
+  dragState.initialContainer.childNodes.forEach((sibling) => {
+    if (
+      sibling instanceof Element &&
+      sibling.getAttribute('data-id') &&
+      // Only first item of repeated nodes should be considered
+      !sibling.getAttribute('data-id')?.endsWith(')') &&
+      !sibling.hasAttribute('data-component') &&
+      repeatedNodes.every((node) => node !== sibling)
+    ) {
+      dragState?.initialContainer.insertBefore(element, sibling)
+      dragState?.reorderPermutations.push({
+        nextSibling: sibling,
+        rect: element.getBoundingClientRect(),
+      })
+    }
+  })
+  // Test the last position
+  if (!dragState.initialContainer.hasAttribute('data-component')) {
+    dragState.initialContainer.appendChild(element)
+    dragState?.reorderPermutations.push({
+      nextSibling: null,
+      rect: element.getBoundingClientRect(),
+    })
+  }
+  // Restore the initial position of the draggedElement
+  dragState.initialContainer.insertBefore(element, dragState.initialNextSibling)
+  ;(function followRepeatedNodes() {
+    if (dragState.destroying || !dragState.element.isConnected) {
+      return
+    }
+
+    const followRect = dragState.element.getBoundingClientRect()
+    dragState.repeatedNodes.forEach((node, i) => {
+      // Calculate rect without rotation as it expands the rect and makes it difficult to calculate the correct position
+      node.style.setProperty('rotate', '0deg')
+      const fromRect = node.getBoundingClientRect()
+      node.style.removeProperty('rotate')
+      const toX = followRect.left + followRect.width / 2 - fromRect.width / 2
+      const toY = followRect.top + followRect.height / 2 - fromRect.height / 2
+      const interpolation = 0.4 / (i + 1)
+      const x = fromRect.left + (toX - fromRect.left) * interpolation
+      const y = fromRect.top + (toY - fromRect.top) * interpolation
+      node.style.setProperty('--drag-repeat-node-translate', `${x}px ${y}px`)
+    })
+
+    requestAnimationFrame(followRepeatedNodes)
+  })()
+
+  // Highlight container
+  element.classList.add(DRAG_REORDER_CLASSNAME)
+  window.parent?.postMessage(
+    {
+      type: 'highlight',
+      highlightedNodeId: dragState.initialContainer.getAttribute('data-id'),
+    },
+    '*',
+  )
+
+  setDropHighlight(
+    dragState.element,
+    dragState.initialContainer,
+    dragState.elementType === 'component' ? 'D946EF' : '2563EB',
+  )
+
+  return dragState
+}
+
+/**
+ * Semi-hacky way to determine if an element is a Toddle component by checking if it is a root node, but not the top-level root node (page).
+ */
+function elementIsComponent(element: Element) {
+  return (
+    element.getAttribute('data-node-id') === 'root' &&
+    element.getAttribute('data-id') !== '0'
+  )
+}

package/src/editor/drag-drop/dropHighlight.ts

@@ -0,0 +1,82 @@
+import type { Point } from '../types'
+
+let highlight: HTMLElement | null = null
+
+/**
+ * Visual representation of where a dragged node will be dropped.
+ */
+export function setDropHighlight(
+  element: HTMLElement,
+  targetContainer: HTMLElement,
+  color: string,
+) {
+  highlight?.remove()
+  if (!element || !targetContainer) {
+    return
+  }
+
+  highlight = document.createElement('div')
+  highlight.classList.add('__drop-area')
+  const { top, left } = targetContainer.getBoundingClientRect()
+  highlight.style.setProperty('position', 'fixed')
+  highlight.style.setProperty(
+    '--drop-area-left',
+    `${element.offsetLeft + left}px`,
+  )
+  highlight.style.setProperty('--drop-area-top', `${element.offsetTop + top}px`)
+  highlight.style.setProperty('--drop-area-width', `${element.offsetWidth}px`)
+  highlight.style.setProperty('--drop-area-height', `${element.offsetHeight}px`)
+  highlight.style.setProperty('--drop-area-outline-color', `#${color}`)
+  highlight.style.setProperty(
+    '--drop-area-border-radius',
+    window.getComputedStyle(element).borderRadius,
+  )
+  highlight.style.setProperty(
+    '--dashed-line-color',
+    `color-mix(in srgb, #${color} 33%, transparent)`,
+  )
+  document.body.append(highlight)
+}
+
+/**
+ * Visual representation of where a dragged node will be dropped outside of its own container.
+ */
+export function setExternalDropHighlight({
+  layout,
+  center,
+  length,
+  color,
+  projectionPoint,
+}: {
+  layout: 'block' | 'inline'
+  center: Point
+  length: number
+  color: string
+  projectionPoint: number
+}) {
+  highlight?.remove()
+  highlight = document.createElement('div')
+  highlight.classList.add('__drop-area-line')
+  highlight.style.setProperty('--drop-area-left', `${center.x}px`)
+  highlight.style.setProperty('--drop-area-top', `${center.y}px`)
+  if (layout === 'block') {
+    highlight.style.setProperty('--drop-area-width', `${length}px`)
+    highlight.style.setProperty('--drop-area-height', `4px`)
+    highlight.style.setProperty('--drop-area-translate', '-50% -2px')
+  } else {
+    highlight.style.setProperty('--drop-area-width', `4px`)
+    highlight.style.setProperty('--drop-area-height', `${length}px`)
+    highlight.style.setProperty('--drop-area-translate', '-2px -50%')
+  }
+
+  const gradient = `radial-gradient(circle at ${projectionPoint * 100}% ${
+    projectionPoint * 100
+  }%, #${color} 0%, #${color}55 max(100%, 75px))`
+  highlight.style.setProperty('--drop-area-background', gradient)
+  document.body.appendChild(highlight)
+}
+
+export function removeDropHighlight() {
+  highlight?.remove()
+  highlight = null
+}