@blokkli/editor 2.0.0-alpha.28 → 2.0.0-alpha.29

package/dist/runtime/editor/providers/directive.js

@@ -0,0 +1,241 @@
+import { falsy } from "#blokkli/helpers";
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref
+} from "#imports";
+import {
+  onBlokkliEvent,
+  useDelayedIntersectionObserver
+} from "#blokkli/editor/composables";
+import { itemEntityType } from "#blokkli-build/config";
+export default function(debug, ui) {
+  const logger = debug.createLogger("DirectiveProvider");
+  let initTimeout = null;
+  const isInitalizing = ref(true);
+  let stateReloadTimeout = null;
+  const elementMap = /* @__PURE__ */ new WeakMap();
+  const elements = /* @__PURE__ */ new Map();
+  const fieldData = /* @__PURE__ */ new Map();
+  const rects = {};
+  const visible = /* @__PURE__ */ new Set();
+  const editablesByUuid = {};
+  let settleTimeout = null;
+  const settleKey = ref(0);
+  function doInitTimeout() {
+    if (initTimeout) {
+      window.clearTimeout(initTimeout);
+    }
+    if (isInitalizing.value) {
+      initTimeout = window.setTimeout(() => {
+        isInitalizing.value = false;
+      }, 500);
+    }
+  }
+  function doSettleTimeout() {
+    if (settleTimeout) {
+      window.clearTimeout(settleTimeout);
+    }
+    settleTimeout = window.setTimeout(() => {
+      settleKey.value++;
+    }, 50);
+  }
+  function getVisible(directiveType) {
+    return [...visible.keys()].map((key) => {
+      if (key.startsWith(directiveType)) {
+        return rects[key];
+      }
+    }).filter(falsy);
+  }
+  function getEditableKey(fieldName, entity, directiveType) {
+    return `${directiveType}:${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 = elementMap.get(entry.target);
+        if (!data) {
+          continue;
+        }
+        const key = getEditableKey(data.fieldName, data, data.directiveType);
+        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 registerDirectiveElement(el, fieldName, entity, directiveType, isComponent, getValue) {
+    const key = getEditableKey(fieldName, entity, directiveType);
+    const data = {
+      ...entity,
+      fieldName,
+      directiveType,
+      key,
+      isComponent,
+      getValue
+    };
+    elementMap.set(el, data);
+    fieldData.set(key, data);
+    intersectionObserver.observe(el);
+    elements.set(key, el);
+    if (directiveType === "editable" && entity.type === itemEntityType) {
+      editablesByUuid[entity.uuid] ||= {};
+      editablesByUuid[entity.uuid][fieldName] = data;
+    }
+    logger.log("Registered directive element", data);
+    doInitTimeout();
+    doSettleTimeout();
+  }
+  function unregisterDirectiveElement(el, fieldName, entity, directiveType) {
+    const key = getEditableKey(fieldName, entity, directiveType);
+    logger.log("Unregistered directive element", key);
+    intersectionObserver.unobserve(el);
+    elementMap.delete(el);
+    fieldData.delete(key);
+    rects[key] = void 0;
+    visible.delete(key);
+    elements.delete(key);
+    if (directiveType === "editable" && entity.type === itemEntityType) {
+      if (editablesByUuid[entity.uuid]) {
+        editablesByUuid[entity.uuid][fieldName] = void 0;
+      }
+    }
+    doSettleTimeout();
+  }
+  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) {
+      if (!key.startsWith("editable:")) continue;
+      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 fieldData.get(key);
+      }
+    }
+    return void 0;
+  }
+  function updateRects() {
+    const scale = ui.artboardScale.value;
+    const offset = ui.artboardOffset.value;
+    const keysToUpdate = elements.size < 150 ? Array.from(elements.keys()) : Array.from(visible);
+    for (let i = 0; i < keysToUpdate.length; i++) {
+      const key = keysToUpdate[i];
+      const el = elements.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);
+  }
+  function getEditablesForBlock(uuid) {
+    const editables = editablesByUuid[uuid];
+    if (!editables) {
+      return [];
+    }
+    return Object.values(editables).filter(falsy);
+  }
+  function getDroppableElements() {
+    const droppableElements = [];
+    for (const item of fieldData.values()) {
+      if (item.directiveType !== "droppable") {
+        continue;
+      }
+      const element = elements.get(item.key);
+      if (!element) {
+        continue;
+      }
+      droppableElements.push({
+        ...item,
+        element
+      });
+    }
+    return droppableElements;
+  }
+  function findEditableElement(fieldName, host) {
+    const key = getEditableKey(fieldName, host, "editable");
+    return elements.get(key);
+  }
+  function findEditable(fieldName, host) {
+    const key = getEditableKey(fieldName, host, "editable");
+    return fieldData.get(key);
+  }
+  onBlokkliEvent("state:reloaded", () => {
+    handleRefresh();
+    doSettleTimeout();
+  });
+  onBlokkliEvent("ui:resized", handleRefresh);
+  onBlokkliEvent("option:finish-change", handleRefresh);
+  onMounted(() => {
+    doInitTimeout();
+  });
+  onBeforeUnmount(() => {
+    if (stateReloadTimeout) {
+      window.clearTimeout(stateReloadTimeout);
+    }
+  });
+  return {
+    registerDirectiveElement,
+    unregisterDirectiveElement,
+    init,
+    getVisible,
+    getEditableAtPoint,
+    findEditable,
+    getEditablesForBlock,
+    findEditableElement,
+    getDroppableElements,
+    isReady: computed(() => !isInitalizing.value),
+    settleKey: computed(() => settleKey.value)
+  };
+}

package/dist/runtime/editor/providers/dom.d.ts

@@ -0,0 +1,228 @@
+import { type ComputedRef } from '#imports';
+import type { EntityContext } from '#blokkli/types';
+import type { UiProvider } from './ui.js';
+import type { DebugProvider } from './debug.js';
+import type { StateProvider } from './state.js';
+import type { ElementProvider } from './element.js';
+import type { Rectangle } from '../types/geometry.js';
+import type { DraggableExistingBlock, DraggableItem } from '../types/draggable.js';
+import type { RegisteredField, RegisterFieldData, RenderedFieldListItem } from '../types/field.js';
+type RegisteredFieldType = {
+    entityType: string;
+    entityBundle: string;
+    fieldName: string;
+};
+type MeasuredBlockRect = Rectangle & {
+    time: number;
+};
+export type DomProvider = {
+    /**
+     * Get the bounding client rect for an element.
+     *
+     * Wrapper around `getBoundingClientRect()` with debug logging.
+     */
+    getBoundingClientRect: (element: HTMLElement) => DOMRect;
+    /**
+     * Return the droppable markup for a draggable item.
+     */
+    getDropElementMarkup(item: DraggableItem | RenderedFieldListItem, checkSize?: boolean): string;
+    /**
+     * Register a block element for observation and tracking.
+     *
+     * Starts observing the element with IntersectionObserver and ResizeObserver
+     * to track visibility and dimensions.
+     *
+     * @param key - Unique key identifying the block's location (field + index)
+     * @param uuid - The block's UUID
+     * @param el - The block's root HTML element
+     */
+    registerBlock: (key: string, uuid: string, el: HTMLElement | null) => void;
+    /**
+     * Unregister a block element from observation.
+     *
+     * Stops observing the element and removes it from tracking.
+     *
+     * @param key - Unique key identifying the block's location
+     * @param uuid - The block's UUID
+     */
+    unregisterBlock: (key: string, uuid: string) => void;
+    /**
+     * Register a field element for observation.
+     *
+     * Starts observing the field element with IntersectionObserver to track
+     * visibility and position.
+     *
+     * @param entity - The entity context (UUID, type, bundle)
+     * @param fieldName - The field's machine name
+     * @param instance - The field's HTML element
+     * @param data - Additional field registration data
+     */
+    registerField: (entity: EntityContext, fieldName: string, instance: HTMLElement, data: RegisterFieldData) => void;
+    /**
+     * Update the element reference for an already registered field.
+     *
+     * Stops observing the old element and starts observing the new one.
+     *
+     * @param entity - The entity context
+     * @param fieldName - The field's machine name
+     * @param element - The new field HTML element
+     * @param data - Additional field registration data
+     */
+    updateFieldElement: (entity: EntityContext, fieldName: string, element: HTMLElement, data: RegisterFieldData) => void;
+    /**
+     * Unregister a field element from observation.
+     *
+     * @param entity - The entity context
+     * @param fieldName - The field's machine name
+     */
+    unregisterField: (entity: EntityContext, fieldName: string) => void;
+    /**
+     * Get a registered field by entity UUID and field name.
+     *
+     * @param uuid - The entity UUID
+     * @param fieldName - The field's machine name
+     * @returns The registered field data, or undefined if not found
+     */
+    getRegisteredField: (uuid: string, fieldName: string) => RegisteredField | undefined;
+    /**
+     * List of unique field types currently registered.
+     *
+     * Returns unique combinations of entity type, bundle, and field name.
+     */
+    registeredFieldTypes: ComputedRef<RegisteredFieldType[]>;
+    /**
+     * List of UUIDs for all blocks with registered elements.
+     *
+     * Only includes blocks that have a valid HTML element reference.
+     */
+    registeredBlockUuids: ComputedRef<string[]>;
+    /**
+     * Get UUIDs of all currently visible blocks.
+     *
+     * @returns Array of block UUIDs that are currently in the viewport
+     */
+    getVisibleBlocks(): string[];
+    /**
+     * Get keys of all currently visible fields.
+     *
+     * @returns Array of field keys (uuid:fieldName) that are currently in the viewport
+     */
+    getVisibleFields(): string[];
+    /**
+     * Check if a block is currently visible in the viewport.
+     *
+     * @param uuid - The block's UUID
+     * @returns True if the block is visible
+     */
+    isBlockVisible(uuid: string): boolean;
+    /**
+     * Get rectangles for all registered blocks.
+     *
+     * @returns Record mapping UUIDs to their measured rectangles with timestamps
+     */
+    getBlockRects: () => Record<string, MeasuredBlockRect | undefined>;
+    /**
+     * Get the rectangle for a specific block.
+     *
+     * @param uuid - The block's UUID
+     * @param refresh - Whether to refresh the rect before returning
+     * @returns The block's rectangle, or undefined if not found
+     */
+    getBlockRect: (uuid: string, refresh?: boolean) => MeasuredBlockRect | undefined;
+    /**
+     * Refresh the cached rectangle for a specific block.
+     *
+     * Recalculates the block's position and dimensions immediately.
+     *
+     * @param uuid - The block's UUID
+     */
+    refreshBlockRect: (uuid: string) => void;
+    /**
+     * Get the rectangle for a specific field.
+     *
+     * @param key - The field key (uuid:fieldName)
+     * @returns The field's rectangle, or undefined if not found
+     */
+    getFieldRect: (key: string) => Rectangle | undefined;
+    /**
+     * Record of all registered block elements.
+     *
+     * Maps UUIDs to their corresponding HTML elements.
+     */
+    registeredBlocks: ComputedRef<Record<string, HTMLElement | undefined>>;
+    /**
+     * Update rectangles for all visible blocks and fields.
+     *
+     * Recalculates positions and dimensions for currently visible items.
+     * For performance, only updates visible items when there are many blocks.
+     */
+    updateVisibleRects: () => void;
+    /**
+     * Whether the DOM provider is ready.
+     *
+     * Ready when IntersectionObserver is initialized and initial measurements are complete.
+     */
+    isReady: ComputedRef<boolean>;
+    /**
+     * Settlement key that increments after DOM changes settle.
+     *
+     * Useful for triggering reactivity after blocks/fields are registered/unregistered.
+     */
+    settleKey: ComputedRef<number>;
+    /**
+     * Initialize the DOM provider.
+     *
+     * Starts the IntersectionObserver and marks the provider as ready.
+     */
+    init: () => void;
+    /**
+     * Get the drag element for a block.
+     */
+    getDragElement: (block: DraggableExistingBlock | RenderedFieldListItem) => HTMLElement | undefined;
+    /**
+     * Get debug data for troubleshooting.
+     */
+    getDebugData: () => {
+        registeredBlocks: Array<{
+            uuid: string;
+            hasElement: boolean;
+            hasObservedElement: boolean;
+            hasRect: boolean;
+            hasCurrentKey: boolean;
+            isVisible: boolean;
+            elementInfo?: {
+                tagName: string;
+                bundle?: string;
+                hostBundle?: string;
+                fieldListType?: string;
+            };
+        }>;
+        fields: Array<{
+            key: string;
+            isVisible: boolean;
+            hasRect: boolean;
+            entityType: string;
+            entityBundle: string;
+            fieldName: string;
+        }>;
+        summary: {
+            totalRegisteredBlocks: number;
+            totalBlocksWithElements: number;
+            totalObservedElements: number;
+            totalBlockRects: number;
+            totalVisibleBlocks: number;
+            totalRegisteredFields: number;
+            totalVisibleFields: number;
+            totalFieldRects: number;
+            isInitializing: boolean;
+            isReady: boolean;
+        };
+        orphanedData: {
+            rectsWithoutRegistration: string[];
+            observedElementsWithoutRegistration: string[];
+            keysWithoutRegistration: string[];
+        };
+    };
+};
+export default function (ui: UiProvider, debug: DebugProvider, state: StateProvider, element: ElementProvider): DomProvider;
+export {};