@blokkli/editor 2.0.0-alpha.5 → 2.0.0-alpha.51

package/dist/runtime/editor/features/dragging-overlay/Renderer/index.vue

@@ -0,0 +1,934 @@
+<template>
+  <Teleport :to="ui.mainLayoutElement.value">
+    <slot
+      :background-color="activeBackgroundColorHex"
+      :color="activeColor"
+      :label="active?.label"
+      :active-rect="activeScreenRect"
+    />
+  </Teleport>
+</template>
+
+<script setup>
+import { falsy, onlyUnique } from "#blokkli/helpers";
+import {
+  findClosestRectangle,
+  intersects,
+  isInsideRect
+} from "#blokkli/editor/helpers/geometry";
+import { toShaderColor, rgbaToString } from "#blokkli/editor/helpers/color";
+import { ref, computed, useBlokkli } from "#imports";
+import {
+  setBuffersAndAttributes,
+  drawBufferInfo,
+  setUniforms
+} from "twgl.js";
+import vs from "./vertex.glsl?raw";
+import fs from "./fragment.glsl?raw";
+import { RectangleBufferCollector } from "#blokkli/editor/helpers/webgl";
+import {
+  determineCanAddChildren,
+  getChildrenOrientation,
+  getGapSize,
+  MIN_GAP
+} from "#blokkli/editor/helpers/dropTargets";
+import {
+  fragmentBlockBundle,
+  fromLibraryBlockBundle,
+  itemEntityType
+} from "#blokkli-build/config";
+import { defineRenderer, onBlokkliEvent } from "#blokkli/editor/composables";
+const props = defineProps({
+  items: { type: Array, required: true },
+  box: { type: Object, required: true },
+  mouseX: { type: Number, required: true },
+  mouseY: { type: Number, required: true },
+  isTouch: { type: Boolean, required: true }
+});
+const {
+  dom,
+  ui,
+  theme,
+  dragdrop,
+  eventBus,
+  animation,
+  state,
+  types,
+  fields,
+  definitions,
+  context,
+  permissions
+} = useBlokkli();
+const FIELD_MIN_DRAW_SIZE = 6;
+const alphaBase = 0.7;
+const colorTeal = rgbaToString(theme.teal.value.normal);
+const colorTealAlpha = rgbaToString(theme.teal.value.normal, alphaBase);
+const colorAccent = rgbaToString(theme.accent.value[800]);
+const colorAccentAlpha = rgbaToString(theme.accent.value[800], alphaBase);
+var RectRenderType = /* @__PURE__ */ ((RectRenderType2) => {
+  RectRenderType2[RectRenderType2["DROP_AREA"] = 0] = "DROP_AREA";
+  RectRenderType2[RectRenderType2["FIELD_1"] = 1] = "FIELD_1";
+  RectRenderType2[RectRenderType2["FIELD_2"] = 2] = "FIELD_2";
+  RectRenderType2[RectRenderType2["FIELD_3"] = 3] = "FIELD_3";
+  RectRenderType2[RectRenderType2["FIELD_4"] = 4] = "FIELD_4";
+  RectRenderType2[RectRenderType2["ACTIVE_AREA"] = 5] = "ACTIVE_AREA";
+  return RectRenderType2;
+})(RectRenderType || {});
+const dragStart = Date.now();
+const cursorIsInsideClipped = () => isInsideRect(props.mouseX, props.mouseY, ui.visibleViewport.value) && !ui.viewportBlockingRects.value.some(
+  (v) => isInsideRect(props.mouseX, props.mouseY, v)
+);
+const active = ref(null);
+defineEmits(["drop"]);
+const areas = dragdrop.getDropAreas(props.items).reduce((acc, v) => {
+  acc[v.id] = v;
+  return acc;
+}, {});
+const visibleDropAreas = /* @__PURE__ */ new Set();
+const areasObserver = new IntersectionObserver(
+  (entries) => {
+    for (const entry of entries) {
+      if (entry.target instanceof HTMLElement) {
+        const id = entry.target.dataset.dropAreaId;
+        if (id) {
+          if (entry.isIntersecting) {
+            visibleDropAreas.add(id);
+          } else {
+            visibleDropAreas.delete(id);
+          }
+        }
+      }
+    }
+  },
+  {
+    threshold: 0
+  }
+);
+Object.values(areas).forEach((area) => {
+  area.element.dataset.dropAreaId = area.id;
+  areasObserver.observe(area.element);
+});
+onBlokkliEvent("mouse:down", (e) => {
+  const coord = toCanvasSpaceCoordinates(e.x, e.y);
+  const match = collector.getRectAtPosition(coord);
+  active.value = match || null;
+});
+onBlokkliEvent("mouse:up", (e) => {
+  if (!active.value) {
+    return;
+  }
+  if (props.isTouch && e.distance > 10) {
+    active.value = null;
+    return;
+  }
+  if (!props.isTouch && e.distance < 7) {
+    return;
+  }
+  emitDrop();
+});
+const emitDrop = async () => {
+  const timeDelta = Date.now() - dragStart;
+  if (active.value && timeDelta > 200) {
+    if (active.value.type === "field") {
+      const [hostUuid, fieldName, preceedingUuid] = active.value.id.split(":");
+      if (!hostUuid || !fieldName) {
+        return;
+      }
+      const field = fields.find(hostUuid, fieldName);
+      if (!field) {
+        return;
+      }
+      eventBus.emit("dragging:drop", {
+        field,
+        preceedingUuid: preceedingUuid ?? null,
+        items: [...props.items],
+        host: {
+          type: field.hostEntityType,
+          uuid: field.hostEntityUuid,
+          fieldName: field.name
+        }
+      });
+      return;
+    } else if (active.value.type === "drop-area") {
+      const area = areas[active.value.id];
+      if (!area) {
+        return;
+      }
+      await area.onDrop();
+    }
+  }
+  eventBus.emit("dragging:end");
+};
+const isDraggingExisting = computed(
+  () => props.items.some(
+    (item) => item.itemType === "existing" || item.itemType === "existing_structure"
+  )
+);
+const draggingBundles = computed(
+  () => props.items.flatMap((item) => {
+    const bundles = [];
+    if (item.itemType === "existing" || item.itemType === "existing_structure") {
+      bundles.push(item.block.bundle);
+      if (item.block.library?.reusableBundle) {
+        bundles.push(item.block.library.reusableBundle);
+      }
+    } else if ("itemBundle" in item) {
+      if (item.itemBundle) {
+        bundles.push(item.itemBundle);
+      }
+    } else if (item.itemType === "action" && item.action.itemBundle) {
+      bundles.push(item.action.itemBundle);
+    } else if ("itemBundles" in item) {
+      bundles.push(...item.itemBundles);
+    }
+    return bundles;
+  }).filter(falsy).filter(onlyUnique)
+);
+const draggingFragments = computed(
+  () => props.items.flatMap((item) => {
+    if ((item.itemType === "existing" || item.itemType === "existing_structure") && item.block.bundle === fragmentBlockBundle && item.block.fragment?.name) {
+      return [item.block.fragment.name];
+    }
+    return [];
+  }).filter(falsy)
+);
+const selectionUuids = computed(
+  () => props.items.map((item) => {
+    if (item.itemType === "existing") {
+      return item.block.uuid;
+    }
+  }).filter(falsy)
+);
+const fieldChildCache = {};
+const buildChildId = (field, preceedingUuid, type, uuid) => {
+  return `${field.key}:${preceedingUuid || ""}:${type || ""}:${uuid || ""}`;
+};
+const buildChildren = (field, visible) => {
+  if (!field.canAddChildren) {
+    return [];
+  }
+  if (field.emptyChild) {
+    return [field.emptyChild];
+  }
+  const children = [];
+  let prevWasInSelection = false;
+  let prevUuid = "";
+  let prevElOffsetTop = 0;
+  let prevElHeight = 0;
+  for (let i = 0; i < field.childrenElements.length; i++) {
+    const childrenForUuid = [];
+    const isLast = i === field.childrenElements.length - 1;
+    const el = field.childrenElements[i];
+    if (!(el instanceof HTMLElement)) {
+      continue;
+    }
+    const uuid = el.dataset.bkUuid;
+    if (!uuid) {
+      continue;
+    }
+    if (!visible.includes(uuid)) {
+      const elRect2 = dom.getBlockRect(uuid) || ui.getAbsoluteElementRect(dom.getBoundingClientRect(el));
+      prevElOffsetTop = elRect2.y - field.y;
+      prevElHeight = el.scrollHeight;
+      prevUuid = uuid;
+      continue;
+    }
+    const cached = fieldChildCache[uuid];
+    if (cached) {
+      const elRect2 = dom.getBlockRect(uuid) || ui.getAbsoluteElementRect(dom.getBoundingClientRect(el));
+      prevElOffsetTop = elRect2.y - field.y;
+      prevElHeight = el.scrollHeight;
+      children.push(...cached);
+      prevUuid = uuid;
+      continue;
+    }
+    if (selectionUuids.value.includes(uuid)) {
+      prevWasInSelection = true;
+      prevUuid = uuid;
+      continue;
+    }
+    const elRect = dom.getBlockRect(uuid) || ui.getAbsoluteElementRect(dom.getBoundingClientRect(el));
+    const elOffsetTop = elRect.y - field.y;
+    const elOffsetLeft = elRect.x - field.x;
+    const elHeight = el.scrollHeight;
+    if (isLast) {
+      const id2 = buildChildId(field.field, uuid, "last", uuid);
+      if (field.orientation === "vertical") {
+        childrenForUuid.push({
+          id: id2,
+          width: field.width,
+          height: MIN_GAP,
+          x: 0,
+          y: elOffsetTop + elHeight,
+          label: field.label
+        });
+      } else {
+        childrenForUuid.push({
+          id: id2,
+          width: MIN_GAP,
+          height: el.offsetHeight,
+          x: elOffsetLeft + el.offsetWidth + (field.gap - MIN_GAP) / 2,
+          y: elOffsetTop,
+          label: field.label
+        });
+      }
+    }
+    if (prevWasInSelection) {
+      prevWasInSelection = false;
+      prevUuid = uuid;
+      prevElOffsetTop = elOffsetTop;
+      prevElHeight = elHeight;
+      children.push(...childrenForUuid);
+      continue;
+    }
+    const id = buildChildId(field.field, prevUuid, "between", uuid);
+    if (field.orientation === "vertical") {
+      let dropTargetY;
+      if (prevElHeight > 0) {
+        const prevBlockBottom = prevElOffsetTop + prevElHeight;
+        const gapMiddle = (prevBlockBottom + elOffsetTop) / 2;
+        dropTargetY = gapMiddle - MIN_GAP / 2;
+      } else {
+        const gapMiddle = elOffsetTop / 2;
+        dropTargetY = gapMiddle - MIN_GAP / 2;
+      }
+      childrenForUuid.push({
+        id,
+        width: field.width,
+        height: MIN_GAP,
+        x: 0,
+        y: dropTargetY,
+        label: field.label
+      });
+    } else {
+      childrenForUuid.push({
+        id,
+        width: MIN_GAP,
+        height: Math.max(el.offsetHeight, MIN_GAP),
+        x: Math.max(elOffsetLeft - field.gap, -field.gap) + (field.gap - MIN_GAP) / 2,
+        y: elOffsetTop,
+        label: field.label
+      });
+    }
+    fieldChildCache[uuid] = childrenForUuid;
+    children.push(...childrenForUuid);
+    prevElOffsetTop = elOffsetTop;
+    prevElHeight = elHeight;
+    prevUuid = uuid;
+  }
+  return children;
+};
+const fieldCache = {};
+const fieldTrailCache = {};
+const parentChainCache = {};
+function getBlockLabel(bundle, props2) {
+  if (bundle === fragmentBlockBundle && props2?.name) {
+    const fragmentDef = definitions.getFragmentDefinition(props2.name);
+    if (fragmentDef?.label) {
+      return fragmentDef.label;
+    }
+  }
+  if (bundle === fromLibraryBlockBundle && props2?.libraryItem?.label) {
+    return props2.libraryItem.label;
+  }
+  return types.getBlockBundleDefinition(bundle)?.label || bundle;
+}
+function getFieldLabel(entityType, entityBundle, fieldName) {
+  return types.getFieldConfig(entityType, entityBundle, fieldName)?.label || fieldName;
+}
+function buildParentChain(uuid, bundle) {
+  const cached = parentChainCache[uuid];
+  if (cached) {
+    return cached;
+  }
+  const parts = [];
+  const fieldInfo = state.getFieldListForBlock(uuid);
+  if (!fieldInfo) {
+    return [];
+  }
+  const parentUuid = state.getParentEntityUuid(uuid);
+  const parentItem = parentUuid ? state.getFieldListItem(parentUuid) : null;
+  if (parentItem) {
+    const parentChain = buildParentChain(parentItem.uuid, parentItem.bundle);
+    parts.push(...parentChain);
+  }
+  const entityBundle = parentItem ? parentItem.bundle : context.value.entityBundle;
+  const fieldLabel = getFieldLabel(
+    fieldInfo.entityType,
+    entityBundle,
+    fieldInfo.name
+  );
+  parts.push(`<span class="bk-is-field">${fieldLabel}</span>`);
+  const item = state.getFieldListItem(uuid);
+  const blockLabel = getBlockLabel(bundle, item?.props);
+  parts.push(`<span class="bk-is-block">${blockLabel}</span>`);
+  parentChainCache[uuid] = parts;
+  return parts;
+}
+function getInsertText(field) {
+  const cached = fieldTrailCache[field.key];
+  if (cached) {
+    return cached;
+  }
+  const parts = [];
+  const hostLabel = state.entity.value.bundleLabel || state.entity.value.label || "Host";
+  parts.push(`<span class="bk-is-host">${hostLabel}</span>`);
+  if (field.hostEntityType === itemEntityType) {
+    const parentUuid = field.hostEntityUuid;
+    const parentItem = state.getFieldListItem(parentUuid);
+    if (parentItem) {
+      const parentChain = buildParentChain(parentUuid, parentItem.bundle);
+      parts.push(...parentChain);
+    }
+  }
+  const fieldLabel = getFieldLabel(
+    field.hostEntityType,
+    field.hostEntityBundle,
+    field.name
+  );
+  parts.push(`<span class="bk-is-field">${fieldLabel}</span>`);
+  const result = parts.join(" \xBB ");
+  fieldTrailCache[field.key] = result;
+  return result;
+}
+const buildEmptyChild = (field, children, orientation, fieldWidth, fieldHeight) => {
+  if (children.length === 0) {
+    const id = buildChildId(field, null, "empty");
+    if (orientation === "horizontal") {
+      return {
+        id,
+        x: 0,
+        y: 0,
+        width: fieldWidth,
+        height: fieldHeight,
+        label: getInsertText(field)
+      };
+    } else {
+      return {
+        id,
+        x: 0,
+        y: 0,
+        width: fieldWidth,
+        height: Math.max(fieldHeight, MIN_GAP),
+        label: getInsertText(field)
+      };
+    }
+  }
+};
+const buildFieldRect = (key) => {
+  if (fieldCache[key]) {
+    return fieldCache[key];
+  }
+  const [uuid, name] = key.split(":");
+  if (!uuid || !name) {
+    return;
+  }
+  const field = fields.find(uuid, name);
+  if (!field) {
+    return;
+  }
+  if (field.hostEntityType === itemEntityType && (!permissions.checkBlockBundlePermission(field.hostEntityBundle, "edit") || permissions.blockHasRestrictedAncestor(field.hostEntityUuid))) {
+    return;
+  }
+  const childElements = [...field.element.children];
+  const currentCount = state.getFieldBlockCount(field.key);
+  const canAddChildren = determineCanAddChildren(
+    field,
+    childElements,
+    selectionUuids.value,
+    currentCount,
+    props.items.length,
+    draggingBundles.value,
+    draggingFragments.value,
+    isDraggingExisting.value ? void 0 : (bundle) => permissions.checkBlockBundlePermission(bundle, "add")
+  );
+  const orientation = field.dropAlignment || getChildrenOrientation(field.element);
+  const rect = dom.getFieldRect(field.key);
+  if (!rect) {
+    throw new Error("Failed to get rect for field: " + field.key);
+  }
+  const x = rect.x;
+  const y = rect.y;
+  const width = Math.max(rect.width, MIN_GAP);
+  const height = Math.max(rect.height, MIN_GAP);
+  const emptyChild = buildEmptyChild(
+    field,
+    childElements,
+    orientation,
+    width,
+    height
+  );
+  const gap = Math.max(getGapSize(orientation, field.element), MIN_GAP);
+  const fieldRect = {
+    key: field.key,
+    field,
+    width,
+    height,
+    x,
+    y,
+    label: getInsertText(field),
+    canAddChildren,
+    emptyChild,
+    orientation,
+    gap,
+    childrenElements: childElements
+  };
+  fieldCache[key] = fieldRect;
+  return fieldRect;
+};
+const cachedDropAreaRects = {};
+const buildDropAreaRect = (area) => {
+  if (cachedDropAreaRects[area.id]) {
+    return cachedDropAreaRects[area.id];
+  }
+  const rect = ui.getAbsoluteElementRect(area.element);
+  const dropAreaRect = {
+    x: rect.x,
+    y: rect.y,
+    width: Math.max(rect.width, MIN_GAP),
+    height: Math.max(rect.height, MIN_GAP)
+  };
+  cachedDropAreaRects[area.id] = dropAreaRect;
+  return dropAreaRect;
+};
+function getRectType(field) {
+  if (field.nestingLevel >= 3) {
+    return 4 /* FIELD_4 */;
+  } else if (field.nestingLevel >= 2) {
+    return 3 /* FIELD_3 */;
+  } else if (field.nestingLevel >= 1) {
+    return 2 /* FIELD_2 */;
+  }
+  return 1 /* FIELD_1 */;
+}
+class DropTargetRectangleBufferCollector extends RectangleBufferCollector {
+  getBufferInfo(gl) {
+    const visibleFields = dom.getVisibleFields();
+    const visibleBlocks = dom.getVisibleBlocks();
+    const lengthBefore = this.positions.length;
+    for (let i = 0; i < visibleFields.length; i++) {
+      const key = visibleFields[i];
+      const fieldRect = buildFieldRect(key);
+      if (!fieldRect) {
+        continue;
+      }
+      const children = buildChildren(fieldRect, visibleBlocks);
+      for (let j = 0; j < children.length; j++) {
+        const child = children[j];
+        if (this.added.has(child.id)) {
+          continue;
+        }
+        const type = getRectType(fieldRect.field);
+        this.addRectangle(
+          {
+            id: child.id,
+            type: "field",
+            label: child.label,
+            color: colorAccent,
+            colorAlpha: colorAccentAlpha,
+            x: fieldRect.x + child.x,
+            y: fieldRect.y + child.y,
+            width: child.width,
+            height: child.height,
+            field: fieldRect,
+            nestingLevel: fieldRect.field.nestingLevel,
+            state: child.id.includes(":empty:") ? 2 : fieldRect.orientation === "vertical" ? 1 : 0
+          },
+          type,
+          true
+        );
+      }
+    }
+    const visibleAreas = Array.from(visibleDropAreas);
+    for (let i = 0; i < visibleAreas.length; i++) {
+      const area = areas[visibleAreas[i]];
+      if (!area) {
+        continue;
+      }
+      if (this.added.has(area.id)) {
+        continue;
+      }
+      const areaRect = buildDropAreaRect(area);
+      this.addRectangle(
+        {
+          id: area.id,
+          type: "drop-area",
+          label: area.label,
+          color: colorTeal,
+          colorAlpha: colorTealAlpha,
+          x: areaRect.x,
+          y: areaRect.y,
+          width: areaRect.width,
+          height: areaRect.height,
+          state: 0
+        },
+        0 /* DROP_AREA */,
+        false
+      );
+    }
+    this.processPendingRects();
+    const hasChanged = lengthBefore !== this.positions.length;
+    if (hasChanged && gl) {
+      this.bufferInfo = this.createBufferInfo(gl);
+    }
+    return { info: this.bufferInfo, hasChanged };
+  }
+  getClosestIntersectingRect(box, coords) {
+    const candidates = [];
+    const rects = Object.values(this.rects);
+    for (let i = 0; i < rects.length; i++) {
+      const rect = rects[i];
+      if (rect.type === "active-area") {
+        continue;
+      }
+      if (intersects(box, rect)) {
+        candidates.push(rect);
+      }
+    }
+    if (candidates.length === 0) {
+      return null;
+    } else if (candidates.length === 1) {
+      return candidates[0];
+    }
+    return findClosestRectangle(coords.x, coords.y, candidates);
+  }
+  getRectAtPosition(coord) {
+    const rects = Object.values(this.rects);
+    for (let i = 0; i < rects.length; i++) {
+      const rect = rects[i];
+      if (rect.type === "active-area") {
+        continue;
+      }
+      if (isInsideRect(coord.x, coord.y, rect)) {
+        return rect;
+      }
+    }
+    return null;
+  }
+}
+const fieldRenderPalette = computed(() => {
+  const accent = theme.accent.value;
+  const mono = theme.mono.value;
+  return {
+    "0": {
+      gradStart: accent[800],
+      gradEnd: accent[900],
+      borderOuter: [0, 0, 0],
+      borderInner: accent[600],
+      color: [255, 255, 255]
+    },
+    "1": {
+      gradStart: accent[400],
+      gradEnd: accent[500],
+      borderOuter: accent[400],
+      borderInner: accent[300],
+      color: [255, 255, 255]
+      // color: accent[950],
+    },
+    "2": {
+      gradStart: mono[700],
+      gradEnd: mono[800],
+      borderOuter: [0, 0, 0],
+      borderInner: mono[600],
+      color: mono[100]
+    },
+    "3": {
+      gradStart: mono[300],
+      gradEnd: mono[400],
+      borderOuter: mono[600],
+      borderInner: mono[300],
+      color: mono[100]
+    }
+  };
+});
+function getColorForField(field, property = "gradStart") {
+  const nestingLevel = field?.field.nestingLevel || 0;
+  if (nestingLevel >= 3) {
+    return fieldRenderPalette.value[3][property];
+  } else if (nestingLevel >= 2) {
+    return fieldRenderPalette.value[2][property];
+  } else if (nestingLevel >= 1) {
+    return fieldRenderPalette.value[1][property];
+  }
+  return fieldRenderPalette.value[0][property];
+}
+const activeBackgroundColorRgb = computed(() => {
+  if (active.value?.type === "drop-area") {
+    return theme.teal.value.normal;
+  }
+  if (!active.value) {
+    return;
+  }
+  return getColorForField(active.value?.field);
+});
+function joinRgb(rgb) {
+  return rgb.join(" ");
+}
+const activeColor = computed(() => {
+  if (active.value?.type === "drop-area") {
+    return joinRgb(theme.teal.value.light);
+  }
+  if (!active.value) {
+    return;
+  }
+  return joinRgb(getColorForField(active.value?.field, "color"));
+});
+const activeBackgroundColorHex = computed(() => {
+  if (activeBackgroundColorRgb.value) {
+    return joinRgb(activeBackgroundColorRgb.value);
+  }
+  return "";
+});
+const activeScreenRect = computed(() => {
+  if (!active.value) {
+    return;
+  }
+  const scale = ui.artboardScale.value;
+  const offset = ui.artboardOffset.value;
+  return {
+    x: active.value.x * scale + offset.x,
+    y: active.value.y * scale + offset.y,
+    width: active.value.width * scale,
+    height: active.value.height * scale
+  };
+});
+const activeHoverField = ref(null);
+const activeHoverRect = computed(() => {
+  if (!activeHoverField.value) {
+    return [0, 0, 0, 0];
+  }
+  const outset = activeHoverField.value.field.nestingLevel === 0 ? 0 : 20;
+  if (activeHoverField.value.emptyChild) {
+    const emptyChildId = activeHoverField.value.emptyChild.id;
+    const adjustedRect = collector.rects[emptyChildId];
+    if (adjustedRect) {
+      return [
+        adjustedRect.x - outset,
+        adjustedRect.y - outset,
+        adjustedRect.width + 2 * outset,
+        adjustedRect.height + 2 * outset
+      ];
+    }
+  }
+  return [
+    activeHoverField.value.x - outset,
+    activeHoverField.value.y - outset,
+    activeHoverField.value.width + 2 * outset,
+    activeHoverField.value.height + 2 * outset
+  ];
+});
+const activeHoverColor = computed(() => {
+  return getColorForField(activeHoverField.value);
+});
+const activeHoverFieldNestingLevel = computed(() => {
+  return activeHoverField.value?.field.nestingLevel ?? 0;
+});
+const uniforms = computed(() => {
+  const index = active.value?.index;
+  return {
+    u_color_hover_area: toShaderColor(activeHoverColor.value),
+    u_color_area: toShaderColor(theme.teal.value.normal),
+    u_drop_area: [
+      ...toShaderColor(theme.teal.value.light),
+      ...toShaderColor(theme.teal.value.normal),
+      ...toShaderColor(theme.teal.value.dark),
+      ...toShaderColor(theme.teal.value.light)
+    ],
+    u_field_0: [
+      ...toShaderColor(fieldRenderPalette.value[0].gradStart),
+      ...toShaderColor(fieldRenderPalette.value[0].gradEnd),
+      ...toShaderColor(fieldRenderPalette.value[0].borderOuter),
+      ...toShaderColor(fieldRenderPalette.value[0].borderInner)
+    ],
+    u_field_1: [
+      ...toShaderColor(fieldRenderPalette.value[1].gradStart),
+      ...toShaderColor(fieldRenderPalette.value[1].gradEnd),
+      ...toShaderColor(fieldRenderPalette.value[1].borderOuter),
+      ...toShaderColor(fieldRenderPalette.value[1].borderInner)
+    ],
+    u_field_2: [
+      ...toShaderColor(fieldRenderPalette.value[2].gradStart),
+      ...toShaderColor(fieldRenderPalette.value[2].gradEnd),
+      ...toShaderColor(fieldRenderPalette.value[2].borderOuter),
+      ...toShaderColor(fieldRenderPalette.value[2].borderInner)
+    ],
+    u_field_3: [
+      ...toShaderColor(fieldRenderPalette.value[3].gradStart),
+      ...toShaderColor(fieldRenderPalette.value[3].gradEnd),
+      ...toShaderColor(fieldRenderPalette.value[3].borderOuter),
+      ...toShaderColor(fieldRenderPalette.value[3].borderInner)
+    ],
+    u_active_rect_id: index === void 0 ? -1 : index,
+    u_active_hover_rect: activeHoverRect.value,
+    u_active_hover_nesting_level: activeHoverFieldNestingLevel.value,
+    u_field_min_size: FIELD_MIN_DRAW_SIZE
+  };
+});
+const dragBox = ref({
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0
+});
+function toCanvasSpaceCoordinates(x, y) {
+  const scale = ui.artboardScale.value;
+  const offset = { ...ui.artboardOffset.value };
+  return {
+    x: (x - offset.x) / scale,
+    y: (y - offset.y) / scale
+  };
+}
+function setHoveredFieldArea(box, mouse) {
+  if (active.value?.field) {
+    if (activeHoverField.value?.key !== active.value.field.key) {
+      activeHoverField.value = active.value.field;
+    }
+    return;
+  }
+  const fields2 = Object.values(fieldCache);
+  let highestNestingLevel = 0;
+  let candidate = null;
+  for (let i = 0; i < fields2.length; i++) {
+    const field = fields2[i];
+    if (!field.canAddChildren) {
+      continue;
+    }
+    if (isInsideRect(mouse.x, mouse.y, field) && field.field.nestingLevel >= highestNestingLevel) {
+      candidate = field;
+      highestNestingLevel = field.field.nestingLevel;
+      continue;
+    }
+    if (intersects(box, field) && field.field.nestingLevel >= highestNestingLevel) {
+      highestNestingLevel = field.field.nestingLevel;
+      candidate = field;
+    }
+  }
+  if (candidate && candidate.key !== activeHoverField.value?.key) {
+    activeHoverField.value = candidate;
+  }
+}
+let bufferInfo = null;
+let bufferChanged = false;
+const { collector } = defineRenderer("drop-targets", {
+  zIndex: 400,
+  only: true,
+  collector: () => {
+    const c = new DropTargetRectangleBufferCollector({ deferredMode: true });
+    c.addRectangle(
+      {
+        id: "active-hover-rect",
+        type: "active-area",
+        label: "Field Area",
+        color: "red",
+        colorAlpha: "red",
+        x: 0,
+        y: 0,
+        width: ui.artboardSize.value.width,
+        height: ui.artboardSize.value.height,
+        state: 0
+      },
+      5 /* ACTIVE_AREA */,
+      false
+    );
+    return c;
+  },
+  program: () => ({ shaders: [vs, fs] }),
+  cursor: () => "grabbing",
+  render: (_ctx, gl, program) => {
+    const scale = ui.artboardScale.value;
+    const offset = { ...ui.artboardOffset.value };
+    dragBox.value = {
+      x: (props.box.x - offset.x) / scale,
+      y: (props.box.y - offset.y) / scale,
+      width: props.box.width / scale,
+      height: props.box.height / scale
+    };
+    const mouseAbsolute = toCanvasSpaceCoordinates(props.mouseX, props.mouseY);
+    const result = collector.getBufferInfo(gl);
+    bufferInfo = result.info;
+    bufferChanged = result.hasChanged;
+    if (!props.isTouch) {
+      if (cursorIsInsideClipped()) {
+        const closest = collector.getClosestIntersectingRect(
+          dragBox.value,
+          mouseAbsolute
+        );
+        active.value = closest || null;
+      } else {
+        active.value = null;
+      }
+    }
+    setHoveredFieldArea(dragBox.value, mouseAbsolute);
+    gl.useProgram(program.program);
+    animation.setSharedUniforms(gl, program);
+    setUniforms(program, uniforms.value);
+    if (!bufferInfo) {
+      return;
+    }
+    if (bufferChanged) {
+      setBuffersAndAttributes(gl, program, bufferInfo);
+    }
+    drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
+  },
+  renderFallback: (ctx, ctx2d) => {
+    const scale = ui.artboardScale.value;
+    const offset = { ...ui.artboardOffset.value };
+    dragBox.value = {
+      x: (props.box.x - offset.x) / scale,
+      y: (props.box.y - offset.y) / scale,
+      width: props.box.width / scale,
+      height: props.box.height / scale
+    };
+    const mouseAbsolute = toCanvasSpaceCoordinates(props.mouseX, props.mouseY);
+    const result = collector.getBufferInfo(void 0);
+    bufferInfo = result.info;
+    bufferChanged = result.hasChanged;
+    if (!props.isTouch) {
+      if (cursorIsInsideClipped()) {
+        const closest = collector.getClosestIntersectingRect(
+          dragBox.value,
+          mouseAbsolute
+        );
+        active.value = closest || null;
+      } else {
+        active.value = null;
+      }
+    }
+    setHoveredFieldArea(dragBox.value, mouseAbsolute);
+    const rects = Object.values(collector.rects);
+    for (let i = 0; i < rects.length; i++) {
+      const rect = rects[i];
+      if (rect.id === "active-hover-rect") {
+        continue;
+      }
+      const isActive = active.value?.id === rect.id;
+      let drawX = rect.x;
+      let drawY = rect.y;
+      let drawWidth = rect.width;
+      let drawHeight = rect.height;
+      if (!isActive && rect.type === "field") {
+        const isVertical = rect.id.includes(":empty:") || rect.field?.orientation === "vertical";
+        if (isVertical) {
+          drawHeight = Math.min(FIELD_MIN_DRAW_SIZE, rect.height);
+          drawY = rect.y + (rect.height - drawHeight) / 2;
+        } else {
+          drawWidth = Math.min(FIELD_MIN_DRAW_SIZE, rect.width);
+          drawX = rect.x + (rect.width - drawWidth) / 2;
+        }
+      }
+      const isField = rect.type === "field";
+      if (active.value?.id === rect.id) {
+        ctx2d.fillStyle = isField ? rgbaToString(getColorForField(rect.field)) : rect.color;
+      } else {
+        ctx2d.fillStyle = isField ? rgbaToString(getColorForField(rect.field), 0.7) : rect.colorAlpha;
+      }
+      ctx2d.fillRect(
+        (drawX * scale + offset.x) * ctx.dpi,
+        (drawY * scale + offset.y) * ctx.dpi,
+        drawWidth * ctx.dpi * scale,
+        drawHeight * ctx.dpi * scale
+      );
+    }
+  }
+});
+</script>