@blokkli/editor 2.0.0-alpha.13 → 2.0.0-alpha.15

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;

package/dist/runtime/helpers/selectionProvider.js

@@ -1,21 +1,18 @@
 import onBlokkliEvent from "./composables/onBlokkliEvent.js";
 import { computed, ref } from "#imports";
-import {
-  findElement,
-  buildDraggableItem,
-  falsy,
-  modulo,
-  onlyUnique
-} from "#blokkli/helpers";
+import { falsy, modulo, onlyUnique } from "#blokkli/helpers";
 import { eventBus } from "#blokkli/helpers/eventBus";
 export default function(dom) {
   const selectedUuids = ref([]);
+  const hasHostSelected = ref(false);
   const activeFieldKey = ref("");
   const draggingMode = ref(null);
   const editableActive = ref(false);
   const isChangingOptions = ref(false);
   const isMultiSelecting = ref(false);
   const interactionMode = ref("mouse");
+  const selectionLocks = ref([]);
+  const selectionIsLocked = computed(() => !!selectionLocks.value.length);
   const dragItems = ref([]);
   const dragItemsBundles = computed(
     () => dragItems.value.map((v) => v.itemBundle).filter(falsy)
@@ -24,34 +21,30 @@ export default function(dom) {
   const isDragging = computed(() => !!draggingMode.value);
   const blocks = computed(
     () => selectedUuids.value.map((uuid) => {
-      return dom.findBlock(uuid);
+      if (dom.registeredBlockUuids.value.includes(uuid)) {
+        return dom.findBlock(uuid);
+      }
+      return null;
     }).filter(falsy)
   );
-  function selectItems(uuids) {
-    unselectItems();
-    const items = uuids.map((uuid) => {
-      const element = findElement(uuid);
-      if (element) {
-        const item = buildDraggableItem(element);
-        if (item && item.itemType === "existing") {
-          return item;
-        }
-      }
-    }).filter(falsy);
-    selectedUuids.value = items.map((v) => v.uuid);
+  function updateSelectedUuids(uuids, force) {
+    if (selectionIsLocked.value && !force) {
+      return;
+    }
+    selectedUuids.value = uuids;
   }
   function unselectItems() {
     activeFieldKey.value = "";
     if (selectedUuids.value.length === 0) {
       return;
     }
-    selectedUuids.value = [];
+    updateSelectedUuids([]);
   }
-  function onSelect(v) {
+  function onSelect(v, force) {
     if (typeof v === "string") {
-      selectItems([v]);
+      updateSelectedUuids([v], force);
     } else {
-      selectItems(v.filter(onlyUnique));
+      updateSelectedUuids(v.filter(onlyUnique), force);
     }
   }
   const selectInList = (prev) => {
@@ -74,15 +67,18 @@ export default function(dom) {
   };
   const setActiveFieldKey = (key) => activeFieldKey.value = key;
   onBlokkliEvent("select", onSelect);
+  onBlokkliEvent("select:force", (arg) => {
+    onSelect(arg, true);
+  });
   onBlokkliEvent("select:start", (e) => {
-    selectedUuids.value = (e.uuids || []).filter(onlyUnique);
+    updateSelectedUuids((e.uuids || []).filter(onlyUnique));
     isMultiSelecting.value = true;
     interactionMode.value = e.mode;
     activeFieldKey.value = "";
   });
   onBlokkliEvent("select:toggle", (uuid) => {
     if (selectedUuids.value.includes(uuid)) {
-      selectedUuids.value = selectedUuids.value.filter((v) => v !== uuid);
+      updateSelectedUuids(selectedUuids.value.filter((v) => v !== uuid));
     } else {
       selectedUuids.value.push(uuid);
     }
@@ -92,16 +88,11 @@ export default function(dom) {
     if (!uuids || uuids.length === 0 && selectedUuids.value.length === 0) {
       return;
     }
-    selectItems(uuids);
+    updateSelectedUuids(uuids);
   });
   onBlokkliEvent("select:previous", () => selectInList(true));
   onBlokkliEvent("select:next", selectInList);
   onBlokkliEvent("setActiveFieldKey", setActiveFieldKey);
-  onBlokkliEvent("state:reloaded", () => {
-    selectedUuids.value = selectedUuids.value.filter((uuid) => {
-      return !!dom.findBlock(uuid);
-    });
-  });
   onBlokkliEvent("dragging:start", (e) => {
     draggingMode.value = e.mode;
     isMultiSelecting.value = false;
@@ -110,14 +101,20 @@ export default function(dom) {
       (v) => v.itemType === "existing"
     );
     if (blocks2.length) {
-      selectItems(blocks2.map((v) => v.uuid));
+      updateSelectedUuids(blocks2.map((v) => v.uuid));
     }
   });
   onBlokkliEvent("dragging:end", () => {
     draggingMode.value = null;
   });
   onBlokkliEvent("select:unselect", () => {
-    selectedUuids.value = [];
+    updateSelectedUuids([]);
+  });
+  onBlokkliEvent("select:host", () => {
+    hasHostSelected.value = true;
+  });
+  onBlokkliEvent("select:host:unselect", () => {
+    hasHostSelected.value = false;
   });
   onBlokkliEvent("window:clickAway", () => {
     unselectItems();
@@ -131,9 +128,18 @@ export default function(dom) {
       (v) => v.itemType === "existing" || v.itemType === "existing_structure"
     );
   });
+  const hasAnythingSelected = computed(() => {
+    return hasHostSelected.value || !!selectedUuids.value.length;
+  });
   function isBlockSelected(uuid) {
     return uuidsSet.value.has(uuid);
   }
+  function lockSelection(key) {
+    selectionLocks.value.push(key);
+  }
+  function unlockSelection(key) {
+    selectionLocks.value = selectionLocks.value.filter((v) => v !== key);
+  }
   return {
     uuids: selectedUuids,
     blocks,
@@ -149,6 +155,12 @@ export default function(dom) {
     dragItems,
     uuidsSet,
     dragItemsBundles,
-    isBlockSelected
+    isBlockSelected,
+    hasHostSelected: computed(() => {
+      return hasHostSelected.value && !selectedUuids.value.length;
+    }),
+    hasAnythingSelected,
+    lockSelection,
+    unlockSelection
   };
 }

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

@@ -1,6 +1,6 @@
 import { type Ref, type ComputedRef } from 'vue';
 import type { BlokkliAdapter, AdapterContext } from '../adapter/index.js';
-import type { MutatedField, EditEntity, MutatedOptions, TranslationState, MutationItem, Validation, MutateWithLoadingStateFunction, EditMode, FieldListItem } from '#blokkli/types';
+import type { MutatedField, EditEntity, MutatedOptions, TranslationState, MappedState, MutationItem, Validation, MutateWithLoadingStateFunction, EditMode, FieldListItem, PublishOptions } from '#blokkli/types';
 import type { TextProvider } from './textProvider.js';
 export type BlokkliOwner = {
     name: string | undefined;
@@ -19,6 +19,7 @@ export type StateProvider = {
     entity: Readonly<Ref<EditEntity>>;
     mutatedOptions: MutatedOptions;
     translation: Readonly<Ref<TranslationState>>;
+    publishOptions: Readonly<Ref<PublishOptions>>;
     mutations: Readonly<Ref<MutationItem[]>>;
     currentMutationIndex: Readonly<Ref<number>>;
     violations: Readonly<Ref<Validation[]>>;
@@ -33,5 +34,9 @@ export type StateProvider = {
     getFieldListItem: (uuid: string) => FieldListItem | undefined;
     getFieldListForBlock: (uuid: string) => MutatedField | undefined;
     getMutatedField: (uuid: string, fieldName: string) => MutatedField | undefined;
+    getAllUuids: (bundle?: string) => string[];
+    getMappedState: () => MappedState;
+    setOverrideState: (state: MappedState) => void;
+    clearOverrideState: () => void;
 };
-export default function (adapter: BlokkliAdapter<any>, context: ComputedRef<AdapterContext>, $t: TextProvider): Promise<StateProvider>;
+export default function (adapter: BlokkliAdapter<any>, context: ComputedRef<AdapterContext>, $t: TextProvider, providerKey: string): Promise<StateProvider>;