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

package/dist/runtime/components/Edit/Features/DraggingOverlay/{DropTargets → Renderer}/index.vue

@@ -15,7 +15,7 @@ import {
 } 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 { ref, computed, useBlokkli } from "#imports";
 import {
   setBuffersAndAttributes,
   drawBufferInfo,
@@ -64,10 +64,6 @@ const {
   types,
   fields
 } = useBlokkli();
-const gl = animation.gl();
-const canvas = animation.getCanvasElement();
-const ctx = !gl && canvas ? canvas.getContext("2d") : null;
-const programInfo = gl ? animation.registerProgram("drop_targets", gl, [vs, fs]) : null;
 const areas = dropAreas.getDropAreas(props.items).reduce((acc, v) => {
   acc[v.id] = v;
   return acc;
@@ -189,7 +185,7 @@ const buildChildren = (field, visible) => {
     if (!(el instanceof HTMLElement)) {
       continue;
     }
-    const uuid = el.dataset.uuid;
+    const uuid = el.dataset.bkUuid;
     if (!uuid) {
       continue;
     }
@@ -371,7 +367,7 @@ const buildDropAreaRect = (area) => {
   cachedDropAreaRects[area.id] = dropAreaRect;
   return dropAreaRect;
 };
-const alphaBase = gl ? 0.7 : 0.3;
+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]);
@@ -387,7 +383,7 @@ function getRectType(field) {
   return 1 /* FIELD_1 */;
 }
 class DropTargetRectangleBufferCollector extends RectangleBufferCollector {
-  getBufferInfo() {
+  getBufferInfo(gl) {
     const visibleFields = dom.getVisibleFields();
     const visibleBlocks = dom.getVisibleBlocks();
     const lengthBefore = this.positions.length;
@@ -450,8 +446,8 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector {
     }
     this.processPendingRects();
     const hasChanged = lengthBefore !== this.positions.length;
-    if (hasChanged) {
-      this.bufferInfo = this.createBufferInfo();
+    if (hasChanged && gl) {
+      this.bufferInfo = this.createBufferInfo(gl);
     }
     return { info: this.bufferInfo, hasChanged };
   }
@@ -488,26 +484,6 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector {
     return null;
   }
 }
-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],
@@ -632,72 +608,109 @@ function setHoveredFieldArea(box, mouse) {
 }
 let bufferInfo = null;
 let bufferChanged = false;
-onBlokkliEvent("canvas:draw", () => {
-  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();
-  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;
+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
+      },
+      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);
-  if (!gl && ctx) {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    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;
+      }
       if (active.value?.id === rect.id) {
-        ctx.fillStyle = rect.color;
+        ctx2d.fillStyle = rect.color;
       } else {
-        ctx.fillStyle = rect.colorAlpha;
+        ctx2d.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
+      ctx2d.fillRect(
+        (rect.x * scale + offset.x) * ctx.dpi,
+        (rect.y * scale + offset.y) * ctx.dpi,
+        rect.width * ctx.dpi * scale,
+        rect.height * ctx.dpi * 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 (ctx) {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-  }
-});
 </script>

package/dist/runtime/components/Edit/Features/DraggingOverlay/{DropTargets → Renderer}/vertex.glsl

@@ -1,9 +1,11 @@
+#version 300 es
+
 precision highp float;
 
-attribute vec2 a_position;
-attribute vec4 a_quad;
-attribute float a_rect_id;
-attribute float a_rect_type;
+in vec2 a_position;
+in vec4 a_quad;
+in float a_rect_id;
+in float a_rect_type;
 
 uniform float u_scale;
 uniform float u_offset_x;
@@ -20,10 +22,19 @@ uniform vec4 u_active_hover_rect;
 uniform float u_active_hover_nesting_level;
 uniform float u_dpi;
 
-varying vec4 v_quad;
-varying float v_intersecting;
-varying float v_is_hover_area;
-varying vec3 v_color;
+out vec4 v_quad;
+out float v_intersecting;
+out float v_is_hover_area;
+out vec3 v_color;
+
+// Optimized varyings - values computed once per vertex instead of per pixel
+out vec2 v_size;
+out vec2 v_location;
+out vec2 v_size_inner;
+out float v_thickness;
+out float v_edge_softness;
+out float v_radius_outer;
+out float v_radius_inner;
 
 vec4 getQuad() {
   if (a_rect_type >= 5.0) {
@@ -75,4 +86,36 @@ void main() {
   } else {
     v_color = u_color_hover_area;
   }
+
+  // Compute values that are constant per quad (optimization)
+  bool isHoverArea = v_is_hover_area >= 1.0;
+  float stroke = isHoverArea ? 0.75 : 2.0;
+  float radiusBase = stroke * u_scale;
+
+  v_thickness = max(min(1.0 * u_scale, 3.0), 0.5);
+
+  // Calculate inset to draw border inside the quad
+  float inset = max(min(2.0 * u_scale, 1.0), 3.0) * v_thickness + stroke;
+
+  // Rectangle dimensions with inset
+  float u_rect_x = transformed_quad.x + inset;
+  float u_rect_y = transformed_quad.y + inset;
+  float u_rectWidth = transformed_quad.z - 2.0 * inset;
+  float u_rectHeight = transformed_quad.w - 2.0 * inset;
+
+  v_size = vec2(u_rectWidth, u_rectHeight);
+
+  // Center position of the rectangle
+  v_location = vec2(u_rect_x + v_size.x / 2.0, u_rect_y + v_size.y / 2.0);
+
+  v_edge_softness = 0.5 * u_dpi;
+
+  float borderWidth = stroke * u_scale * u_dpi;
+
+  // Different radius for inner and outer
+  v_radius_outer =
+    min(radiusBase * u_dpi, min(v_size.x, v_size.y)) + v_thickness;
+  v_radius_inner = v_radius_outer - borderWidth;
+
+  v_size_inner = v_size - 2.0 * borderWidth;
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <DropTargets
+  <Renderer
     v-if="dragItems.length && isVisible"
     v-slot="{ color, label }"
     :items="dragItems"
@@ -18,12 +18,12 @@
       :active-color="color"
       :active-label="label"
     />
-  </DropTargets>
+  </Renderer>
 </template>
 
 <script setup>
 import DragItems from "./DragItems/index.vue";
-import DropTargets from "./DropTargets/index.vue";
+import Renderer from "./Renderer/index.vue";
 import {
   ref,
   useBlokkli,

package/dist/runtime/components/Edit/Features/EditableField/Overlay/index.vue

@@ -166,9 +166,6 @@ const close = async () => {
       el.textContent = originalText.value;
     }
   }
-  if (el) {
-    el.dataset.blokkliEditableActive = void 0;
-  }
 };
 watch(modelValue, (newText) => {
   if (props.element && selection.editableActive.value && !props.isComponent) {
@@ -232,7 +229,6 @@ onMounted(() => {
   }
   originalText.value = modelValue.value;
   selection.editableActive.value = true;
-  el.dataset.blokkliEditableActive = "true";
   const computedStyle = window.getComputedStyle(el);
   inputStyle.value = {
     textAlign: computedStyle.textAlign
@@ -246,8 +242,6 @@ onMounted(() => {
   });
 });
 onBeforeUnmount(async () => {
-  const el = getElement();
   await close();
-  el.dataset.blokkliEditableActive = void 0;
 });
 </script>

package/dist/runtime/components/Edit/Features/EditableField/index.vue

@@ -85,12 +85,16 @@ const buildEditable = (fieldName, uuid) => {
   if (!(element instanceof HTMLElement)) {
     return;
   }
+  const editable = directive.findEditable(fieldName, host);
+  if (!editable) {
+    return;
+  }
   return {
     fieldName,
     host,
     element,
-    isComponent: element.dataset.blokkliEditableComponent === "true",
-    value: element.dataset.blokkliEditableValue || "",
+    isComponent: editable.isComponent,
+    value: editable.getValue ? editable.getValue() : "",
     config
   };
 };

package/dist/runtime/components/Edit/Features/Fragments/Dialog/Item/index.vue

@@ -10,11 +10,7 @@
       :class="backgroundClass"
     >
       <ScaleToFit :width="previewWidth" :max-height="500">
-        <BlokkliItem
-          v-bind="item"
-          parent-type="nested"
-          class="bk-drop-element"
-        />
+        <BlokkliItem v-bind="item" parent-type="nested" />
       </ScaleToFit>
     </div>
   </div>

package/dist/runtime/components/Edit/Features/Hover/Renderer/fragment.glsl

@@ -0,0 +1,141 @@
+#version 300 es
+
+precision highp float;
+
+in vec4 v_quad;
+in vec4 v_rect_radius;
+in vec2 v_rect_size;
+in vec2 v_rect_center;
+in float v_rect_type;
+in vec2 v_quad_artboard_pos;
+// Optimized varyings calculated in vertex shader
+in vec4 v_corner_radii;
+in float v_border_thickness;
+in vec2 v_half_size;
+in vec3 v_color;
+in float v_dash_cycle;
+in vec2 v_rect_size_artboard;
+
+out vec4 fragColor;
+
+uniform float u_opacity;
+
+int pseudoQuadrant(vec2 p) {
+  return int(floor(step(0.0, p.x) + 2.0 * step(0.0, -p.y)));
+}
+
+float sdRoundBox(vec2 p, vec2 b, vec4 radii) {
+  int idx = pseudoQuadrant(p);
+  float cr;
+  if (idx == 0) cr = radii[0];
+  else if (idx == 1) cr = radii[1];
+  else if (idx == 2) cr = radii[3];
+  else cr = radii[2];
+  vec2 q = abs(p) - b + cr;
+  return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - cr;
+}
+
+void main() {
+  vec2 posRelativeToQuad = gl_FragCoord.xy - v_rect_center;
+
+  float mainDist = sdRoundBox(posRelativeToQuad, v_half_size, v_corner_radii);
+
+  // For editable fields (type 2), render both fill and solid border
+  if (v_rect_type > 1.5 && v_rect_type < 2.5) {
+    float u_edgeSoftness = 1.0;
+    float u_borderSoftness = 1.0;
+
+    // Render fill
+    float fillAlpha = 1.0 - smoothstep(-u_edgeSoftness, 0.0, mainDist);
+    vec4 fillColor = vec4(v_color, 0.2);
+
+    // Render solid border (non-dashed)
+    float borderAlpha =
+      1.0 -
+      smoothstep(-u_borderSoftness, 0.0, abs(mainDist) - v_border_thickness);
+    vec4 borderColor = vec4(v_color, 1.0);
+
+    // Combine fill and border
+    vec4 combined = mix(
+      vec4(fillColor.rgb, fillAlpha * fillColor.a),
+      borderColor,
+      borderAlpha * borderColor.a
+    );
+
+    combined.a *= u_opacity;
+    fragColor = combined;
+    return;
+  }
+
+  // For blocks (type 0, 1, and 3), render border
+  float u_borderSoftness = 1.0;
+
+  float borderAlpha =
+    1.0 -
+    smoothstep(-u_borderSoftness, 0.0, abs(mainDist) - v_border_thickness);
+
+  // Apply dashed pattern for all blocks
+  // Calculate perimeter distance in artboard space for scale-independent dashing
+
+  // Convert pixel position from viewport to artboard space
+  vec2 viewportToArtboardRatio = v_rect_size_artboard / v_rect_size;
+  vec2 posRelativeToQuad_artboard = posRelativeToQuad * viewportToArtboardRatio;
+
+  // Get artboard-space half dimensions
+  vec2 halfSize_artboard = v_rect_size_artboard / 2.0;
+
+  // Convert from center-relative to top-left-relative coordinates
+  vec2 posFromTopLeft = posRelativeToQuad_artboard + halfSize_artboard;
+
+  // Clamp to rect bounds to avoid edge issues
+  vec2 p = clamp(posFromTopLeft, vec2(0.0), v_rect_size_artboard);
+
+  // Two continuous dash paths anchored to visual top-left:
+  // Path 1: TOP (left→right) → RIGHT (top→bottom)
+  // Path 2: LEFT (top→bottom) → BOTTOM (left→right)
+  float perimeterDistance = 0.0;
+  float width = v_rect_size_artboard.x;
+  float height = v_rect_size_artboard.y;
+
+  // Determine which edge we're on based on distance to edges
+  vec2 absP = abs(posRelativeToQuad_artboard);
+  float dx = absP.x - halfSize_artboard.x;
+  float dy = absP.y - halfSize_artboard.y;
+
+  if (dy > dx) {
+    // Closer to top or bottom edge
+    if (posRelativeToQuad_artboard.y > 0.0) {
+      // Visual TOP edge: starts at top-left, goes left to right
+      perimeterDistance = p.x;
+    } else {
+      // Visual BOTTOM edge: continues from LEFT edge, then goes left to right
+      perimeterDistance = height + p.x;
+    }
+  } else {
+    // Closer to left or right edge
+    if (posRelativeToQuad_artboard.x < 0.0) {
+      // Visual LEFT edge: starts at visual top-left (0 at top, height at bottom)
+      perimeterDistance = height - p.y;
+    } else {
+      // Visual RIGHT edge: continues from TOP edge (width at visual top, width+height at visual bottom)
+      perimeterDistance = width + (height - p.y);
+    }
+  }
+
+  float dashPosition = mod(perimeterDistance, v_dash_cycle);
+  // dashWidth = v_dash_cycle / 2.0 (since dashWidth = dashGap = 7.0, dashCycle = 14.0)
+  float dashFactor = step(dashPosition, v_dash_cycle / 2.0);
+
+  // Only show dashes...
+  borderAlpha *= dashFactor;
+
+  vec4 borderColor = vec4(v_color, 1.0);
+  vec4 finalColor = mix(
+    vec4(0.0, 0.0, 0.0, 0.0),
+    borderColor,
+    borderAlpha * borderColor.a
+  );
+
+  finalColor.a *= u_opacity;
+  fragColor = finalColor;
+}