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

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

@@ -0,0 +1,233 @@
+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;
+    const anchorElement = options && options.getAnchorElement ? options.getAnchorElement() : null;
+    const anchorCoordinates = options && options.getAnchorCoordinates ? options.getAnchorCoordinates() : null;
+    if (anchorCoordinates) {
+      const rectX = (anchorCoordinates.x + offset.x / scale) * scale;
+      const rectY = (anchorCoordinates.y + offset.y / scale) * scale;
+      minX = rectX;
+      maxX = rectX + 1;
+      minY = rectY;
+      maxY = rectY + 1;
+      hasRects = true;
+    } else 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.uuids.value.map((uuid) => dom.getBlockRect(uuid)).filter(falsy).filter((rect) => rect.height || rect.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 shouldAllowOverflow = options?.allowHorizontalOverflow && width > padding.width;
+    let idealPosition;
+    if (shouldAllowOverflow) {
+      const limitedY = Math.min(
+        Math.max(padding.y, y),
+        padding.height + padding.y - height
+      );
+      idealPosition = { x, y: limitedY };
+    } else {
+      const rect = limitPlacedRect(
+        {
+          x,
+          y,
+          width,
+          height
+        },
+        padding
+      );
+      const position = findIdealRectPosition(
+        ui.viewportBlockingRects.value,
+        rect,
+        padding
+      );
+      if (!position) {
+        return void 0;
+      }
+      idealPosition = position;
+    }
+    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,13 +1,14 @@
 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';
 import { type RuntimeBlockOptionArray } from '#blokkli-build/runtime-options';
 export type DefinitionProvider = {
-    getBlockDefinition: (bundle: string, fieldListType: ValidFieldListTypes, parentBundle?: BlockBundleWithNested) => BlockDefinition | undefined;
+    getBlockDefinition: (bundle: string, fieldListType: ValidFieldListTypes, parentBundle?: BlockBundleWithNested | null) => 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,63 @@
  */
 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;
+}>;
+export type CursorKeyword = 'alias' | 'all-scroll' | 'auto' | 'cell' | 'col-resize' | 'context-menu' | 'copy' | 'crosshair' | 'default' | 'e-resize' | 'ew-resize' | 'grab' | 'grabbing' | 'help' | 'move' | 'n-resize' | 'ne-resize' | 'nesw-resize' | 'no-drop' | 'none' | 'not-allowed' | 'ns-resize' | 'nw-resize' | 'nwse-resize' | 'pointer' | 'progress' | 'row-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'text' | 'vertical-text' | 'w-resize' | 'wait' | 'zoom-in' | 'zoom-out';

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

@@ -1,8 +1,10 @@
 import { type ComputedRef } from '#imports';
-import type { DraggableExistingBlock, BlokkliFieldElement, DraggableItem, DroppableEntityField, EntityContext, Rectangle } from '#blokkli/types';
+import type { DraggableExistingBlock, DraggableItem, EntityContext, Rectangle, RenderedFieldListItem, RegisteredField, RegisterFieldData } from '#blokkli/types';
 import type { UiProvider } from './uiProvider.js';
 import type { DebugProvider } from './debugProvider.js';
 import type { DefinitionProvider } from './definitionProvider.js';
+import type { StateProvider } from './stateProvider.js';
+import type { ElementProvider } from './providers/element.js';
 type RegisteredFieldType = {
     entityType: string;
     entityBundle: string;
@@ -12,38 +14,77 @@ type MeasuredBlockRect = Rectangle & {
     time: number;
 };
 export type DomProvider = {
-    findBlock(uuid: string): DraggableExistingBlock | undefined;
-    getAllBlocks(): DraggableExistingBlock[];
-    findClosestBlock(el: Element | EventTarget): DraggableExistingBlock | undefined;
     /**
      * Return the droppable markup for a draggable item.
      */
-    getDropElementMarkup(item: DraggableItem, checkSize?: boolean): string;
-    findField(entityUuid: string, fieldName: string): BlokkliFieldElement | undefined;
-    registerField: (entity: EntityContext, fieldName: string, instance: HTMLElement) => void;
-    updateFieldElement: (entity: EntityContext, fieldName: string, element: HTMLElement) => void;
+    getDropElementMarkup(item: DraggableItem | RenderedFieldListItem, checkSize?: boolean): string;
+    registerBlock: (key: string, uuid: string, el: HTMLElement | null) => void;
+    unregisterBlock: (key: string, uuid: string) => void;
+    registerField: (entity: EntityContext, fieldName: string, instance: HTMLElement, data: RegisterFieldData) => void;
+    updateFieldElement: (entity: EntityContext, fieldName: string, element: HTMLElement, data: RegisterFieldData) => void;
     unregisterField: (entity: EntityContext, fieldName: string) => void;
+    getRegisteredField: (uuid: string, fieldName: string) => RegisteredField | undefined;
     registeredFieldTypes: ComputedRef<RegisteredFieldType[]>;
-    /**
-     * Get all droppable entity fields.
-     */
-    getAllDroppableFields(): DroppableEntityField[];
-    findClosestEntityContext(el: HTMLElement): EntityContext | undefined;
+    registeredBlockUuids: ComputedRef<string[]>;
     getVisibleBlocks(): string[];
     getVisibleFields(): string[];
     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;
+    registeredBlocks: ComputedRef<Record<string, HTMLElement | undefined>>;
     updateVisibleRects: () => void;
     isReady: ComputedRef<boolean>;
     init: () => void;
     /**
      * Get the drag element for a block.
      */
-    getDragElement: (block: DraggableExistingBlock) => HTMLElement | undefined;
+    getDragElement: (block: DraggableExistingBlock | RenderedFieldListItem) => HTMLElement | undefined;
+    /**
+     * Get debug data for troubleshooting.
+     */
+    getDebugData: () => {
+        registeredBlocks: Array<{
+            uuid: string;
+            hasElement: boolean;
+            hasObservedElement: boolean;
+            hasRect: boolean;
+            hasCurrentKey: boolean;
+            isVisible: boolean;
+            elementInfo?: {
+                tagName: string;
+                bundle?: string;
+                hostBundle?: string;
+                fieldListType?: string;
+            };
+        }>;
+        fields: Array<{
+            key: string;
+            isVisible: boolean;
+            hasRect: boolean;
+            entityType: string;
+            entityBundle: string;
+            fieldName: string;
+        }>;
+        summary: {
+            totalRegisteredBlocks: number;
+            totalBlocksWithElements: number;
+            totalObservedElements: number;
+            totalBlockRects: number;
+            totalVisibleBlocks: number;
+            totalRegisteredFields: number;
+            totalVisibleFields: number;
+            totalFieldRects: number;
+            isInitializing: boolean;
+            isReady: boolean;
+        };
+        orphanedData: {
+            rectsWithoutRegistration: string[];
+            observedElementsWithoutRegistration: string[];
+            keysWithoutRegistration: string[];
+        };
+    };
 };
-export default function (ui: UiProvider, debug: DebugProvider, definitions: DefinitionProvider): DomProvider;
+export default function (ui: UiProvider, debug: DebugProvider, definitions: DefinitionProvider, state: StateProvider, element: ElementProvider): DomProvider;
 export {};