@blokkli/editor 1.0.4 → 1.1.1

package/dist/runtime/helpers/animationProvider.js

@@ -13,25 +13,31 @@ export default function(ui) {
   let mouseY = 0;
   let iterator = 120;
   const webglSupported = ref(null);
-  useAnimationFrame(() => {
+  useAnimationFrame((time) => {
     if (iterator < 1) {
       return;
     }
     iterator--;
-    eventBus.emit("animationFrame:before");
+    eventBus.emit("animationFrame:before", time);
     eventBus.emit("animationFrame", {
       mouseX,
       mouseY,
       fieldAreas: []
     });
   });
+  function onWindowMouseMove(e) {
+    mouseX = e.clientX;
+    mouseY = e.clientY;
+  }
   onMounted(() => {
-    document.addEventListener("scroll", requestDraw);
     document.body.addEventListener("wheel", requestDraw, { passive: false });
+    window.addEventListener("pointermove", onWindowMouseMove, { capture: true });
   });
   onBeforeUnmount(() => {
     document.body.removeEventListener("wheel", requestDraw);
-    document.removeEventListener("scroll", requestDraw);
+    window.removeEventListener("pointermove", onWindowMouseMove, {
+      capture: true
+    });
   });
   const requestDraw = () => iterator = 120;
   onBlokkliEvent("select", requestDraw);

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

@@ -4,6 +4,11 @@ import type { DraggableExistingBlock, BlokkliFieldElement, DraggableItem, Droppa
 import type { UiProvider } from './uiProvider.js';
 import type { BlockBundleWithNested, ValidFieldListTypes } from '#blokkli/generated-types';
 import type { DebugProvider } from './debugProvider.js';
+type RegisteredFieldType = {
+    entityType: string;
+    entityBundle: string;
+    fieldName: string;
+};
 type MeasuredBlockRect = Rectangle & {
     time: number;
 };
@@ -11,17 +16,18 @@ export type DomProvider = {
     findBlock(uuid: string): DraggableExistingBlock | undefined;
     getAllBlocks(): DraggableExistingBlock[];
     findClosestBlock(el: Element | EventTarget): DraggableExistingBlock | undefined;
-    getAllFields(): BlokkliFieldElement[];
     /**
      * Return the droppable markup for a draggable item.
      */
     getDropElementMarkup(item: DraggableItem, checkSize?: boolean): string;
     getBlockField(uuid: string): BlokkliFieldElement;
     findField(entityUuid: string, fieldName: string): BlokkliFieldElement | undefined;
-    registerBlock: (uuid: string, instance: ComponentInternalInstance | null, bundle: string, fieldListType: ValidFieldListTypes, parentBlockBundle?: BlockBundleWithNested) => void;
+    registerBlock: (uuid: string, instance: ComponentInternalInstance | null | HTMLElement, bundle: string, fieldListType: ValidFieldListTypes, parentBlockBundle?: BlockBundleWithNested) => void;
     unregisterBlock: (uuid: string) => void;
-    registerField: (uuid: string, fieldName: string, instance: HTMLElement) => void;
-    unregisterField: (uuid: string, fieldName: string) => void;
+    registerField: (entity: EntityContext, fieldName: string, instance: HTMLElement) => void;
+    updateFieldElement: (entity: EntityContext, fieldName: string, element: HTMLElement) => void;
+    unregisterField: (entity: EntityContext, fieldName: string) => void;
+    registeredFieldTypes: ComputedRef<RegisteredFieldType[]>;
     /**
      * Get all droppable entity fields.
      */
@@ -30,11 +36,13 @@ export type DomProvider = {
     getBlockVisibilities(): Record<string, boolean>;
     getVisibleBlocks(): string[];
     getVisibleFields(): string[];
+    isBlockVisible(uuid: string): boolean;
     getActiveProviderElement: () => HTMLElement;
     getBlockRects: () => Record<string, MeasuredBlockRect>;
     getBlockRect: (uuid: string) => MeasuredBlockRect | undefined;
     refreshBlockRect: (uuid: string) => void;
     getFieldRect: (key: string) => Rectangle | undefined;
+    updateVisibleRects: () => void;
     isReady: ComputedRef<boolean>;
     init: () => void;
     /**

package/dist/runtime/helpers/domProvider.js

@@ -15,6 +15,7 @@ const buildFieldElement = (element) => {
   const name = element.dataset.fieldName;
   const label = element.dataset.fieldLabel;
   const isNested = element.dataset.fieldIsNested === "true";
+  const nestingLevel = Number.parseInt(element.dataset.bkNestingLevel || "0");
   const fieldListType = element.dataset.fieldListType;
   const hostEntityType = element.dataset.hostEntityType;
   const hostEntityBundle = element.dataset.hostEntityBundle;
@@ -29,6 +30,7 @@ const buildFieldElement = (element) => {
       name,
       label,
       isNested,
+      nestingLevel,
       hostEntityType,
       hostEntityUuid,
       hostEntityBundle,
@@ -42,6 +44,9 @@ const buildFieldElement = (element) => {
   }
 };
 const getVisibleBlockElement = (instance) => {
+  if (instance instanceof HTMLElement) {
+    return instance;
+  }
   if (instance.vnode.el instanceof HTMLElement) {
     return instance.vnode.el;
   } else if (instance?.vnode.el instanceof Text && instance?.vnode.el.nextElementSibling instanceof HTMLElement) {
@@ -102,7 +107,7 @@ export default function(ui, debug) {
       if (entry.target instanceof HTMLElement) {
         const uuid = entry.target.dataset.uuid || entry.target.closest("[data-uuid]")?.dataset.uuid;
         const fieldKey = entry.target.dataset.fieldKey;
-        const rect = entry.boundingClientRect;
+        const rect = entry.target.getBoundingClientRect();
         if (fieldKey) {
           if (entry.isIntersecting) {
             visibleFields.add(fieldKey);
@@ -136,20 +141,53 @@ export default function(ui, debug) {
   const observer = useDelayedIntersectionObserver(intersectionCallback);
   const registeredBlocks = reactive({});
   const registeredFields = reactive({});
-  const registerField = (uuid, fieldName, element) => {
-    const key = `${uuid}:${fieldName}`;
-    registeredFields[key] = element;
+  const registeredFieldTypes = computed(() => {
+    const fields = Object.values(registeredFields);
+    const found = /* @__PURE__ */ new Set();
+    const uniqueFieldTypes = [];
+    for (let i = 0; i < fields.length; i++) {
+      const field = fields[i];
+      if (field) {
+        const key = `${field.entity.type}:${field.entity.bundle}:${field.fieldName}`;
+        if (!found.has(key)) {
+          uniqueFieldTypes.push({
+            entityType: field.entity.type,
+            entityBundle: field.entity.bundle,
+            fieldName: field.fieldName
+          });
+          found.add(key);
+        }
+      }
+    }
+    return uniqueFieldTypes;
+  });
+  const registerField = (entity, fieldName, element) => {
+    const key = `${entity.uuid}:${fieldName}`;
+    registeredFields[key] = { element, entity, fieldName };
+    observer.observe(element);
+  };
+  const updateFieldElement = (entity, fieldName, element) => {
+    const key = `${entity.uuid}:${fieldName}`;
+    const existingElement = registeredFields[key]?.element;
+    if (existingElement) {
+      observer.unobserve(existingElement);
+    }
+    registeredFields[key] = { entity, fieldName, element };
     observer.observe(element);
   };
-  const unregisterField = (uuid, fieldName) => {
-    const key = `${uuid}:${fieldName}`;
-    const el = registeredFields[key];
+  const unregisterField = (entity, fieldName) => {
+    const key = `${entity.uuid}:${fieldName}`;
+    const el = registeredFields[key]?.element;
     if (el) {
       observer.unobserve(el);
     }
+    visibleFields.delete(key);
     registeredFields[key] = void 0;
   };
   function getElementToObserve(el, bundle, fieldListType, parentBlockBundle) {
+    if (el.classList.contains("bk-block-proxy")) {
+      return el;
+    }
     const definition = getDefinition(bundle, fieldListType, parentBlockBundle);
     if (!definition) {
       throw new Error("Failed to load definition for bundle: " + bundle);
@@ -197,6 +235,7 @@ export default function(ui, debug) {
     }
     registeredBlocks[uuid] = void 0;
     delete blockRects[uuid];
+    visibleBlocks.delete(uuid);
   };
   const findBlock = (uuid) => {
     const cached = draggableBlockCache[uuid];
@@ -225,14 +264,6 @@ export default function(ui, debug) {
       }
     }).filter(falsy);
   };
-  const getAllFields = () => {
-    const elements = [...document.querySelectorAll(".bk-field-list")];
-    return elements.map((element) => {
-      if (element instanceof HTMLElement) {
-        return buildFieldElement(element);
-      }
-    }).filter(falsy);
-  };
   const getDropElementMarkup = (item, checkSize) => {
     const el = item.itemType === "existing" ? getDragElement(item) : item.element();
     if (!el) {
@@ -253,7 +284,7 @@ export default function(ui, debug) {
     if (!block) {
       throw new Error("Block does not exist: " + uuid);
     }
-    const el = block.element().closest(".bk-field-list");
+    const el = block.element().closest(".bk-draggable-list-container");
     if (!(el instanceof HTMLElement)) {
       throw new TypeError("Failed to locate field element for block: " + uuid);
     }
@@ -272,9 +303,9 @@ export default function(ui, debug) {
     }
     return buildFieldElement(el);
   };
-  const getAllDroppableFields = () => [...document.querySelectorAll("[data-blokkli-droppable-field]")].map(
-    mapDroppableField
-  );
+  const getAllDroppableFields = () => [...document.querySelectorAll("[data-blokkli-droppable-field]")].filter((el) => {
+    return !el.closest('[data-bk-in-proxy="true"]');
+  }).map(mapDroppableField);
   const getBlockVisibilities = () => {
     return blockVisibility;
   };
@@ -324,12 +355,19 @@ export default function(ui, debug) {
     fieldRects[key] = ui.getAbsoluteElementRect(el.getBoundingClientRect());
   }
   let stateReloadTimeout = null;
+  function getUuidsToUpdateRectsFor() {
+    const allUuids = Object.keys(registeredBlocks);
+    if (allUuids.length < 150) {
+      return allUuids;
+    }
+    return getVisibleBlocks();
+  }
   function updateVisibleRects() {
-    const visible = getVisibleBlocks();
+    const toUpdate = getUuidsToUpdateRectsFor();
     const offset = ui.artboardOffset.value;
     const scale = ui.artboardScale.value;
-    for (let i = 0; i < visible.length; i++) {
-      const uuid = visible[i];
+    for (let i = 0; i < toUpdate.length; i++) {
+      const uuid = toUpdate[i];
       const el = registeredBlocks[uuid];
       if (!el) {
         continue;
@@ -362,7 +400,7 @@ export default function(ui, debug) {
         continue;
       }
       fieldRects[key] = ui.getAbsoluteElementRect(
-        field.getBoundingClientRect(),
+        field.element.getBoundingClientRect(),
         scale,
         offset
       );
@@ -376,7 +414,7 @@ export default function(ui, debug) {
     stateReloadTimeout = window.setTimeout(updateVisibleRects, 300);
   });
   onBlokkliEvent("ui:resized", function() {
-    getVisibleBlocks().forEach(refreshBlockRect);
+    updateVisibleRects();
     getVisibleFields().forEach(refreshFieldRect);
     logger.log("Refreshed all visible rects");
   });
@@ -417,11 +455,13 @@ export default function(ui, debug) {
     dragElementCache.set(block.uuid, el);
     return el;
   }
+  function isBlockVisible(uuid) {
+    return visibleBlocks.has(uuid);
+  }
   return {
     findBlock,
     getAllBlocks,
     findClosestBlock,
-    getAllFields,
     getDropElementMarkup,
     getBlockField,
     findField,
@@ -434,13 +474,17 @@ export default function(ui, debug) {
     getVisibleFields,
     registerField,
     unregisterField,
+    updateFieldElement,
     getActiveProviderElement,
     getBlockRects,
     getBlockRect,
     getFieldRect,
     refreshBlockRect,
+    isBlockVisible,
     isReady: computed(() => mutationsReady.value && intersectionReady.value),
     init,
-    getDragElement
+    getDragElement,
+    updateVisibleRects,
+    registeredFieldTypes
   };
 }

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

@@ -10,7 +10,7 @@ export default function (): {
     features: ComputedRef<{
         id: ValidFeatureKey;
         label?: string | undefined;
-        icon: import("../../../playground/.nuxt/blokkli/icons").BlokkliIcon;
+        icon: import("../../../.nuxt/blokkli/icons").BlokkliIcon;
         description?: string | undefined;
         dependencies?: ValidFeatureKey[] | undefined;
         viewports?: import("../constants").Viewport[] | undefined;

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

@@ -1,7 +1,9 @@
 /**
  * This file should contain all helpers that are meant for runtime functionality, such as defineBlokkli composable or <BlokkliProvider>.
  */
+import type { FieldListItemTyped } from '#blokkli/generated-types';
 import type { BlockOptionDefinition } from '#blokkli/types/blokkOptions';
+import type { FieldListItem } from '#blokkli/types';
 /**
  * Map all kinds of truthy values for a checkbox.
  * Returns our "internal" value of a checkbox state.
@@ -13,3 +15,7 @@ export declare function mapCheckboxTrue(v?: unknown): '1' | '0';
  * Internally, all option values are stored as strings. This function maps the stored data to the runtime value.
  */
 export declare function getRuntimeOptionValue(definition: Pick<BlockOptionDefinition, 'type' | 'default'>, value: string | string[] | boolean | undefined | null | number): string | string[] | boolean | number;
+/**
+ * Determines whether an item is visible.
+ */
+export declare function isVisibleByOptions(item?: FieldListItemTyped | FieldListItem, language?: string): boolean;

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

@@ -1,3 +1,8 @@
+import {
+  bundlesWithVisibleLanguage,
+  bundlesWithHiddenGlobally
+} from "#blokkli/default-global-options";
+import { BK_HIDDEN_GLOBALLY, BK_VISIBLE_LANGUAGES } from "../symbols.js";
 export function mapCheckboxTrue(v) {
   return v === true || v === "1" || v === 1 || v === "true" ? "1" : "0";
 }
@@ -31,3 +36,23 @@ export function getRuntimeOptionValue(definition, value) {
   }
   return "";
 }
+export function isVisibleByOptions(item, language) {
+  if (!item) {
+    return false;
+  }
+  if (item.options) {
+    if (bundlesWithHiddenGlobally.includes(item.bundle) && mapCheckboxTrue(item.options[BK_HIDDEN_GLOBALLY]) === "1") {
+      return false;
+    }
+    if (bundlesWithVisibleLanguage.includes(item.bundle)) {
+      const option = item.options[BK_VISIBLE_LANGUAGES];
+      if (language && option && typeof option === "string") {
+        const languages = option.split(",");
+        if (languages.length && !languages.includes(language)) {
+          return false;
+        }
+      }
+    }
+  }
+  return true;
+}

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

@@ -9,7 +9,7 @@ export type SelectionProvider = {
     /**
      * The currently selected UUIDs as a map.
      */
-    uuidsMap: ComputedRef<Record<string, boolean>>;
+    uuidsSet: ComputedRef<Set<string>>;
     /**
      * The currently selected blocks.
      */
@@ -58,5 +58,6 @@ export type SelectionProvider = {
      * The block bundles of the items being dragged.
      */
     dragItemsBundles: ComputedRef<string[]>;
+    isBlockSelected(uuid: string): boolean;
 };
 export default function (dom: DomProvider): SelectionProvider;

package/dist/runtime/helpers/selectionProvider.js

@@ -20,12 +20,7 @@ export default function(dom) {
   const dragItemsBundles = computed(
     () => dragItems.value.map((v) => v.itemBundle).filter(falsy)
   );
-  const uuidsMap = computed(() => {
-    return selectedUuids.value.reduce((acc, uuid) => {
-      acc[uuid] = true;
-      return acc;
-    }, {});
-  });
+  const uuidsSet = computed(() => new Set(selectedUuids.value));
   const isDragging = computed(() => !!draggingMode.value);
   const blocks = computed(
     () => selectedUuids.value.map((uuid) => {
@@ -130,6 +125,9 @@ export default function(dom) {
       (v) => v.itemType === "existing" || v.itemType === "existing_structure"
     );
   });
+  function isBlockSelected(uuid) {
+    return uuidsSet.value.has(uuid);
+  }
   return {
     uuids: selectedUuids,
     blocks,
@@ -143,7 +141,8 @@ export default function(dom) {
     draggingMode,
     interactionMode,
     dragItems,
-    uuidsMap,
-    dragItemsBundles
+    uuidsSet,
+    dragItemsBundles,
+    isBlockSelected
   };
 }

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

@@ -2,15 +2,22 @@ export declare const INJECT_APP: unique symbol;
 export declare const INJECT_EDIT_CONTEXT: unique symbol;
 export declare const INJECT_IS_EDITING: unique symbol;
 export declare const INJECT_IS_NESTED: unique symbol;
+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_FIELD_LIST_TYPE: unique symbol;
 export declare const INJECT_FIELD_LIST_BLOCKS: unique symbol;
+export declare const INJECT_FIELD_PROXY_MODE: unique symbol;
+export declare const INJECT_FIELD_USES_PROXY: unique symbol;
+export declare const INJECT_GLOBAL_PROXY_MODE: unique symbol;
 export declare const INJECT_PROVIDER_BLOCKS: unique symbol;
 export declare const INJECT_BLOCK_ITEM: unique symbol;
 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_EDIT_FIELD_LIST_COMPONENT: unique symbol;
 export declare const INJECT_EDIT_LOGGER: unique symbol;
+export declare const BK_HIDDEN_GLOBALLY = "bkHiddenGlobally";
+export declare const BK_VISIBLE_LANGUAGES = "bkVisibleLanguages";

package/dist/runtime/helpers/symbols.js

@@ -2,17 +2,24 @@ export const INJECT_APP = Symbol("blokkli_app");
 export const INJECT_EDIT_CONTEXT = Symbol("blokkli_edit_context");
 export const INJECT_IS_EDITING = Symbol("blokkli_is_editing");
 export const INJECT_IS_NESTED = Symbol("blokkli_is_nested");
+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_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");
+export const INJECT_FIELD_USES_PROXY = Symbol("blokkli_field_uses_proxy");
+export const INJECT_GLOBAL_PROXY_MODE = Symbol("blokkli_global_proxy_mode");
 export const INJECT_PROVIDER_BLOCKS = Symbol("blokkli_provider_blocks");
 export const INJECT_BLOCK_ITEM = Symbol("blokkli_block_item");
 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_EDIT_FIELD_LIST_COMPONENT = Symbol(
   "blokkli_edit_field_list_component"
 );
 export const INJECT_EDIT_LOGGER = Symbol("blokkli_edit_logger");
+export const BK_HIDDEN_GLOBALLY = "bkHiddenGlobally";
+export const BK_VISIBLE_LANGUAGES = "bkVisibleLanguages";

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

@@ -3,7 +3,7 @@ import type { FieldConfig, BlockBundleDefinition, EditableFieldConfig, BlockDefi
 import type { AdapterContext, BlokkliAdapter } from '../adapter.js';
 import type { SelectionProvider } from './selectionProvider.js';
 export type BlokkliBlockType = BlockBundleDefinition & {
-    definition: BlockDefinitionInput<BlockDefinitionOptionsInput, any[]> | undefined;
+    definition: BlockDefinitionInput<BlockDefinitionOptionsInput, never[]> | undefined;
 };
 interface MappableConfig {
     entityType: string;

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

@@ -15,6 +15,7 @@ export type UiProvider = {
     isDesktop: ComputedRef<boolean>;
     isArtboard: () => boolean;
     isAnimating: Ref<boolean>;
+    isProxyMode: Ref<boolean>;
     useAnimations: ComputedRef<boolean>;
     lowPerformanceMode: ComputedRef<boolean>;
     toolbarHeight: ComputedRef<number>;

package/dist/runtime/helpers/uiProvider.js

@@ -8,10 +8,12 @@ import {
 import { eventBus } from "./eventBus.js";
 import { falsy } from "./index.js";
 const ARTBOARD_CLASS = "bk-is-artboard";
+const CLASS_PROXY_MODE = "bk-is-proxy-mode";
 export default function(storage) {
   let cachedRootElement = null;
   let cachedArtboardElement = null;
   let cachedProviderElement = null;
+  const isProxyMode = ref(false);
   const menuIsOpen = ref(false);
   const isAnimating = ref(false);
   const openContextMenu = ref("");
@@ -197,10 +199,18 @@ export default function(storage) {
       height: visibleViewportHeight.value - 2 * viewportPadding.value
     };
   });
+  function setProxyModeClass() {
+    document.documentElement.classList.remove(CLASS_PROXY_MODE);
+    if (isProxyMode.value) {
+      document.documentElement.classList.add(CLASS_PROXY_MODE);
+    }
+  }
+  watch(isProxyMode, setProxyModeClass);
   onMounted(() => {
     document.documentElement.classList.add("bk-html-root");
     document.body.classList.add("bk-body");
     document.documentElement.classList.add(ARTBOARD_CLASS);
+    setProxyModeClass();
     viewportWidth.value = window.innerWidth;
     viewportHeight.value = window.innerHeight;
     window.addEventListener("resize", onResize);
@@ -212,6 +222,7 @@ export default function(storage) {
     document.documentElement.classList.remove("bk-html-root");
     document.body.classList.remove("bk-body");
     document.documentElement.classList.remove(ARTBOARD_CLASS);
+    document.documentElement.classList.remove(CLASS_PROXY_MODE);
     clearTimeout(resizeTimeout);
     const artboard = artboardElement();
     resizeObserver.unobserve(artboard);
@@ -224,14 +235,15 @@ export default function(storage) {
     };
   });
   function getAbsoluteElementRect(v, providedScale, providedOffset) {
-    const rect = "x" in v && "y" in v && "width" in v && "height" in v ? v : v.getBoundingClientRect();
+    const rect = v instanceof HTMLElement ? v.getBoundingClientRect() : v;
     const scale = providedScale || artboardScale.value;
     const offset = providedOffset || artboardOffset.value;
     return {
       x: rect.x / scale - offset.x / scale,
       y: rect.y / scale - offset.y / scale,
-      width: rect.width / scale,
-      height: rect.height / scale
+      // Force at least a size of 24.
+      width: Math.max(rect.width / scale, 24),
+      height: Math.max(rect.height / scale, 24)
     };
   }
   function getViewportRelativeRect(rect) {
@@ -268,6 +280,7 @@ export default function(storage) {
     openContextMenu,
     viewport,
     artboardSize: computed(() => artboardSize.value),
+    isProxyMode,
     artboardScale,
     artboardOffset,
     selectionTopLeft,

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

@@ -9,6 +9,9 @@ type RectangleBufferRect = Rectangle & {
 type RectangleBufferCollectorOptions = {
     padding?: number;
 };
+type PlacedRectangle = Rectangle & {
+    originalY: number;
+};
 export declare class RectangleBufferCollector<T extends RectangleBufferRect> {
     gl?: WebGLRenderingContext;
     added: Set<string>;
@@ -22,9 +25,11 @@ export declare class RectangleBufferCollector<T extends RectangleBufferRect> {
     radius: number[];
     index: number;
     bufferInfo: BufferInfo | null;
+    placedRects: PlacedRectangle[];
     constructor(gl?: WebGLRenderingContext, _options?: RectangleBufferCollectorOptions);
     reset(): void;
-    addRectangle(rect: Omit<T, 'index'>, type: number): void;
+    getIdealPosition(x: number, y: number, width: number, height: number): Rectangle;
+    addRectangle(rect: Omit<T, 'index'>, type: number, checkOverlap?: boolean): void;
     getIndex(id: string): number | undefined;
     updateRectangle(): void;
     createBufferInfo(): BufferInfo | null;

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

@@ -1,4 +1,5 @@
 import { createBufferInfoFromArrays } from "twgl.js";
+import { intersects } from "../index.js";
 export class RectangleBufferCollector {
   gl;
   added = /* @__PURE__ */ new Set();
@@ -12,6 +13,7 @@ export class RectangleBufferCollector {
   radius = [];
   index = 0;
   bufferInfo = null;
+  placedRects = [];
   constructor(gl, _options) {
     this.gl = gl;
   }
@@ -28,11 +30,42 @@ export class RectangleBufferCollector {
     this.index = 0;
     this.bufferInfo = null;
   }
-  addRectangle(rect, type) {
-    const x = rect.x;
-    const y = rect.y;
-    const width = rect.width;
-    const height = rect.height;
+  getIdealPosition(x, y, width, height) {
+    const rect = {
+      x,
+      y,
+      width,
+      height,
+      originalY: y
+    };
+    const intersections = [];
+    for (let i = 0; i < this.placedRects.length; i++) {
+      if (intersects(rect, this.placedRects[i])) {
+        intersections.push(this.placedRects[i]);
+      }
+    }
+    if (intersections.length === 0) {
+      this.placedRects.push(rect);
+      return rect;
+    }
+    intersections.sort((a, b) => b.originalY - a.originalY);
+    for (let i = 0; i < intersections.length; i++) {
+      const existingRect = intersections[i];
+      let iterations = 0;
+      const direction = y > existingRect.originalY ? -1 : 1;
+      while (intersects(rect, existingRect) && iterations < 10) {
+        rect.y = y + direction * (10 * (iterations + 1));
+        iterations++;
+      }
+      if (iterations >= 10) {
+        rect.y = y;
+      }
+    }
+    this.placedRects.push(rect);
+    return rect;
+  }
+  addRectangle(rect, type, checkOverlap = false) {
+    const { x, y, width, height } = checkOverlap ? this.getIdealPosition(rect.x, rect.y, rect.width, rect.height) : rect;
     this.positions.push(
       x,
       y,

package/dist/runtime/icons/eye.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>eye</title><path d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" /></svg>

package/dist/runtime/types/generatedModuleTypes.d.ts

@@ -3,18 +3,22 @@ export type ModuleOptionsSettings = {
         disable?: boolean;
         default?: 'vertical' | 'horizontal' | 'sidebar';
     };
-    'feature:artboard:persist'?: {
+    'feature:block-add-list:hideDisabledBlocks'?: {
         disable?: boolean;
         default?: boolean;
     };
-    'feature:artboard:scrollSpeed'?: {
+    'feature:artboard:momentum'?: {
         disable?: boolean;
-        default?: number;
+        default?: boolean;
     };
-    'feature:block-add-list:hideDisabledBlocks'?: {
+    'feature:artboard:persist'?: {
         disable?: boolean;
         default?: boolean;
     };
+    'feature:artboard:scrollSpeed'?: {
+        disable?: boolean;
+        default?: number;
+    };
     'feature:clipboard:openSidebarOnPaste'?: {
         disable?: boolean;
         default?: boolean;
@@ -27,6 +31,10 @@ export type ModuleOptionsSettings = {
         disable?: boolean;
         default?: boolean;
     };
+    'feature:publish:closeAfterPublish'?: {
+        disable?: boolean;
+        default?: boolean;
+    };
     'feature:settings:lowPerformanceMode'?: {
         disable?: boolean;
         default?: boolean;