@blokkli/editor 2.0.0-alpha.16 → 2.0.0-alpha.17

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

@@ -0,0 +1,417 @@
+<template>
+  <Teleport to="#bk-canvas-overlay">
+    <div
+      class="bk bk-add-button-tooltip"
+      :class="{ 'bk-is-field': tooltipData?.isField }"
+      :style="{
+  position: 'fixed',
+  left: (tooltipData?.x ?? 0) + 'px',
+  top: (tooltipData?.y ?? 0) + 'px',
+  transform: tooltipData?.transform ?? 'translate(0, 0)',
+  visibility: tooltipData ? 'visible' : 'hidden'
+}"
+    >
+      {{ tooltipData?.text ?? "" }}
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+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 vs from "./vertex.glsl?raw";
+import fs from "./fragment.glsl?raw";
+import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
+import { toShaderColor, getFieldKey } from "#blokkli/helpers";
+import {
+  getChildrenOrientation,
+  determineCanAddChildren
+} from "#blokkli/helpers/dropTargets";
+import { isInternalBundle } from "#blokkli/helpers/bundles";
+const { animation, theme, dom, selection, state, types, ui, $t } = useBlokkli();
+const emptyFieldTooltips = ref([]);
+const currentUuid = ref("");
+const currentBundleLabel = ref("");
+const currentSingleAllowedBundleLabel = ref(null);
+const tooltipData = computed(() => {
+  if (hoveredCircle.value < 0) {
+    return null;
+  }
+  const index = hoveredCircle.value;
+  const artboardX = circlePositions[index * 2];
+  const artboardY = circlePositions[index * 2 + 1];
+  if (artboardX === void 0 || artboardY === void 0) {
+    return null;
+  }
+  const scale = ui.artboardScale.value;
+  const offset = ui.artboardOffset.value;
+  const screenX = artboardX * scale + offset.x;
+  const screenY = artboardY * scale + offset.y;
+  let transform;
+  let position;
+  let text;
+  let isField = false;
+  if (index === 0 || index === 1) {
+    const orientation = currentOrientation.value;
+    if (currentSingleAllowedBundleLabel.value) {
+      if (index === 0) {
+        text = $t("addButtonBundleBefore", 'Add "@bundle" before').replace(
+          "@bundle",
+          currentSingleAllowedBundleLabel.value
+        );
+      } else {
+        text = $t("addButtonBundleAfter", 'Add "@bundle" after').replace(
+          "@bundle",
+          currentSingleAllowedBundleLabel.value
+        );
+      }
+    } else {
+      if (index === 0) {
+        text = $t("addButtonBeforeBundle", "Add before...");
+      } else {
+        text = $t("addButtonAfterBundle", "Add after...");
+      }
+    }
+    if (orientation === "horizontal") {
+      if (index === 0) {
+        transform = `translate(${TOOLTIP_MARGIN}px, -50%)`;
+        position = "right";
+      } else {
+        transform = `translate(calc(-100% - ${TOOLTIP_MARGIN}px), -50%)`;
+        position = "left";
+      }
+    } else {
+      if (index === 0) {
+        transform = `translate(-50%, ${TOOLTIP_MARGIN}px)`;
+        position = "bottom";
+      } else {
+        transform = `translate(-50%, calc(-100% - ${TOOLTIP_MARGIN}px))`;
+        position = "top";
+      }
+    }
+  } else {
+    transform = `translate(-50%, calc(-100% - ${TOOLTIP_MARGIN}px))`;
+    position = "top";
+    isField = true;
+    const fieldIndex = index - 2;
+    text = emptyFieldTooltips.value[fieldIndex] || "Add to field";
+  }
+  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();
+}
+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]);
+});
+const colorHover = computed(() => {
+  return toShaderColor(theme.accent.value[500]);
+});
+const colorField = computed(() => {
+  return toShaderColor(theme.accent.value[400]);
+});
+const colorFieldHover = computed(() => {
+  return toShaderColor(theme.accent.value[300]);
+});
+const orientationCache = /* @__PURE__ */ new Map();
+const currentOrientation = ref("horizontal");
+const blockStateCache = /* @__PURE__ */ new Map();
+function getOrientationForUuid(uuid) {
+  let cached = orientationCache.get(uuid);
+  if (!cached) {
+    const block = dom.findBlock(uuid);
+    if (block) {
+      const field = dom.findField(block.hostUuid, block.hostFieldName);
+      if (field) {
+        cached = getChildrenOrientation(field.element);
+        orientationCache.set(uuid, cached);
+      }
+    }
+  }
+  return cached || "horizontal";
+}
+function getBlockState(uuid) {
+  let cached = blockStateCache.get(uuid);
+  if (!cached) {
+    let canShowBeforeAfter = false;
+    let singleAllowedBundleLabel = null;
+    const block = dom.findBlock(uuid);
+    if (!block) {
+      return {
+        canShowBeforeAfter: false,
+        emptyFieldKeys: [],
+        emptyFieldTooltips: [],
+        bundleLabel: "",
+        singleAllowedBundleLabel: null
+      };
+    }
+    if (block) {
+      const field = dom.findField(block.hostUuid, block.hostFieldName);
+      if (!field) {
+        return {
+          canShowBeforeAfter: false,
+          emptyFieldKeys: [],
+          emptyFieldTooltips: [],
+          bundleLabel: "",
+          singleAllowedBundleLabel: null
+        };
+      }
+      if (field) {
+        const fieldChildren = [...field.element.children];
+        const currentCount = state.getFieldBlockCount(field.key);
+        canShowBeforeAfter = determineCanAddChildren(
+          field,
+          fieldChildren,
+          [],
+          // Not moving any blocks, adding a new one
+          currentCount,
+          1,
+          // Adding 1 new block
+          []
+          // Don't know which bundle will be added
+        );
+        const allowedBundles = field.allowedBundles.filter(
+          (bundle) => !isInternalBundle(bundle)
+        );
+        if (allowedBundles.length === 1) {
+          const bundle = allowedBundles[0];
+          if (bundle) {
+            singleAllowedBundleLabel = types.getBlockBundleDefinition(bundle)?.label || bundle;
+          }
+        }
+      }
+    }
+    const bundleLabel = block ? types.getBlockBundleDefinition(block.itemBundle)?.label || block.itemBundle : "";
+    const emptyFieldKeys = [];
+    const emptyFieldTooltips2 = [];
+    if (block) {
+      const fieldConfigs = types.fieldConfig.forEntityTypeAndBundle(
+        block.entityType,
+        block.itemBundle
+      );
+      for (const fieldConfig of fieldConfigs) {
+        const key = getFieldKey(uuid, fieldConfig.name);
+        const count = state.getFieldBlockCount(key);
+        if (count === 0) {
+          emptyFieldKeys.push(key);
+          const fieldLabel = fieldConfig.label || fieldConfig.name;
+          const fieldElement = dom.findField(uuid, fieldConfig.name);
+          if (fieldElement) {
+            const allowedBundles = fieldElement.allowedBundles.filter(
+              (bundle) => !isInternalBundle(bundle)
+            );
+            if (allowedBundles.length === 1) {
+              const bundle = allowedBundles[0];
+              if (bundle) {
+                const singleBundleLabel = types.getBlockBundleDefinition(bundle)?.label || bundle;
+                const tooltip = $t(
+                  "addButtonBundleInsideField",
+                  'Add "@bundle" inside @parentBundle \xBB @fieldLabel'
+                ).replace("@bundle", singleBundleLabel).replace("@parentBundle", bundleLabel).replace("@fieldLabel", fieldLabel);
+                emptyFieldTooltips2.push(tooltip);
+              } else {
+                emptyFieldTooltips2.push(
+                  $t(
+                    "addButtonInsideField",
+                    "Add inside @parentBundle \xBB @fieldLabel..."
+                  ).replace("@parentBundle", bundleLabel).replace("@fieldLabel", fieldLabel)
+                );
+              }
+            } else {
+              emptyFieldTooltips2.push(
+                $t(
+                  "addButtonInsideField",
+                  "Add inside @parentBundle \xBB @fieldLabel..."
+                ).replace("@parentBundle", bundleLabel).replace("@fieldLabel", fieldLabel)
+              );
+            }
+          } else {
+            emptyFieldTooltips2.push(
+              $t(
+                "addButtonInsideField",
+                "Add inside @parentBundle \xBB @fieldLabel..."
+              ).replace("@parentBundle", bundleLabel).replace("@fieldLabel", fieldLabel)
+            );
+          }
+        }
+      }
+    }
+    cached = {
+      canShowBeforeAfter,
+      emptyFieldKeys,
+      emptyFieldTooltips: emptyFieldTooltips2,
+      bundleLabel,
+      singleAllowedBundleLabel
+    };
+    blockStateCache.set(uuid, cached);
+  }
+  return cached;
+}
+onBlokkliEvent("state:reloaded", () => {
+  orientationCache.clear();
+  blockStateCache.clear();
+});
+function getCircleAtPoint(x, y) {
+  if (ui.artboardScale.value <= 0.4) {
+    return -1;
+  }
+  const effectiveScale = Math.max(ui.artboardScale.value, 0.5);
+  const radius = BUTTON_RADIUS / effectiveScale;
+  for (let i = 0; i < MAX_CIRCLES; i++) {
+    if (circleVisible[i] > 0) {
+      const cx = circlePositions[i * 2];
+      const cy = circlePositions[i * 2 + 1];
+      const dx = x - cx;
+      const dy = y - cy;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      if (distance <= radius) {
+        return i;
+      }
+    }
+  }
+  return -1;
+}
+if (gl && programInfo && bufferInfo) {
+  defineRenderer("add-buttons", {
+    zIndex: 1e3,
+    enabled: () => selection.uuids.value.length === 1,
+    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;
+      }
+      return false;
+    },
+    render: (ctx) => {
+      if (selection.isChangingOptions.value) {
+        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 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;
+        }
+      }
+      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
+      );
+      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>
+export default {
+  name: "AddButtonsRenderer"
+};
+</script>

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

@@ -0,0 +1,32 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    toggle: (data: {
+        position: "before" | "after";
+        coordinates: {
+            x: number;
+            y: number;
+        };
+    }) => any;
+    toggleField: (data: {
+        index: number;
+        coordinates: {
+            x: number;
+            y: number;
+        };
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onToggle?: ((data: {
+        position: "before" | "after";
+        coordinates: {
+            x: number;
+            y: number;
+        };
+    }) => any) | undefined;
+    onToggleField?: ((data: {
+        index: number;
+        coordinates: {
+            x: number;
+            y: number;
+        };
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,102 @@
+precision highp float;
+
+// [x, y] position.
+attribute vec2 a_position;
+// The [x,y,width, height] of the quad the vertex belongs to.
+attribute vec4 a_quad;
+attribute float a_rect_id;
+
+// The global scaling applied to all quads.
+uniform float u_scale;
+uniform float u_dpi;
+// The amount of pixels to offset on the x axis.
+uniform float u_offset_x;
+// The amount of pixels to offset on the y axis.
+uniform float u_offset_y;
+uniform vec2 u_resolution;
+
+// Circle positions (10 vec2s = 20 floats)
+uniform vec2 u_circle_positions[10];
+// Circle visibility (10 floats)
+uniform float u_circle_visible[10];
+// Hovered circle index (-1 for none)
+uniform float u_hovered_circle;
+// Button radius in pixels
+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;
+
+void main() {
+  int rectId = int(a_rect_id);
+
+  // Get circle position and visibility for this rect
+  vec2 circlePos = u_circle_positions[rectId];
+  v_visible = u_circle_visible[rectId];
+  v_is_hovered = float(rectId) == u_hovered_circle ? 1.0 : 0.0;
+  v_rect_id = a_rect_id;
+
+  // Calculate fade factor based on scale (fade from 1.0 at 0.5 to 0.0 at 0.4)
+  v_scale_fade = 1.0;
+  if (u_scale < 0.5) {
+    // Interpolate from 1.0 (at scale 0.5) to 0.0 (at scale 0.4)
+    v_scale_fade = (u_scale - 0.4) / (0.5 - 0.4);
+    v_scale_fade = clamp(v_scale_fade, 0.0, 1.0);
+  }
+
+  // Border width in pixels (must match fragment shader)
+  float borderWidth = 4.0;
+
+  // Circle radius in artboard space - apply inverse scaling to keep constant size
+  // Then multiply by fade factor
+  // Add border width to the radius so the border renders outside
+  float radius = (u_radius + borderWidth) / u_scale * v_scale_fade;
+
+  // Calculate quad bounds centered on circle position
+  float left = circlePos.x - radius;
+  float top = circlePos.y - radius;
+  float width = radius * 2.0;
+  float height = radius * 2.0;
+
+  // Determine which corner of the quad this vertex represents
+  // Normalize position within the dummy quad (0.0 to 1.0)
+  vec2 quadCorner = vec2(
+    (a_position.x - a_quad.x) / a_quad.z,
+    (a_position.y - a_quad.y) / a_quad.w
+  );
+
+  // Calculate actual vertex position in artboard space
+  vec2 vertexPos = vec2(
+    left + quadCorner.x * width,
+    top + quadCorner.y * height
+  );
+
+  // Apply global scale and offsets
+  vec2 offsetPosition = vertexPos * u_scale;
+  offsetPosition.x += u_offset_x;
+  offsetPosition.y += u_offset_y;
+
+  // Normalize position for rendering
+  vec2 normalizedPosition = offsetPosition / u_resolution;
+
+  // Transform to screen space (-1 to 1)
+  vec2 screenSpacePosition = normalizedPosition * 2.0 - vec2(1.0, 1.0);
+  screenSpacePosition.y = -screenSpacePosition.y;
+
+  // Output final position in clip space
+  gl_Position = vec4(screenSpacePosition, 0.0, 1.0) * u_dpi;
+
+  // Calculate transformed quad for fragment shader
+  v_quad = vec4(
+    (left * u_scale + u_offset_x) * u_dpi,
+    (u_resolution.y - top * u_scale - height * u_scale - u_offset_y) * u_dpi,
+    width * u_scale * u_dpi,
+    height * u_scale * u_dpi
+  );
+  v_circle_center = vec2(v_quad.x + v_quad.z / 2.0, v_quad.y + v_quad.w / 2.0);
+}