@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/runtime/components/Edit/Features/DraggingOverlay/DropTargets/index.vue

@@ -14,6 +14,7 @@ import {
   toShaderColor
 } from "#blokkli/helpers";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
 import { ref, computed, useBlokkli, onBeforeUnmount } from "#imports";
 import {
   setBuffersAndAttributes,
@@ -23,6 +24,12 @@ import {
 import vs from "./vertex.glsl?raw";
 import fs from "./fragment.glsl?raw";
 import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
+import {
+  determineCanAddChildren,
+  getChildrenOrientation,
+  getGapSize,
+  MIN_GAP
+} from "#blokkli/helpers/dropTargets";
 const props = defineProps({
   items: { type: Array, required: true },
   box: { type: Object, required: true },
@@ -30,7 +37,6 @@ const props = defineProps({
   mouseY: { type: Number, required: true },
   isTouch: { type: Boolean, required: true }
 });
-const MIN_GAP = 20;
 var RectRenderType = /* @__PURE__ */ ((RectRenderType2) => {
   RectRenderType2[RectRenderType2["DROP_AREA"] = 0] = "DROP_AREA";
   RectRenderType2[RectRenderType2["FIELD_1"] = 1] = "FIELD_1";
@@ -55,7 +61,8 @@ const {
   animation,
   state,
   runtimeConfig,
-  types
+  types,
+  fields
 } = useBlokkli();
 const gl = animation.gl();
 const canvas = animation.getCanvasElement();
@@ -115,7 +122,7 @@ const emitDrop = async () => {
       if (!hostUuid || !fieldName) {
         return;
       }
-      const field = dom.findField(hostUuid, fieldName);
+      const field = fields.find(hostUuid, fieldName);
       if (!field) {
         return;
       }
@@ -139,59 +146,28 @@ const emitDrop = async () => {
     }
   }
   eventBus.emit("dragging:end");
-  eventBus.emit("item:dropped");
 };
-function getChildrenOrientation(element) {
-  const computedStyle = window.getComputedStyle(element);
-  if (computedStyle.display.includes("flex")) {
-    if (computedStyle.flexDirection === "row" || computedStyle.flexDirection === "row-reverse") {
-      return "horizontal";
-    } else {
-      return "vertical";
-    }
-  }
-  if (computedStyle.display.includes("grid")) {
-    if (computedStyle.gridTemplateColumns.split(" ").length > 1) {
-      return "horizontal";
-    } else {
-      return "vertical";
-    }
-  }
-  return "vertical";
-}
 const draggingBundles = computed(
   () => props.items.flatMap((item) => {
     const bundles = [];
-    if ("itemBundle" in item && item.itemBundle) {
+    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 (item.itemBundle) {
       bundles.push(item.itemBundle);
     }
-    if ("reusableBundle" in item && item.reusableBundle) {
-      bundles.push(item.reusableBundle);
-    }
     return bundles;
   }).filter(falsy)
 );
 const selectionUuids = computed(
   () => props.items.map((item) => {
     if (item.itemType === "existing") {
-      return item.uuid;
+      return item.block.uuid;
     }
   }).filter(falsy)
 );
-function getGapSize(orientation, element) {
-  const computedStyle = window.getComputedStyle(element);
-  if (computedStyle.display.includes("grid") || computedStyle.display.includes("flex")) {
-    const gap = orientation === "vertical" ? computedStyle.columnGap || computedStyle.gridColumnGap : computedStyle.rowGap || computedStyle.gridRowGap;
-    if (gap) {
-      const gapParts = gap.split(" ");
-      const gapValue = gapParts[0];
-      if (gapValue?.endsWith("px")) {
-        return Number.parseFloat(gapValue);
-      }
-    }
-  }
-  return MIN_GAP;
-}
 const fieldChildCache = {};
 const buildChildId = (field, preceedingUuid, type, uuid) => {
   return `${field.key}:${preceedingUuid || ""}:${type || ""}:${uuid || ""}`;
@@ -300,25 +276,6 @@ function getInsertText(field) {
   const bundleLabel = getBundleLabel(field);
   return `${bundleLabel} \xBB <strong>${field.label}</strong>`;
 }
-const determineCanAddChildren = (field, children) => {
-  if (field.cardinality !== -1) {
-    const count = state.getFieldBlockCount(field.key);
-    const childrenThatAreSelection = children.filter((child) => {
-      const uuid = child.dataset.uuid;
-      if (!uuid) {
-        return false;
-      }
-      return selectionUuids.value.includes(uuid);
-    }).length;
-    const countAfter = count - childrenThatAreSelection + props.items.length;
-    if (countAfter > field.cardinality) {
-      return false;
-    }
-  }
-  return !draggingBundles.value.length || draggingBundles.value.every(
-    (bundle) => field.allowedBundles.includes(bundle)
-  );
-};
 const buildEmptyChild = (field, children, orientation, fieldWidth, fieldHeight) => {
   if (children.length === 0) {
     const id = buildChildId(field, null, "empty");
@@ -351,12 +308,20 @@ const buildFieldRect = (key) => {
   if (!uuid || !name) {
     return;
   }
-  const field = dom.findField(uuid, name);
+  const field = fields.find(uuid, name);
   if (!field) {
     return;
   }
   const childElements = [...field.element.children];
-  const canAddChildren = determineCanAddChildren(field, childElements);
+  const currentCount = state.getFieldBlockCount(field.key);
+  const canAddChildren = determineCanAddChildren(
+    field,
+    childElements,
+    selectionUuids.value,
+    currentCount,
+    props.items.length,
+    draggingBundles.value
+  );
   const orientation = field.dropAlignment || getChildrenOrientation(field.element);
   const rect = dom.getFieldRect(field.key);
   if (!rect) {
@@ -406,10 +371,11 @@ const buildDropAreaRect = (area) => {
   cachedDropAreaRects[area.id] = dropAreaRect;
   return dropAreaRect;
 };
+const alphaBase = gl ? 0.7 : 0.3;
 const colorTeal = rgbaToString(theme.teal.value.normal);
-const colorTealAlpha = rgbaToString(theme.teal.value.normal, 0.7);
+const colorTealAlpha = rgbaToString(theme.teal.value.normal, alphaBase);
 const colorAccent = rgbaToString(theme.accent.value[800]);
-const colorAccentAlpha = rgbaToString(theme.accent.value[800], 0.7);
+const colorAccentAlpha = rgbaToString(theme.accent.value[800], alphaBase);
 function getRectType(field) {
   if (field.nestingLevel >= 3) {
     return 4 /* FIELD_4 */;
@@ -482,6 +448,7 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector {
         false
       );
     }
+    this.processPendingRects();
     const hasChanged = lengthBefore !== this.positions.length;
     if (hasChanged) {
       this.bufferInfo = this.createBufferInfo();
@@ -521,22 +488,26 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector {
     return null;
   }
 }
-const collector = new DropTargetRectangleBufferCollector(gl);
-collector.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
-  },
-  5 /* ACTIVE_AREA */,
-  false
-);
+const collector = new DropTargetRectangleBufferCollector(gl, {
+  deferredMode: true
+});
+if (gl) {
+  collector.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
+    },
+    5 /* ACTIVE_AREA */,
+    false
+  );
+}
 const fieldColors = computed(() => {
   return {
     "0": theme.accent.value[900],
@@ -577,6 +548,18 @@ const activeHoverRect = computed(() => {
     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,
@@ -587,6 +570,9 @@ const activeHoverRect = computed(() => {
 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 {
@@ -597,7 +583,8 @@ const uniforms = computed(() => {
     u_color_hover_area: toShaderColor(activeHoverColor.value),
     u_color_area: toShaderColor(theme.teal.value.normal),
     u_active_rect_id: index === void 0 ? -1 : index,
-    u_active_hover_rect: activeHoverRect.value
+    u_active_hover_rect: activeHoverRect.value,
+    u_active_hover_nesting_level: activeHoverFieldNestingLevel.value
   };
 });
 const dragBox = ref({
@@ -621,11 +608,11 @@ function setHoveredFieldArea(box, mouse) {
     }
     return;
   }
-  const fields = Object.values(fieldCache);
+  const fields2 = Object.values(fieldCache);
   let highestNestingLevel = 0;
   let candidate = null;
-  for (let i = 0; i < fields.length; i++) {
-    const field = fields[i];
+  for (let i = 0; i < fields2.length; i++) {
+    const field = fields2[i];
     if (!field.canAddChildren) {
       continue;
     }
@@ -643,6 +630,8 @@ function setHoveredFieldArea(box, mouse) {
     activeHoverField.value = candidate;
   }
 }
+let bufferInfo = null;
+let bufferChanged = false;
 onBlokkliEvent("canvas:draw", () => {
   const scale = ui.artboardScale.value;
   const offset = { ...ui.artboardOffset.value };
@@ -653,10 +642,9 @@ onBlokkliEvent("canvas:draw", () => {
     height: props.box.height / scale
   };
   const mouseAbsolute = toCanvasSpaceCoordinates(props.mouseX, props.mouseY);
-  if (gl && programInfo) {
-    gl.useProgram(programInfo.program);
-    animation.setSharedUniforms(gl, programInfo);
-  }
+  const result = collector.getBufferInfo();
+  bufferInfo = result.info;
+  bufferChanged = result.hasChanged;
   if (!props.isTouch) {
     if (cursorIsInsideClipped()) {
       const closest = collector.getClosestIntersectingRect(
@@ -668,44 +656,46 @@ onBlokkliEvent("canvas:draw", () => {
       active.value = null;
     }
   }
-  const { info, hasChanged } = collector.getBufferInfo();
-  if (programInfo && gl) {
-    setHoveredFieldArea(dragBox.value, mouseAbsolute);
-    setUniforms(programInfo, uniforms.value);
-    if (info) {
-      if (hasChanged && gl && programInfo) {
-        setBuffersAndAttributes(gl, programInfo, info);
-      }
-      if (gl) {
-        drawBufferInfo(gl, info, gl.TRIANGLES);
+  setHoveredFieldArea(dragBox.value, mouseAbsolute);
+  if (!gl && ctx) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    const rects = Object.values(collector.rects);
+    for (let i = 0; i < rects.length; i++) {
+      const rect = rects[i];
+      if (active.value?.id === rect.id) {
+        ctx.fillStyle = rect.color;
+      } else {
+        ctx.fillStyle = rect.colorAlpha;
       }
+      ctx.fillRect(
+        (rect.x * scale + offset.x) * animation.dpi.value,
+        (rect.y * scale + offset.y) * animation.dpi.value,
+        rect.width * animation.dpi.value * scale,
+        rect.height * animation.dpi.value * scale
+      );
     }
-    return;
-  }
-  if (!ctx) {
-    return;
-  }
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  const rects = Object.values(collector.rects);
-  for (let i = 0; i < rects.length; i++) {
-    const rect = rects[i];
-    if (active.value?.id === rect.id) {
-      ctx.fillStyle = rect.color;
-    } else {
-      ctx.fillStyle = rect.colorAlpha;
-    }
-    ctx.fillRect(
-      (rect.x * scale + offset.x) * animation.dpi.value,
-      (rect.y * scale + offset.y) * animation.dpi.value,
-      rect.width * animation.dpi.value * scale,
-      rect.height * animation.dpi.value * scale
-    );
   }
 });
+if (gl && programInfo) {
+  defineRenderer("drop-targets", {
+    zIndex: 400,
+    only: true,
+    cursor: () => "grabbing",
+    render: () => {
+      gl.useProgram(programInfo.program);
+      animation.setSharedUniforms(gl, programInfo);
+      setUniforms(programInfo, uniforms.value);
+      if (!bufferInfo) {
+        return;
+      }
+      if (bufferChanged) {
+        setBuffersAndAttributes(gl, programInfo, bufferInfo);
+      }
+      drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
+    }
+  });
+}
 onBeforeUnmount(() => {
-  if (gl) {
-    gl.clear(gl.COLOR_BUFFER_BIT);
-  }
   if (ctx) {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
   }

package/dist/runtime/components/Edit/Features/DraggingOverlay/DropTargets/index.vue.d.ts

@@ -1,4 +1,4 @@
-import type { DropTargetEvent, BlokkliFieldElement, DraggableItem, Rectangle } from '#blokkli/types';
+import type { DropTargetEvent, DraggableItem, Rectangle } from '#blokkli/types';
 type __VLS_Props = {
     items: DraggableItem[];
     box: Rectangle;
@@ -6,142 +6,13 @@ type __VLS_Props = {
     mouseY: number;
     isTouch: boolean;
 };
-type Orientation = 'horizontal' | 'vertical';
-type FieldRectChild = Rectangle & {
-    id: string;
-    label: string;
-};
-type FieldRect = Rectangle & {
-    key: string;
-    field: BlokkliFieldElement;
-    label: string;
-    canAddChildren: boolean;
-    emptyChild?: FieldRectChild;
-    orientation: Orientation;
-    gap: number;
-    childrenElements: HTMLElement[];
-};
-type DrawnRect = Rectangle & {
-    id: string;
-    type: 'field' | 'drop-area' | 'active-area';
-    label: string;
-    color: string;
-    colorAlpha: string;
-    field?: FieldRect;
-    index: number;
-};
-declare const active: import("vue").Ref<{
-    width: number;
-    height: number;
-    x: number;
-    y: number;
-    id: string;
-    type: "field" | "drop-area" | "active-area";
-    label: string;
-    color: string;
-    colorAlpha: string;
-    field?: {
-        width: number;
-        height: number;
-        x: number;
-        y: number;
-        key: string;
-        field: {
-            key: string;
-            name: string;
-            label: string;
-            isNested: boolean;
-            nestingLevel: number;
-            fieldListType: import("#blokkli-build/generated-types").ValidFieldListTypes;
-            hostEntityType: string;
-            hostEntityBundle: string;
-            hostEntityUuid: string;
-            allowedBundles: string[];
-            allowedFragments: string[];
-            cardinality: number;
-            element: HTMLElement;
-            dropAlignment?: "vertical" | "horizontal" | undefined;
-        };
-        label: string;
-        canAddChildren: boolean;
-        emptyChild?: {
-            width: number;
-            height: number;
-            x: number;
-            y: number;
-            id: string;
-            label: string;
-        } | undefined;
-        orientation: Orientation;
-        gap: number;
-        childrenElements: HTMLElement[];
-    } | undefined;
-    index: number;
-} | null, DrawnRect | {
-    width: number;
-    height: number;
-    x: number;
-    y: number;
-    id: string;
-    type: "field" | "drop-area" | "active-area";
-    label: string;
-    color: string;
-    colorAlpha: string;
-    field?: {
-        width: number;
-        height: number;
-        x: number;
-        y: number;
-        key: string;
-        field: {
-            key: string;
-            name: string;
-            label: string;
-            isNested: boolean;
-            nestingLevel: number;
-            fieldListType: import("#blokkli-build/generated-types").ValidFieldListTypes;
-            hostEntityType: string;
-            hostEntityBundle: string;
-            hostEntityUuid: string;
-            allowedBundles: string[];
-            allowedFragments: string[];
-            cardinality: number;
-            element: HTMLElement;
-            dropAlignment?: "vertical" | "horizontal" | undefined;
-        };
-        label: string;
-        canAddChildren: boolean;
-        emptyChild?: {
-            width: number;
-            height: number;
-            x: number;
-            y: number;
-            id: string;
-            label: string;
-        } | undefined;
-        orientation: Orientation;
-        gap: number;
-        childrenElements: HTMLElement[];
-    } | undefined;
-    index: number;
-} | null>;
-declare const activeColorHex: import("vue").ComputedRef<string>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_5: {
     color: string;
     label: string | undefined;
 };
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_5) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
-    active: typeof active;
-    activeColorHex: typeof activeColorHex;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    drop: (data: DropTargetEvent) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDrop?: ((data: DropTargetEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     drop: (data: DropTargetEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{

package/dist/runtime/components/Edit/Features/DraggingOverlay/DropTargets/vertex.glsl

@@ -1,4 +1,4 @@
-precision mediump float;
+precision highp float;
 
 attribute vec2 a_position;
 attribute vec4 a_quad;
@@ -17,6 +17,7 @@ uniform vec3 u_color_field_3;
 uniform vec3 u_color_area;
 uniform vec3 u_color_hover_area;
 uniform vec4 u_active_hover_rect;
+uniform float u_active_hover_nesting_level;
 uniform float u_dpi;
 
 varying vec4 v_quad;