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

package/dist/runtime/helpers/domProvider.js

@@ -52,12 +52,25 @@ export default function(ui, debug, definitions) {
   const logger = debug.createLogger("DomProvider");
   const mutationsReady = ref(true);
   const intersectionReady = ref(false);
+  const registeredBlocks = reactive({});
+  const registeredFields = reactive({});
   const visibleBlocks = /* @__PURE__ */ new Set();
   const visibleFields = /* @__PURE__ */ new Set();
   const blockRects = {};
   const fieldRects = {};
   const blockUuidCurrentKey = {};
   let draggableBlockCache = {};
+  let initTimeout = null;
+  const isInitalizing = ref(true);
+  const observedElementCache = /* @__PURE__ */ new Map();
+  const registeredBlockUuids = computed(() => {
+    return Object.entries(registeredBlocks).map(([uuid, element]) => {
+      if (element) {
+        return uuid;
+      }
+      return null;
+    }).filter(falsy);
+  });
   const resizeObserver = new ResizeObserver(function(entries) {
     for (const entry of entries) {
       if (!(entry.target instanceof HTMLElement)) {
@@ -127,8 +140,6 @@ export default function(ui, debug, definitions) {
     }
   }
   const intersectionObserver = useDelayedIntersectionObserver(intersectionCallback);
-  const registeredBlocks = reactive({});
-  const registeredFields = reactive({});
   const registeredFieldTypes = computed(() => {
     const fields = Object.values(registeredFields);
     const found = /* @__PURE__ */ new Set();
@@ -172,10 +183,15 @@ export default function(ui, debug, definitions) {
     visibleFields.delete(key);
     registeredFields[key] = void 0;
   };
-  function getElementToObserve(el, bundle, fieldListType, parentBlockBundle) {
+  function getElementToObserve(uuid, el, bundle, fieldListType, parentBlockBundle) {
     if (el.classList.contains("bk-block-proxy")) {
       return el;
     }
+    const key = `${uuid}${bundle}${fieldListType}${parentBlockBundle ?? "none"}`;
+    const cached = observedElementCache.get(key);
+    if (cached) {
+      return cached;
+    }
     const definition = definitions.getBlockDefinition(
       bundle,
       fieldListType,
@@ -186,8 +202,10 @@ export default function(ui, debug, definitions) {
     }
     const observableElement = (definition.editor?.getDraggableElement ? definition.editor.getDraggableElement(el) : el) || el;
     if (observableElement instanceof HTMLElement) {
+      observedElementCache.set(key, observableElement);
       return observableElement;
     }
+    observedElementCache.set(key, el);
     return el;
   }
   const findBlock = (uuid) => {
@@ -261,23 +279,41 @@ export default function(ui, debug, definitions) {
   function getBlockRects() {
     return blockRects;
   }
-  function getBlockRect(uuid) {
+  function getBlockRect(uuid, refresh) {
+    if (refresh) {
+      refreshBlockRect(uuid);
+    }
     return blockRects[uuid];
   }
   function getFieldRect(key) {
     return fieldRects[key];
   }
-  function refreshBlockRect(uuid) {
-    const block = findBlock(uuid);
-    if (!block) {
+  function refreshBlockRect(uuid, providedOffset, providedScale) {
+    const offset = providedOffset ?? ui.artboardOffset.value;
+    const scale = providedScale ?? ui.artboardScale.value;
+    const el = registeredBlocks[uuid];
+    if (!el) {
       return;
     }
-    const el = getDragElement(block);
-    if (!el) {
+    const bundle = el.dataset.itemBundle;
+    const hostBundle = el.dataset.hostBundle;
+    const hostFieldListType = el.dataset.hostFieldListType;
+    if (!bundle || !hostFieldListType) {
       return;
     }
+    const observableElement = getElementToObserve(
+      uuid,
+      el,
+      bundle,
+      hostFieldListType,
+      hostBundle
+    );
     blockRects[uuid] = rectWithTime(
-      ui.getAbsoluteElementRect(el.getBoundingClientRect())
+      ui.getAbsoluteElementRect(
+        observableElement.getBoundingClientRect(),
+        scale,
+        offset
+      )
     );
   }
   function refreshFieldRect(key) {
@@ -298,34 +334,15 @@ export default function(ui, debug, definitions) {
     return getVisibleBlocks();
   }
   function updateVisibleRects() {
+    logger.log("Update visible rects");
     const toUpdate = getUuidsToUpdateRectsFor();
     const offset = ui.artboardOffset.value;
     const scale = ui.artboardScale.value;
     for (let i = 0; i < toUpdate.length; i++) {
       const uuid = toUpdate[i];
-      const el = registeredBlocks[uuid];
-      if (!el) {
-        continue;
+      if (uuid) {
+        refreshBlockRect(uuid, offset, scale);
       }
-      const bundle = el.dataset.itemBundle;
-      const hostBundle = el.dataset.hostBundle;
-      const hostFieldListType = el.dataset.hostFieldListType;
-      if (!bundle || !hostFieldListType) {
-        continue;
-      }
-      const observableElement = getElementToObserve(
-        el,
-        bundle,
-        hostFieldListType,
-        hostBundle
-      );
-      blockRects[uuid] = rectWithTime(
-        ui.getAbsoluteElementRect(
-          observableElement.getBoundingClientRect(),
-          scale,
-          offset
-        )
-      );
     }
     const visibleFieldKeys = getVisibleFields();
     for (let i = 0; i < visibleFieldKeys.length; i++) {
@@ -342,10 +359,15 @@ export default function(ui, debug, definitions) {
     }
   }
   onBlokkliEvent("state:reloaded", () => {
+    observedElementCache.clear();
     draggableBlockCache = {};
     if (stateReloadTimeout) {
       window.clearTimeout(stateReloadTimeout);
     }
+    const allUuids = Object.keys(registeredBlocks);
+    if (allUuids.length < 150) {
+      updateVisibleRects();
+    }
     stateReloadTimeout = window.setTimeout(updateVisibleRects, 300);
   });
   onBlokkliEvent("ui:resized", function() {
@@ -361,24 +383,45 @@ export default function(ui, debug, definitions) {
   const dragElementUuidMap = /* @__PURE__ */ new WeakMap();
   const dragElementCache = /* @__PURE__ */ new Map();
   function getDragElement(block) {
-    const cached = dragElementCache.get(block.uuid);
-    if (cached && document.body.contains(cached)) {
-      return cached;
-    }
     const el = block.element();
     if (!el) {
-      return;
+      return void 0;
     }
-    dragElementUuidMap.set(el, block.uuid);
-    dragElementCache.set(block.uuid, el);
-    return el;
+    return getElementToObserve(
+      block.uuid,
+      el,
+      block.itemBundle,
+      block.hostFieldListType,
+      block.hostBundle
+    );
   }
   function isBlockVisible(uuid) {
     return visibleBlocks.has(uuid);
   }
+  function refreshAllBlockRects() {
+    const uuids = Object.keys(blockRects);
+    if (uuids.length < 200) {
+      for (let i = 0; i < uuids.length; i++) {
+        const uuid = uuids[i];
+        if (!uuid) {
+          continue;
+        }
+        refreshBlockRect(uuid);
+      }
+    }
+  }
   function registerBlock(key, uuid, el) {
     logger.log("registerBlock: " + uuid);
     blockUuidCurrentKey[uuid] = key;
+    if (initTimeout) {
+      window.clearTimeout(initTimeout);
+    }
+    if (isInitalizing.value) {
+      initTimeout = window.setTimeout(() => {
+        isInitalizing.value = false;
+        refreshAllBlockRects();
+      }, 500);
+    }
     if (!el) {
       logger.log("registerBlock call unregisterBlock because no element", uuid);
       unregisterBlock(key, uuid);
@@ -394,6 +437,7 @@ export default function(ui, debug, definitions) {
     const item = buildDraggableItem(el);
     if (item && item.itemType === "existing") {
       const observableElement = getElementToObserve(
+        item.uuid,
         el,
         item.itemBundle,
         item.hostFieldListType,
@@ -415,7 +459,6 @@ export default function(ui, debug, definitions) {
       intersectionObserver.unobserve(el);
       resizeObserver.unobserve(el);
       dragElementUuidMap.delete(el);
-      dragElementUuidMap.delete(el);
     }
     dragElementCache.delete(uuid);
     registeredBlocks[uuid] = void 0;
@@ -441,12 +484,15 @@ export default function(ui, debug, definitions) {
     getFieldRect,
     refreshBlockRect,
     isBlockVisible,
-    isReady: computed(() => mutationsReady.value && intersectionReady.value),
+    isReady: computed(
+      () => mutationsReady.value && intersectionReady.value && !isInitalizing.value
+    ),
     init,
     getDragElement,
     updateVisibleRects,
     registeredFieldTypes,
     registerBlock,
-    unregisterBlock
+    unregisterBlock,
+    registeredBlockUuids
   };
 }

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

@@ -0,0 +1,6 @@
+import type { BlokkliFieldElement } from '#blokkli/types';
+export type Orientation = 'horizontal' | 'vertical';
+export declare const MIN_GAP = 20;
+export declare function getGapSize(orientation: Orientation, element: HTMLElement): number;
+export declare function getChildrenOrientation(element: HTMLElement): Orientation;
+export declare function determineCanAddChildren(field: BlokkliFieldElement, children: HTMLElement[], uuids: string[], currentCount: number, itemsToAdd: number, draggingBundles?: string[]): boolean;

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

@@ -0,0 +1,49 @@
+export const MIN_GAP = 20;
+export function getGapSize(orientation, element) {
+  const computedStyle = window.getComputedStyle(element);
+  if (computedStyle.display.includes("grid") || computedStyle.display.includes("flex")) {
+    const gap = orientation === "vertical" ? computedStyle.columnGap || computedStyle.gridColumnGap : computedStyle.rowGap || computedStyle.gridRowGap;
+    if (gap) {
+      const gapParts = gap.split(" ");
+      const gapValue = gapParts[0];
+      if (gapValue?.endsWith("px")) {
+        return Number.parseFloat(gapValue);
+      }
+    }
+  }
+  return MIN_GAP;
+}
+export function getChildrenOrientation(element) {
+  const computedStyle = window.getComputedStyle(element);
+  if (computedStyle.display.includes("flex")) {
+    if (computedStyle.flexDirection === "row" || computedStyle.flexDirection === "row-reverse") {
+      return "horizontal";
+    } else {
+      return "vertical";
+    }
+  }
+  if (computedStyle.display.includes("grid")) {
+    if (computedStyle.gridTemplateColumns.split(" ").length > 1) {
+      return "horizontal";
+    } else {
+      return "vertical";
+    }
+  }
+  return "vertical";
+}
+export function determineCanAddChildren(field, children, uuids, currentCount, itemsToAdd, draggingBundles) {
+  if (field.cardinality !== -1) {
+    const childrenThatAreSelection = children.filter((child) => {
+      const uuid = child.dataset.uuid;
+      if (!uuid) {
+        return false;
+      }
+      return uuids.includes(uuid);
+    }).length;
+    const countAfter = currentCount - childrenThatAreSelection + itemsToAdd;
+    if (countAfter > field.cardinality) {
+      return false;
+    }
+  }
+  return !draggingBundles?.length || draggingBundles.every((bundle) => field.allowedBundles.includes(bundle));
+}

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

@@ -1,3 +1,3 @@
 import type { EventbusEvents } from '#blokkli/types';
 export declare const eventBus: import("mitt").Emitter<EventbusEvents>;
-export declare const emitMessage: (message: string, type?: "success" | "error", additional?: string | Error | unknown) => void;
+export declare const emitMessage: (message: string, type?: "success" | "error", additional?: string | Error | unknown, replace?: boolean) => void;

package/dist/runtime/helpers/eventBus.js

@@ -1,5 +1,5 @@
 import mitt from "mitt";
 export const eventBus = mitt();
-export const emitMessage = (message, type = "success", additional) => {
-  eventBus.emit("message", { type, message, additional });
+export const emitMessage = (message, type = "success", additional, replace) => {
+  eventBus.emit("message", { type, message, additional, replace });
 };

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

@@ -1,4 +1,4 @@
-import type { DraggableItem, Rectangle, DroppableEntityField, DraggableExistingBlock, EntityContext, Coord, LibraryItemProps } from '#blokkli/types';
+import type { DraggableItem, Rectangle, DroppableEntityField, DraggableExistingBlock, EntityContext, Coord, LibraryItemProps, Size } from '#blokkli/types';
 import type { RGB } from '#blokkli/types/theme';
 /**
  * Type check for falsy values.
@@ -39,6 +39,15 @@ export declare function distanceToRectangle(x: number, y: number, rect: Rectangl
  * Return the distance from the given coordinates to the center of the rectangle.
  */
 export declare function distanceToClosestRectangleEdge(x: number, y: number, rect: Rectangle): number;
+/**
+ * Subtracts a rectangle from a viewport and returns the remaining area as rectangles.
+ * The viewport is assumed to have x=0 and y=0.
+ *
+ * @param viewport - The size of the viewport to subtract from
+ * @param rect - The rectangle to subtract
+ * @returns An array of 0 to 4 rectangles representing the area outside of rect
+ */
+export declare function subtractRectFromViewport(viewport: Size, rect: Rectangle): Rectangle[];
 export declare function getDistance(a: Coord, b: Coord): number;
 export declare const parseColorString: (color: string) => RGB | undefined;
 /**

package/dist/runtime/helpers/index.js

@@ -234,6 +234,63 @@ export function distanceToClosestRectangleEdge(x, y, rect) {
   const dy = Math.max(minY - y, 0, y - maxY);
   return Math.sqrt(dx * dx + dy * dy);
 }
+export function subtractRectFromViewport(viewport, rect) {
+  const viewportLeft = 0;
+  const viewportTop = 0;
+  const viewportRight = viewport.width;
+  const viewportBottom = viewport.height;
+  const intersectLeft = Math.max(viewportLeft, rect.x);
+  const intersectTop = Math.max(viewportTop, rect.y);
+  const intersectRight = Math.min(viewportRight, rect.x + rect.width);
+  const intersectBottom = Math.min(viewportBottom, rect.y + rect.height);
+  if (intersectLeft >= intersectRight || intersectTop >= intersectBottom) {
+    return [
+      {
+        x: 0,
+        y: 0,
+        width: viewport.width,
+        height: viewport.height
+      }
+    ];
+  }
+  if (intersectLeft <= viewportLeft && intersectTop <= viewportTop && intersectRight >= viewportRight && intersectBottom >= viewportBottom) {
+    return [];
+  }
+  const result = [];
+  if (intersectTop > viewportTop) {
+    result.push({
+      x: viewportLeft,
+      y: viewportTop,
+      width: viewport.width,
+      height: intersectTop - viewportTop
+    });
+  }
+  if (intersectBottom < viewportBottom) {
+    result.push({
+      x: viewportLeft,
+      y: intersectBottom,
+      width: viewport.width,
+      height: viewportBottom - intersectBottom
+    });
+  }
+  if (intersectLeft > viewportLeft) {
+    result.push({
+      x: viewportLeft,
+      y: intersectTop,
+      width: intersectLeft - viewportLeft,
+      height: intersectBottom - intersectTop
+    });
+  }
+  if (intersectRight < viewportRight) {
+    result.push({
+      x: intersectRight,
+      y: intersectTop,
+      width: viewportRight - intersectRight,
+      height: intersectBottom - intersectTop
+    });
+  }
+  return result;
+}
 export function getDistance(a, b) {
   const dx = a.x - b.x;
   const dy = a.y - b.y;

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

@@ -0,0 +1,10 @@
+import { type Ref } from 'vue';
+import type { BlockIndicator } from '../types/index.js';
+export type IndicatorsProvider = {
+    indicators: Ref<BlockIndicator[]>;
+    hovered: Ref<string>;
+    addIndicator: (indicator: BlockIndicator) => void;
+    removeIndicator: (id: string, uuid: string) => void;
+    setHovered: (uuid?: string | null) => void;
+};
+export default function (): IndicatorsProvider;

package/dist/runtime/helpers/indicatorsProvider.js

@@ -0,0 +1,23 @@
+import { ref } from "vue";
+export default function() {
+  const indicators = ref([]);
+  const hovered = ref("");
+  function addIndicator(indicator) {
+    indicators.value.push(indicator);
+  }
+  function removeIndicator(id, uuid) {
+    indicators.value = indicators.value.filter(
+      (v) => v.id !== id || v.uuid !== uuid
+    );
+  }
+  function setHovered(uuid) {
+    hovered.value = uuid ?? "";
+  }
+  return {
+    indicators,
+    hovered,
+    addIndicator,
+    removeIndicator,
+    setHovered
+  };
+}

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

@@ -13,6 +13,8 @@ export type KeyboardProvider = {
     shortcuts: ComputedRef<RegisteredShortcut[]>;
     registerShortcut: (shortcut: KeyboardShortcut) => void;
     unregisterShortcut: (shortcut: KeyboardShortcut) => void;
+    lockKeyboardEvents: (id: string) => void;
+    unlockKeyboardEvents: (id: string) => void;
 };
 export default function (animationProvider: AnimationProvider): KeyboardProvider;
 export {};

package/dist/runtime/helpers/keyboardProvider.js

@@ -18,6 +18,8 @@ export default function(animationProvider) {
   const isPressingSpace = ref(false);
   const isPressingShift = ref(false);
   const registeredShortcuts = ref([]);
+  const keyboardLocks = ref([]);
+  const keyboardLocked = computed(() => !!keyboardLocks.value.length);
   const onKeyUp = (e) => {
     isPressingControl.value = e.getModifierState("Control") || e.getModifierState("Meta");
     isPressingShift.value = e.getModifierState("Shift");
@@ -29,6 +31,9 @@ export default function(animationProvider) {
     }
   };
   const onKeyDown = (e) => {
+    if (keyboardLocked.value) {
+      return;
+    }
     isPressingControl.value = getControlState(e);
     isPressingShift.value = e.getModifierState("Shift");
     if (!isPressingSpace.value) {
@@ -78,6 +83,15 @@ export default function(animationProvider) {
     isPressingControl.value = getControlState(e);
     isPressingShift.value = !!e.shiftKey;
   }
+  function lockKeyboardEvents(id) {
+    if (keyboardLocks.value.includes(id)) {
+      return;
+    }
+    keyboardLocks.value.push(id);
+  }
+  function unlockKeyboardEvents(id) {
+    keyboardLocks.value = keyboardLocks.value.filter((v) => v !== id);
+  }
   return {
     isPressingSpace: readonly(isPressingSpace),
     isPressingControl: readonly(isPressingControl),
@@ -85,6 +99,8 @@ export default function(animationProvider) {
     shortcuts,
     registerShortcut,
     unregisterShortcut,
-    setShortcutStateFromEvent
+    setShortcutStateFromEvent,
+    lockKeyboardEvents,
+    unlockKeyboardEvents
   };
 }

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

@@ -0,0 +1,10 @@
+import type { AddAction } from '#blokkli/types';
+type PluginAddFunction<T> = () => T | T[] | undefined;
+type AddActionFunction = PluginAddFunction<AddAction>;
+export type PluginProvider = {
+    addAddAction: (fn: AddActionFunction) => void;
+    removeAddAction: (fn: AddActionFunction) => void;
+    getAddActions: () => AddAction[];
+};
+export default function (): PluginProvider;
+export {};

package/dist/runtime/helpers/pluginProvider.js

@@ -0,0 +1,33 @@
+export default function() {
+  let addActions = [];
+  function addAddAction(fn) {
+    addActions.push(fn);
+  }
+  function removeAddAction(fn) {
+    addActions = addActions.filter((v) => v !== fn);
+  }
+  function getAddActions() {
+    const actions = [];
+    for (let i = 0; i < addActions.length; i++) {
+      const callback = addActions[i];
+      if (!callback) {
+        continue;
+      }
+      const result = callback();
+      if (!result) {
+        continue;
+      }
+      if (Array.isArray(result)) {
+        actions.push(...result);
+      } else {
+        actions.push(result);
+      }
+    }
+    return actions;
+  }
+  return {
+    addAddAction,
+    removeAddAction,
+    getAddActions
+  };
+}

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

@@ -0,0 +1 @@
+export declare function renderCycle(): Promise<void>;

package/dist/runtime/helpers/renderCycle.js

@@ -0,0 +1,10 @@
+import { nextTick } from "#imports";
+export function renderCycle() {
+  return new Promise((resolve) => {
+    nextTick(() => {
+      window.requestAnimationFrame(() => {
+        resolve();
+      });
+    });
+  });
+}

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

@@ -6,6 +6,7 @@ import {
   bundlesWithHiddenGlobally
 } from "#blokkli-build/default-global-options";
 import { BK_HIDDEN_GLOBALLY, BK_VISIBLE_LANGUAGES } from "../symbols.js";
+import { BUNDLE_FROM_LIBRARY } from "#blokkli/constants";
 export function mapCheckboxTrue(v) {
   return v === true || v === "1" || v === 1 || v === "true" ? "1" : "0";
 }
@@ -82,16 +83,18 @@ export function isVisibleByOptions(item, language) {
   return true;
 }
 export function getRuntimeOptions(item, context, fromLibraryOptions) {
-  if (item.bundle === "from_library" && "libraryItem" in item.props) {
-    const actualBlock = item.props.libraryItem?.block;
-    if (!actualBlock) {
-      throw new Error("Missing block");
+  if (item.bundle === BUNDLE_FROM_LIBRARY) {
+    if ("props" in item && item.props && "libraryItem" in item.props) {
+      const actualBlock = item.props.libraryItem?.block;
+      if (actualBlock) {
+        return getRuntimeOptions(
+          actualBlock,
+          context,
+          item.options
+        );
+      }
     }
-    return getRuntimeOptions(
-      actualBlock,
-      context,
-      item.options
-    );
+    throw new Error("Missing block");
   }
   const availableOptions = OPTIONS["block:" + item.bundle] || {};
   return Object.entries(availableOptions).reduce(
@@ -114,7 +117,7 @@ export function getRuntimeOptions(item, context, fromLibraryOptions) {
   );
 }
 export function getActualBlock(item) {
-  if (item.bundle === "from_library") {
+  if (item.bundle === BUNDLE_FROM_LIBRARY) {
     const block = item.props.libraryItem?.block;
     if (!block) {
       return null;
@@ -131,7 +134,7 @@ export function getItemsforBundles(items, bundles) {
   const filtered = [];
   for (let i = 0; i < items.length; i++) {
     const item = items[i];
-    if (item.bundle === "from_library") {
+    if (item.bundle === BUNDLE_FROM_LIBRARY) {
       const actual = getActualBlock(item);
       if (actual && bundles.includes(actual.bundle)) {
         filtered.push(actual);

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

@@ -6,6 +6,14 @@ export type SelectionProvider = {
      * The currently selected UUIDs.
      */
     uuids: Readonly<Ref<string[]>>;
+    /**
+     * Whether the host is currently selected.
+     */
+    hasHostSelected: ComputedRef<boolean>;
+    /**
+     * Whether anything is selected.
+     */
+    hasAnythingSelected: ComputedRef<boolean>;
     /**
      * The currently selected UUIDs as a Set.
      */
@@ -59,5 +67,13 @@ export type SelectionProvider = {
      */
     dragItemsBundles: ComputedRef<string[]>;
     isBlockSelected(uuid: string): boolean;
+    /**
+     * Lock selection.
+     */
+    lockSelection: (key: string) => void;
+    /**
+     * Unlock selection.
+     */
+    unlockSelection: (key: string) => void;
 };
 export default function (dom: DomProvider): SelectionProvider;