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

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/dist/runtime/plugins/blokkliEditable.js

@@ -1,17 +1,88 @@
+import {
+  INJECT_APP,
+  INJECT_ENTITY_CONTEXT,
+  INJECT_IS_IN_REUSABLE
+} from "#blokkli/helpers/symbols";
 import { defineNuxtPlugin } from "#imports";
+function getInjection(vnode, symbol) {
+  return vnode.ctx?.provides?.[symbol];
+}
+function getBlokkliApp(vnode) {
+  return getInjection(vnode, INJECT_APP);
+}
+function getEntityContext(vnode) {
+  return getInjection(vnode, INJECT_ENTITY_CONTEXT);
+}
+function isInReusable(vnode) {
+  return !!getInjection(vnode, INJECT_IS_IN_REUSABLE);
+}
+function getFieldName(binding) {
+  const fieldName = binding.value?.name || binding.arg;
+  if (fieldName && typeof fieldName === "string") {
+    return fieldName;
+  }
+}
+function isEditing() {
+  if (import.meta.client) {
+    return window.location.search.includes("blokkliEditing");
+  }
+  return false;
+}
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.directive("blokkli-editable", {
-    created(el, binding) {
+    created(el, binding, vnode) {
       if (import.meta.client) {
-        if (!window.location.search.includes("blokkliEditing")) {
+        if (!isEditing()) {
           return;
         }
-        const fieldName = binding.value?.name || binding.arg;
+        if (isInReusable(vnode)) {
+          return;
+        }
+        const fieldName = getFieldName(binding);
         if (!fieldName) {
           return;
         }
         el.dataset.blokkliEditableField = fieldName;
       }
+    },
+    mounted(el, binding, vnode) {
+      if (!isEditing()) {
+        return;
+      }
+      if (isInReusable(vnode)) {
+        return;
+      }
+      const app = getBlokkliApp(vnode);
+      if (!app) {
+        return;
+      }
+      const entity = getEntityContext(vnode);
+      if (!entity) {
+        return;
+      }
+      const fieldName = getFieldName(binding);
+      if (!fieldName) {
+        return;
+      }
+      app.editable.registerEditableField(el, fieldName, entity);
+    },
+    beforeUnmount(el, binding, vnode) {
+      if (!isEditing()) {
+        return;
+      }
+      const app = getBlokkliApp(vnode);
+      if (!app) {
+        return;
+      }
+      const entity = getEntityContext(vnode);
+      if (!entity) {
+        return;
+      }
+      const fieldName = getFieldName(binding);
+      if (!fieldName) {
+        return;
+      }
+      app.editable.unregisterEditableField(el, fieldName, entity);
     }
   });
   nuxtApp.vueApp.directive("blokkli-droppable", {

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

@@ -8,6 +8,7 @@ import type { KeyboardProvider } from '../helpers/keyboardProvider.js';
 import type { UiProvider } from '../helpers/uiProvider.js';
 import type { AnimationProvider } from '../helpers/animationProvider.js';
 import type { StateProvider } from '../helpers/stateProvider.js';
+import type { EditableProvider } from '../helpers/editableProvider.js';
 import type { TextProvider } from '../helpers/textProvider.js';
 import type { PluginProvider } from '../helpers/pluginProvider.js';
 import type { eventBus } from './../helpers/eventBus.js';
@@ -381,6 +382,7 @@ export type BlokkliProviderEntityContext = {
     bundle: string;
     language?: string;
 };
+export type EditPermission = 'view' | 'edit' | 'review';
 export type EditEntity = {
     label?: string;
     status?: boolean;
@@ -569,7 +571,7 @@ export interface BlockBundleDefinition {
     allowReusable?: boolean;
     isTranslatable?: boolean;
 }
-export type EditMode = 'readonly' | 'editing' | 'translating';
+export type EditMode = 'readonly' | 'editing' | 'translating' | 'review';
 export type MutatedOptions = {
     [uuid: string]: {
         [key: string]: string;
@@ -848,11 +850,15 @@ export type Coord = {
 };
 export type Rectangle = Size & Coord;
 export type CanvasDrawEvent = {
+    gl: WebGLRenderingContext;
     mouseX: number;
     mouseY: number;
+    mouseArtboard: Coord;
     artboardOffset: Coord;
     artboardScale: number;
+    artboardSize: Size;
     time: number;
+    selectedUuids: string[];
 };
 export type MakeReusableEvent = {
     label: string;
@@ -1043,10 +1049,15 @@ export type EventbusEvents = {
     'item:doubleClick': DraggableExistingBlock;
     scrollIntoView: ScrollIntoViewEvent;
     'animationFrame:before': AnimationFrameBeforeEvent;
+    'animationFrame:after': undefined;
     'canvas:draw': CanvasDrawEvent;
     'state:reloaded': undefined;
     addContentSearchItem: AddContentSearchItemEvent;
     'option:update': UpdateBlockOptionEvent;
+    /**
+     * Emitted after finishing changing options.
+     */
+    'option:finish-change': undefined;
     'plugin:mount': PluginMountEvent;
     'plugin:unmount': PluginUnmountEvent;
     'editable:focus': EditableFieldFocusEvent;
@@ -1129,6 +1140,7 @@ export interface BlokkliApp {
     debug: DebugProvider;
     indicators: IndicatorsProvider;
     plugins: PluginProvider;
+    editable: EditableProvider;
 }
 export type PasteExistingBlocksEvent = {
     uuids: string[];

package/package.json

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