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

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

@@ -5,11 +5,13 @@ 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';
+import type { RectangleBufferCollector } from './webgl/index.js';
+import type { DebugProvider } from './debugProvider.js';
 export type RenderContext = CanvasDrawEvent & {
-    gl: WebGLRenderingContext;
+    changeOptionsTransition: number;
 };
-export type Renderer = {
+type PreferredRenderingMode = 'auto' | 'webgl' | '2d';
+export type Renderer<T = RectangleBufferCollector<any>> = {
     id: string;
     zIndex: number;
     enabled?: () => boolean;
@@ -19,29 +21,72 @@ export type Renderer = {
         mouse: Coord;
         mouseArtboard: Coord;
     }) => boolean | undefined;
-    render: (ctx: RenderContext) => void;
+    collector: () => T;
+    program?: () => {
+        shaders: [string, string];
+    };
+    render: (ctx: RenderContext, gl: WebGLRenderingContext, program: ProgramInfo) => void;
+    renderFallback?: (ctx: RenderContext, ctx2d: CanvasRenderingContext2D) => void;
 };
 export type AnimationProvider = {
     /**
      * Request an animation loop. Should be called when UI state changes.
      */
     requestDraw: () => void;
+    /**
+     * Reset the animation state and force a remount of all renderer components.
+     */
+    reset: () => void;
     /**
      * Get the WebGL rendering context.
+     * Returns undefined if context is lost or not available.
      */
     gl: () => WebGLRenderingContext | undefined;
+    /**
+     * Get the raw WebGL context even if it's lost.
+     * For debugging purposes only (e.g., context loss testing).
+     */
+    getRawGL: () => WebGLRenderingContext | null;
     setSharedUniforms: (gl: WebGLRenderingContext, programInfo: ProgramInfo) => void;
     dpi: ComputedRef<number>;
     webglSupported: ComputedRef<boolean | null>;
     webglEnabled: WritableComputedRef<boolean>;
-    getCanvasElement: () => HTMLCanvasElement;
+    preferredRenderingMode: WritableComputedRef<PreferredRenderingMode>;
+    /**
+     * Reactive property that indicates if we're currently rendering with WebGL.
+     * True when WebGL context exists and is not lost.
+     */
+    isRenderingWebGL: ComputedRef<boolean>;
+    /**
+     * Reactive property that indicates if we have a WebGL context.
+     * True even if the context is lost (for debugging purposes).
+     */
+    hasWebGLContext: ComputedRef<boolean>;
+    /**
+     * Reactive key that increments when WebGL context is restored.
+     * Use this as a component key to force remounting renderer components on context loss/restore.
+     */
+    renderKey: ComputedRef<number>;
+    /**
+     * Reactive key that changes when switching between WebGL and 2D rendering modes.
+     * Use this as the canvas element key to force creating a new canvas with the appropriate context.
+     */
+    canvasKey: ComputedRef<string>;
+    /**
+     * Set the canvas element to use for rendering.
+     * This initializes the appropriate context based on webglEnabled.
+     */
+    setCanvasElement: (canvas: HTMLCanvasElement) => void;
+    /**
+     * Remove the canvas element and clean up contexts.
+     */
+    removeCanvasElement: () => void;
     /**
      * Register a WebGL program.
      *
      * The programs are cached by the given ID.
      */
     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.
@@ -50,12 +95,16 @@ export type AnimationProvider = {
     handleClick: (x: number, y: number) => boolean;
     /**
      * Register a WebGL renderer with a specific zIndex.
-     * Returns an unregister function.
+     * Returns an object with the collector instance and an unregister function.
      */
-    registerRenderer: (id: string, config: Omit<Renderer, 'id'>) => () => void;
+    registerRenderer: <T = RectangleBufferCollector<any>>(id: string, config: Omit<Renderer<T>, 'id'>) => {
+        collector: T;
+        unregister: () => void;
+    };
     /**
      * Unregister a WebGL renderer.
      */
     unregisterRenderer: (id: string) => void;
 };
-export default function (ui: UiProvider, storage: StorageProvider, selection: SelectionProvider, element: ElementProvider): AnimationProvider;
+export default function (ui: UiProvider, storage: StorageProvider, selection: SelectionProvider, debug: DebugProvider): AnimationProvider;
+export {};

package/dist/runtime/helpers/animationProvider.js

@@ -3,22 +3,143 @@ import useAnimationFrame from "./composables/useAnimationFrame.js";
 import {
   ref,
   computed,
+  watch,
   onMounted,
   onBeforeUnmount
 } from "#imports";
 import { eventBus } from "#blokkli/helpers/eventBus";
 import { createProgramInfo } from "twgl.js";
-export default function(ui, storage, selection, element) {
-  const webglEnabled = storage.use("webglEnabled", true);
+import { useTransitionedValue } from "./useTransitionedValue.js";
+function configureWebGLContext(gl) {
+  gl.enable(gl.BLEND);
+  gl.disable(gl.DEPTH_TEST);
+  gl.clearColor(0, 0, 0, 0);
+  gl.blendFunc(gl.SRC_ALPHA_SATURATE, gl.ONE);
+  gl.blendEquation(gl.FUNC_ADD);
+}
+export default function(ui, storage, selection, debug) {
+  const logger = debug.createLogger("Animation");
+  const preferredRenderingMode = storage.use(
+    "preferredRenderingMode",
+    "auto"
+  );
+  const webglSupported = ref(null);
+  const webglEnabled = computed({
+    get: () => {
+      if (preferredRenderingMode.value === "2d") {
+        return false;
+      }
+      if (preferredRenderingMode.value === "webgl") {
+        return true;
+      }
+      return webglSupported.value !== false;
+    },
+    set: (value) => {
+      preferredRenderingMode.value = value ? "webgl" : "2d";
+    }
+  });
   const currentCursor = ref("default");
   const cursor = computed(() => currentCursor.value);
+  const renderKey = ref(0);
+  const canvasKey = computed(() => webglEnabled.value ? "webgl" : "2d");
+  const isRenderingWebGL = computed(
+    () => hasGLContext.value && !isContextLost.value
+  );
   const renderers = /* @__PURE__ */ new Map();
+  const rendererPrograms = /* @__PURE__ */ new Map();
+  const rendererCollectors = /* @__PURE__ */ new Map();
+  const rendererFailures = /* @__PURE__ */ new Map();
+  const rendererCooldowns = /* @__PURE__ */ new Map();
+  const renderersPermanentlyDisabled = /* @__PURE__ */ new Set();
+  function shouldSkipRenderer(id) {
+    if (renderersPermanentlyDisabled.has(id)) {
+      return true;
+    }
+    const cooldownEnd = rendererCooldowns.get(id);
+    if (cooldownEnd) {
+      const now = Date.now();
+      if (now < cooldownEnd) {
+        return true;
+      } else {
+        rendererCooldowns.delete(id);
+      }
+    }
+    return false;
+  }
+  function handleRendererFailure(id) {
+    const failures = (rendererFailures.get(id) || 0) + 1;
+    rendererFailures.set(id, failures);
+    if (failures === 6) {
+      renderersPermanentlyDisabled.add(id);
+      rendererFailures.delete(id);
+      rendererCooldowns.delete(id);
+      logger.error(
+        `Renderer "${id}" has been permanently disabled due to repeated failures.`
+      );
+      return;
+    }
+    if (failures === 5) {
+      const cooldownEnd = Date.now() + 5e3;
+      rendererCooldowns.set(id, cooldownEnd);
+      logger.error(
+        `Renderer "${id}" failed 5 times in a row. Skipping for 5 seconds.`
+      );
+    }
+  }
+  function handleRendererSuccess(id) {
+    rendererFailures.delete(id);
+  }
+  function executeRenderer(renderer, ctx, ctx2dContext2) {
+    if (!renderer.enabled || renderer.enabled()) {
+      const glContext2 = gl();
+      if (glContext2 && webglEnabled.value && !shouldSkipRenderer(renderer.id)) {
+        const program = rendererPrograms.get(renderer.id);
+        if (program) {
+          try {
+            renderer.render(ctx, glContext2, program);
+            handleRendererSuccess(renderer.id);
+          } catch (error) {
+            handleRendererFailure(renderer.id);
+            logger.error(`Renderer "${renderer.id}" failed:`, error);
+          }
+        }
+      } else if (ctx2dContext2 && renderer.renderFallback) {
+        try {
+          renderer.renderFallback(ctx, ctx2dContext2);
+          handleRendererSuccess(renderer.id);
+        } catch (error) {
+          handleRendererFailure(renderer.id);
+          logger.error(`Renderer "${renderer.id}" (2D fallback) failed:`, error);
+        }
+      }
+    }
+  }
   function registerRenderer(id, config) {
-    renderers.set(id, { id, ...config });
-    return () => unregisterRenderer(id);
+    logger.log("Registered Renderer: " + id);
+    const renderer = { id, ...config };
+    renderers.set(id, renderer);
+    const collector = config.collector();
+    rendererCollectors.set(id, collector);
+    if (renderer.program) {
+      const glContext2 = gl();
+      if (glContext2) {
+        const { shaders } = renderer.program();
+        const programInfo = registerProgram(id, glContext2, shaders);
+        rendererPrograms.set(id, programInfo);
+      }
+    }
+    return {
+      collector,
+      unregister: () => unregisterRenderer(id)
+    };
   }
   function unregisterRenderer(id) {
     renderers.delete(id);
+    rendererPrograms.delete(id);
+    rendererCollectors.delete(id);
+    rendererFailures.delete(id);
+    rendererCooldowns.delete(id);
+    renderersPermanentlyDisabled.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);
@@ -44,54 +165,170 @@ export default function(ui, storage, selection, element) {
   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;
+  let glContext = null;
+  let ctx2dContext = null;
+  const isContextLost = ref(false);
+  const hasGLContext = ref(false);
+  let lastCanvasWidth = 0;
+  let lastCanvasHeight = 0;
+  function initializeContexts() {
+    if (!canvasElement) {
+      glContext = null;
+      ctx2dContext = null;
+      isContextLost.value = false;
+      hasGLContext.value = false;
+      return;
     }
-    const el = element.query(
-      document.documentElement,
-      "#bk-animation-canvas-webgl",
-      "Find animation canvas element."
+    canvasElement.removeEventListener("webglcontextlost", handleContextLost);
+    canvasElement.removeEventListener(
+      "webglcontextrestored",
+      handleContextRestored
     );
-    if (!(el instanceof HTMLCanvasElement)) {
-      throw new TypeError("Failed to locate WebGL canvas.");
+    if (webglEnabled.value && webglSupported.value !== false) {
+      const gl2 = canvasElement.getContext("webgl2", {
+        premultipliedAlpha: true
+      });
+      if (gl2) {
+        glContext = gl2;
+        ctx2dContext = null;
+        isContextLost.value = false;
+        hasGLContext.value = true;
+        webglSupported.value = true;
+        if (!webglLimitsQueried) {
+          const maxViewportDims = gl2.getParameter(
+            gl2.MAX_VIEWPORT_DIMS
+          );
+          maxCanvasWidth.value = maxViewportDims[0] || 16384;
+          maxCanvasHeight.value = maxViewportDims[1] || 16384;
+          webglLimitsQueried = true;
+        }
+        configureWebGLContext(gl2);
+        canvasElement.addEventListener(
+          "webglcontextlost",
+          handleContextLost,
+          false
+        );
+        canvasElement.addEventListener(
+          "webglcontextrestored",
+          handleContextRestored,
+          false
+        );
+      } else {
+        webglSupported.value = false;
+        glContext = null;
+        hasGLContext.value = false;
+        ctx2dContext = canvasElement.getContext("2d");
+      }
+    } else {
+      glContext = null;
+      hasGLContext.value = false;
+      ctx2dContext = canvasElement.getContext("2d");
     }
-    canvasElement = el;
-    return el;
   }
-  function gl() {
-    if (!webglEnabled.value) {
-      return;
+  watch(webglEnabled, () => {
+    const programCount = registeredPrograms.size;
+    registeredPrograms.clear();
+    rendererPrograms.clear();
+    removeCanvasElement();
+    logger.log(
+      `Cleared ${programCount} WebGL programs and stopped rendering due to mode change to ${webglEnabled.value ? "WebGL" : "2D"}`
+    );
+  });
+  function handleContextLost(event) {
+    event.preventDefault();
+    logger.error("WebGL context lost");
+    isContextLost.value = true;
+    const programCount = registeredPrograms.size;
+    registeredPrograms.clear();
+    rendererPrograms.clear();
+    logger.log(`Cleared ${programCount} invalidated WebGL programs`);
+  }
+  function handleContextRestored() {
+    logger.log("WebGL context restored");
+    isContextLost.value = false;
+    const restoredGL = glContext;
+    if (restoredGL) {
+      configureWebGLContext(restoredGL);
+      logger.log("Re-configured WebGL context settings");
     }
-    if (webglSupported.value === false) {
-      return;
+    renderKey.value++;
+    logger.log(
+      `Incremented renderKey to ${renderKey.value} to force renderer remount`
+    );
+    requestDraw();
+  }
+  function reset() {
+    isContextLost.value = true;
+    registeredPrograms.clear();
+    rendererPrograms.clear();
+    renderKey.value++;
+    isContextLost.value = false;
+  }
+  function setCanvasElement(canvas) {
+    canvasElement = canvas;
+    initializeContexts();
+    updateCanvasSize();
+    renderKey.value++;
+    logger.log(
+      `Canvas element set with ${webglEnabled.value ? "WebGL" : "2D"} context, renderKey = ${renderKey.value}`
+    );
+  }
+  function removeCanvasElement() {
+    if (canvasElement) {
+      canvasElement.removeEventListener("webglcontextlost", handleContextLost);
+      canvasElement.removeEventListener(
+        "webglcontextrestored",
+        handleContextRestored
+      );
     }
-    const canvas = getCanvasElement();
-    const glContext = canvas.getContext("webgl2", {
-      premultipliedAlpha: true
-    });
-    if (!glContext) {
-      webglSupported.value = false;
+    canvasElement = null;
+    glContext = null;
+    ctx2dContext = null;
+    isContextLost.value = false;
+    hasGLContext.value = false;
+    lastCanvasWidth = 0;
+    lastCanvasHeight = 0;
+  }
+  function updateCanvasSize() {
+    if (!canvasElement) {
       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;
+    const canvasWidth = ui.viewport.value.width * dpi.value;
+    const canvasHeight = ui.viewport.value.height * dpi.value;
+    if (canvasWidth !== lastCanvasWidth || canvasHeight !== lastCanvasHeight) {
+      canvasElement.width = canvasWidth;
+      canvasElement.height = canvasHeight;
+      if (glContext) {
+        glContext.viewport(0, 0, canvasWidth, canvasHeight);
+      }
+      lastCanvasWidth = canvasWidth;
+      lastCanvasHeight = canvasHeight;
+    }
+  }
+  function gl() {
+    if (isContextLost.value) {
+      return void 0;
     }
+    return glContext || void 0;
+  }
+  function getRawGL() {
     return glContext;
   }
+  const getChangeOptionsTransition = useTransitionedValue(
+    () => {
+      return selection.isChangingOptions.value ? 0 : 1;
+    },
+    {
+      duration: 150
+    }
+  );
   useAnimationFrame((time) => {
     const selectedUuids = [...selection.uuids.value];
+    const changeOptionsTransition = getChangeOptionsTransition();
     if (iterator < 1) {
       return;
     }
@@ -103,27 +340,22 @@ export default function(ui, storage, selection, element) {
       fieldAreas: [],
       time
     });
-    const glContext = gl();
+    updateCanvasSize();
+    if (!canvasElement) {
+      return;
+    }
     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);
+    } else if (ctx2dContext) {
+      ctx2dContext.clearRect(0, 0, canvasElement.width, canvasElement.height);
     }
-    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 sortedRenderers = Array.from(renderers.values()).sort((a, b) => {
+      if (glContext) {
+        return a.zIndex - b.zIndex;
       }
-    }
+      return b.zIndex - a.zIndex;
+    });
     const artboardOffset = ui.artboardOffset.value;
     const artboardScale = ui.artboardScale.value;
     const artboardSize = ui.artboardSize.value;
@@ -132,7 +364,6 @@ export default function(ui, storage, selection, element) {
       y: (mouseY - artboardOffset.y) / artboardScale
     };
     const ctx = {
-      gl: glContext,
       time,
       mouseX,
       mouseY,
@@ -140,22 +371,26 @@ export default function(ui, storage, selection, element) {
       artboardOffset,
       artboardScale,
       artboardSize,
-      selectedUuids
+      selectedUuids,
+      dpi: dpi.value,
+      changeOptionsTransition
     };
-    if (onlyRenderer) {
-      const glContext2 = gl();
-      if (glContext2) {
-        onlyRenderer.render(ctx);
+    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;
+        }
       }
+    }
+    if (onlyRenderer) {
+      executeRenderer(onlyRenderer, ctx, ctx2dContext);
     } 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);
-          }
-        }
+        executeRenderer(renderer, ctx, ctx2dContext);
       }
     }
     let newCursor = "default";
@@ -197,6 +432,12 @@ export default function(ui, storage, selection, element) {
   const dpi = computed(() => {
     const viewportWidth = ui.viewport.value.width;
     const viewportHeight = ui.viewport.value.height;
+    if (!webglEnabled.value) {
+      const MAX_2D_CANVAS_SIZE = 4096;
+      const maxDpiByWidth2 = MAX_2D_CANVAS_SIZE / viewportWidth;
+      const maxDpiByHeight2 = MAX_2D_CANVAS_SIZE / viewportHeight;
+      return Math.min(maxDpiByWidth2, maxDpiByHeight2, 1);
+    }
     const deviceRatio = window.devicePixelRatio;
     const maxDpiByWidth = maxCanvasWidth.value / viewportWidth;
     const maxDpiByHeight = maxCanvasHeight.value / viewportHeight;
@@ -234,31 +475,33 @@ export default function(ui, storage, selection, element) {
     );
     gl2.uniform1f(gl2.getUniformLocation(programInfo.program, "u_dpi"), dpi.value);
   }
-  const registeredPrograms = {};
+  const registeredPrograms = /* @__PURE__ */ new Map();
   function registerProgram(id, gl2, shaders) {
-    if (!registeredPrograms[id]) {
-      registeredPrograms[id] = createProgramInfo(gl2, shaders);
+    if (!registeredPrograms.has(id)) {
+      registeredPrograms.set(id, createProgramInfo(gl2, shaders));
     }
-    return registeredPrograms[id];
-  }
-  function setMouseCoords(x, y) {
-    mouseX = x;
-    mouseY = y;
-    iterator = 120;
+    return registeredPrograms.get(id);
   }
   return {
     requestDraw,
     gl,
+    getRawGL,
     setSharedUniforms,
     dpi,
     registerProgram,
-    setMouseCoords,
     webglSupported: computed(() => webglSupported.value && webglEnabled.value),
     webglEnabled,
-    getCanvasElement,
+    preferredRenderingMode,
+    isRenderingWebGL,
+    hasWebGLContext: computed(() => hasGLContext.value),
+    renderKey: computed(() => renderKey.value),
+    canvasKey,
+    setCanvasElement,
+    removeCanvasElement,
     cursor,
     handleClick,
     registerRenderer,
-    unregisterRenderer
+    unregisterRenderer,
+    reset
   };
 }

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

@@ -0,0 +1,2 @@
+import type { ItemDropdownAction } from '../pluginProvider.js';
+export default function (cb: () => ItemDropdownAction | ItemDropdownAction[] | undefined): void;

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

@@ -0,0 +1,10 @@
+import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+export default function(cb) {
+  const { plugins } = useBlokkli();
+  onMounted(() => {
+    plugins.addItemDropdownAction(cb);
+  });
+  onBeforeUnmount(() => {
+    plugins.removeItemDropdownAction(cb);
+  });
+}

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

@@ -3,6 +3,9 @@ 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)
+ * @param config - Renderer configuration (zIndex, enabled, render, collector)
+ * @returns Object containing the collector instance with inferred type
  */
-export default function defineRenderer(id: string, config: Omit<Renderer, 'id'>): void;
+export default function defineRenderer<T>(id: string, config: Omit<Renderer<T>, 'id'>): {
+    collector: T;
+};

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

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

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

@@ -0,0 +1,16 @@
+import type { LogMessage } from '../debugProvider.js';
+type BlokkliGlobalWindowObject = {
+    messages: LogMessage[];
+};
+export declare function useGlobalBlokkliObject(): {
+    init: () => void;
+    pushMessage: (message: LogMessage) => void;
+    getMessages: () => LogMessage[];
+    cleanup: () => void;
+};
+declare global {
+    interface Window {
+        __BLOKKLI__?: BlokkliGlobalWindowObject;
+    }
+}
+export {};