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

package/dist/runtime/helpers/composables/useDelayedIntersectionObserver.d.ts

@@ -1,4 +1,4 @@
-export default function (callback: (entries: IntersectionObserverEntry[]) => void): {
+export default function (callback: (entries: IntersectionObserverEntry[]) => void, options?: IntersectionObserverInit): {
     observe: (el: HTMLElement) => void;
     unobserve: (el: HTMLElement) => void;
     init: () => void;

package/dist/runtime/helpers/composables/useDelayedIntersectionObserver.js

@@ -1,9 +1,10 @@
-export default function(callback) {
+export default function(callback, options = {}) {
   let observer = null;
   let collected = [];
   function init() {
     observer = new IntersectionObserver(callback, {
-      threshold: 0
+      threshold: 0,
+      ...options
     });
     for (const el of collected) {
       observer.observe(el);

package/dist/runtime/helpers/domProvider.js

@@ -139,7 +139,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();

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;

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

@@ -14,12 +14,18 @@ export class RectangleBufferCollector {
   index = 0;
   bufferInfo = null;
   placedRects = [];
-  constructor(gl, _options) {
+  deferredMode = false;
+  pendingRects = [];
+  constructor(gl, options) {
     this.gl = gl;
+    this.deferredMode = options?.deferredMode || false;
   }
   reset() {
     this.added = /* @__PURE__ */ new Set();
-    this.rects = {};
+    if (!this.deferredMode) {
+      this.rects = {};
+    }
+    this.placedRects = [];
     this.positions = [];
     this.indices = [];
     this.rectId = [];
@@ -29,8 +35,10 @@ export class RectangleBufferCollector {
     this.radius = [];
     this.index = 0;
     this.bufferInfo = null;
+    this.pendingRects = [];
   }
-  getIdealPosition(x, y, width, height) {
+  getIdealPosition(x, y, width, height, isEmptyField = false) {
+    const MIN_HEIGHT = 5;
     const rect = {
       x,
       y,
@@ -40,19 +48,63 @@ export class RectangleBufferCollector {
     };
     const intersections = [];
     for (let i = 0; i < this.placedRects.length; i++) {
-      if (intersects(rect, this.placedRects[i])) {
-        intersections.push(this.placedRects[i]);
+      const placed = this.placedRects[i];
+      const testRect = { ...rect, height: Math.max(height, MIN_HEIGHT) };
+      const testPlaced = {
+        ...placed,
+        height: Math.max(placed.height, MIN_HEIGHT)
+      };
+      if (intersects(testRect, testPlaced)) {
+        intersections.push(placed);
       }
     }
     if (intersections.length === 0) {
       this.placedRects.push(rect);
       return rect;
     }
-    intersections.sort((a, b) => b.originalY - a.originalY);
+    intersections.sort((a, b) => a.originalY - b.originalY);
+    if (isEmptyField) {
+      for (let i = 0; i < intersections.length; i++) {
+        const existingRect = intersections[i];
+        const rectsAbove = this.placedRects.filter(
+          (r) => r.y + r.height <= existingRect.y && r.x < x + width && r.x + r.width > x
+        );
+        let prevBottom = 0;
+        if (rectsAbove.length > 0) {
+          prevBottom = Math.max(...rectsAbove.map((r) => r.y + r.height));
+        }
+        const nextTop = existingRect.y;
+        const availableSpace = nextTop - prevBottom;
+        if (availableSpace >= height) {
+          const centeredY = prevBottom + (availableSpace - height) / 2;
+          const centeredRect = { ...rect, y: centeredY };
+          let hasIntersection = false;
+          for (const placed of this.placedRects) {
+            const testCentered = {
+              ...centeredRect,
+              height: Math.max(height, MIN_HEIGHT)
+            };
+            const testPlaced = {
+              ...placed,
+              height: Math.max(placed.height, MIN_HEIGHT)
+            };
+            if (intersects(testCentered, testPlaced)) {
+              hasIntersection = true;
+              break;
+            }
+          }
+          if (!hasIntersection) {
+            rect.y = centeredY;
+            this.placedRects.push(rect);
+            return rect;
+          }
+        }
+      }
+    }
     for (let i = 0; i < intersections.length; i++) {
       const existingRect = intersections[i];
       let iterations = 0;
-      const direction = y > existingRect.originalY ? -1 : 1;
+      const direction = y < existingRect.originalY ? -1 : 1;
       while (intersects(rect, existingRect) && iterations < 10) {
         rect.y = y + direction * (10 * (iterations + 1));
         iterations++;
@@ -65,6 +117,10 @@ export class RectangleBufferCollector {
     return rect;
   }
   addRectangle(rect, type, checkOverlap = false) {
+    if (this.deferredMode) {
+      this.pendingRects.push({ rect, type, checkOverlap });
+      return;
+    }
     const { x, y, width, height } = checkOverlap ? this.getIdealPosition(rect.x, rect.y, rect.width, rect.height) : rect;
     this.positions.push(
       x,
@@ -119,6 +175,105 @@ export class RectangleBufferCollector {
     this.added.add(rect.id);
     this.index++;
   }
+  processPendingRects() {
+    if (!this.deferredMode) {
+      return;
+    }
+    if (!this.pendingRects.length) {
+      return;
+    }
+    const sortedPending = [...this.pendingRects].sort(
+      (a, b) => a.rect.y - b.rect.y
+    );
+    const passes = [
+      sortedPending.filter((p) => !p.rect.id.includes(":empty:")),
+      // Non-empty rects
+      sortedPending.filter((p) => p.rect.id.includes(":empty:"))
+      // Empty rects
+    ];
+    for (const pass of passes) {
+      for (const { rect, type, checkOverlap } of pass) {
+        if (this.added.has(rect.id)) {
+          continue;
+        }
+        let finalPosition;
+        const existing = this.rects[rect.id];
+        if (existing) {
+          finalPosition = {
+            x: existing.x,
+            y: existing.y,
+            width: existing.width,
+            height: existing.height
+          };
+        } else if (checkOverlap) {
+          const isEmptyField = rect.id.includes(":empty:");
+          finalPosition = this.getIdealPosition(
+            rect.x,
+            rect.y,
+            rect.width,
+            rect.height,
+            isEmptyField
+          );
+        } else {
+          finalPosition = {
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height
+          };
+        }
+        const { x, y, width, height } = finalPosition;
+        this.positions.push(
+          x,
+          y,
+          // Lower left corner
+          0,
+          x + width,
+          y,
+          // Lower right corner
+          1,
+          x + width,
+          y + height,
+          // Upper right corner
+          2,
+          x,
+          y + height,
+          // Upper left corner
+          3
+        );
+        const baseIndex = 4 * this.index;
+        this.indices.push(
+          baseIndex,
+          baseIndex + 1,
+          baseIndex + 2,
+          baseIndex,
+          baseIndex + 2,
+          baseIndex + 3
+        );
+        const r = rect.radius || [4, 4, 4, 4];
+        this.radius.push(...r, ...r, ...r, ...r);
+        this.rectId.push(this.index, this.index, this.index, this.index);
+        this.types.push(type, type, type, type);
+        this.quad.push(x, y, width, height);
+        this.quad.push(x, y, width, height);
+        this.quad.push(x, y, width, height);
+        this.quad.push(x, y, width, height);
+        const state = rect.state || 0;
+        this.state.push(state, state, state, state);
+        this.rects[rect.id] = {
+          ...rect,
+          index: this.index,
+          x,
+          y,
+          width,
+          height
+        };
+        this.added.add(rect.id);
+        this.index++;
+      }
+      this.pendingRects = [];
+    }
+  }
   getIndex(id) {
     return this.rects[id]?.index;
   }

package/package.json

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