@blokkli/editor 2.0.0-alpha.19 → 2.0.0-alpha.20

package/dist/runtime/helpers/animationProvider.js

@@ -48,7 +48,11 @@ export default function(ui, storage, selection, element) {
   const maxCanvasWidth = ref(16384);
   const maxCanvasHeight = ref(16384);
   let webglLimitsQueried = false;
+  let canvasElement = null;
   function getCanvasElement() {
+    if (canvasElement) {
+      return canvasElement;
+    }
     const el = element.query(
       document.documentElement,
       "#bk-animation-canvas-webgl",
@@ -57,6 +61,7 @@ export default function(ui, storage, selection, element) {
     if (!(el instanceof HTMLCanvasElement)) {
       throw new TypeError("Failed to locate WebGL canvas.");
     }
+    canvasElement = el;
     return el;
   }
   function gl() {

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

@@ -14,7 +14,6 @@ type MeasuredBlockRect = Rectangle & {
     time: number;
 };
 export type DomProvider = {
-    findClosestBlock(el: Element | EventTarget): DraggableExistingBlock | undefined;
     /**
      * Return the droppable markup for a draggable item.
      */
@@ -27,7 +26,6 @@ export type DomProvider = {
     getRegisteredField: (uuid: string, fieldName: string) => RegisteredField | undefined;
     registeredFieldTypes: ComputedRef<RegisteredFieldType[]>;
     registeredBlockUuids: ComputedRef<string[]>;
-    findClosestEntityContext(el: HTMLElement): EntityContext | undefined;
     getVisibleBlocks(): string[];
     getVisibleFields(): string[];
     isBlockVisible(uuid: string): boolean;

package/dist/runtime/helpers/domProvider.js

@@ -1,9 +1,5 @@
 import { reactive, ref, computed } from "#imports";
-import {
-  findClosestBlock,
-  falsy,
-  findClosestEntityContext
-} from "#blokkli/helpers";
+import { falsy } from "#blokkli/helpers";
 import { cloneElementWithStyles } from "./dom/index.js";
 import onBlokkliEvent from "./composables/onBlokkliEvent.js";
 import useDelayedIntersectionObserver from "./composables/useDelayedIntersectionObserver.js";
@@ -22,6 +18,8 @@ export default function(ui, debug, definitions, state, element) {
   const registeredFields = reactive({});
   const visibleBlocks = /* @__PURE__ */ new Set();
   const visibleFields = /* @__PURE__ */ new Set();
+  const fieldElementToFieldKey = /* @__PURE__ */ new WeakMap();
+  const blockElementToUuid = /* @__PURE__ */ new WeakMap();
   const blockRects = {};
   const fieldRects = {};
   const blockUuidCurrentKey = {};
@@ -42,7 +40,7 @@ export default function(ui, debug, definitions, state, element) {
       if (!(entry.target instanceof HTMLElement)) {
         return;
       }
-      const uuid = entry.target.dataset.uuid || entry.target.closest("[data-uuid]")?.dataset.uuid;
+      const uuid = blockElementToUuid.get(entry.target);
       if (!uuid) {
         return;
       }
@@ -75,39 +73,43 @@ export default function(ui, debug, definitions, state, element) {
     const scale = ui.artboardScale.value;
     const offset = ui.artboardOffset.value;
     for (const entry of entries) {
-      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.target.getBoundingClientRect();
-        if (fieldKey) {
-          if (entry.isIntersecting) {
-            visibleFields.add(fieldKey);
-          } else {
-            visibleFields.delete(fieldKey);
-          }
-          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) {
-            if (currentRect.time > entry.time) {
-              blockRects[uuid].x = newRect.x;
-              blockRects[uuid].y = newRect.y;
-            } else {
-              blockRects[uuid] = rectWithTime(newRect, entry.time);
-            }
-          } else {
-            blockRects[uuid] = rectWithTime(newRect, entry.time);
-          }
-          if (entry.isIntersecting) {
-            visibleBlocks.add(uuid);
-          } else {
-            visibleBlocks.delete(uuid);
-          }
+      if (!(entry.target instanceof HTMLElement)) {
+        continue;
+      }
+      const fieldKey = fieldElementToFieldKey.get(entry.target);
+      const rect = entry.target.getBoundingClientRect();
+      if (fieldKey) {
+        if (entry.isIntersecting) {
+          visibleFields.add(fieldKey);
+        } else {
+          visibleFields.delete(fieldKey);
+        }
+        fieldRects[fieldKey] = ui.getAbsoluteElementRect(rect, scale, offset);
+        continue;
+      }
+      const uuid = blockElementToUuid.get(entry.target);
+      if (!uuid) {
+        continue;
+      }
+      if (!registeredBlocks[uuid]) {
+        continue;
+      }
+      const newRect = ui.getAbsoluteElementRect(rect, scale, offset);
+      const currentRect = blockRects[uuid];
+      if (currentRect) {
+        if (currentRect.time > entry.time) {
+          blockRects[uuid].x = newRect.x;
+          blockRects[uuid].y = newRect.y;
+        } else {
+          blockRects[uuid] = rectWithTime(newRect, entry.time);
         }
+      } else {
+        blockRects[uuid] = rectWithTime(newRect, entry.time);
+      }
+      if (entry.isIntersecting) {
+        visibleBlocks.add(uuid);
+      } else {
+        visibleBlocks.delete(uuid);
       }
     }
   }
@@ -146,6 +148,7 @@ export default function(ui, debug, definitions, state, element) {
       ...data
     };
     intersectionObserver.observe(element2);
+    fieldElementToFieldKey.set(element2, key);
     doInitTimeout();
   };
   const updateFieldElement = (entity, fieldName, element2, data) => {
@@ -160,6 +163,7 @@ export default function(ui, debug, definitions, state, element) {
       element: element2,
       ...data
     };
+    fieldElementToFieldKey.set(element2, key);
     intersectionObserver.observe(element2);
   };
   const unregisterField = (entity, fieldName) => {
@@ -167,6 +171,7 @@ export default function(ui, debug, definitions, state, element) {
     const el = registeredFields[key]?.element;
     if (el) {
       intersectionObserver.unobserve(el);
+      fieldElementToFieldKey.delete(el);
     }
     visibleFields.delete(key);
     registeredFields[key] = void 0;
@@ -407,6 +412,7 @@ export default function(ui, debug, definitions, state, element) {
           fieldListType,
           parentBundle
         );
+        blockElementToUuid.set(observableElement, uuid);
         registeredBlocks[uuid] = el;
         observedElements[uuid] = observableElement;
         intersectionObserver.observe(observableElement);
@@ -426,6 +432,7 @@ export default function(ui, debug, definitions, state, element) {
       intersectionObserver.unobserve(observedElement);
       resizeObserver.unobserve(observedElement);
       delete observedElements[uuid];
+      blockElementToUuid.delete(observedElement);
     }
     if (el) {
       dragElementUuidMap.delete(el);
@@ -507,9 +514,7 @@ export default function(ui, debug, definitions, state, element) {
     };
   }
   return {
-    findClosestBlock,
     getDropElementMarkup,
-    findClosestEntityContext,
     getVisibleBlocks,
     getVisibleFields,
     registerField,

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

@@ -1,4 +1,4 @@
-import type { DraggableItem, Rectangle, DraggableExistingBlock, EntityContext, Coord, LibraryItemProps, Size } from '#blokkli/types';
+import type { DraggableItem, Rectangle, Coord, LibraryItemProps, Size } from '#blokkli/types';
 import type { RGB } from '#blokkli/types/theme';
 /**
  * Type check for falsy values.
@@ -76,12 +76,6 @@ export declare function findIdealRectPosition(blockingRects: Rectangle[], rectTo
     x: number;
     y: number;
 };
-export declare const findClosestBlock: (el: Element | EventTarget) => DraggableExistingBlock | undefined;
-/**
- * Find the closest entity context from a BlokkliProvider.
- */
-export declare const findClosestEntityContext: (el: HTMLElement) => EntityContext | undefined;
-export declare const findParentContext: (el: HTMLElement) => EntityContext | DraggableExistingBlock | undefined;
 export declare const originatesFromTextInput: (e: Event) => boolean;
 export declare function getFieldKey(uuid: string, fieldName: string): string;
 export declare function getInteractionCoordinates(e: MouseEvent | TouchEvent): Coord;

package/dist/runtime/helpers/index.js

@@ -361,43 +361,6 @@ export function findIdealRectPosition(blockingRects, rectToPlace, viewport, maxO
     )
   };
 }
-export const findClosestBlock = (el) => {
-  if (!(el instanceof Element)) {
-    return;
-  }
-  const closest = el.closest('[data-element-type="existing"]');
-  if (!closest) {
-    return;
-  }
-  const item = buildDraggableItem(closest);
-  if (item?.itemType !== "existing") {
-    return;
-  }
-  return item;
-};
-export const findClosestEntityContext = (el) => {
-  const provider = el.closest('[data-blokkli-provider-active="true"]');
-  if (!(provider instanceof HTMLElement)) {
-    return;
-  }
-  const uuid = provider.dataset.providerUuid;
-  const type = provider.dataset.providerEntityType;
-  const bundle = provider.dataset.providerEntityBundle;
-  if (uuid && type && bundle) {
-    return {
-      uuid,
-      type,
-      bundle
-    };
-  }
-};
-export const findParentContext = (el) => {
-  const block = findClosestBlock(el);
-  if (block) {
-    return block;
-  }
-  return findClosestEntityContext(el);
-};
 export const originatesFromTextInput = (e) => e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement;
 export function getFieldKey(uuid, fieldName) {
   return uuid + ":" + fieldName;

package/dist/runtime/helpers/providers/directive.d.ts

@@ -1,6 +1,7 @@
 import type { BlokkliDirectiveType, EntityContext, Rectangle } from '#blokkli/types';
 import type { UiProvider } from './../uiProvider.js';
 import { type ComputedRef } from '#imports';
+import type { DebugProvider } from '../debugProvider.js';
 type EditableFieldData = EntityContext & {
     key: string;
     fieldName: string;
@@ -20,5 +21,5 @@ export type DirectiveProvider = {
     findEditableElement: (fieldName: string, host: EntityContext) => HTMLElement | undefined;
     isReady: ComputedRef<boolean>;
 };
-export default function (ui: UiProvider): DirectiveProvider;
+export default function (debug: DebugProvider, ui: UiProvider): DirectiveProvider;
 export {};

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

@@ -3,7 +3,8 @@ import useDelayedIntersectionObserver from "./../composables/useDelayedIntersect
 import { computed, onBeforeUnmount, ref } from "#imports";
 import onBlokkliEvent from "./../composables/onBlokkliEvent.js";
 import { itemEntityType } from "#blokkli-build/config";
-export default function(ui) {
+export default function(debug, ui) {
+  const logger = debug.createLogger("DirectiveProvider");
   let initTimeout = null;
   const isInitalizing = ref(true);
   let stateReloadTimeout = null;
@@ -86,10 +87,12 @@ export default function(ui) {
       editablesByUuid[entity.uuid] ||= {};
       editablesByUuid[entity.uuid][fieldName] = data;
     }
+    logger.log("Registered directive element", data);
     doInitTimeout();
   }
   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);

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

@@ -345,6 +345,7 @@ export type InjectedBlokkliItem = {
 export type FieldListItem = {
     uuid: string;
     bundle: string;
+    isVisible: boolean;
     options?: Record<string, any>;
     editContext?: BlockEditContext;
     props?: Record<string, any>;
@@ -1415,5 +1416,6 @@ export type RegisteredField = {
     dropAlignment: FieldDropAlignment | null;
 };
 export type RegisterFieldData = Pick<RegisteredField, 'fieldListType' | 'allowedFragments' | 'isNested' | 'nestingLevel' | 'dropAlignment'>;
+export type VueClassProp = string | Record<string, boolean> | VueClassProp[];
 declare const _default: {};
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "2.0.0-alpha.19",
+  "version": "2.0.0-alpha.20",
   "description": "Interactive page building experience for Nuxt",
   "repository": "blokkli/editor",
   "type": "module",