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

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 } from '#blokkli/types';
 import type { TextProvider } from './textProvider.js';
 export type BlokkliOwner = {
     name: string | undefined;
@@ -33,5 +33,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>;

package/dist/runtime/helpers/stateProvider.js

@@ -5,13 +5,17 @@ import {
   readonly,
   provide
 } from "vue";
-import { refreshNuxtData } from "nuxt/app";
+import { refreshNuxtData, useState } from "nuxt/app";
 import { INJECT_MUTATED_FIELDS_MAP } from "./symbols.js";
 import onBlokkliEvent from "./composables/onBlokkliEvent.js";
 import { falsy, getFieldKey } from "#blokkli/helpers";
 import { eventBus, emitMessage } from "#blokkli/helpers/eventBus";
 import { nextTick } from "#imports";
-export default async function(adapter, context, $t) {
+import { addElementClasses } from "./addElementClasses.js";
+const HOST_OPTION_KEY = "HOST";
+export default async function(adapter, context, $t, providerKey) {
+  let _mappedState = null;
+  const overrideHostOptions = useState("options:" + providerKey);
   const stateLoaded = ref(false);
   const stateLoadError = ref(false);
   const owner = ref(null);
@@ -32,9 +36,10 @@ export default async function(adapter, context, $t) {
   });
   let fieldBlockCount = {};
   const blockBundleCount = ref({});
-  const fieldListItemMap = {};
+  const fieldListItemMap = /* @__PURE__ */ new Map();
+  let bundleToUuids = {};
   function getFieldListItem(uuid) {
-    const fieldKey = fieldListItemMap[uuid];
+    const fieldKey = fieldListItemMap.get(uuid);
     if (!fieldKey) {
       return;
     }
@@ -45,7 +50,7 @@ export default async function(adapter, context, $t) {
     return field.list.find((v) => v.uuid === uuid);
   }
   function getFieldListForBlock(uuid) {
-    const fieldKey = fieldListItemMap[uuid];
+    const fieldKey = fieldListItemMap.get(uuid);
     if (!fieldKey) {
       return;
     }
@@ -58,17 +63,26 @@ export default async function(adapter, context, $t) {
     availableLanguages: [],
     translations: []
   });
-  function setContext(context2) {
+  function setContext(context2, override) {
+    if (!override) {
+      _mappedState = context2 ?? null;
+    }
     const options = context2?.mutatedState?.mutatedOptions || {};
     const optionKeys = Object.keys(options);
     for (let i = 0; i < optionKeys.length; i++) {
       const key = optionKeys[i];
       const newOptions = options[key];
-      const existing = mutatedOptions[key];
-      if (!existing || JSON.stringify(existing) !== JSON.stringify(newOptions)) {
+      const existing2 = mutatedOptions[key];
+      if (!existing2 || JSON.stringify(existing2) !== JSON.stringify(newOptions)) {
         mutatedOptions[key] = newOptions;
       }
     }
+    const hostOptions = context2?.mutatedState?.mutatedHostOptions ?? {};
+    const existing = mutatedOptions[HOST_OPTION_KEY];
+    if (!existing || JSON.stringify(existing) !== JSON.stringify(hostOptions)) {
+      mutatedOptions[HOST_OPTION_KEY] = hostOptions ?? "";
+      overrideHostOptions.value = hostOptions;
+    }
     mutations.value = context2?.mutations || [];
     violations.value = context2?.mutatedState?.violations || [];
     const currentIndex = context2?.currentIndex;
@@ -96,13 +110,15 @@ export default async function(adapter, context, $t) {
     mutatedEntity.value = context2?.mutatedEntity;
     const visitedFieldKeys = [];
     const newBlockBundleCount = {};
+    fieldListItemMap.clear();
     fieldBlockCount = {};
+    bundleToUuids = {};
     for (let i = 0; i < newMutatedFields.length; i++) {
       const field = newMutatedFields[i];
       const key = getFieldKey(field.entityUuid, field.name);
       visitedFieldKeys.push(key);
-      const existing = mutatedFieldsMap[key];
-      if (!existing || existing.list.length !== field.list.length || JSON.stringify(existing.list) !== JSON.stringify(field.list)) {
+      const existing2 = mutatedFieldsMap[key];
+      if (!existing2 || existing2.list.length !== field.list.length || JSON.stringify(existing2.list) !== JSON.stringify(field.list)) {
         mutatedFieldsMap[key] = field;
       }
       for (let j = 0; j < field.list.length; j++) {
@@ -111,7 +127,11 @@ export default async function(adapter, context, $t) {
           newBlockBundleCount[item.bundle] = 0;
         }
         newBlockBundleCount[item.bundle]++;
-        fieldListItemMap[item.uuid] = key;
+        fieldListItemMap.set(item.uuid, key);
+        if (!bundleToUuids[item.bundle]) {
+          bundleToUuids[item.bundle] = [];
+        }
+        bundleToUuids[item.bundle].push(item.uuid);
       }
     }
     blockBundleCount.value = newBlockBundleCount;
@@ -144,13 +164,18 @@ export default async function(adapter, context, $t) {
     return count;
   }
   function lockBody() {
-    document.body.classList.add("bk-body-loading");
     isLoading.value = true;
   }
   function unlockBody() {
-    document.body.classList.remove("bk-body-loading");
     isLoading.value = false;
   }
+  function getAllUuids(bundle) {
+    if (!bundle) {
+      return [...fieldListItemMap.keys()];
+    }
+    return bundleToUuids[bundle] ?? [];
+  }
+  addElementClasses(document.body, "bk-body-loading", isLoading);
   const mutateWithLoadingState = async (callback, errorMessage, successMessage) => {
     if (!callback) {
       return true;
@@ -228,8 +253,24 @@ export default async function(adapter, context, $t) {
   const stateAvailable = computed(
     () => stateLoaded.value && !stateLoadError.value
   );
+  function getMappedState() {
+    if (!_mappedState) {
+      throw new Error("Called getMappedState() before a state is available.");
+    }
+    return _mappedState;
+  }
+  function setOverrideState(state) {
+    setContext(state, true);
+  }
+  function clearOverrideState() {
+    if (!_mappedState) {
+      throw new Error("Missing previous state.");
+    }
+    setContext(_mappedState);
+  }
   return {
     stateAvailable,
+    getMappedState,
     refreshKey,
     owner: readonly(owner),
     mutatedFields,
@@ -248,6 +289,9 @@ export default async function(adapter, context, $t) {
     getBlockBundleCount,
     getFieldListItem,
     getMutatedField,
-    getFieldListForBlock
+    getFieldListForBlock,
+    getAllUuids,
+    setOverrideState,
+    clearOverrideState
   };
 }

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

@@ -1,6 +1,7 @@
-import { type ComputedRef, type WritableComputedRef } from 'vue';
+import { type ComputedRef, type WritableComputedRef } from '#imports';
+import type { BlokkliAdapter } from '#blokkli/adapter';
 export type StorageProvider = {
-    use: <T>(key: string | ComputedRef<string>, defaultValue: T) => WritableComputedRef<T>;
+    use: <T>(key: string | ComputedRef<string>, defaultValue: T, persist?: boolean) => WritableComputedRef<T>;
     clearAll: () => void;
     clear: (key: string) => void;
 };
@@ -12,4 +13,4 @@ export type StorageProvider = {
  * This composable can be used to keep state across page navigations and
  * even after a refresh.
  */
-export default function (): StorageProvider;
+export default function (adapter: BlokkliAdapter<any>): Promise<StorageProvider>;

package/dist/runtime/helpers/storageProvider.js

@@ -1,4 +1,9 @@
-import { computed, ref } from "vue";
+import {
+  computed,
+  onBeforeUnmount,
+  ref,
+  watch
+} from "#imports";
 import { storageDefaults } from "#blokkli-build/config";
 const PREFIX = "blokkli:";
 const getExisting = (key) => {
@@ -10,10 +15,53 @@ const getExisting = (key) => {
   } catch {
   }
 };
-export default function() {
+export default async function(adapter) {
   const values = ref({});
   const defaults = ref({});
-  const use = (key, providedDefaultValue) => {
+  let timeout = null;
+  const persistableKeys = ref([]);
+  onBeforeUnmount(() => {
+    if (timeout) {
+      window.clearTimeout(timeout);
+    }
+  });
+  const persistedValues = adapter.userSettings ? await adapter.userSettings.load().then((v) => {
+    if (typeof v === "object" && v !== null) {
+      return JSON.stringify(v);
+    }
+    return v;
+  }) : null;
+  if (persistedValues) {
+    values.value = JSON.parse(persistedValues);
+  }
+  const persistableData = computed(() => {
+    const mapped = [...persistableKeys.value].sort().reduce((acc, key) => {
+      const value = values.value[key];
+      if (value !== void 0) {
+        acc[key] = value;
+      }
+      return acc;
+    }, {});
+    return JSON.stringify(mapped);
+  });
+  function persistUserSettings() {
+    if (timeout) {
+      window.clearTimeout(timeout);
+    }
+    timeout = window.setTimeout(async () => {
+      if (!adapter.userSettings) {
+        return;
+      }
+      if (persistableData.value === persistedValues) {
+        return;
+      }
+      await adapter.userSettings.persist(persistableData.value);
+    }, 1e3);
+  }
+  if (adapter.userSettings) {
+    watch(persistableData, persistUserSettings);
+  }
+  const use = (key, providedDefaultValue, persist) => {
     const storageKey = computed(
       () => PREFIX + (typeof key === "string" ? key : key.value)
     );
@@ -30,6 +78,11 @@ export default function() {
         values.value[storageKey.value] = defaultValue;
       }
     }
+    if (persist) {
+      if (!persistableKeys.value.includes(storageKey.value)) {
+        persistableKeys.value.push(storageKey.value);
+      }
+    }
     return computed({
       get() {
         const v = values.value[storageKey.value];

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

@@ -17,6 +17,7 @@ export declare const INJECT_MUTATED_FIELDS_MAP: unique symbol;
 export declare const INJECT_ENTITY_CONTEXT: unique symbol;
 export declare const INJECT_PROVIDER_CONTEXT: unique symbol;
 export declare const INJECT_FRAGMENT_CONTEXT: unique symbol;
+export declare const INJECT_PROVIDER_KEY: unique symbol;
 export declare const INJECT_EDIT_FIELD_LIST_COMPONENT: unique symbol;
 export declare const INJECT_EDIT_LOGGER: unique symbol;
 export declare const BK_HIDDEN_GLOBALLY = "bkHiddenGlobally";

package/dist/runtime/helpers/symbols.js

@@ -17,6 +17,7 @@ export const INJECT_MUTATED_FIELDS_MAP = Symbol("blokkli_mutated_fields_map");
 export const INJECT_ENTITY_CONTEXT = Symbol("blokkli_entity_context");
 export const INJECT_PROVIDER_CONTEXT = Symbol("blokkli_provider_context");
 export const INJECT_FRAGMENT_CONTEXT = Symbol("blokkli_fragment_context");
+export const INJECT_PROVIDER_KEY = Symbol("blokkli_provider_key");
 export const INJECT_EDIT_FIELD_LIST_COMPONENT = Symbol(
   "blokkli_edit_field_list_component"
 );

package/dist/runtime/helpers/textProvider.js

@@ -1,6 +1,7 @@
 import { computed } from "vue";
 import { translations } from "#blokkli-build/translations";
 import { defaultLanguage, forceDefaultLanguage } from "#blokkli-build/config";
+const DEBUG_SWISS_GERMAN = false;
 export default function(context) {
   const language = computed(() => {
     if (forceDefaultLanguage) {
@@ -12,6 +13,11 @@ export default function(context) {
     return defaultLanguage;
   });
   const currentTranslations = computed(() => {
+    const today = /* @__PURE__ */ new Date();
+    const isAprilFirst = today.getMonth() === 3 && today.getDate() === 1;
+    if (isAprilFirst && language.value === "de" || DEBUG_SWISS_GERMAN && import.meta.dev) {
+      return translations.gsw_CH || translations[language.value] || {};
+    }
     return translations[language.value] || {};
   });
   return (key, defaultValue) => {

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

@@ -8,6 +8,7 @@ type ThemeMap = {
     yellow: Ref<ThemeContextColors>;
     red: Ref<ThemeContextColors>;
     lime: Ref<ThemeContextColors>;
+    orange: Ref<ThemeContextColors>;
 };
 export type ThemeProvider = {
     accent: Ref<ThemeColors>;
@@ -16,6 +17,7 @@ export type ThemeProvider = {
     yellow: Ref<ThemeContextColors>;
     red: Ref<ThemeContextColors>;
     lime: Ref<ThemeContextColors>;
+    orange: Ref<ThemeContextColors>;
     getDraggableStyle: (el: HTMLElement | SVGElement) => DraggableStyle;
     setColor: <Group extends ThemeColorGroup | ThemeContextColorGroup>(group: Group, shade: Group extends ThemeColorGroup ? ThemeColorShade : ThemeContextColorShade, value: RGB) => void;
     applyTheme: (name: ThemeName | 'custom') => void;

package/dist/runtime/helpers/themeProvider.js

@@ -12,13 +12,15 @@ export default function() {
   const yellow = ref(theme.yellow);
   const red = ref(theme.red);
   const lime = ref(theme.lime);
+  const orange = ref(theme.orange);
   const themeMap = {
     accent,
     mono,
     teal,
     yellow,
     red,
-    lime
+    lime,
+    orange
   };
   function getColor(color, key) {
     return themeMap[color].value[key];
@@ -115,6 +117,7 @@ export default function() {
     yellow,
     red,
     lime,
+    orange,
     getDraggableStyle: function(el) {
       return dragStyle.getStyle(el, theme.accent[700]);
     },

package/dist/runtime/helpers/transform.js

@@ -6,9 +6,7 @@ export function filterTransforms(plugins, selectedItems, selectedBundles, allowe
     if (plugin.max !== -1 && selectedItems.length > plugin.max) {
       return false;
     }
-    const allAllowedInList = plugin.targetBundles.every(
-      (bundle) => allowedBundles.includes(bundle)
-    );
+    const allAllowedInList = !plugin.targetBundles || plugin.targetBundles.every((bundle) => allowedBundles.includes(bundle));
     if (!allAllowedInList) {
       return false;
     }

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

@@ -3,6 +3,7 @@ import type { StorageProvider } from './storageProvider.js';
 import type { AddListOrientation, Coord, Rectangle, Size } from '#blokkli/types';
 import type { Viewport } from '#blokkli/constants';
 import type { StateProvider } from './stateProvider.js';
+import type { AdapterContext } from '#blokkli/adapter';
 export type UiProvider = {
     rootElement: () => HTMLElement;
     artboardElement: () => HTMLElement;
@@ -14,9 +15,12 @@ export type UiProvider = {
     };
     isMobile: ComputedRef<boolean>;
     isDesktop: ComputedRef<boolean>;
-    isArtboard: () => boolean;
     isAnimating: Ref<boolean>;
+    isAnalyzing: Ref<boolean>;
     isProxyMode: Ref<boolean>;
+    hasDialogOpen: Ref<boolean>;
+    hasAddTooltipOpen: Ref<boolean>;
+    hasTransformOverlayOpen: Ref<boolean>;
     isTransforming: ComputedRef<boolean>;
     setTransform: (label?: string | null | undefined) => void;
     transformLabel: ComputedRef<string>;
@@ -35,7 +39,8 @@ export type UiProvider = {
     artboardScale: Ref<number>;
     artboardOffset: Ref<Coord>;
     selectionTopLeft: Ref<Coord>;
+    interfaceLanguage: ComputedRef<string>;
     getAbsoluteElementRect: (v: HTMLElement | Rectangle, scale?: number, offset?: Coord) => Rectangle;
     getViewportRelativeRect: (rect: Rectangle, scale?: number, offset?: Coord) => Rectangle;
 };
-export default function (storage: StorageProvider, state: StateProvider): UiProvider;
+export default function (storage: StorageProvider, state: StateProvider, context: ComputedRef<AdapterContext>): UiProvider;