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

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

@@ -0,0 +1,2 @@
+import { type Ref } from '#imports';
+export declare function addElementClasses(element: HTMLElement, classesArg: string | string[], watchSource?: Ref<string | boolean | null | undefined>): void;

package/dist/runtime/helpers/addElementClasses.js

@@ -0,0 +1,24 @@
+import { onBeforeUnmount, watch } from "#imports";
+export function addElementClasses(element, classesArg, watchSource) {
+  const classes = Array.isArray(classesArg) ? classesArg : [classesArg];
+  if (watchSource) {
+    watch(
+      watchSource,
+      function(value) {
+        if (value) {
+          element.classList.add(...classes);
+        } else {
+          element.classList.remove(...classes);
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+  } else {
+    element.classList.add(...classes);
+  }
+  onBeforeUnmount(() => {
+    element.classList.remove(...classes);
+  });
+}

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

@@ -1,6 +1,26 @@
-import { type ComputedRef } from '#imports';
+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.
@@ -13,6 +33,7 @@ export type AnimationProvider = {
     setSharedUniforms: (gl: WebGLRenderingContext, programInfo: ProgramInfo) => void;
     dpi: ComputedRef<number>;
     webglSupported: ComputedRef<boolean | null>;
+    webglEnabled: WritableComputedRef<boolean>;
     getCanvasElement: () => HTMLCanvasElement;
     /**
      * Register a WebGL program.
@@ -21,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): AnimationProvider;
+export default function (ui: UiProvider, storage: StorageProvider, selection: SelectionProvider, element: ElementProvider): AnimationProvider;

package/dist/runtime/helpers/animationProvider.js

@@ -8,27 +8,174 @@ import {
 } from "#imports";
 import { eventBus } from "#blokkli/helpers/eventBus";
 import { createProgramInfo } from "twgl.js";
-export default function(ui) {
+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;
+  let canvasElement = null;
+  function getCanvasElement() {
+    if (canvasElement) {
+      return canvasElement;
+    }
+    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.");
+    }
+    canvasElement = el;
+    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;
     }
     iterator--;
-    eventBus.emit("animationFrame:before", time);
+    eventBus.emit("animationFrame:before", { time, mouseX, mouseY });
     eventBus.emit("animationFrame", {
       mouseX,
       mouseY,
       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 });
@@ -48,39 +195,49 @@ export default function(ui) {
   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];
   }
@@ -89,35 +246,19 @@ export default function(ui) {
     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 (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),
-    getCanvasElement
+    webglSupported: computed(() => webglSupported.value && webglEnabled.value),
+    webglEnabled,
+    getCanvasElement,
+    cursor,
+    handleClick,
+    registerRenderer,
+    unregisterRenderer
   };
 }

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

@@ -0,0 +1 @@
+export declare function isInternalBundle(bundle: string): boolean;

package/dist/runtime/helpers/bundles/index.js

@@ -0,0 +1,4 @@
+import { INTERNAL_BUNDLES } from "#blokkli/constants";
+export function isInternalBundle(bundle) {
+  return INTERNAL_BUNDLES.includes(bundle);
+}

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

@@ -0,0 +1,5 @@
+import type { DomProvider } from '../domProvider.js';
+/**
+ * Helper composable to handle registering the block in the DOM provider.
+ */
+export declare function useBlockRegistration(dom: DomProvider, uuid: string): void;

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

@@ -0,0 +1,23 @@
+import {
+  getCurrentInstance,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated
+} from "#imports";
+export function useBlockRegistration(dom, uuid) {
+  const instance = getCurrentInstance();
+  const key = uuid + Math.round(Math.random() * 1e10).toString() + Date.now().toString();
+  let rootElement = null;
+  function setRootElement() {
+    const newElement = instance?.proxy?.$el;
+    if (newElement && rootElement !== newElement) {
+      rootElement = newElement;
+      dom.registerBlock(key, uuid, newElement);
+    }
+  }
+  onMounted(setRootElement);
+  onUpdated(setRootElement);
+  onBeforeUnmount(() => {
+    dom.unregisterBlock(key, uuid);
+  });
+}

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/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

@@ -0,0 +1,23 @@
+import type { ComputedRef, ShallowRef } from 'vue';
+import type { Coord } from '#blokkli/types';
+export type PlacementVertical = 'top' | 'bottom' | 'auto';
+type PlacementHorizontal = 'left' | 'center';
+type UseStickyToolbarOptions = {
+    getPlacementY?: () => PlacementVertical;
+    getPlacementX?: () => PlacementHorizontal;
+    shouldUpdate?: () => boolean;
+    getWidth?: () => number;
+    getHeight?: () => number;
+    getMargin?: () => number;
+    getAnchorElement?: () => HTMLElement | null;
+    getAnchorCoordinates?: () => Coord | null;
+    getCaretWidth?: () => number;
+    allowHorizontalOverflow?: boolean;
+};
+type UseStickyToolbar = {
+    shouldRender: ComputedRef<boolean>;
+    placementY: ComputedRef<'top' | 'bottom'>;
+    caretX: ComputedRef<number>;
+};
+export default function (el: Readonly<ShallowRef<HTMLElement | null>>, options?: UseStickyToolbarOptions): UseStickyToolbar;
+export {};