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

package/dist/runtime/helpers/animationProvider.d.ts

@@ -2,6 +2,24 @@ import { type ComputedRef, type WritableComputedRef } from '#imports';
 import type { UiProvider } from './uiProvider.js';
 import { type ProgramInfo } from 'twgl.js';
 import type { StorageProvider } from './storageProvider.js';
+import type { CursorKeyword } from './dom/index.js';
+import type { CanvasDrawEvent, Coord } from '#blokkli/types';
+import type { SelectionProvider } from './selectionProvider.js';
+export type RenderContext = CanvasDrawEvent & {
+    gl: WebGLRenderingContext;
+};
+export type Renderer = {
+    id: string;
+    zIndex: number;
+    enabled?: () => boolean;
+    only?: boolean | (() => boolean);
+    cursor?: () => CursorKeyword | undefined | null;
+    onClick?: (coord: {
+        mouse: Coord;
+        mouseArtboard: Coord;
+    }) => boolean | undefined;
+    render: (ctx: RenderContext) => void;
+};
 export type AnimationProvider = {
     /**
      * Request an animation loop. Should be called when UI state changes.
@@ -23,5 +41,20 @@ export type AnimationProvider = {
      */
     registerProgram: (id: string, gl: WebGLRenderingContext, shaders: string[]) => ProgramInfo;
     setMouseCoords: (x: number, y: number) => void;
+    cursor: ComputedRef<CursorKeyword>;
+    /**
+     * Handle a click event by calling onClick handlers on renderers.
+     * Returns true if any renderer claimed the click, false otherwise.
+     */
+    handleClick: (x: number, y: number) => boolean;
+    /**
+     * Register a WebGL renderer with a specific zIndex.
+     * Returns an unregister function.
+     */
+    registerRenderer: (id: string, config: Omit<Renderer, 'id'>) => () => void;
+    /**
+     * Unregister a WebGL renderer.
+     */
+    unregisterRenderer: (id: string) => void;
 };
-export default function (ui: UiProvider, storage: StorageProvider): AnimationProvider;
+export default function (ui: UiProvider, storage: StorageProvider, selection: SelectionProvider): AnimationProvider;

package/dist/runtime/helpers/animationProvider.js

@@ -8,13 +8,81 @@ import {
 } from "#imports";
 import { eventBus } from "#blokkli/helpers/eventBus";
 import { createProgramInfo } from "twgl.js";
-export default function(ui, storage) {
+export default function(ui, storage, selection) {
   const webglEnabled = storage.use("webglEnabled", true);
+  const currentCursor = ref("default");
+  const cursor = computed(() => currentCursor.value);
+  const renderers = /* @__PURE__ */ new Map();
+  function registerRenderer(id, config) {
+    renderers.set(id, { id, ...config });
+    return () => unregisterRenderer(id);
+  }
+  function unregisterRenderer(id) {
+    renderers.delete(id);
+  }
+  function handleClick(x, y) {
+    const sortedRenderers = Array.from(renderers.values()).filter((renderer) => !renderer.enabled || renderer.enabled()).sort((a, b) => b.zIndex - a.zIndex);
+    const artboardOffset = ui.artboardOffset.value;
+    const artboardScale = ui.artboardScale.value;
+    const mouseArtboard = {
+      x: (x - artboardOffset.x) / artboardScale,
+      y: (y - artboardOffset.y) / artboardScale
+    };
+    for (const renderer of sortedRenderers) {
+      if (renderer.onClick) {
+        const claimed = renderer.onClick({
+          mouse: { x, y },
+          mouseArtboard
+        });
+        if (claimed === true) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
   let mouseX = 0;
   let mouseY = 0;
   let iterator = 120;
   const webglSupported = ref(null);
+  const maxCanvasWidth = ref(16384);
+  const maxCanvasHeight = ref(16384);
+  let webglLimitsQueried = false;
+  function getCanvasElement() {
+    const el = document.querySelector("#bk-animation-canvas-webgl");
+    if (!(el instanceof HTMLCanvasElement)) {
+      throw new TypeError("Failed to locate WebGL canvas.");
+    }
+    return el;
+  }
+  function gl() {
+    if (!webglEnabled.value) {
+      return;
+    }
+    if (webglSupported.value === false) {
+      return;
+    }
+    const canvas = getCanvasElement();
+    const glContext = canvas.getContext("webgl2", {
+      premultipliedAlpha: true
+    });
+    if (!glContext) {
+      webglSupported.value = false;
+      return;
+    }
+    webglSupported.value = true;
+    if (!webglLimitsQueried) {
+      const maxViewportDims = glContext.getParameter(
+        glContext.MAX_VIEWPORT_DIMS
+      );
+      maxCanvasWidth.value = maxViewportDims[0] || 16384;
+      maxCanvasHeight.value = maxViewportDims[1] || 16384;
+      webglLimitsQueried = true;
+    }
+    return glContext;
+  }
   useAnimationFrame((time) => {
+    const selectedUuids = [...selection.uuids.value];
     if (iterator < 1) {
       return;
     }
@@ -26,10 +94,79 @@ export default function(ui, storage) {
       fieldAreas: [],
       time
     });
+    const glContext = gl();
+    if (glContext) {
+      glContext.enable(glContext.BLEND);
+      glContext.blendFunc(glContext.SRC_ALPHA_SATURATE, glContext.ONE);
+      glContext.blendEquation(glContext.FUNC_ADD);
+      glContext.clearColor(0, 0, 0, 0);
+      glContext.clear(glContext.COLOR_BUFFER_BIT);
+    }
+    const sortedRenderers = Array.from(renderers.values()).sort(
+      (a, b) => a.zIndex - b.zIndex
+    );
+    let onlyRenderer = null;
+    for (const renderer of sortedRenderers) {
+      if (!renderer.enabled || renderer.enabled()) {
+        const onlyValue = typeof renderer.only === "function" ? renderer.only() : renderer.only;
+        if (onlyValue) {
+          onlyRenderer = renderer;
+          break;
+        }
+      }
+    }
+    const artboardOffset = ui.artboardOffset.value;
+    const artboardScale = ui.artboardScale.value;
+    const artboardSize = ui.artboardSize.value;
+    const mouseArtboard = {
+      x: (mouseX - artboardOffset.x) / artboardScale,
+      y: (mouseY - artboardOffset.y) / artboardScale
+    };
+    const ctx = {
+      gl: glContext,
+      time,
+      mouseX,
+      mouseY,
+      mouseArtboard,
+      artboardOffset,
+      artboardScale,
+      artboardSize,
+      selectedUuids
+    };
+    if (onlyRenderer) {
+      const glContext2 = gl();
+      if (glContext2) {
+        onlyRenderer.render(ctx);
+      }
+    } else {
+      for (let i = sortedRenderers.length - 1; i >= 0; i--) {
+        const renderer = sortedRenderers[i];
+        if (!renderer.enabled || renderer.enabled()) {
+          const glContext2 = gl();
+          if (glContext2) {
+            renderer.render(ctx);
+          }
+        }
+      }
+    }
+    let newCursor = "default";
+    for (let i = sortedRenderers.length - 1; i >= 0; i--) {
+      const renderer = sortedRenderers[i];
+      if (renderer.cursor && (!renderer.enabled || renderer.enabled())) {
+        const cursorValue = renderer.cursor();
+        if (cursorValue) {
+          newCursor = cursorValue;
+          break;
+        }
+      }
+    }
+    currentCursor.value = newCursor;
+    eventBus.emit("canvas:draw", ctx);
+    eventBus.emit("animationFrame:after");
   });
   function onWindowMouseMove(e) {
-    mouseX = e.clientX;
-    mouseY = e.clientY;
+    mouseX = e.pageX;
+    mouseY = e.pageY;
   }
   onMounted(() => {
     document.body.addEventListener("wheel", requestDraw, { passive: false });
@@ -49,39 +186,49 @@ export default function(ui, storage) {
   onBlokkliEvent("option:update", requestDraw);
   onBlokkliEvent("state:reloaded", requestDraw);
   const dpi = computed(() => {
-    if (ui.lowPerformanceMode.value) {
-      return 0.5;
-    }
-    if (ui.isMobile.value) {
-      return window.devicePixelRatio;
-    }
-    return Math.min(window.devicePixelRatio, 2.5);
+    const viewportWidth = ui.viewport.value.width;
+    const viewportHeight = ui.viewport.value.height;
+    const deviceRatio = window.devicePixelRatio;
+    const maxDpiByWidth = maxCanvasWidth.value / viewportWidth;
+    const maxDpiByHeight = maxCanvasHeight.value / viewportHeight;
+    const MAX_PIXELS = 16e6;
+    const maxDpiByPixels = Math.sqrt(
+      MAX_PIXELS / (viewportWidth * viewportHeight)
+    );
+    const maxDpi = ui.lowPerformanceMode.value ? 0.5 : 2;
+    return Math.min(
+      deviceRatio,
+      maxDpiByWidth,
+      maxDpiByHeight,
+      maxDpiByPixels,
+      maxDpi
+    );
   });
-  function setSharedUniforms(gl, programInfo) {
+  function setSharedUniforms(gl2, programInfo) {
     const resolution = [ui.viewport.value.width, ui.viewport.value.height];
-    gl.uniform2fv(
-      gl.getUniformLocation(programInfo.program, "u_resolution"),
+    gl2.uniform2fv(
+      gl2.getUniformLocation(programInfo.program, "u_resolution"),
       resolution
     );
     const offset = ui.artboardOffset.value;
-    gl.uniform1f(
-      gl.getUniformLocation(programInfo.program, "u_offset_x"),
+    gl2.uniform1f(
+      gl2.getUniformLocation(programInfo.program, "u_offset_x"),
       offset.x
     );
-    gl.uniform1f(
-      gl.getUniformLocation(programInfo.program, "u_offset_y"),
+    gl2.uniform1f(
+      gl2.getUniformLocation(programInfo.program, "u_offset_y"),
       offset.y
     );
-    gl.uniform1f(
-      gl.getUniformLocation(programInfo.program, "u_scale"),
+    gl2.uniform1f(
+      gl2.getUniformLocation(programInfo.program, "u_scale"),
       ui.artboardScale.value
     );
-    gl.uniform1f(gl.getUniformLocation(programInfo.program, "u_dpi"), dpi.value);
+    gl2.uniform1f(gl2.getUniformLocation(programInfo.program, "u_dpi"), dpi.value);
   }
   const registeredPrograms = {};
-  function registerProgram(id, gl, shaders) {
+  function registerProgram(id, gl2, shaders) {
     if (!registeredPrograms[id]) {
-      registeredPrograms[id] = createProgramInfo(gl, shaders);
+      registeredPrograms[id] = createProgramInfo(gl2, shaders);
     }
     return registeredPrograms[id];
   }
@@ -90,39 +237,19 @@ export default function(ui, storage) {
     mouseY = y;
     iterator = 120;
   }
-  function getCanvasElement() {
-    const el = document.querySelector("#bk-animation-canvas-webgl");
-    if (!(el instanceof HTMLCanvasElement)) {
-      throw new TypeError("Failed to locate WebGL canvas.");
-    }
-    return el;
-  }
   return {
     requestDraw,
-    gl: function() {
-      if (!webglEnabled.value) {
-        return;
-      }
-      if (webglSupported.value === false) {
-        return;
-      }
-      const canvas = getCanvasElement();
-      const gl = canvas.getContext("webgl2", {
-        premultipliedAlpha: true
-      });
-      if (!gl) {
-        webglSupported.value = false;
-        return;
-      }
-      webglSupported.value = true;
-      return gl;
-    },
+    gl,
     setSharedUniforms,
     dpi,
     registerProgram,
     setMouseCoords,
     webglSupported: computed(() => webglSupported.value && webglEnabled.value),
     webglEnabled,
-    getCanvasElement
+    getCanvasElement,
+    cursor,
+    handleClick,
+    registerRenderer,
+    unregisterRenderer
   };
 }

package/dist/runtime/helpers/composables/defineRenderer.d.ts

@@ -0,0 +1,8 @@
+import type { Renderer } from '../animationProvider.js';
+/**
+ * Register a WebGL renderer with automatic cleanup on unmount.
+ *
+ * @param id - Unique identifier for the renderer
+ * @param config - Renderer configuration (zIndex, enabled, render)
+ */
+export default function defineRenderer(id: string, config: Omit<Renderer, 'id'>): void;

package/dist/runtime/helpers/composables/defineRenderer.js

@@ -0,0 +1,8 @@
+import { onBeforeUnmount, useBlokkli } from "#imports";
+export default function defineRenderer(id, config) {
+  const { animation } = useBlokkli();
+  const unregisterRenderer = animation.registerRenderer(id, config);
+  onBeforeUnmount(() => {
+    unregisterRenderer();
+  });
+}

package/dist/runtime/helpers/composables/useDelayedIntersectionObserver.d.ts

@@ -1,4 +1,4 @@
-export default function (callback: (entries: IntersectionObserverEntry[]) => void): {
+export default function (callback: (entries: IntersectionObserverEntry[]) => void, options?: IntersectionObserverInit): {
     observe: (el: HTMLElement) => void;
     unobserve: (el: HTMLElement) => void;
     init: () => void;

package/dist/runtime/helpers/composables/useDelayedIntersectionObserver.js

@@ -1,9 +1,10 @@
-export default function(callback) {
+export default function(callback, options = {}) {
   let observer = null;
   let collected = [];
   function init() {
     observer = new IntersectionObserver(callback, {
-      threshold: 0
+      threshold: 0,
+      ...options
     });
     for (const el of collected) {
       observer.observe(el);

package/dist/runtime/helpers/composables/useStickyToolbar.d.ts

@@ -1,5 +1,6 @@
 import type { ComputedRef, ShallowRef } from 'vue';
-type PlacementVertical = 'top' | 'bottom' | 'auto';
+import type { Coord } from '#blokkli/types';
+export type PlacementVertical = 'top' | 'bottom' | 'auto';
 type PlacementHorizontal = 'left' | 'center';
 type UseStickyToolbarOptions = {
     getPlacementY?: () => PlacementVertical;
@@ -9,7 +10,9 @@ type UseStickyToolbarOptions = {
     getHeight?: () => number;
     getMargin?: () => number;
     getAnchorElement?: () => HTMLElement | null;
+    getAnchorCoordinates?: () => Coord | null;
     getCaretWidth?: () => number;
+    allowHorizontalOverflow?: boolean;
 };
 type UseStickyToolbar = {
     shouldRender: ComputedRef<boolean>;

package/dist/runtime/helpers/composables/useStickyToolbar.js

@@ -39,26 +39,33 @@ export default function(el, options) {
     let minY = 0;
     let maxY = 0;
     let hasRects = false;
-    if (options && options.getAnchorElement) {
-      const anchorElement = options.getAnchorElement();
-      if (anchorElement) {
-        anchorRect ||= ui.getAbsoluteElementRect(
-          anchorElement.getBoundingClientRect(),
-          scale,
-          offset
-        );
-        const rectX = (anchorRect.x + offset.x / scale) * scale;
-        const rectY = (anchorRect.y + offset.y / scale) * scale;
-        const rectRight = rectX + anchorRect.width * scale;
-        const rectBottom = rectY + anchorRect.height * scale;
-        minX = rectX;
-        maxX = rectRight;
-        minY = rectY;
-        maxY = rectBottom;
-        hasRects = true;
-      }
+    const anchorElement = options && options.getAnchorElement ? options.getAnchorElement() : null;
+    const anchorCoordinates = options && options.getAnchorCoordinates ? options.getAnchorCoordinates() : null;
+    if (anchorCoordinates) {
+      const rectX = (anchorCoordinates.x + offset.x / scale) * scale;
+      const rectY = (anchorCoordinates.y + offset.y / scale) * scale;
+      minX = rectX;
+      maxX = rectX + 1;
+      minY = rectY;
+      maxY = rectY + 1;
+      hasRects = true;
+    } else if (anchorElement) {
+      anchorRect ||= ui.getAbsoluteElementRect(
+        anchorElement.getBoundingClientRect(),
+        scale,
+        offset
+      );
+      const rectX = (anchorRect.x + offset.x / scale) * scale;
+      const rectY = (anchorRect.y + offset.y / scale) * scale;
+      const rectRight = rectX + anchorRect.width * scale;
+      const rectBottom = rectY + anchorRect.height * scale;
+      minX = rectX;
+      maxX = rectRight;
+      minY = rectY;
+      maxY = rectBottom;
+      hasRects = true;
     } else {
-      const rects = selection.blocks.value.map((block) => dom.getBlockRect(block.uuid)).filter(falsy).filter((rect2) => rect2.height || rect2.width);
+      const rects = selection.uuids.value.map((uuid) => dom.getBlockRect(uuid)).filter(falsy).filter((rect) => rect.height || rect.width);
       hasRects = !!rects.length;
       if (hasRects) {
         for (let i = 0; i < rects.length; i++) {
@@ -114,22 +121,33 @@ export default function(el, options) {
     } else {
       x = minX - xSubtract;
     }
-    const rect = limitPlacedRect(
-      {
-        x,
-        y,
-        width,
-        height
-      },
-      padding
-    );
-    const idealPosition = findIdealRectPosition(
-      ui.viewportBlockingRects.value,
-      rect,
-      padding
-    );
-    if (!idealPosition) {
-      return void 0;
+    const shouldAllowOverflow = options?.allowHorizontalOverflow && width > padding.width;
+    let idealPosition;
+    if (shouldAllowOverflow) {
+      const limitedY = Math.min(
+        Math.max(padding.y, y),
+        padding.height + padding.y - height
+      );
+      idealPosition = { x, y: limitedY };
+    } else {
+      const rect = limitPlacedRect(
+        {
+          x,
+          y,
+          width,
+          height
+        },
+        padding
+      );
+      const position = findIdealRectPosition(
+        ui.viewportBlockingRects.value,
+        rect,
+        padding
+      );
+      if (!position) {
+        return void 0;
+      }
+      idealPosition = position;
     }
     const caretWidth = getCaretWidth();
     const caretHalfWidth = caretWidth / 2;

package/dist/runtime/helpers/dom/index.d.ts

@@ -62,3 +62,4 @@ export declare const MOUSE_BUTTON: Readonly<{
      */
     FIFTH: 4;
 }>;
+export type CursorKeyword = 'auto' | 'default' | 'none' | 'context-menu' | 'help' | 'pointer' | 'progress' | 'wait' | 'cell' | 'crosshair' | 'text' | 'vertical-text' | 'alias' | 'copy' | 'move' | 'no-drop' | 'not-allowed' | 'e-resize' | 'n-resize' | 'ne-resize' | 'nw-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'w-resize' | 'ew-resize' | 'ns-resize' | 'nesw-resize' | 'nwse-resize' | 'col-resize' | 'row-resize' | 'all-scroll' | 'zoom-in' | 'zoom-out' | 'grab' | 'grabbing';

package/dist/runtime/helpers/domProvider.d.ts

@@ -47,6 +47,52 @@ export type DomProvider = {
      * Get the drag element for a block.
      */
     getDragElement: (block: DraggableExistingBlock) => HTMLElement | undefined;
+    /**
+     * Get debug data for troubleshooting.
+     */
+    getDebugData: () => {
+        registeredBlocks: Array<{
+            uuid: string;
+            hasElement: boolean;
+            hasObservedElement: boolean;
+            hasRect: boolean;
+            hasCurrentKey: boolean;
+            isVisible: boolean;
+            inCache: boolean;
+            elementInfo?: {
+                tagName: string;
+                bundle?: string;
+                hostBundle?: string;
+                fieldListType?: string;
+            };
+        }>;
+        fields: Array<{
+            key: string;
+            isVisible: boolean;
+            hasRect: boolean;
+            entityType: string;
+            entityBundle: string;
+            fieldName: string;
+        }>;
+        summary: {
+            totalRegisteredBlocks: number;
+            totalBlocksWithElements: number;
+            totalObservedElements: number;
+            totalBlockRects: number;
+            totalVisibleBlocks: number;
+            totalRegisteredFields: number;
+            totalVisibleFields: number;
+            totalFieldRects: number;
+            cacheSize: number;
+            isInitializing: boolean;
+            isReady: boolean;
+        };
+        orphanedData: {
+            rectsWithoutRegistration: string[];
+            observedElementsWithoutRegistration: string[];
+            keysWithoutRegistration: string[];
+        };
+    };
 };
 export default function (ui: UiProvider, debug: DebugProvider, definitions: DefinitionProvider): DomProvider;
 export {};