@blokkli/editor 1.0.0

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

@@ -0,0 +1,86 @@
+import {
+  findHighestContrastColor,
+  getContrastRatio,
+  getNumericStyleValue,
+  parseColorString,
+  realBackgroundColor,
+  rgbaToString
+} from "../index.js";
+export class DragStyle {
+  styleCache;
+  backgroundCache;
+  constructor() {
+    this.styleCache = /* @__PURE__ */ new WeakMap();
+    this.backgroundCache = /* @__PURE__ */ new WeakMap();
+  }
+  invalidateStyle(el) {
+    this.styleCache.delete(el);
+    this.backgroundCache.delete(el);
+  }
+  reset() {
+    this.styleCache = /* @__PURE__ */ new WeakMap();
+    this.backgroundCache = /* @__PURE__ */ new WeakMap();
+  }
+  getStyle(el, accentColor) {
+    const cached = this.styleCache.get(el);
+    if (cached) {
+      return cached;
+    }
+    const style = this.getDraggableStyle(el, accentColor);
+    this.styleCache.set(el, style);
+    return style;
+  }
+  realBackgroundColor(el) {
+    const transparent = "rgba(0, 0, 0, 0)";
+    if (!el) {
+      return transparent;
+    }
+    const cached = this.backgroundCache.get(el);
+    if (cached) {
+      return cached;
+    }
+    let bg = getComputedStyle(el).backgroundColor;
+    if (bg === transparent || bg === "transparent") {
+      bg = realBackgroundColor(el.parentElement);
+    }
+    this.backgroundCache.set(el, bg);
+    return bg;
+  }
+  getDraggableStyle(el, accentColor) {
+    const style = getComputedStyle(el);
+    const radius = [
+      getNumericStyleValue(style.borderTopLeftRadius, 0),
+      getNumericStyleValue(style.borderTopRightRadius, 0),
+      getNumericStyleValue(style.borderBottomRightRadius, 0),
+      getNumericStyleValue(style.borderBottomLeftRadius, 0)
+    ];
+    const radiusMin = Math.min(...radius);
+    const backgroundColorForSelection = parseColorString(
+      realBackgroundColor(el.parentElement)
+    );
+    const contrastColor = findHighestContrastColor(
+      [[255, 255, 255], accentColor],
+      backgroundColorForSelection
+    );
+    const backgroundColor = parseColorString(realBackgroundColor(el));
+    const textColor = findHighestContrastColor(
+      [
+        [0, 0, 0],
+        [255, 255, 255]
+      ],
+      backgroundColor
+    );
+    const bg = backgroundColorForSelection || [255, 255, 255];
+    const ratio = getContrastRatio(accentColor, bg);
+    return {
+      radius,
+      radiusMin,
+      radiusString: radius.map((v) => v + "px").join(" "),
+      contrastColor: rgbaToString(contrastColor),
+      contrastColorRGB: contrastColor,
+      contrastColorTranslucent: rgbaToString(contrastColor, 0.25),
+      textColor: rgbaToString(textColor),
+      isInverted: ratio < 5
+    };
+  }
+}

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

@@ -0,0 +1,25 @@
+import { type ComputedRef } from '#imports';
+import type { UiProvider } from './uiProvider.js';
+import { type ProgramInfo } from 'twgl.js';
+export type AnimationProvider = {
+    /**
+     * Request an animation loop. Should be called when UI state changes.
+     */
+    requestDraw: () => void;
+    /**
+     * Get the WebGL rendering context.
+     */
+    gl: () => WebGLRenderingContext | undefined;
+    setSharedUniforms: (gl: WebGLRenderingContext, programInfo: ProgramInfo) => void;
+    dpi: ComputedRef<number>;
+    webglSupported: ComputedRef<boolean | null>;
+    getCanvasElement: () => HTMLCanvasElement;
+    /**
+     * 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;
+};
+export default function (ui: UiProvider): AnimationProvider;

package/dist/runtime/helpers/animationProvider.js

@@ -0,0 +1,116 @@
+import onBlokkliEvent from "./composables/onBlokkliEvent.js";
+import useAnimationFrame from "./composables/useAnimationFrame.js";
+import {
+  ref,
+  computed,
+  onMounted,
+  onBeforeUnmount
+} from "#imports";
+import { eventBus } from "#blokkli/helpers/eventBus";
+import { createProgramInfo } from "twgl.js";
+export default function(ui) {
+  let mouseX = 0;
+  let mouseY = 0;
+  let iterator = 120;
+  const webglSupported = ref(null);
+  useAnimationFrame(() => {
+    if (iterator < 1) {
+      return;
+    }
+    iterator--;
+    eventBus.emit("animationFrame:before");
+    eventBus.emit("animationFrame", {
+      mouseX,
+      mouseY,
+      fieldAreas: []
+    });
+  });
+  onMounted(() => {
+    document.addEventListener("scroll", requestDraw);
+    document.body.addEventListener("wheel", requestDraw, { passive: false });
+  });
+  onBeforeUnmount(() => {
+    document.body.removeEventListener("wheel", requestDraw);
+    document.removeEventListener("scroll", requestDraw);
+  });
+  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(() => {
+    if (ui.lowPerformanceMode.value) {
+      return 0.5;
+    }
+    if (ui.isMobile.value) {
+      return window.devicePixelRatio;
+    }
+    return Math.min(window.devicePixelRatio, 2.5);
+  });
+  function setSharedUniforms(gl, programInfo) {
+    const resolution = [ui.viewport.value.width, ui.viewport.value.height];
+    gl.uniform2fv(
+      gl.getUniformLocation(programInfo.program, "u_resolution"),
+      resolution
+    );
+    const offset = ui.artboardOffset.value;
+    gl.uniform1f(
+      gl.getUniformLocation(programInfo.program, "u_offset_x"),
+      offset.x
+    );
+    gl.uniform1f(
+      gl.getUniformLocation(programInfo.program, "u_offset_y"),
+      offset.y
+    );
+    gl.uniform1f(
+      gl.getUniformLocation(programInfo.program, "u_scale"),
+      ui.artboardScale.value
+    );
+    gl.uniform1f(gl.getUniformLocation(programInfo.program, "u_dpi"), dpi.value);
+  }
+  const registeredPrograms = {};
+  function registerProgram(id, gl, shaders) {
+    if (!registeredPrograms[id]) {
+      registeredPrograms[id] = createProgramInfo(gl, shaders);
+    }
+    return registeredPrograms[id];
+  }
+  function setMouseCoords(x, y) {
+    mouseX = x;
+    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;
+    },
+    setSharedUniforms,
+    dpi,
+    registerProgram,
+    setMouseCoords,
+    webglSupported: computed(() => webglSupported.value),
+    getCanvasElement
+  };
+}

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

@@ -0,0 +1,7 @@
+import { type Emitter } from 'mitt';
+type BroadcastEvents = {
+    previewFocused: undefined;
+};
+export type BroadcastProvider = Emitter<BroadcastEvents>;
+export default function (): BroadcastProvider;
+export {};

package/dist/runtime/helpers/broadcastProvider.js

@@ -0,0 +1,26 @@
+import mitt from "mitt";
+import { onBeforeUnmount } from "vue";
+export default function() {
+  const senderId = Math.round(Math.random() * 1e10).toString();
+  const broadcastEventBus = mitt();
+  const channel = new BroadcastChannel("blokkli");
+  channel.addEventListener("message", (e) => {
+    if (e.data.senderId === senderId) {
+      return;
+    }
+    broadcastEventBus.emit(e.data.name, e.data.data);
+  });
+  onBeforeUnmount(() => channel.close());
+  return {
+    ...broadcastEventBus,
+    emit(name, data) {
+      const event = {
+        name,
+        data,
+        senderId
+      };
+      channel.postMessage(event);
+      broadcastEventBus.emit(name, data);
+    }
+  };
+}

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

@@ -0,0 +1,9 @@
+import type { Command } from '#blokkli/types';
+type CommandsProviderFunction = () => Command[] | Command | undefined;
+export type CommandsProvider = {
+    add: (fn: CommandsProviderFunction) => void;
+    remove: (fn: CommandsProviderFunction) => void;
+    getCommands: () => Command[];
+};
+export default function (): CommandsProvider;
+export {};

package/dist/runtime/helpers/commandsProvider.js

@@ -0,0 +1,16 @@
+import { falsy } from "./index.js";
+export default function() {
+  let functions = [];
+  const add = (fn) => {
+    functions.push(fn);
+  };
+  const remove = (fn) => {
+    functions = functions.filter((v) => v !== fn);
+  };
+  const getCommands = () => functions.flatMap((fn) => fn()).filter(falsy);
+  return {
+    add,
+    remove,
+    getCommands
+  };
+}

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

@@ -0,0 +1,2 @@
+import type { Command } from '#blokkli/types';
+export default function (cb: () => Command | Command[] | undefined): void;

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

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

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

@@ -0,0 +1,2 @@
+import type { DraggableItem, DropArea } from '#blokkli/types';
+export default function (cb: (items: DraggableItem[]) => DropArea | DropArea[] | undefined): void;

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

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

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

@@ -0,0 +1,2 @@
+import type { KeyboardShortcut } from '#blokkli/types';
+export default function (shortcut: KeyboardShortcut[] | KeyboardShortcut): void;

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

@@ -0,0 +1,19 @@
+import { useBlokkli } from "../../composables/useBlokkli.js";
+import { onBeforeUnmount, onMounted } from "#imports";
+export default function(shortcut) {
+  const { keyboard } = useBlokkli();
+  onMounted(() => {
+    if (Array.isArray(shortcut)) {
+      shortcut.forEach((v) => keyboard.registerShortcut(v));
+      return;
+    }
+    keyboard.registerShortcut(shortcut);
+  });
+  onBeforeUnmount(() => {
+    if (Array.isArray(shortcut)) {
+      shortcut.forEach((v) => keyboard.unregisterShortcut(v));
+      return;
+    }
+    keyboard.unregisterShortcut(shortcut);
+  });
+}

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

@@ -0,0 +1,2 @@
+import type { TourItem } from '#blokkli/types';
+export default function (cb: () => TourItem | TourItem[] | undefined): void;

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

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

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

@@ -0,0 +1,2 @@
+import type { EventbusEvents } from '#blokkli/types';
+export default function <T extends keyof EventbusEvents>(name: T, cb: (e: EventbusEvents[T]) => void): void;

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

@@ -0,0 +1,10 @@
+import { eventBus } from "../eventBus.js";
+import { onBeforeUnmount, onMounted } from "#imports";
+export default function(name, cb) {
+  onMounted(() => {
+    eventBus.on(name, cb);
+  });
+  onBeforeUnmount(() => {
+    eventBus.off(name, cb);
+  });
+}

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

@@ -0,0 +1 @@
+export default function (cb: (time: number) => void): void;

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

@@ -0,0 +1,14 @@
+import { onBeforeUnmount, onMounted } from "#imports";
+export default function(cb) {
+  let raf = null;
+  const loop = (time) => {
+    cb(time);
+    raf = window.requestAnimationFrame(loop);
+  };
+  onMounted(() => {
+    raf = window.requestAnimationFrame(loop);
+  });
+  onBeforeUnmount(() => {
+    window.cancelAnimationFrame(raf);
+  });
+}

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

@@ -0,0 +1,2 @@
+import type { DebugLogger } from '../debugProvider.js';
+export default function (): DebugLogger;

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

@@ -0,0 +1,5 @@
+import { inject } from "#imports";
+import { INJECT_EDIT_LOGGER } from "../symbols.js";
+export default function() {
+  return inject(INJECT_EDIT_LOGGER);
+}

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

@@ -0,0 +1,5 @@
+export default function (callback: (entries: IntersectionObserverEntry[]) => void): {
+    observe: (el: HTMLElement) => void;
+    unobserve: (el: HTMLElement) => void;
+    init: () => void;
+};

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

@@ -0,0 +1,26 @@
+export default function(callback) {
+  let observer = null;
+  let collected = [];
+  function init() {
+    observer = new IntersectionObserver(callback, {
+      threshold: 0
+    });
+    for (const el of collected) {
+      observer.observe(el);
+    }
+    collected = [];
+  }
+  function observe(el) {
+    if (observer) {
+      observer.observe(el);
+      return;
+    }
+    collected.push(el);
+  }
+  function unobserve(el) {
+    if (observer) {
+      observer.unobserve(el);
+    }
+  }
+  return { observe, unobserve, init };
+}

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

@@ -0,0 +1,23 @@
+import type { StorageProvider } from './storageProvider.js';
+import { type ComputedRef } from '#imports';
+export type DebugLogger = {
+    log: (...v: any) => void;
+    error: (...v: any) => void;
+};
+type RegisteredDebugOverlay = {
+    id: string;
+    label: string;
+    active: boolean;
+};
+export type DebugProvider = {
+    isEnabled: ComputedRef<boolean>;
+    toggle: () => void;
+    log: (...v: any) => void;
+    createLogger: (name: string) => DebugLogger;
+    registerOverlay: (id: string, label: string) => void;
+    unregisterOverlay: (id: string) => void;
+    overlays: ComputedRef<RegisteredDebugOverlay[]>;
+    toggleOverlay: (id: string) => void;
+};
+export default function (storage: StorageProvider): DebugProvider;
+export {};

package/dist/runtime/helpers/debugProvider.js

@@ -0,0 +1,65 @@
+import { computed, ref } from "#imports";
+export default function(storage) {
+  const showDebug = storage.use("showDebug", false);
+  const visible = storage.use("visibleDebugOverlays", []);
+  const registeredOverlays = ref([]);
+  const isEnabled = computed(() => showDebug.value);
+  function toggle() {
+    showDebug.value = !showDebug.value;
+  }
+  function log(...v) {
+    if (!showDebug.value) {
+      return;
+    }
+    console.log(v);
+  }
+  function createLogger(name) {
+    return {
+      log(...v) {
+        if (!showDebug.value) {
+          return;
+        }
+        console.log(`[${name}]: `, ...v);
+      },
+      error(...v) {
+        if (!showDebug.value) {
+          return;
+        }
+        console.error(`[${name}]: `, ...v);
+      }
+    };
+  }
+  function registerOverlay(id, label) {
+    registeredOverlays.value.push({ id, label });
+  }
+  function unregisterOverlay(id) {
+    registeredOverlays.value = registeredOverlays.value.filter(
+      (v) => v.id !== id
+    );
+  }
+  const overlays = computed(() => {
+    return registeredOverlays.value.map((v) => {
+      return {
+        ...v,
+        active: visible.value.includes(v.id)
+      };
+    });
+  });
+  function toggleOverlay(id) {
+    if (visible.value.includes(id)) {
+      visible.value = visible.value.filter((v) => v !== id);
+    } else {
+      visible.value = [...visible.value, id];
+    }
+  }
+  return {
+    isEnabled,
+    toggle,
+    log,
+    createLogger,
+    registerOverlay,
+    unregisterOverlay,
+    overlays,
+    toggleOverlay
+  };
+}

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

@@ -0,0 +1,5 @@
+/**
+ * Recursively clone an element and inline its styles.
+ */
+export declare function cloneWithInlineStyles(node: Element): Element;
+export declare function cloneElementWithStyles(element: Element, isRoot?: boolean): string;

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

@@ -0,0 +1,37 @@
+export function cloneWithInlineStyles(node) {
+  const clone = node.cloneNode(false);
+  clone.removeAttribute("class");
+  clone.removeAttribute("id");
+  clone.removeAttribute("name");
+  clone.removeAttribute("for");
+  clone.removeAttribute("style");
+  if (clone instanceof HTMLElement || clone instanceof SVGElement) {
+    Object.keys(clone.dataset).forEach((key) => {
+      clone.dataset[key] = "";
+    });
+  }
+  const computedStyle = getComputedStyle(node);
+  for (let i = 0; i < computedStyle.length; i++) {
+    const propName = computedStyle[i];
+    if (clone instanceof HTMLElement || clone instanceof SVGElement) {
+      clone.style[propName] = computedStyle.getPropertyValue(propName);
+    }
+  }
+  Array.from(node.childNodes).forEach((child) => {
+    if (child.nodeType === Node.ELEMENT_NODE) {
+      clone.appendChild(cloneWithInlineStyles(child));
+    } else if (child.nodeType === Node.TEXT_NODE) {
+      clone.appendChild(child.cloneNode(true));
+    }
+  });
+  return clone;
+}
+export function cloneElementWithStyles(element, isRoot) {
+  const clonedElement = cloneWithInlineStyles(element);
+  if (isRoot && (clonedElement instanceof HTMLElement || clonedElement instanceof SVGElement)) {
+    clonedElement.style.opacity = "1";
+  }
+  const container = document.createElement("div");
+  container.appendChild(clonedElement);
+  return container.innerHTML;
+}

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

@@ -0,0 +1,46 @@
+import type { ComponentInternalInstance } from 'vue';
+import { type ComputedRef } from '#imports';
+import type { DraggableExistingBlock, BlokkliFieldElement, DraggableItem, DroppableEntityField, EntityContext, Rectangle } from '#blokkli/types';
+import type { UiProvider } from './uiProvider.js';
+import type { BlockBundleWithNested, ValidFieldListTypes } from '#blokkli/generated-types';
+import type { DebugProvider } from './debugProvider.js';
+type MeasuredBlockRect = Rectangle & {
+    time: number;
+};
+export type DomProvider = {
+    findBlock(uuid: string): DraggableExistingBlock | undefined;
+    getAllBlocks(): DraggableExistingBlock[];
+    findClosestBlock(el: Element | EventTarget): DraggableExistingBlock | undefined;
+    getAllFields(): BlokkliFieldElement[];
+    /**
+     * Return the droppable markup for a draggable item.
+     */
+    getDropElementMarkup(item: DraggableItem, checkSize?: boolean): string;
+    getBlockField(uuid: string): BlokkliFieldElement;
+    findField(entityUuid: string, fieldName: string): BlokkliFieldElement | undefined;
+    registerBlock: (uuid: string, instance: ComponentInternalInstance | null, bundle: string, fieldListType: ValidFieldListTypes, parentBlockBundle?: BlockBundleWithNested) => void;
+    unregisterBlock: (uuid: string) => void;
+    registerField: (uuid: string, fieldName: string, instance: HTMLElement) => void;
+    unregisterField: (uuid: string, fieldName: string) => void;
+    /**
+     * Get all droppable entity fields.
+     */
+    getAllDroppableFields(): DroppableEntityField[];
+    findClosestEntityContext(el: HTMLElement): EntityContext | undefined;
+    getBlockVisibilities(): Record<string, boolean>;
+    getVisibleBlocks(): string[];
+    getVisibleFields(): string[];
+    getActiveProviderElement: () => HTMLElement;
+    getBlockRects: () => Record<string, MeasuredBlockRect>;
+    getBlockRect: (uuid: string) => MeasuredBlockRect | undefined;
+    refreshBlockRect: (uuid: string) => void;
+    getFieldRect: (key: string) => Rectangle | undefined;
+    isReady: ComputedRef<boolean>;
+    init: () => void;
+    /**
+     * Get the drag element for a block.
+     */
+    getDragElement: (block: DraggableExistingBlock) => HTMLElement | undefined;
+};
+export default function (ui: UiProvider, debug: DebugProvider): DomProvider;
+export {};