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

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

@@ -2,6 +2,25 @@ 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';
+import type { ElementProvider } from './providers/element.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 +42,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, element: ElementProvider): AnimationProvider;

package/dist/runtime/helpers/animationProvider.js

@@ -8,13 +8,85 @@ 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, element) {
   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 = element.query(
+      document.documentElement,
+      "#bk-animation-canvas-webgl",
+      "Find animation canvas element."
+    );
+    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 +98,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 +190,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 +241,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/useStateBasedCache.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Caches the result of the given callback for the duration of the current state.
+ */
+export default function <T>(cb: () => T): () => T;

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

@@ -0,0 +1,13 @@
+import onBlokkliEvent from "./onBlokkliEvent.js";
+export default function(cb) {
+  let cached = null;
+  onBlokkliEvent("state:reloaded", () => {
+    cached = null;
+  });
+  return () => {
+    if (!cached) {
+      cached = cb();
+    }
+    return cached;
+  };
+}

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/definitionProvider.d.ts

@@ -5,7 +5,7 @@ import type { DeepReadonly } from 'vue';
 import type { BlockDefinitionOptionsInput } from '../types/index.js';
 import { type RuntimeBlockOptionArray } from '#blokkli-build/runtime-options';
 export type DefinitionProvider = {
-    getBlockDefinition: (bundle: string, fieldListType: ValidFieldListTypes, parentBundle?: BlockBundleWithNested) => BlockDefinition | undefined;
+    getBlockDefinition: (bundle: string, fieldListType: ValidFieldListTypes, parentBundle?: BlockBundleWithNested | null) => BlockDefinition | undefined;
     getDefaultDefinition: (bundle: string) => BlockDefinition | undefined;
     getFragmentDefinition: (name: string) => FragmentDefinition | undefined;
     getProviderDefinition: (entityType: string, entityBundle: string) => ProviderDefinition | undefined;

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

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

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

@@ -1,8 +1,10 @@
 import { type ComputedRef } from '#imports';
-import type { DraggableExistingBlock, BlokkliFieldElement, DraggableItem, DroppableEntityField, EntityContext, Rectangle } from '#blokkli/types';
+import type { DraggableExistingBlock, DraggableItem, EntityContext, Rectangle, RenderedFieldListItem, RegisteredField, RegisterFieldData } from '#blokkli/types';
 import type { UiProvider } from './uiProvider.js';
 import type { DebugProvider } from './debugProvider.js';
 import type { DefinitionProvider } from './definitionProvider.js';
+import type { StateProvider } from './stateProvider.js';
+import type { ElementProvider } from './providers/element.js';
 type RegisteredFieldType = {
     entityType: string;
     entityBundle: string;
@@ -12,41 +14,79 @@ type MeasuredBlockRect = Rectangle & {
     time: number;
 };
 export type DomProvider = {
-    findBlock(uuid: string): DraggableExistingBlock | undefined;
-    getAllBlocks(): DraggableExistingBlock[];
     findClosestBlock(el: Element | EventTarget): DraggableExistingBlock | undefined;
     /**
      * Return the droppable markup for a draggable item.
      */
-    getDropElementMarkup(item: DraggableItem, checkSize?: boolean): string;
-    findField(entityUuid: string, fieldName: string): BlokkliFieldElement | undefined;
+    getDropElementMarkup(item: DraggableItem | RenderedFieldListItem, checkSize?: boolean): string;
     registerBlock: (key: string, uuid: string, el: HTMLElement | null) => void;
     unregisterBlock: (key: string, uuid: string) => void;
-    registerField: (entity: EntityContext, fieldName: string, instance: HTMLElement) => void;
-    updateFieldElement: (entity: EntityContext, fieldName: string, element: HTMLElement) => void;
+    registerField: (entity: EntityContext, fieldName: string, instance: HTMLElement, data: RegisterFieldData) => void;
+    updateFieldElement: (entity: EntityContext, fieldName: string, element: HTMLElement, data: RegisterFieldData) => void;
     unregisterField: (entity: EntityContext, fieldName: string) => void;
+    getRegisteredField: (uuid: string, fieldName: string) => RegisteredField | undefined;
     registeredFieldTypes: ComputedRef<RegisteredFieldType[]>;
     registeredBlockUuids: ComputedRef<string[]>;
-    /**
-     * Get all droppable entity fields.
-     */
-    getAllDroppableFields(): DroppableEntityField[];
     findClosestEntityContext(el: HTMLElement): EntityContext | undefined;
     getVisibleBlocks(): string[];
     getVisibleFields(): string[];
     isBlockVisible(uuid: string): boolean;
-    getActiveProviderElement: () => HTMLElement;
     getBlockRects: () => Record<string, MeasuredBlockRect>;
     getBlockRect: (uuid: string, refresh?: boolean) => MeasuredBlockRect | undefined;
     refreshBlockRect: (uuid: string) => void;
     getFieldRect: (key: string) => Rectangle | undefined;
+    registeredBlocks: ComputedRef<Record<string, HTMLElement | undefined>>;
     updateVisibleRects: () => void;
     isReady: ComputedRef<boolean>;
     init: () => void;
     /**
      * Get the drag element for a block.
      */
-    getDragElement: (block: DraggableExistingBlock) => HTMLElement | undefined;
+    getDragElement: (block: DraggableExistingBlock | RenderedFieldListItem) => HTMLElement | undefined;
+    /**
+     * Get debug data for troubleshooting.
+     */
+    getDebugData: () => {
+        registeredBlocks: Array<{
+            uuid: string;
+            hasElement: boolean;
+            hasObservedElement: boolean;
+            hasRect: boolean;
+            hasCurrentKey: boolean;
+            isVisible: 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;
+            isInitializing: boolean;
+            isReady: boolean;
+        };
+        orphanedData: {
+            rectsWithoutRegistration: string[];
+            observedElementsWithoutRegistration: string[];
+            keysWithoutRegistration: string[];
+        };
+    };
 };
-export default function (ui: UiProvider, debug: DebugProvider, definitions: DefinitionProvider): DomProvider;
+export default function (ui: UiProvider, debug: DebugProvider, definitions: DefinitionProvider, state: StateProvider, element: ElementProvider): DomProvider;
 export {};