@blokkli/editor 2.0.0-alpha.12 → 2.0.0-alpha.14

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,7 @@
-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';
 export type AnimationProvider = {
     /**
      * Request an animation loop. Should be called when UI state changes.
@@ -13,6 +14,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.
@@ -22,4 +24,4 @@ export type AnimationProvider = {
     registerProgram: (id: string, gl: WebGLRenderingContext, shaders: string[]) => ProgramInfo;
     setMouseCoords: (x: number, y: number) => void;
 };
-export default function (ui: UiProvider): AnimationProvider;
+export default function (ui: UiProvider, storage: StorageProvider): AnimationProvider;

package/dist/runtime/helpers/animationProvider.js

@@ -8,7 +8,8 @@ import {
 } from "#imports";
 import { eventBus } from "#blokkli/helpers/eventBus";
 import { createProgramInfo } from "twgl.js";
-export default function(ui) {
+export default function(ui, storage) {
+  const webglEnabled = storage.use("webglEnabled", true);
   let mouseX = 0;
   let mouseY = 0;
   let iterator = 120;
@@ -99,6 +100,9 @@ export default function(ui) {
   return {
     requestDraw,
     gl: function() {
+      if (!webglEnabled.value) {
+        return;
+      }
       if (webglSupported.value === false) {
         return;
       }
@@ -117,7 +121,8 @@ export default function(ui) {
     dpi,
     registerProgram,
     setMouseCoords,
-    webglSupported: computed(() => webglSupported.value),
+    webglSupported: computed(() => webglSupported.value && webglEnabled.value),
+    webglEnabled,
     getCanvasElement
   };
 }

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

@@ -0,0 +1,20 @@
+import type { ComputedRef, ShallowRef } from 'vue';
+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;
+    getCaretWidth?: () => number;
+};
+type UseStickyToolbar = {
+    shouldRender: ComputedRef<boolean>;
+    placementY: ComputedRef<'top' | 'bottom'>;
+    caretX: ComputedRef<number>;
+};
+export default function (el: Readonly<ShallowRef<HTMLElement | null>>, options?: UseStickyToolbarOptions): UseStickyToolbar;
+export {};

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

@@ -0,0 +1,215 @@
+import onBlokkliEvent from "./onBlokkliEvent.js";
+import { computed, ref, useBlokkli } from "#imports";
+import { falsy, findIdealRectPosition } from "../index.js";
+const limitPlacedRect = (rect, padding) => {
+  return {
+    width: rect.width,
+    height: rect.height,
+    x: Math.min(
+      Math.max(rect.x, padding.x),
+      padding.x + padding.width - rect.width
+    ),
+    y: Math.min(
+      Math.max(padding.y, rect.y),
+      padding.height + padding.y - rect.height
+    )
+  };
+};
+export default function(el, options) {
+  const { ui, selection, dom } = useBlokkli();
+  const shouldRender = ref(false);
+  const actualPlacement = ref("bottom");
+  const caretXPosition = ref(0);
+  function getMargin() {
+    if (options && options.getMargin) {
+      return options.getMargin();
+    }
+    return 15;
+  }
+  function getCaretWidth() {
+    if (options && options.getCaretWidth) {
+      return options.getCaretWidth();
+    }
+    return 0;
+  }
+  let anchorRect = null;
+  function getCoords(width, height, placementY, placementX, offset, scale) {
+    let minX = 0;
+    let maxX = 0;
+    let minY = 0;
+    let maxY = 0;
+    let hasRects = false;
+    if (options && options.getAnchorElement) {
+      const anchorElement = options.getAnchorElement();
+      if (anchorElement) {
+        anchorRect ||= ui.getAbsoluteElementRect(
+          anchorElement.getBoundingClientRect(),
+          scale,
+          offset
+        );
+        const rectX = (anchorRect.x + offset.x / scale) * scale;
+        const rectY = (anchorRect.y + offset.y / scale) * scale;
+        const rectRight = rectX + anchorRect.width * scale;
+        const rectBottom = rectY + anchorRect.height * scale;
+        minX = rectX;
+        maxX = rectRight;
+        minY = rectY;
+        maxY = rectBottom;
+        hasRects = true;
+      }
+    } else {
+      const rects = selection.blocks.value.map((block) => dom.getBlockRect(block.uuid)).filter(falsy).filter((rect2) => rect2.height || rect2.width);
+      hasRects = !!rects.length;
+      if (hasRects) {
+        for (let i = 0; i < rects.length; i++) {
+          const { x: x2, y: y2, height: height2, width: rectWidth } = rects[i];
+          const rectX = (x2 + offset.x / scale) * scale;
+          const rectY = (y2 + offset.y / scale) * scale;
+          const rectRight = rectX + rectWidth * scale;
+          const rectBottom = rectY + height2 * scale;
+          if (i === 0 || rectX < minX) {
+            minX = rectX;
+          }
+          if (i === 0 || rectRight > maxX) {
+            maxX = rectRight;
+          }
+          if (i === 0 || rectY < minY) {
+            minY = rectY;
+          }
+          if (i === 0 || rectBottom > maxY) {
+            maxY = rectBottom;
+          }
+        }
+      } else {
+        if (!selection.hasHostSelected.value) {
+          return;
+        }
+        minX = offset.x;
+        maxX = minX + ui.artboardSize.value.width;
+        minY = offset.y;
+        maxY = minY + ui.artboardSize.value.height;
+      }
+    }
+    const padding = ui.visibleViewportPadded.value;
+    const xSubtract = hasRects ? 5 * Math.min(scale, 1) : 0;
+    const margin = getMargin() * Math.min(scale, 1);
+    let actualPlacementY = placementY === "auto" ? "bottom" : placementY;
+    if (placementY === "auto") {
+      const spaceAbove = minY - padding.y;
+      const spaceBelow = padding.y + padding.height - maxY;
+      const requiredSpace = height + margin;
+      if (spaceBelow >= requiredSpace) {
+        actualPlacementY = "bottom";
+      } else if (spaceAbove >= requiredSpace) {
+        actualPlacementY = "top";
+      } else {
+        actualPlacementY = spaceAbove > spaceBelow ? "top" : "bottom";
+      }
+    }
+    const y = actualPlacementY === "top" ? minY - height - margin : maxY + margin;
+    const centerX = (minX + maxX) / 2;
+    let x;
+    if (placementX === "center") {
+      x = centerX - width / 2;
+    } else {
+      x = minX - xSubtract;
+    }
+    const rect = limitPlacedRect(
+      {
+        x,
+        y,
+        width,
+        height
+      },
+      padding
+    );
+    const idealPosition = findIdealRectPosition(
+      ui.viewportBlockingRects.value,
+      rect,
+      padding
+    );
+    if (!idealPosition) {
+      return void 0;
+    }
+    const caretWidth = getCaretWidth();
+    const caretHalfWidth = caretWidth / 2;
+    const minCaretX = caretHalfWidth;
+    const maxCaretX = width - caretHalfWidth;
+    const caretX = Math.max(
+      minCaretX,
+      Math.min(centerX - idealPosition.x, maxCaretX)
+    );
+    return { ...idealPosition, actualPlacementY, caretX };
+  }
+  function getWidth() {
+    if (options && options.getWidth) {
+      return options.getWidth();
+    }
+    if (el.value) {
+      return el.value.clientWidth;
+    }
+    return null;
+  }
+  function getHeight() {
+    if (options && options.getHeight) {
+      return options.getHeight();
+    }
+    if (el.value) {
+      return el.value.clientHeight;
+    }
+    return null;
+  }
+  function getPlacementVertical() {
+    if (options && options.getPlacementY) {
+      return options.getPlacementY();
+    }
+    return "top";
+  }
+  function getPlacementHorizontal() {
+    if (options && options.getPlacementX) {
+      return options.getPlacementX();
+    }
+    return "left";
+  }
+  onBlokkliEvent("canvas:draw", (ctx) => {
+    if (!el.value) {
+      return;
+    }
+    if (ui.isMobile.value) {
+      el.value.style.transform = "";
+      shouldRender.value = true;
+      return;
+    }
+    if (options && options.shouldUpdate && !options.shouldUpdate()) {
+      return;
+    }
+    const width = getWidth();
+    const height = getHeight();
+    if (width === null || height === null) {
+      return;
+    }
+    const placementY = getPlacementVertical();
+    const placementX = getPlacementHorizontal();
+    const coords = getCoords(
+      width,
+      height,
+      placementY,
+      placementX,
+      ctx.artboardOffset,
+      ctx.artboardScale
+    );
+    if (!coords) {
+      shouldRender.value = false;
+      return;
+    }
+    el.value.style.transform = `translate3d(${coords.x}px, ${coords.y}px, 0)`;
+    actualPlacement.value = coords.actualPlacementY;
+    caretXPosition.value = coords.caretX;
+    shouldRender.value = true;
+  });
+  return {
+    shouldRender: computed(() => shouldRender.value),
+    placementY: computed(() => actualPlacement.value),
+    caretX: computed(() => caretXPosition.value)
+  };
+}

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

@@ -1,5 +1,5 @@
 import { type Ref, type ComputedRef } from '#imports';
-import type { BlockDefinition, FragmentDefinition } from '#blokkli-build/definitions';
+import type { BlockDefinition, FragmentDefinition, ProviderDefinition } from '#blokkli-build/definitions';
 import type { ValidFieldListTypes, BlockBundleWithNested } from '#blokkli-build/generated-types';
 import type { DeepReadonly } from 'vue';
 import type { BlockDefinitionOptionsInput } from '../types/index.js';
@@ -8,6 +8,7 @@ export type DefinitionProvider = {
     getBlockDefinition: (bundle: string, fieldListType: ValidFieldListTypes, parentBundle?: BlockBundleWithNested) => BlockDefinition | undefined;
     getDefaultDefinition: (bundle: string) => BlockDefinition | undefined;
     getFragmentDefinition: (name: string) => FragmentDefinition | undefined;
+    getProviderDefinition: (entityType: string, entityBundle: string) => ProviderDefinition | undefined;
     getBlockIcon: (bundle: string) => string | undefined;
     fragmentDefinitions: ComputedRef<FragmentDefinition[]>;
     blockDefinitions: ComputedRef<BlockDefinition[]>;

package/dist/runtime/helpers/definitionProvider.js

@@ -6,6 +6,7 @@ import {
 export default function() {
   const blocks = ref(definitions.blocks);
   const fragments = ref(definitions.fragments);
+  const providers = ref(definitions.providers);
   const renderKey = ref(definitions.renderKey);
   const blockIcons = ref(definitions.icons);
   const allGlobalOptions = ref(
@@ -18,6 +19,7 @@ export default function() {
       renderKey.value = newDefinitions?.default.renderKey || "";
       blocks.value = newDefinitions?.default?.blocks || [];
       fragments.value = newDefinitions?.default?.fragments || [];
+      providers.value = newDefinitions?.default?.providers || [];
       blockIcons.value = newDefinitions?.default?.icons || {};
       allGlobalOptions.value = newDefinitions?.default?.globalOptions || {};
     });
@@ -57,6 +59,16 @@ export default function() {
       {}
     )
   );
+  const providersByName = computed(
+    () => providers.value.reduce(
+      (acc, definition) => {
+        const key = `${definition.entityType}:${definition.bundle}`;
+        acc[key] = definition;
+        return acc;
+      },
+      {}
+    )
+  );
   function getBlockDefinition(bundle, fieldListType, parentBundle) {
     const forFieldListType = bundle + "__field:" + fieldListType;
     if (blocksByKey.value[forFieldListType]) {
@@ -73,6 +85,10 @@ export default function() {
   function getFragmentDefinition(name) {
     return fragmentsByName.value[name];
   }
+  function getProviderDefinition(entityType, entityBundle) {
+    const key = `${entityType}:${entityBundle}`;
+    return providersByName.value[key];
+  }
   function getDefaultDefinition(bundle) {
     return blocksByKey.value[bundle];
   }
@@ -82,6 +98,7 @@ export default function() {
   return {
     getBlockDefinition,
     getFragmentDefinition,
+    getProviderDefinition,
     getDefaultDefinition,
     getBlockIcon,
     fragmentDefinitions: computed(() => fragments.value),

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

@@ -3,3 +3,62 @@
  */
 export declare function cloneWithInlineStyles(node: Element): Element;
 export declare function cloneElementWithStyles(element: Element, isRoot?: boolean): string;
+/**
+ * Possible values for the MouseEvent.buttons property.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
+ */
+export declare const MOUSE_BUTTONS: Readonly<{
+    /**
+     *No button or un-initialized.
+     */
+    NONE: 0;
+    /**
+     * Primary button (usually the left button).
+     */
+    PRIMARY: 1;
+    /**
+     * Secondary button (usually the right button).
+     */
+    SECONDARY: 2;
+    /**
+     * Auxiliary button (usually the mouse wheel button or middle button).
+     */
+    AUXILIARY: 4;
+    /**
+     * 4th button (typically the "Browser Back" button).
+     */
+    FOURTH: 8;
+    /**
+     * 5th button (typically the "Browser Forward" button).
+     */
+    FIFTH: 16;
+}>;
+/**
+ * Possible values for the MouseEvent.button property.
+ * (Yes, they are different from the "buttons" property...)
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+ */
+export declare const MOUSE_BUTTON: Readonly<{
+    /**
+     * Main button, usually the left button or the un-initialized state.
+     */
+    MAIN: 0;
+    /**
+     * Auxiliary button, usually the wheel button or the middle button (if present).
+     */
+    AUXILIARY: 1;
+    /**
+     * Secondary button, usually the right button.
+     */
+    SECONDARY: 2;
+    /**
+     * Fourth button, typically the Browser Back button.
+     */
+    FOURTH: 3;
+    /**
+     * Fifth button, typically the Browser Forward button.
+     */
+    FIFTH: 4;
+}>;

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

@@ -35,3 +35,51 @@ export function cloneElementWithStyles(element, isRoot) {
   container.appendChild(clonedElement);
   return container.innerHTML;
 }
+export const MOUSE_BUTTONS = Object.freeze({
+  /**
+   *No button or un-initialized.
+   */
+  NONE: 0,
+  /**
+   * Primary button (usually the left button).
+   */
+  PRIMARY: 1,
+  /**
+   * Secondary button (usually the right button).
+   */
+  SECONDARY: 2,
+  /**
+   * Auxiliary button (usually the mouse wheel button or middle button).
+   */
+  AUXILIARY: 4,
+  /**
+   * 4th button (typically the "Browser Back" button).
+   */
+  FOURTH: 8,
+  /**
+   * 5th button (typically the "Browser Forward" button).
+   */
+  FIFTH: 16
+});
+export const MOUSE_BUTTON = Object.freeze({
+  /**
+   * Main button, usually the left button or the un-initialized state.
+   */
+  MAIN: 0,
+  /**
+   * Auxiliary button, usually the wheel button or the middle button (if present).
+   */
+  AUXILIARY: 1,
+  /**
+   * Secondary button, usually the right button.
+   */
+  SECONDARY: 2,
+  /**
+   * Fourth button, typically the Browser Back button.
+   */
+  FOURTH: 3,
+  /**
+   * Fifth button, typically the Browser Forward button.
+   */
+  FIFTH: 4
+});

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

@@ -26,6 +26,7 @@ export type DomProvider = {
     updateFieldElement: (entity: EntityContext, fieldName: string, element: HTMLElement) => void;
     unregisterField: (entity: EntityContext, fieldName: string) => void;
     registeredFieldTypes: ComputedRef<RegisteredFieldType[]>;
+    registeredBlockUuids: ComputedRef<string[]>;
     /**
      * Get all droppable entity fields.
      */
@@ -36,7 +37,7 @@ export type DomProvider = {
     isBlockVisible(uuid: string): boolean;
     getActiveProviderElement: () => HTMLElement;
     getBlockRects: () => Record<string, MeasuredBlockRect>;
-    getBlockRect: (uuid: string) => MeasuredBlockRect | undefined;
+    getBlockRect: (uuid: string, refresh?: boolean) => MeasuredBlockRect | undefined;
     refreshBlockRect: (uuid: string) => void;
     getFieldRect: (key: string) => Rectangle | undefined;
     updateVisibleRects: () => void;