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

package/dist/runtime/helpers/domProvider.js

@@ -59,6 +59,7 @@ export default function(ui, debug, definitions) {
   const blockRects = {};
   const fieldRects = {};
   const blockUuidCurrentKey = {};
+  const observedElements = {};
   let draggableBlockCache = {};
   let initTimeout = null;
   const isInitalizing = ref(true);
@@ -80,6 +81,9 @@ export default function(ui, debug, definitions) {
       if (!uuid) {
         return;
       }
+      if (!registeredBlocks[uuid]) {
+        continue;
+      }
       const currentRect = blockRects[uuid];
       const now = performance.now();
       if (!currentRect) {
@@ -118,6 +122,9 @@ export default function(ui, debug, definitions) {
           }
           fieldRects[fieldKey] = ui.getAbsoluteElementRect(rect, scale, offset);
         } else if (uuid) {
+          if (!registeredBlocks[uuid]) {
+            continue;
+          }
           const newRect = ui.getAbsoluteElementRect(rect, scale, offset);
           const currentRect = blockRects[uuid];
           if (currentRect) {
@@ -139,7 +146,12 @@ export default function(ui, debug, definitions) {
       }
     }
   }
-  const intersectionObserver = useDelayedIntersectionObserver(intersectionCallback);
+  const intersectionObserver = useDelayedIntersectionObserver(
+    intersectionCallback,
+    {
+      rootMargin: "400px 0px 400px 0px"
+    }
+  );
   const registeredFieldTypes = computed(() => {
     const fields = Object.values(registeredFields);
     const found = /* @__PURE__ */ new Set();
@@ -370,11 +382,13 @@ export default function(ui, debug, definitions) {
     }
     stateReloadTimeout = window.setTimeout(updateVisibleRects, 300);
   });
-  onBlokkliEvent("ui:resized", function() {
+  function forceRefresh() {
     updateVisibleRects();
     getVisibleFields().forEach(refreshFieldRect);
     logger.log("Refreshed all visible rects");
-  });
+  }
+  onBlokkliEvent("option:finish-change", forceRefresh);
+  onBlokkliEvent("ui:resized", forceRefresh);
   function init() {
     intersectionObserver.init();
     intersectionReady.value = true;
@@ -443,9 +457,10 @@ export default function(ui, debug, definitions) {
         item.hostFieldListType,
         item.hostBundle
       );
+      registeredBlocks[item.uuid] = el;
+      observedElements[item.uuid] = observableElement;
       intersectionObserver.observe(observableElement);
       resizeObserver.observe(observableElement);
-      registeredBlocks[item.uuid] = el;
     }
   }
   function unregisterBlock(key, uuid) {
@@ -455,16 +470,94 @@ export default function(ui, debug, definitions) {
     }
     logger.log("unregisterBlock: " + uuid);
     const el = registeredBlocks[uuid];
+    const observedElement = observedElements[uuid];
+    if (observedElement) {
+      intersectionObserver.unobserve(observedElement);
+      resizeObserver.unobserve(observedElement);
+      delete observedElements[uuid];
+    }
     if (el) {
-      intersectionObserver.unobserve(el);
-      resizeObserver.unobserve(el);
       dragElementUuidMap.delete(el);
     }
     dragElementCache.delete(uuid);
     registeredBlocks[uuid] = void 0;
     delete blockRects[uuid];
+    delete blockUuidCurrentKey[uuid];
     visibleBlocks.delete(uuid);
   }
+  function getDebugData() {
+    const allUuids = /* @__PURE__ */ new Set([
+      ...Object.keys(registeredBlocks),
+      ...Object.keys(blockRects),
+      ...Object.keys(observedElements),
+      ...Object.keys(blockUuidCurrentKey),
+      ...Object.keys(draggableBlockCache)
+    ]);
+    const blocksInfo = Array.from(allUuids).map((uuid) => {
+      const el = registeredBlocks[uuid];
+      return {
+        uuid,
+        hasElement: !!el,
+        hasObservedElement: !!observedElements[uuid],
+        hasRect: !!blockRects[uuid],
+        hasCurrentKey: !!blockUuidCurrentKey[uuid],
+        isVisible: visibleBlocks.has(uuid),
+        inCache: !!draggableBlockCache[uuid],
+        elementInfo: el ? {
+          tagName: el.tagName,
+          bundle: el.dataset.itemBundle,
+          hostBundle: el.dataset.hostBundle,
+          fieldListType: el.dataset.hostFieldListType
+        } : void 0
+      };
+    });
+    const fieldsInfo = Object.entries(registeredFields).filter(([, field]) => !!field).map(([key, field]) => ({
+      key,
+      isVisible: visibleFields.has(key),
+      hasRect: !!fieldRects[key],
+      entityType: field.entity.type,
+      entityBundle: field.entity.bundle,
+      fieldName: field.fieldName
+    }));
+    const registeredUuids = new Set(
+      Object.entries(registeredBlocks).filter(([, el]) => !!el).map(([uuid]) => uuid)
+    );
+    const rectsWithoutRegistration = Object.keys(blockRects).filter(
+      (uuid) => !registeredUuids.has(uuid)
+    );
+    const observedElementsWithoutRegistration = Object.keys(
+      observedElements
+    ).filter((uuid) => !registeredUuids.has(uuid));
+    const keysWithoutRegistration = Object.keys(blockUuidCurrentKey).filter(
+      (uuid) => !registeredUuids.has(uuid)
+    );
+    return {
+      registeredBlocks: blocksInfo,
+      fields: fieldsInfo,
+      summary: {
+        totalRegisteredBlocks: Object.keys(registeredBlocks).length,
+        totalBlocksWithElements: Object.values(registeredBlocks).filter(
+          (el) => !!el
+        ).length,
+        totalObservedElements: Object.keys(observedElements).length,
+        totalBlockRects: Object.keys(blockRects).length,
+        totalVisibleBlocks: visibleBlocks.size,
+        totalRegisteredFields: Object.values(registeredFields).filter(
+          (f) => !!f
+        ).length,
+        totalVisibleFields: visibleFields.size,
+        totalFieldRects: Object.keys(fieldRects).length,
+        cacheSize: Object.keys(draggableBlockCache).length,
+        isInitializing: isInitalizing.value,
+        isReady: mutationsReady.value && intersectionReady.value && !isInitalizing.value
+      },
+      orphanedData: {
+        rectsWithoutRegistration,
+        observedElementsWithoutRegistration,
+        keysWithoutRegistration
+      }
+    };
+  }
   return {
     findBlock,
     getAllBlocks,
@@ -493,6 +586,7 @@ export default function(ui, debug, definitions) {
     registeredFieldTypes,
     registerBlock,
     unregisterBlock,
-    registeredBlockUuids
+    registeredBlockUuids,
+    getDebugData
   };
 }

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

@@ -0,0 +1,14 @@
+import type { EntityContext, Rectangle } from '#blokkli/types';
+import type { UiProvider } from './uiProvider.js';
+type EditableFieldData = EntityContext & {
+    fieldName: string;
+};
+export type EditableProvider = {
+    init: () => void;
+    registerEditableField: (el: HTMLElement, fieldName: string, entity: EntityContext) => void;
+    unregisterEditableField: (el: HTMLElement, fieldName: string, entity: EntityContext) => void;
+    getVisible: () => Rectangle[];
+    getEditableAtPoint: (x: number, y: number) => EditableFieldData | undefined;
+};
+export default function (ui: UiProvider): EditableProvider;
+export {};

package/dist/runtime/helpers/editableProvider.js

@@ -0,0 +1,144 @@
+import { falsy } from "#blokkli/helpers";
+import useDelayedIntersectionObserver from "./composables/useDelayedIntersectionObserver.js";
+import { onBeforeUnmount } from "#imports";
+import onBlokkliEvent from "./composables/onBlokkliEvent.js";
+export default function(ui) {
+  let stateReloadTimeout = null;
+  const editableFieldElementMap = /* @__PURE__ */ new WeakMap();
+  const editableFieldElements = /* @__PURE__ */ new Map();
+  const editableFieldData = /* @__PURE__ */ new Map();
+  const rects = {};
+  const visible = /* @__PURE__ */ new Set();
+  function getVisible() {
+    return [...visible.keys()].map((key) => {
+      return rects[key];
+    }).filter(falsy);
+  }
+  function getEditableKey(fieldName, entity) {
+    return `${entity.type}:${entity.uuid}:${fieldName}`;
+  }
+  function intersectionCallback(entries) {
+    const scale = ui.artboardScale.value;
+    const offset = ui.artboardOffset.value;
+    for (const entry of entries) {
+      if (entry.target instanceof HTMLElement) {
+        const data = editableFieldElementMap.get(entry.target);
+        if (!data) {
+          continue;
+        }
+        const key = getEditableKey(data.fieldName, data);
+        const domRect = entry.target.getBoundingClientRect();
+        rects[key] ||= {
+          width: 0,
+          height: 0,
+          x: 0,
+          y: 0,
+          key
+        };
+        const newRect = ui.getAbsoluteElementRect(domRect, scale, offset);
+        rects[key].width = newRect.width;
+        rects[key].height = newRect.height;
+        rects[key].x = newRect.x;
+        rects[key].y = newRect.y;
+        if (entry.isIntersecting) {
+          visible.add(key);
+        } else {
+          visible.delete(key);
+        }
+      }
+    }
+  }
+  const intersectionObserver = useDelayedIntersectionObserver(
+    intersectionCallback,
+    {
+      rootMargin: "400px 0px 400px 0px"
+    }
+  );
+  function registerEditableField(el, fieldName, entity) {
+    const key = getEditableKey(fieldName, entity);
+    const data = {
+      ...entity,
+      fieldName
+    };
+    editableFieldElementMap.set(el, data);
+    editableFieldData.set(key, data);
+    intersectionObserver.observe(el);
+    editableFieldElements.set(key, el);
+  }
+  function unregisterEditableField(el, fieldName, entity) {
+    const key = getEditableKey(fieldName, entity);
+    intersectionObserver.unobserve(el);
+    editableFieldElementMap.delete(el);
+    editableFieldData.delete(key);
+    delete rects[key];
+    visible.delete(key);
+    editableFieldElements.delete(key);
+  }
+  function init() {
+    intersectionObserver.init();
+  }
+  function getEditableAtPoint(x, y) {
+    const scale = ui.artboardScale.value;
+    const offset = ui.artboardOffset.value;
+    const artboardX = x / scale - offset.x / scale;
+    const artboardY = y / scale - offset.y / scale;
+    for (const key of visible) {
+      const rect = rects[key];
+      if (!rect) continue;
+      if (artboardX >= rect.x && artboardX <= rect.x + rect.width && artboardY >= rect.y && artboardY <= rect.y + rect.height) {
+        return editableFieldData.get(key);
+      }
+    }
+    return void 0;
+  }
+  function updateRects() {
+    const scale = ui.artboardScale.value;
+    const offset = ui.artboardOffset.value;
+    const keysToUpdate = editableFieldElements.size < 150 ? Array.from(editableFieldElements.keys()) : Array.from(visible);
+    for (let i = 0; i < keysToUpdate.length; i++) {
+      const key = keysToUpdate[i];
+      const el = editableFieldElements.get(key);
+      if (!el) continue;
+      const domRect = el.getBoundingClientRect();
+      const newRect = ui.getAbsoluteElementRect(domRect, scale, offset);
+      if (rects[key]) {
+        rects[key].width = newRect.width;
+        rects[key].height = newRect.height;
+        rects[key].x = newRect.x;
+        rects[key].y = newRect.y;
+      } else {
+        rects[key] = {
+          width: newRect.width,
+          height: newRect.height,
+          x: newRect.x,
+          y: newRect.y,
+          key
+        };
+      }
+    }
+  }
+  function handleRefresh() {
+    if (stateReloadTimeout) {
+      window.clearTimeout(stateReloadTimeout);
+    }
+    if (visible.size < 150) {
+      updateRects();
+    }
+    stateReloadTimeout = window.setTimeout(updateRects, 300);
+  }
+  onBlokkliEvent("state:reloaded", handleRefresh);
+  onBlokkliEvent("ui:resized", handleRefresh);
+  onBlokkliEvent("option:finish-change", handleRefresh);
+  onBeforeUnmount(() => {
+    if (stateReloadTimeout) {
+      window.clearTimeout(stateReloadTimeout);
+    }
+  });
+  return {
+    registerEditableField,
+    unregisterEditableField,
+    init,
+    getVisible,
+    getEditableAtPoint
+  };
+}

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, MappedState, MutationItem, Validation, MutateWithLoadingStateFunction, EditMode, FieldListItem, PublishOptions } from '#blokkli/types';
+import type { MutatedField, EditEntity, MutatedOptions, TranslationState, MappedState, MutationItem, Validation, MutateWithLoadingStateFunction, EditMode, FieldListItem, PublishOptions, EditPermission } from '#blokkli/types';
 import type { TextProvider } from './textProvider.js';
 export type BlokkliOwner = {
     name: string | undefined;
@@ -27,16 +27,20 @@ export type StateProvider = {
     editMode: Readonly<Ref<EditMode>>;
     mutatedEntity: Readonly<Ref<any>>;
     canEdit: ComputedRef<boolean>;
+    permissions: ComputedRef<EditPermission[]>;
     stateAvailable: ComputedRef<boolean>;
     isLoading: Readonly<Ref<boolean>>;
+    fromLibraryUuids: Readonly<Ref<Readonly<string[]>>>;
     getFieldBlockCount: (key: string) => number;
     getBlockBundleCount: (bundle: string) => number;
     getFieldListItem: (uuid: string) => FieldListItem | undefined;
     getFieldListForBlock: (uuid: string) => MutatedField | undefined;
     getMutatedField: (uuid: string, fieldName: string) => MutatedField | undefined;
     getAllUuids: (bundle?: string) => string[];
+    getNestingLevel: (uuid: string) => number;
+    isChildOf: (childUuid: string, parentUuid: string) => boolean;
     getMappedState: () => MappedState;
     setOverrideState: (state: MappedState) => void;
     clearOverrideState: () => void;
 };
-export default function (adapter: BlokkliAdapter<any>, context: ComputedRef<AdapterContext>, $t: TextProvider, providerKey: string): Promise<StateProvider>;
+export default function (adapter: BlokkliAdapter<any>, context: ComputedRef<AdapterContext>, $t: TextProvider, providerKey: string, permissions: EditPermission[]): Promise<StateProvider>;

package/dist/runtime/helpers/stateProvider.js

@@ -12,6 +12,7 @@ import { falsy, getFieldKey } from "#blokkli/helpers";
 import { eventBus, emitMessage } from "#blokkli/helpers/eventBus";
 import { nextTick } from "#imports";
 import { addElementClasses } from "./addElementClasses.js";
+import { BUNDLE_FROM_LIBRARY } from "#blokkli/constants";
 const HOST_OPTION_KEY = "HOST";
 function mapPublishOptions(context) {
   return {
@@ -24,7 +25,7 @@ function mapPublishOptions(context) {
     revisionLogMessage: context?.publishOptions?.revisionLogMessage ?? null
   };
 }
-export default async function(adapter, context, $t, providerKey) {
+export default async function(adapter, context, $t, providerKey, permissions) {
   let _mappedState = null;
   const overrideHostOptions = useState("options:" + providerKey);
   const stateLoaded = ref(false);
@@ -58,6 +59,8 @@ export default async function(adapter, context, $t, providerKey) {
   const blockBundleCount = ref({});
   const fieldListItemMap = /* @__PURE__ */ new Map();
   let bundleToUuids = {};
+  const fromLibraryUuids = ref([]);
+  const nestingLevelMap = /* @__PURE__ */ new Map();
   function getFieldListItem(uuid) {
     const fieldKey = fieldListItemMap.get(uuid);
     if (!fieldKey) {
@@ -141,8 +144,10 @@ export default async function(adapter, context, $t, providerKey) {
     const visitedFieldKeys = [];
     const newBlockBundleCount = {};
     fieldListItemMap.clear();
+    nestingLevelMap.clear();
     fieldBlockCount = {};
     bundleToUuids = {};
+    const fromLibrary = [];
     for (let i = 0; i < newMutatedFields.length; i++) {
       const field = newMutatedFields[i];
       const key = getFieldKey(field.entityUuid, field.name);
@@ -162,6 +167,16 @@ export default async function(adapter, context, $t, providerKey) {
           bundleToUuids[item.bundle] = [];
         }
         bundleToUuids[item.bundle].push(item.uuid);
+        if (item.bundle === BUNDLE_FROM_LIBRARY) {
+          fromLibrary.push(item.uuid);
+        }
+      }
+    }
+    for (let i = 0; i < newMutatedFields.length; i++) {
+      const field = newMutatedFields[i];
+      for (let j = 0; j < field.list.length; j++) {
+        const item = field.list[j];
+        calculateNestingLevel(item.uuid);
       }
     }
     blockBundleCount.value = newBlockBundleCount;
@@ -172,6 +187,7 @@ export default async function(adapter, context, $t, providerKey) {
         mutatedFieldsMap[key] = void 0;
       }
     }
+    fromLibraryUuids.value = fromLibrary;
     eventBus.emit("updateMutatedFields", { fields: newMutatedFields });
     nextTick(() => {
       refreshKey.value = Date.now().toString();
@@ -205,6 +221,49 @@ export default async function(adapter, context, $t, providerKey) {
     }
     return bundleToUuids[bundle] ?? [];
   }
+  function calculateNestingLevel(uuid) {
+    const cached = nestingLevelMap.get(uuid);
+    if (cached !== void 0) {
+      return cached;
+    }
+    const fieldKey = fieldListItemMap.get(uuid);
+    if (!fieldKey) {
+      nestingLevelMap.set(uuid, 0);
+      return 0;
+    }
+    const field = mutatedFieldsMap[fieldKey];
+    if (!field) {
+      nestingLevelMap.set(uuid, 0);
+      return 0;
+    }
+    const parentEntityUuid = field.entityUuid;
+    const parentFieldKey = fieldListItemMap.get(parentEntityUuid);
+    if (!parentFieldKey) {
+      nestingLevelMap.set(uuid, 0);
+      return 0;
+    }
+    const parentLevel = calculateNestingLevel(parentEntityUuid);
+    const level = parentLevel + 1;
+    nestingLevelMap.set(uuid, level);
+    return level;
+  }
+  function getNestingLevel(uuid) {
+    return nestingLevelMap.get(uuid) ?? 0;
+  }
+  function isChildOf(childUuid, parentUuid) {
+    const fieldKey = fieldListItemMap.get(childUuid);
+    if (!fieldKey) {
+      return false;
+    }
+    const field = mutatedFieldsMap[fieldKey];
+    if (!field) {
+      return false;
+    }
+    if (field.entityUuid === parentUuid) {
+      return true;
+    }
+    return isChildOf(field.entityUuid, parentUuid);
+  }
   addElementClasses(document.body, "bk-body-loading", isLoading);
   const mutateWithLoadingState = async (callback, errorMessage, successMessage) => {
     if (!callback) {
@@ -254,7 +313,7 @@ export default async function(adapter, context, $t, providerKey) {
     }
   }
   const canEdit = computed(
-    () => stateLoaded.value && !!owner.value?.currentUserIsOwner && !stateLoadError.value
+    () => stateLoaded.value && !!owner.value?.currentUserIsOwner && !stateLoadError.value && permissions.includes("edit")
   );
   const isTranslation = computed(
     () => context.value.language !== translation.value.sourceLanguage && translation.value.isTranslatable
@@ -322,7 +381,11 @@ export default async function(adapter, context, $t, providerKey) {
     getMutatedField,
     getFieldListForBlock,
     getAllUuids,
+    getNestingLevel,
+    isChildOf,
     setOverrideState,
-    clearOverrideState
+    clearOverrideState,
+    fromLibraryUuids: readonly(fromLibraryUuids),
+    permissions: computed(() => permissions)
   };
 }

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

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

package/dist/runtime/helpers/storageProvider.js

@@ -15,7 +15,7 @@ const getExisting = (key) => {
   } catch {
   }
 };
-export default async function(adapter) {
+export default async function(adapter, context) {
   const values = ref({});
   const defaults = ref({});
   let timeout = null;
@@ -97,6 +97,10 @@ export default async function(adapter) {
       }
     });
   };
+  const useWithContextPrefix = (key, providedDefaultValue, persist) => {
+    const fullKey = key + ":" + context.value.entityType + ":" + context.value.entityUuid;
+    return use(fullKey, providedDefaultValue, persist);
+  };
   const clearAll = () => {
     values.value = {};
     Object.keys(window.localStorage).forEach((key) => {
@@ -110,5 +114,5 @@ export default async function(adapter) {
     values.value[storageKey] = void 0;
     window.localStorage.removeItem(storageKey);
   };
-  return { use, clearAll, clear };
+  return { use, useWithContextPrefix, clearAll, clear };
 }

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

@@ -6,6 +6,7 @@ export declare const INJECT_NESTING_LEVEL: unique symbol;
 export declare const INJECT_IS_PREVIEW: unique symbol;
 export declare const INJECT_IS_IN_REUSABLE: unique symbol;
 export declare const INJECT_REUSABLE_OPTIONS: unique symbol;
+export declare const INJECT_REUSABLE_UUID: unique symbol;
 export declare const INJECT_FIELD_LIST_TYPE: unique symbol;
 export declare const INJECT_FIELD_LIST_BLOCKS: unique symbol;
 export declare const INJECT_FIELD_PROXY_MODE: unique symbol;

package/dist/runtime/helpers/symbols.js

@@ -6,6 +6,7 @@ export const INJECT_NESTING_LEVEL = Symbol("blokkli_nesting_level");
 export const INJECT_IS_PREVIEW = Symbol("blokkli_is_preview");
 export const INJECT_IS_IN_REUSABLE = Symbol("blokkli_is_in_reusable");
 export const INJECT_REUSABLE_OPTIONS = Symbol("blokkli_from_library_options");
+export const INJECT_REUSABLE_UUID = Symbol("blokkli_from_library_uuid");
 export const INJECT_FIELD_LIST_TYPE = Symbol("blokkli_field_list_type");
 export const INJECT_FIELD_LIST_BLOCKS = Symbol("blokkli_field_list_blocks");
 export const INJECT_FIELD_PROXY_MODE = Symbol("blokkli_field_proxy_mode");

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

@@ -4,6 +4,7 @@ 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';
+import type { ThemeColorName } from '#blokkli/types/theme';
 export type UiProvider = {
     rootElement: () => HTMLElement;
     artboardElement: () => HTMLElement;
@@ -19,7 +20,11 @@ export type UiProvider = {
     isAnalyzing: Ref<boolean>;
     isProxyMode: Ref<boolean>;
     hasDialogOpen: Ref<boolean>;
-    hasAddTooltipOpen: Ref<boolean>;
+    hasTooltipOpen: ComputedRef<boolean>;
+    openTooltip: Ref<string>;
+    selectionColor: ComputedRef<ThemeColorName | null>;
+    setSelectionColor: (id: string, color: ThemeColorName) => void;
+    removeSelectionColor: (id: string) => void;
     hasTransformOverlayOpen: Ref<boolean>;
     isTransforming: ComputedRef<boolean>;
     setTransform: (label?: string | null | undefined) => void;
@@ -44,5 +49,7 @@ export type UiProvider = {
     formatDate: (date: string | Date, options?: Intl.DateTimeFormatOptions) => string;
     getAbsoluteElementRect: (v: HTMLElement | Rectangle, scale?: number, offset?: Coord) => Rectangle;
     getViewportRelativeRect: (rect: Rectangle, scale?: number, offset?: Coord) => Rectangle;
+    setBannerHeight: (id: string, height: number) => void;
+    removeBanner: (id: string) => void;
 };
 export default function (storage: StorageProvider, state: StateProvider, context: ComputedRef<AdapterContext>): UiProvider;

package/dist/runtime/helpers/uiProvider.js

@@ -29,12 +29,19 @@ export default function(storage, state, context) {
   const isProxyMode = ref(false);
   const menuIsOpen = ref(false);
   const hasDialogOpen = ref(false);
-  const hasAddTooltipOpen = ref(false);
+  const openTooltip = ref("");
   const hasTransformOverlayOpen = ref(false);
   const isAnimating = ref(false);
   const isAnalyzing = ref(false);
   const transformLabel = ref("");
   const openContextMenu = ref("");
+  const banners = ref({});
+  function setBannerHeight(id, height) {
+    banners.value[id] = height;
+  }
+  function removeBanner(id) {
+    banners.value[id] = 0;
+  }
   const selectionTopLeft = ref({ x: 0, y: 0 });
   const baseSettings = storage.use("feature:settings:settings", {});
   const lowPerformanceMode = computed(
@@ -175,6 +182,11 @@ export default function(storage, state, context) {
         height -= 70;
       }
     }
+    const bannerHeights = Object.values(banners.value).filter(Boolean);
+    bannerHeights.forEach((bannerHeight) => {
+      height -= bannerHeight;
+    });
+    height -= bannerHeights.length * 10;
     return height;
   });
   const blockingPaddingX = computed(() => 15);
@@ -279,6 +291,20 @@ export default function(storage, state, context) {
     resizeObserver.unobserve(artboard);
     resizeObserver.disconnect();
   });
+  const hasTooltipOpen = computed(() => !!openTooltip.value);
+  const selectionColors = ref([]);
+  function setSelectionColor(id, color) {
+    selectionColors.value = [
+      ...selectionColors.value.filter((v) => v.id !== id),
+      { id, color }
+    ];
+  }
+  function removeSelectionColor(id) {
+    selectionColors.value = selectionColors.value.filter((v) => v.id !== id);
+  }
+  const selectionColor = computed(() => {
+    return selectionColors.value[selectionColors.value.length - 1]?.color ?? null;
+  });
   return {
     menu: {
       isOpen: menuIsOpen,
@@ -318,6 +344,12 @@ export default function(storage, state, context) {
     formatDate,
     hasDialogOpen,
     hasTransformOverlayOpen,
-    hasAddTooltipOpen
+    hasTooltipOpen,
+    openTooltip,
+    selectionColor,
+    setSelectionColor,
+    removeSelectionColor,
+    setBannerHeight,
+    removeBanner
   };
 }

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

@@ -8,10 +8,16 @@ type RectangleBufferRect = Rectangle & {
 };
 type RectangleBufferCollectorOptions = {
     padding?: number;
+    deferredMode?: boolean;
 };
 type PlacedRectangle = Rectangle & {
     originalY: number;
 };
+type PendingRect<T> = {
+    rect: Omit<T, 'index'>;
+    type: number;
+    checkOverlap: boolean;
+};
 export declare class RectangleBufferCollector<T extends RectangleBufferRect> {
     gl?: WebGLRenderingContext;
     added: Set<string>;
@@ -26,10 +32,13 @@ export declare class RectangleBufferCollector<T extends RectangleBufferRect> {
     index: number;
     bufferInfo: BufferInfo | null;
     placedRects: PlacedRectangle[];
-    constructor(gl?: WebGLRenderingContext, _options?: RectangleBufferCollectorOptions);
+    deferredMode: boolean;
+    pendingRects: PendingRect<T>[];
+    constructor(gl?: WebGLRenderingContext, options?: RectangleBufferCollectorOptions);
     reset(): void;
-    getIdealPosition(x: number, y: number, width: number, height: number): Rectangle;
+    getIdealPosition(x: number, y: number, width: number, height: number, isEmptyField?: boolean): Rectangle;
     addRectangle(rect: Omit<T, 'index'>, type: number, checkOverlap?: boolean): void;
+    processPendingRects(): void;
     getIndex(id: string): number | undefined;
     updateRectangle(): void;
     createBufferInfo(): BufferInfo | null;