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

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

@@ -1,517 +0,0 @@
-import onBlokkliEvent from "../composables/onBlokkliEvent.js";
-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";
-import { useTransitionedValue } from "../composables/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, 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/helpers/providers/blocks.d.ts

@@ -1,32 +0,0 @@
-import type { RenderedFieldListItem } from '#blokkli/types';
-import type { DomProvider } from './dom.js';
-import type { StateProvider } from './state.js';
-import type { AdapterContext } from '#blokkli/adapter';
-import { type ComputedRef } from '#imports';
-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/helpers/providers/blocks.js

@@ -1,110 +0,0 @@
-import { itemEntityType } from "#blokkli-build/config";
-import onBlokkliEvent from "../composables/onBlokkliEvent.js";
-import { ref } from "#imports";
-import { BUNDLE_BLOKKLI_FRAGMENT } from "#blokkli/constants";
-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 === "from_library" && 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 === BUNDLE_BLOKKLI_FRAGMENT && 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/helpers/providers/commands.d.ts

@@ -1,41 +0,0 @@
-import type { Command } from '#blokkli/types';
-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 {};