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

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Renderer/index.vue

@@ -20,7 +20,11 @@
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
 import { useBlokkli, computed, ref } from "#imports";
-import { setBuffersAndAttributes, drawBufferInfo, setUniforms } from "twgl.js";
+import {
+  setBuffersAndAttributes,
+  drawBufferInfo,
+  setUniforms
+} from "twgl.js";
 import vs from "./vertex.glsl?raw";
 import fs from "./fragment.glsl?raw";
 import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
@@ -113,44 +117,26 @@ const tooltipData = computed(() => {
   return { x: screenX, y: screenY, transform, position, text, isField };
 });
 const emit = defineEmits(["toggle", "toggleField"]);
-const gl = animation.gl();
-const programInfo = gl ? animation.registerProgram("add-buttons", gl, [vs, fs]) : null;
 const MAX_CIRCLES = 10;
 const BUTTON_RADIUS = 12;
 const TOOLTIP_MARGIN = 20;
-let bufferInfo = null;
-if (gl) {
-  class CircleBufferCollector extends RectangleBufferCollector {
-  }
-  const collector = new CircleBufferCollector(gl);
-  for (let i = 0; i < MAX_CIRCLES; i++) {
-    collector.addRectangle(
-      {
-        id: `circle-${i}`,
-        x: 0,
-        y: 0,
-        width: 40,
-        height: 40
-      },
-      i
-    );
-  }
-  bufferInfo = collector.createBufferInfo();
+class CircleBufferCollector extends RectangleBufferCollector {
 }
+let bufferInfoCache = null;
 const circlePositions = new Float32Array(MAX_CIRCLES * 2);
 const circleVisible = new Float32Array(MAX_CIRCLES);
 const hoveredCircle = ref(-1);
 const color = computed(() => {
-  return toShaderColor(theme.accent.value[600]);
+  return theme.accent.value[600];
 });
 const colorHover = computed(() => {
-  return toShaderColor(theme.accent.value[500]);
+  return theme.accent.value[500];
 });
 const colorField = computed(() => {
-  return toShaderColor(theme.accent.value[400]);
+  return theme.accent.value[400];
 });
 const colorFieldHover = computed(() => {
-  return toShaderColor(theme.accent.value[300]);
+  return theme.accent.value[300];
 });
 const orientationCache = /* @__PURE__ */ new Map();
 const currentOrientation = ref("horizontal");
@@ -310,127 +296,252 @@ function getCircleAtPoint(x, y) {
   }
   return -1;
 }
-if (gl && programInfo && bufferInfo) {
-  defineRenderer("add-buttons", {
-    zIndex: 1e3,
-    enabled: () => {
-      if (selection.uuids.value.length !== 1) {
-        return false;
-      }
-      if (ui.openTooltip.value && ui.openTooltip.value !== "add-buttons") {
-        return false;
-      }
-      if (ui.hasTransformOverlayOpen.value) {
-        return false;
+const { collector } = defineRenderer("add-buttons", {
+  zIndex: 1e3,
+  collector: () => {
+    const c = new CircleBufferCollector();
+    for (let i = 0; i < MAX_CIRCLES; i++) {
+      c.addRectangle(
+        {
+          id: `circle-${i}`,
+          x: 0,
+          y: 0,
+          width: 40,
+          height: 40
+        },
+        i
+      );
+    }
+    return c;
+  },
+  program: () => ({ shaders: [vs, fs] }),
+  enabled: () => {
+    if (selection.uuids.value.length !== 1) {
+      return false;
+    }
+    if (ui.openTooltip.value && ui.openTooltip.value !== "add-buttons") {
+      return false;
+    }
+    if (ui.hasTransformOverlayOpen.value) {
+      return false;
+    }
+    return true;
+  },
+  cursor: () => hoveredCircle.value >= 0 ? "pointer" : null,
+  onClick: ({ mouseArtboard }) => {
+    if (selection.uuids.value.length !== 1) {
+      return false;
+    }
+    const clickedCircle = getCircleAtPoint(mouseArtboard.x, mouseArtboard.y);
+    if (clickedCircle >= 0) {
+      const cx = circlePositions[clickedCircle * 2];
+      const cy = circlePositions[clickedCircle * 2 + 1];
+      if (clickedCircle === 0 || clickedCircle === 1) {
+        const position = clickedCircle === 0 ? "before" : "after";
+        emit("toggle", {
+          position,
+          coordinates: { x: cx, y: cy }
+        });
+      } else {
+        const fieldIndex = clickedCircle - 2;
+        emit("toggleField", {
+          index: fieldIndex,
+          coordinates: { x: cx, y: cy }
+        });
       }
       return true;
-    },
-    cursor: () => hoveredCircle.value >= 0 ? "pointer" : null,
-    onClick: ({ mouseArtboard }) => {
-      if (selection.uuids.value.length !== 1) {
-        return false;
+    }
+    return false;
+  },
+  render: (ctx, gl, program) => {
+    if (!bufferInfoCache) {
+      bufferInfoCache = collector.createBufferInfo(gl);
+    }
+    if (!bufferInfoCache) {
+      return;
+    }
+    circleVisible.fill(0);
+    if (ctx.selectedUuids.length !== 1) {
+      return;
+    }
+    const uuid = ctx.selectedUuids[0];
+    if (!uuid) {
+      return;
+    }
+    const blockState = getBlockState(uuid);
+    if (blockState.canShowBeforeAfter) {
+      const blockRect = dom.getBlockRect(uuid);
+      if (!blockRect || blockRect.width === 0) {
+        return;
       }
-      const clickedCircle = getCircleAtPoint(mouseArtboard.x, mouseArtboard.y);
-      if (clickedCircle >= 0) {
-        const cx = circlePositions[clickedCircle * 2];
-        const cy = circlePositions[clickedCircle * 2 + 1];
-        if (clickedCircle === 0 || clickedCircle === 1) {
-          const position = clickedCircle === 0 ? "before" : "after";
-          emit("toggle", {
-            position,
-            coordinates: { x: cx, y: cy }
-          });
-        } else {
-          const fieldIndex = clickedCircle - 2;
-          emit("toggleField", {
-            index: fieldIndex,
-            coordinates: { x: cx, y: cy }
-          });
-        }
-        return true;
+      const orientation = getOrientationForUuid(uuid);
+      currentOrientation.value = orientation;
+      const BUTTON_SHIFT = 2 / ctx.artboardScale;
+      if (orientation === "horizontal") {
+        circlePositions[0] = blockRect.x - BUTTON_SHIFT;
+        circlePositions[1] = blockRect.y + blockRect.height / 2;
+        circleVisible[0] = 1;
+        circlePositions[2] = blockRect.x + blockRect.width + BUTTON_SHIFT;
+        circlePositions[3] = blockRect.y + blockRect.height / 2;
+        circleVisible[1] = 1;
+      } else {
+        circlePositions[0] = blockRect.x + blockRect.width / 2;
+        circlePositions[1] = blockRect.y - BUTTON_SHIFT;
+        circleVisible[0] = 1;
+        circlePositions[2] = blockRect.x + blockRect.width / 2;
+        circlePositions[3] = blockRect.y + blockRect.height + BUTTON_SHIFT;
+        circleVisible[1] = 1;
       }
-      return false;
-    },
-    render: (ctx) => {
-      if (selection.isChangingOptions.value) {
-        return;
+    }
+    currentUuid.value = uuid;
+    currentBundleLabel.value = blockState.bundleLabel;
+    currentSingleAllowedBundleLabel.value = blockState.singleAllowedBundleLabel;
+    if (blockState.emptyFieldKeys.length > 0) {
+      emptyFieldTooltips.value = blockState.emptyFieldTooltips;
+      for (let i = 0; i < blockState.emptyFieldKeys.length && i < 8; i++) {
+        const fieldKey = blockState.emptyFieldKeys[i];
+        if (!fieldKey) {
+          continue;
+        }
+        const fieldRect = dom.getFieldRect(fieldKey);
+        if (!fieldRect) {
+          continue;
+        }
+        const circleIndex = i + 2;
+        circlePositions[circleIndex * 2] = fieldRect.x + fieldRect.width / 2;
+        circlePositions[circleIndex * 2 + 1] = fieldRect.y + fieldRect.height / 2;
+        circleVisible[circleIndex] = 1;
       }
-      circleVisible.fill(0);
-      if (ctx.selectedUuids.length !== 1) {
+    } else {
+      emptyFieldTooltips.value = [];
+    }
+    hoveredCircle.value = getCircleAtPoint(
+      ctx.mouseArtboard.x,
+      ctx.mouseArtboard.y
+    );
+    gl.useProgram(program.program);
+    setUniforms(program, {
+      u_circle_positions: circlePositions,
+      u_circle_visible: circleVisible,
+      u_color: toShaderColor(color.value),
+      u_color_hover: toShaderColor(colorHover.value),
+      u_color_field: toShaderColor(colorField.value),
+      u_color_field_hover: toShaderColor(colorFieldHover.value),
+      u_hovered_circle: hoveredCircle.value,
+      u_radius: BUTTON_RADIUS,
+      u_scale_transition: ctx.changeOptionsTransition
+    });
+    animation.setSharedUniforms(gl, program);
+    setBuffersAndAttributes(gl, program, bufferInfoCache);
+    drawBufferInfo(gl, bufferInfoCache, gl.TRIANGLES);
+  },
+  renderFallback: (ctx, ctx2d) => {
+    circleVisible.fill(0);
+    if (ctx.selectedUuids.length !== 1) {
+      return;
+    }
+    const uuid = ctx.selectedUuids[0];
+    if (!uuid) {
+      return;
+    }
+    const blockState = getBlockState(uuid);
+    if (blockState.canShowBeforeAfter) {
+      const blockRect = dom.getBlockRect(uuid);
+      if (!blockRect || blockRect.width === 0) {
         return;
       }
-      const uuid = ctx.selectedUuids[0];
-      if (!uuid) {
-        return;
+      const orientation = getOrientationForUuid(uuid);
+      currentOrientation.value = orientation;
+      const BUTTON_SHIFT = 2 / ctx.artboardScale;
+      if (orientation === "horizontal") {
+        circlePositions[0] = blockRect.x - BUTTON_SHIFT;
+        circlePositions[1] = blockRect.y + blockRect.height / 2;
+        circleVisible[0] = 1;
+        circlePositions[2] = blockRect.x + blockRect.width + BUTTON_SHIFT;
+        circlePositions[3] = blockRect.y + blockRect.height / 2;
+        circleVisible[1] = 1;
+      } else {
+        circlePositions[0] = blockRect.x + blockRect.width / 2;
+        circlePositions[1] = blockRect.y - BUTTON_SHIFT;
+        circleVisible[0] = 1;
+        circlePositions[2] = blockRect.x + blockRect.width / 2;
+        circlePositions[3] = blockRect.y + blockRect.height + BUTTON_SHIFT;
+        circleVisible[1] = 1;
       }
-      const blockState = getBlockState(uuid);
-      if (blockState.canShowBeforeAfter) {
-        const blockRect = dom.getBlockRect(uuid);
-        if (!blockRect || blockRect.width === 0) {
-          return;
+    }
+    currentUuid.value = uuid;
+    currentBundleLabel.value = blockState.bundleLabel;
+    currentSingleAllowedBundleLabel.value = blockState.singleAllowedBundleLabel;
+    if (blockState.emptyFieldKeys.length > 0) {
+      emptyFieldTooltips.value = blockState.emptyFieldTooltips;
+      for (let i = 0; i < blockState.emptyFieldKeys.length && i < 8; i++) {
+        const fieldKey = blockState.emptyFieldKeys[i];
+        if (!fieldKey) {
+          continue;
         }
-        const orientation = getOrientationForUuid(uuid);
-        currentOrientation.value = orientation;
-        const BUTTON_SHIFT = 2 / ctx.artboardScale;
-        if (orientation === "horizontal") {
-          circlePositions[0] = blockRect.x - BUTTON_SHIFT;
-          circlePositions[1] = blockRect.y + blockRect.height / 2;
-          circleVisible[0] = 1;
-          circlePositions[2] = blockRect.x + blockRect.width + BUTTON_SHIFT;
-          circlePositions[3] = blockRect.y + blockRect.height / 2;
-          circleVisible[1] = 1;
-        } else {
-          circlePositions[0] = blockRect.x + blockRect.width / 2;
-          circlePositions[1] = blockRect.y - BUTTON_SHIFT;
-          circleVisible[0] = 1;
-          circlePositions[2] = blockRect.x + blockRect.width / 2;
-          circlePositions[3] = blockRect.y + blockRect.height + BUTTON_SHIFT;
-          circleVisible[1] = 1;
+        const fieldRect = dom.getFieldRect(fieldKey);
+        if (!fieldRect) {
+          continue;
         }
+        const circleIndex = i + 2;
+        circlePositions[circleIndex * 2] = fieldRect.x + fieldRect.width / 2;
+        circlePositions[circleIndex * 2 + 1] = fieldRect.y + fieldRect.height / 2;
+        circleVisible[circleIndex] = 1;
       }
-      currentUuid.value = uuid;
-      currentBundleLabel.value = blockState.bundleLabel;
-      currentSingleAllowedBundleLabel.value = blockState.singleAllowedBundleLabel;
-      if (blockState.emptyFieldKeys.length > 0) {
-        emptyFieldTooltips.value = blockState.emptyFieldTooltips;
-        for (let i = 0; i < blockState.emptyFieldKeys.length && i < 8; i++) {
-          const fieldKey = blockState.emptyFieldKeys[i];
-          if (!fieldKey) {
-            continue;
-          }
-          const fieldRect = dom.getFieldRect(fieldKey);
-          if (!fieldRect) {
-            continue;
-          }
-          const circleIndex = i + 2;
-          circlePositions[circleIndex * 2] = fieldRect.x + fieldRect.width / 2;
-          circlePositions[circleIndex * 2 + 1] = fieldRect.y + fieldRect.height / 2;
-          circleVisible[circleIndex] = 1;
-        }
+    } else {
+      emptyFieldTooltips.value = [];
+    }
+    hoveredCircle.value = getCircleAtPoint(
+      ctx.mouseArtboard.x,
+      ctx.mouseArtboard.y
+    );
+    const rgbToCss = (rgb) => {
+      return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+    };
+    const borderWidth = 2 * ctx.dpi;
+    const radius = BUTTON_RADIUS * ctx.dpi * ctx.changeOptionsTransition;
+    const innerRadius = radius - borderWidth;
+    for (let i = 0; i < MAX_CIRCLES; i++) {
+      if (circleVisible[i] <= 0) {
+        continue;
+      }
+      const artboardX = circlePositions[i * 2];
+      const artboardY = circlePositions[i * 2 + 1];
+      const viewportX = (artboardX * ctx.artboardScale + ctx.artboardOffset.x) * ctx.dpi;
+      const viewportY = (artboardY * ctx.artboardScale + ctx.artboardOffset.y) * ctx.dpi;
+      const isFieldButton = i >= 2;
+      const isHovered = hoveredCircle.value === i;
+      let fillColor;
+      if (isFieldButton) {
+        fillColor = isHovered ? colorFieldHover.value : colorField.value;
       } else {
-        emptyFieldTooltips.value = [];
+        fillColor = isHovered ? colorHover.value : color.value;
       }
-      hoveredCircle.value = getCircleAtPoint(
-        ctx.mouseArtboard.x,
-        ctx.mouseArtboard.y
+      ctx2d.fillStyle = rgbToCss(fillColor);
+      ctx2d.strokeStyle = "rgb(255, 255, 255)";
+      ctx2d.lineWidth = borderWidth;
+      ctx2d.beginPath();
+      ctx2d.arc(viewportX, viewportY, radius, 0, Math.PI * 2);
+      ctx2d.fill();
+      ctx2d.stroke();
+      const plusThickness = (ctx.dpi <= 0.5 ? 1.25 : 1.5) * ctx.dpi;
+      const plusLength = innerRadius * 0.5;
+      ctx2d.fillStyle = "rgb(255, 255, 255)";
+      ctx2d.fillRect(
+        viewportX - plusLength,
+        viewportY - plusThickness,
+        plusLength * 2,
+        plusThickness * 2
+      );
+      ctx2d.fillRect(
+        viewportX - plusThickness,
+        viewportY - plusLength,
+        plusThickness * 2,
+        plusLength * 2
       );
-      gl.useProgram(programInfo.program);
-      setUniforms(programInfo, {
-        u_circle_positions: circlePositions,
-        u_circle_visible: circleVisible,
-        u_color: color.value,
-        u_color_hover: colorHover.value,
-        u_color_field: colorField.value,
-        u_color_field_hover: colorFieldHover.value,
-        u_hovered_circle: hoveredCircle.value,
-        u_radius: BUTTON_RADIUS
-      });
-      animation.setSharedUniforms(gl, programInfo);
-      setBuffersAndAttributes(gl, programInfo, bufferInfo);
-      drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
     }
-  });
-}
+  }
+});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Renderer/vertex.glsl

@@ -1,10 +1,12 @@
+#version 300 es
+
 precision highp float;
 
 // [x, y] position.
-attribute vec2 a_position;
+in vec2 a_position;
 // The [x,y,width, height] of the quad the vertex belongs to.
-attribute vec4 a_quad;
-attribute float a_rect_id;
+in vec4 a_quad;
+in float a_rect_id;
 
 // The global scaling applied to all quads.
 uniform float u_scale;
@@ -14,6 +16,8 @@ uniform float u_offset_x;
 // The amount of pixels to offset on the y axis.
 uniform float u_offset_y;
 uniform vec2 u_resolution;
+// Scale transition for change options animation
+uniform float u_scale_transition;
 
 // Circle positions (10 vec2s = 20 floats)
 uniform vec2 u_circle_positions[10];
@@ -25,12 +29,15 @@ uniform float u_hovered_circle;
 uniform float u_radius;
 
 // The transformed quad for the fragment shader.
-varying vec4 v_quad;
-varying vec2 v_circle_center;
-varying float v_visible;
-varying float v_is_hovered;
-varying float v_scale_fade;
-varying float v_rect_id;
+out vec4 v_quad;
+out vec2 v_circle_center;
+out float v_visible;
+out float v_is_hovered;
+out float v_scale_fade;
+out float v_rect_id;
+out float v_radius;
+out float v_inner_radius;
+out float v_scale_factor;
 
 void main() {
   int rectId = int(a_rect_id);
@@ -49,13 +56,23 @@ void main() {
     v_scale_fade = clamp(v_scale_fade, 0.0, 1.0);
   }
 
+  // Combined scale factor for fragment shader
+  v_scale_factor = v_scale_fade * u_scale_transition;
+
   // Border width in pixels (must match fragment shader)
-  float borderWidth = 4.0;
+  float borderWidth = 2.0;
 
   // Circle radius in artboard space - apply inverse scaling to keep constant size
-  // Then multiply by fade factor
+  // Then multiply by fade factor and scale transition
   // Add border width to the radius so the border renders outside
-  float radius = (u_radius + borderWidth) / u_scale * v_scale_fade;
+  float radius =
+    (u_radius + borderWidth) / u_scale * v_scale_fade * u_scale_transition;
+  float innerRadius =
+    (u_radius - borderWidth) / u_scale * v_scale_fade * u_scale_transition;
+
+  // Pass scaled radii to fragment shader (in viewport pixels)
+  v_radius = radius * u_scale * u_dpi;
+  v_inner_radius = innerRadius * u_scale * u_dpi;
 
   // Calculate quad bounds centered on circle position
   float left = circlePos.x - radius;

package/dist/runtime/components/Edit/Features/Selection/AddButtons/index.vue

@@ -15,13 +15,20 @@
     </BlokkliTransition>
   </Teleport>
 
-  <Renderer @toggle="onRendererToggle" @toggle-field="onRendererToggleField" />
+  <ErrorBoundary v-model="isLocked" label="Add Buttons">
+    <Renderer
+      v-if="!isLocked"
+      :key="animation.renderKey.value"
+      @toggle="onRendererToggle"
+      @toggle-field="onRendererToggleField"
+    />
+  </ErrorBoundary>
 </template>
 
 <script setup>
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import { computed, useBlokkli, ref, watch } from "#imports";
-import { BlokkliTransition } from "#blokkli/components";
+import { BlokkliTransition, ErrorBoundary } from "#blokkli/components";
 import {
   getChildrenOrientation,
   getGapSize,
@@ -37,7 +44,8 @@ import { itemEntityType } from "#blokkli-build/config";
 const props = defineProps({
   items: { type: Array, required: true }
 });
-const { dom, state, eventBus, types, $t, blocks, fields } = useBlokkli();
+const { dom, state, eventBus, types, $t, blocks, fields, animation } = useBlokkli();
+const isLocked = ref(false);
 const shouldRender = computed(() => {
   return props.items.length === 1;
 });
@@ -322,7 +330,7 @@ function getPreceedingUuidBefore(uuid2, field) {
     if (!child) {
       continue;
     }
-    const childUuid = child.dataset.uuid;
+    const childUuid = child.dataset.bkUuid;
     if (childUuid === uuid2) {
       return prevUuid;
     }

package/dist/runtime/components/Edit/Features/Selection/{Overlay → Renderer}/fragment.glsl

@@ -1,19 +1,27 @@
+#version 300 es
+
 precision highp float;
 
-varying vec4 v_quad;
-varying vec3 v_color;
-varying vec4 v_rect_radius;
-varying float v_thickness;
-varying float v_rect_id;
-varying vec2 v_rect_size;
-varying vec2 v_rect_center;
-varying float v_rect_width;
-
-varying float v_transition;
-uniform float u_scale;
+in vec4 v_quad;
+in vec3 v_color;
+in vec4 v_rect_radius;
+in float v_thickness;
+in float v_rect_id;
+in vec2 v_rect_size;
+in vec2 v_rect_center;
+in float v_rect_width;
+
+in float v_transition;
+// Optimized varyings calculated in vertex shader
+in float v_stripe_distance;
+in vec4 v_base_scaled_radius;
+
+out vec4 fragColor;
+
 uniform float u_dpi;
 uniform float u_time;
 uniform float u_is_transforming;
+uniform float u_opacity;
 uniform vec2 u_resolution;
 
 #define PI 3.141592653589793
@@ -60,7 +68,7 @@ float exponentialIn(float t) {
 }
 
 float getStripePattern(vec2 quadRelativePos, float time) {
-  float d = 300.0 * u_scale;
+  float d = v_stripe_distance;
 
   float t = mod(u_time + v_rect_id * 1000.0, 1200.0) / 1200.0;
 
@@ -87,7 +95,7 @@ vec4 drawBox(float thickness, vec4 bg, vec4 fill, vec4 border, float offset) {
 
   vec2 size = v_rect_size + borderThickness * 2.0 * v_transition;
   float u_edgeSoftness = 1.0 + v_transition;
-  vec4 radius = v_rect_radius * u_scale + vec4(borderThickness);
+  vec4 radius = v_base_scaled_radius + vec4(borderThickness);
   vec4 u_cornerRadii = min(radius, min(size.x, size.y) / 2.0) * v_transition;
   float u_borderSoftness = 1.0 + v_transition;
 
@@ -134,5 +142,6 @@ void main() {
   );
 
   vec4 finalColor = mix(borderBottom, borderTop, borderTop.a);
-  gl_FragColor = finalColor;
+  finalColor.a *= u_opacity;
+  fragColor = finalColor;
 }