@blokkli/editor 2.0.0-alpha.28 → 2.0.0-alpha.29

package/dist/runtime/editor/providers/animation.js

@@ -0,0 +1,518 @@
+import {
+  onBlokkliEvent,
+  useAnimationFrame,
+  useTransitionedValue
+} from "#blokkli/editor/composables";
+import {
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onBeforeUnmount
+} from "#imports";
+import { createProgramInfo } from "twgl.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(eventBus, ui, storage, selection, debug, keyboard) {
+  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) {
+    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);
+    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 maxCanvasWidth = ref(16384);
+  const maxCanvasHeight = ref(16384);
+  let webglLimitsQueried = false;
+  let canvasElement = null;
+  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;
+    }
+    canvasElement.removeEventListener("webglcontextlost", handleContextLost);
+    canvasElement.removeEventListener(
+      "webglcontextrestored",
+      handleContextRestored
+    );
+    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");
+    }
+  }
+  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");
+    }
+    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
+      );
+    }
+    canvasElement = null;
+    glContext = null;
+    ctx2dContext = null;
+    isContextLost.value = false;
+    hasGLContext.value = false;
+    lastCanvasWidth = 0;
+    lastCanvasHeight = 0;
+  }
+  function updateCanvasSize() {
+    if (!canvasElement) {
+      return;
+    }
+    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;
+    }
+    iterator--;
+    eventBus.emit("animationFrame:before", { time, mouseX, mouseY });
+    eventBus.emit("animationFrame", {
+      mouseX,
+      mouseY,
+      fieldAreas: [],
+      time
+    });
+    updateCanvasSize();
+    if (!canvasElement) {
+      return;
+    }
+    if (glContext) {
+      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) => {
+      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;
+    const mouseArtboard = {
+      x: (mouseX - artboardOffset.x) / artboardScale,
+      y: (mouseY - artboardOffset.y) / artboardScale
+    };
+    const ctx = {
+      time,
+      mouseX,
+      mouseY,
+      mouseArtboard,
+      artboardOffset,
+      artboardScale,
+      artboardSize,
+      selectedUuids,
+      dpi: dpi.value,
+      changeOptionsTransition
+    };
+    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];
+        executeRenderer(renderer, ctx, ctx2dContext);
+      }
+    }
+    let newCursor = "default";
+    if (keyboard.isPressingSpace.value) {
+      newCursor = "move";
+    } else {
+      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.pageX;
+    mouseY = e.pageY;
+  }
+  onMounted(() => {
+    document.body.addEventListener("wheel", requestDraw, { passive: false });
+    window.addEventListener("pointermove", onWindowMouseMove, { capture: true });
+  });
+  onBeforeUnmount(() => {
+    document.body.removeEventListener("wheel", requestDraw);
+    window.removeEventListener("pointermove", onWindowMouseMove, {
+      capture: true
+    });
+  });
+  const requestDraw = () => iterator = 120;
+  onBlokkliEvent("select", requestDraw);
+  onBlokkliEvent("select:start", requestDraw);
+  onBlokkliEvent("select:end", requestDraw);
+  onBlokkliEvent("select:toggle", requestDraw);
+  onBlokkliEvent("option:update", requestDraw);
+  onBlokkliEvent("state:reloaded", requestDraw);
+  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;
+    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(gl2, programInfo) {
+    const resolution = [ui.viewport.value.width, ui.viewport.value.height];
+    gl2.uniform2fv(
+      gl2.getUniformLocation(programInfo.program, "u_resolution"),
+      resolution
+    );
+    const offset = ui.artboardOffset.value;
+    gl2.uniform1f(
+      gl2.getUniformLocation(programInfo.program, "u_offset_x"),
+      offset.x
+    );
+    gl2.uniform1f(
+      gl2.getUniformLocation(programInfo.program, "u_offset_y"),
+      offset.y
+    );
+    gl2.uniform1f(
+      gl2.getUniformLocation(programInfo.program, "u_scale"),
+      ui.artboardScale.value
+    );
+    gl2.uniform1f(gl2.getUniformLocation(programInfo.program, "u_dpi"), dpi.value);
+  }
+  const registeredPrograms = /* @__PURE__ */ new Map();
+  function registerProgram(id, gl2, shaders) {
+    if (!registeredPrograms.has(id)) {
+      registeredPrograms.set(id, createProgramInfo(gl2, shaders));
+    }
+    return registeredPrograms.get(id);
+  }
+  watch(keyboard.isPressingSpace, () => {
+    requestDraw();
+  });
+  watch(keyboard.isPressingControl, () => {
+    requestDraw();
+  });
+  return {
+    requestDraw,
+    gl,
+    getRawGL,
+    setSharedUniforms,
+    dpi,
+    registerProgram,
+    webglSupported: computed(() => webglSupported.value && webglEnabled.value),
+    webglEnabled,
+    preferredRenderingMode,
+    isRenderingWebGL,
+    hasWebGLContext: computed(() => hasGLContext.value),
+    renderKey: computed(() => renderKey.value),
+    canvasKey,
+    setCanvasElement,
+    removeCanvasElement,
+    cursor,
+    handleClick,
+    registerRenderer,
+    unregisterRenderer,
+    reset
+  };
+}

package/dist/runtime/editor/providers/blocks.d.ts

@@ -0,0 +1,32 @@
+import type { DomProvider } from './dom.js';
+import type { StateProvider } from './state.js';
+import type { AdapterContext } from '#blokkli/editor/adapter';
+import { type ComputedRef } from '#imports';
+import type { RenderedFieldListItem } from '../types/field.js';
+export type BlocksProvider = {
+    /**
+     * Get a rendered block by its UUID.
+     *
+     * Returns a RenderedFieldListItem with complete block metadata including:
+     * - Host entity and field information
+     * - Publishing status and schedule
+     * - Library/fragment data (if applicable)
+     * - Parent block bundle (for nested blocks)
+     *
+     * Results are cached and invalidated on state reload.
+     *
+     * @param uuid - The block's UUID
+     * @returns The rendered block item, or undefined if not found
+     */
+    getBlock: (uuid: string) => RenderedFieldListItem | undefined;
+    /**
+     * Get all rendered blocks in the current state.
+     *
+     * Returns an array of all blocks with complete metadata.
+     * Iterates through all UUIDs in state and builds RenderedFieldListItem for each.
+     *
+     * @returns Array of all rendered block items
+     */
+    getAllBlocks: () => RenderedFieldListItem[];
+};
+export default function (state: StateProvider, dom: DomProvider, context: ComputedRef<AdapterContext>): BlocksProvider;

package/dist/runtime/editor/providers/blocks.js

@@ -0,0 +1,113 @@
+import {
+  fragmentBlockBundle,
+  fromLibraryBlockBundle,
+  itemEntityType
+} from "#blokkli-build/config";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+import { ref } from "#imports";
+export default function(state, dom, context) {
+  const renderedFieldListItemCache = /* @__PURE__ */ new Map();
+  const refreshKey = ref(1);
+  function getParentBlockBundle(field) {
+    if (field.entityType !== itemEntityType) {
+      return null;
+    }
+    const block = state.getFieldListItem(field.entityUuid);
+    if (!block) {
+      return null;
+    }
+    return block.bundle;
+  }
+  function getLibraryData(item) {
+    if (item.bundle === fromLibraryBlockBundle && item.props.libraryItem) {
+      const uuid = item.props.libraryItem.uuid;
+      const bundle = item.props.libraryItem.block?.bundle;
+      if (uuid && bundle) {
+        return {
+          label: item.props.libraryItem.label ?? "",
+          libraryItemUuid: uuid,
+          reusableBundle: bundle
+        };
+      }
+    }
+    return null;
+  }
+  function getFragmentData(item) {
+    if (item.bundle === fragmentBlockBundle && item.props.name) {
+      return {
+        name: item.props.name
+      };
+    }
+    return null;
+  }
+  function getBlock(uuid) {
+    if (refreshKey.value === 0) {
+      return;
+    }
+    const cached = renderedFieldListItemCache.get(uuid);
+    if (cached) {
+      return cached;
+    }
+    const item = state.getFieldListItem(uuid);
+    if (!item) {
+      return;
+    }
+    if (!item.editContext) {
+      throw new Error("Missing editContext on block with UUID: " + item.uuid);
+    }
+    const fieldList = state.getFieldListForBlock(item.uuid);
+    if (!fieldList) {
+      return;
+    }
+    const field = dom.getRegisteredField(fieldList.entityUuid, fieldList.name);
+    const parentBlockBundle = getParentBlockBundle(fieldList);
+    const renderedItem = {
+      uuid: item.uuid,
+      bundle: item.bundle,
+      isNew: item.editContext.isNew,
+      isPublished: item.editContext.isPublished,
+      publishOn: item.editContext.publishOn,
+      unpublishOn: item.editContext.unpublishOn,
+      isNested: fieldList.entityType === itemEntityType,
+      fieldListType: field?.fieldListType ?? "default",
+      library: getLibraryData(item),
+      fragment: getFragmentData(item),
+      parentBlockBundle,
+      host: {
+        type: fieldList.entityType,
+        uuid: fieldList.entityUuid,
+        fieldName: fieldList.name,
+        bundle: parentBlockBundle ?? context.value.entityBundle
+      }
+    };
+    renderedFieldListItemCache.set(item.uuid, renderedItem);
+    return renderedItem;
+  }
+  function getAllBlocks() {
+    if (refreshKey.value === 0) {
+      return [];
+    }
+    const blocks = [];
+    const uuids = state.getAllUuids();
+    for (let i = 0; i < uuids.length; i++) {
+      const uuid = uuids[i];
+      if (!uuid) {
+        continue;
+      }
+      const block = getBlock(uuid);
+      if (!block) {
+        continue;
+      }
+      blocks.push(block);
+    }
+    return blocks;
+  }
+  onBlokkliEvent("state:reloaded", () => {
+    renderedFieldListItemCache.clear();
+    refreshKey.value++;
+  });
+  return {
+    getBlock,
+    getAllBlocks
+  };
+}

package/dist/runtime/editor/providers/commands.d.ts

@@ -0,0 +1,41 @@
+import type { Command } from '../features/command-palette/types.js';
+type CommandsProviderFunction = () => Command[] | Command | undefined;
+export type CommandsProvider = {
+    /**
+     * Register a command provider function.
+     *
+     * The function will be called when commands are requested.
+     * It can return a single command, an array of commands, or undefined.
+     *
+     * @param fn - Function that returns commands
+     *
+     * @example
+     * ```ts
+     * commands.add(() => ({
+     *   id: 'my-command',
+     *   label: 'My Command',
+     *   callback: () => console.log('executed'),
+     * }))
+     * ```
+     */
+    add: (fn: CommandsProviderFunction) => void;
+    /**
+     * Unregister a command provider function.
+     *
+     * Removes a previously registered function so it no longer provides commands.
+     *
+     * @param fn - The function to remove (must be the same reference used in add)
+     */
+    remove: (fn: CommandsProviderFunction) => void;
+    /**
+     * Get all commands from all registered providers.
+     *
+     * Calls all registered provider functions, flattens the results,
+     * and filters out undefined values.
+     *
+     * @returns Array of all available commands
+     */
+    getCommands: () => Command[];
+};
+export default function (): CommandsProvider;
+export {};