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

package/dist/runtime/editor/helpers/dropTargets/index.js

@@ -0,0 +1,68 @@
+export const MIN_GAP = 20;
+export function getGapSize(orientation, element) {
+  const computedStyle = window.getComputedStyle(element);
+  if (computedStyle.display.includes("grid") || computedStyle.display.includes("flex")) {
+    const gap = orientation === "vertical" ? computedStyle.rowGap || computedStyle.gridRowGap : computedStyle.columnGap || computedStyle.gridColumnGap;
+    if (gap) {
+      const gapParts = gap.split(" ");
+      const gapValue = gapParts[0];
+      if (gapValue?.endsWith("px")) {
+        return Number.parseFloat(gapValue);
+      }
+    }
+  }
+  return MIN_GAP;
+}
+export function getChildrenOrientation(element) {
+  const computedStyle = window.getComputedStyle(element);
+  if (computedStyle.display.includes("flex")) {
+    if (computedStyle.flexDirection === "row" || computedStyle.flexDirection === "row-reverse") {
+      return "horizontal";
+    } else {
+      return "vertical";
+    }
+  }
+  if (computedStyle.display.includes("grid")) {
+    if (computedStyle.gridTemplateColumns.split(" ").length > 1) {
+      return "horizontal";
+    } else {
+      return "vertical";
+    }
+  }
+  return "vertical";
+}
+export function determineCanAddChildren(field, children, uuids, currentCount, itemsToAdd, draggingBundles, draggingFragments) {
+  if (field.cardinality !== -1) {
+    const childrenThatAreSelection = children.filter((child) => {
+      const uuid = child.dataset.bkUuid;
+      if (!uuid) {
+        return false;
+      }
+      return uuids.includes(uuid);
+    }).length;
+    const countAfter = currentCount - childrenThatAreSelection + itemsToAdd;
+    if (countAfter > field.cardinality) {
+      return false;
+    }
+  }
+  if (!draggingBundles?.length) {
+    return true;
+  }
+  if (!uuids.length) {
+    return draggingBundles.some(
+      (bundle) => field.allowedBundles.includes(bundle)
+    );
+  }
+  const bundlesAllowed = draggingBundles.every(
+    (bundle) => field.allowedBundles.includes(bundle)
+  );
+  if (!bundlesAllowed) {
+    return false;
+  }
+  if (draggingFragments?.length && field.allowedFragments.length > 0) {
+    return draggingFragments.every(
+      (fragment) => field.allowedFragments.includes(fragment)
+    );
+  }
+  return true;
+}

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

@@ -0,0 +1,43 @@
+import type { Rectangle, Coord, Size } from '#blokkli/editor/types/geometry';
+export declare function getBounds(rects: Rectangle[]): Rectangle | undefined;
+export declare function intersects(a: Rectangle, b: Rectangle): boolean;
+export declare function isInsideRect(x: number, y: number, rect: Rectangle): boolean;
+/**
+ * Calculate the intersection amount of two rectangles as a value from 0 to 1.
+ */
+export declare function calculateIntersection(rectA: Rectangle, rectB: Rectangle): number;
+/**
+ * Return the closest rectangle.
+ */
+export declare function findClosestRectangle<T extends Rectangle>(x: number, y: number, rects: T[]): T;
+/**
+ * Return the distance from the given coordinates to the center of the rectangle.
+ */
+export declare function distanceToRectangle(x: number, y: number, rect: Rectangle): number;
+/**
+ * Return the distance from the given coordinates to the center of the rectangle.
+ */
+export declare function distanceToClosestRectangleEdge(x: number, y: number, rect: Rectangle): number;
+/**
+ * Subtracts a rectangle from a viewport and returns the remaining area as rectangles.
+ * The viewport is assumed to have x=0 and y=0.
+ *
+ * @param viewport - The size of the viewport to subtract from
+ * @param rect - The rectangle to subtract
+ * @returns An array of 0 to 4 rectangles representing the area outside of rect
+ */
+export declare function subtractRectFromViewport(viewport: Size, rect: Rectangle): Rectangle[];
+export declare function getDistance(a: Coord, b: Coord): number;
+/**
+ * Position the given rectToPlace so that it doesn't overlap with any of the blockingRects.
+ */
+export declare function findIdealRectPosition(blockingRects: Rectangle[], rectToPlace: Rectangle, viewport: Rectangle, maxOverlap?: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Calculate the ideal X coordinate for placing a rectangle.
+ *
+ * Coordinates are assumed to be 0,0 for top-left. The method returns a number that can be used to set the
+ */
+export declare const calculateCenterPosition: (blockingRects: Rectangle[], viewport: Rectangle, widthToPlace: number) => number;

package/dist/runtime/editor/helpers/geometry/index.js

@@ -0,0 +1,191 @@
+import { easeOutSine } from "../easing/index.js";
+export function getBounds(rects) {
+  if (!rects.length) {
+    return;
+  }
+  const firstRect = rects[0];
+  let minX = firstRect.x;
+  let minY = firstRect.y;
+  let maxX = minX + firstRect.width;
+  let maxY = minY + firstRect.height;
+  for (const rect of rects.slice(1)) {
+    minX = Math.min(minX, rect.x);
+    minY = Math.min(minY, rect.y);
+    maxX = Math.max(maxX, rect.x + rect.width);
+    maxY = Math.max(maxY, rect.y + rect.height);
+  }
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+}
+export function intersects(a, b) {
+  return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
+}
+export function isInsideRect(x, y, rect) {
+  return x > rect.x && x < rect.x + rect.width && y > rect.y && y < rect.y + rect.height;
+}
+export function calculateIntersection(rectA, rectB) {
+  if (!intersects(rectA, rectB)) {
+    return 0;
+  }
+  const xOverlap = Math.max(
+    0,
+    Math.min(rectA.x + rectA.width, rectB.x + rectB.width) - Math.max(rectA.x, rectB.x)
+  );
+  const yOverlap = Math.max(
+    0,
+    Math.min(rectA.y + rectA.height, rectB.y + rectB.height) - Math.max(rectA.y, rectB.y)
+  );
+  const intersectionArea = xOverlap * yOverlap;
+  const rectAArea = rectA.width * rectA.height;
+  return intersectionArea / rectAArea;
+}
+export function findClosestRectangle(x, y, rects) {
+  let closestRect = rects[0];
+  if (!closestRect) {
+    throw new Error("Need at least one rect.");
+  }
+  let minDistance = distanceToClosestRectangleEdge(x, y, closestRect);
+  for (let i = 1; i < rects.length; i++) {
+    const rect = rects[i];
+    const distance = distanceToClosestRectangleEdge(x, y, rect);
+    if (distance < minDistance) {
+      closestRect = rect;
+      minDistance = distance;
+    }
+  }
+  return closestRect;
+}
+export function distanceToRectangle(x, y, rect) {
+  const minX = rect.x;
+  const minY = rect.y;
+  const maxX = rect.x + rect.width;
+  const maxY = rect.y + rect.height;
+  const dx = Math.max(minX - x, 0, x - maxX);
+  const dy = Math.max(minY - y, 0, y - maxY);
+  return Math.sqrt(dx * dx + dy * dy);
+}
+export function distanceToClosestRectangleEdge(x, y, rect) {
+  if (isInsideRect(x, y, rect)) {
+    return 0;
+  }
+  const minX = rect.x;
+  const minY = rect.y;
+  const maxX = rect.x + rect.width;
+  const maxY = rect.y + rect.height;
+  const dx = Math.max(minX - x, 0, x - maxX);
+  const dy = Math.max(minY - y, 0, y - maxY);
+  return Math.sqrt(dx * dx + dy * dy);
+}
+export function subtractRectFromViewport(viewport, rect) {
+  const viewportLeft = 0;
+  const viewportTop = 0;
+  const viewportRight = viewport.width;
+  const viewportBottom = viewport.height;
+  const intersectLeft = Math.max(viewportLeft, rect.x);
+  const intersectTop = Math.max(viewportTop, rect.y);
+  const intersectRight = Math.min(viewportRight, rect.x + rect.width);
+  const intersectBottom = Math.min(viewportBottom, rect.y + rect.height);
+  if (intersectLeft >= intersectRight || intersectTop >= intersectBottom) {
+    return [
+      {
+        x: 0,
+        y: 0,
+        width: viewport.width,
+        height: viewport.height
+      }
+    ];
+  }
+  if (intersectLeft <= viewportLeft && intersectTop <= viewportTop && intersectRight >= viewportRight && intersectBottom >= viewportBottom) {
+    return [];
+  }
+  const result = [];
+  if (intersectTop > viewportTop) {
+    result.push({
+      x: viewportLeft,
+      y: viewportTop,
+      width: viewport.width,
+      height: intersectTop - viewportTop
+    });
+  }
+  if (intersectBottom < viewportBottom) {
+    result.push({
+      x: viewportLeft,
+      y: intersectBottom,
+      width: viewport.width,
+      height: viewportBottom - intersectBottom
+    });
+  }
+  if (intersectLeft > viewportLeft) {
+    result.push({
+      x: viewportLeft,
+      y: intersectTop,
+      width: intersectLeft - viewportLeft,
+      height: intersectBottom - intersectTop
+    });
+  }
+  if (intersectRight < viewportRight) {
+    result.push({
+      x: intersectRight,
+      y: intersectTop,
+      width: viewportRight - intersectRight,
+      height: intersectBottom - intersectTop
+    });
+  }
+  return result;
+}
+export function getDistance(a, b) {
+  const dx = a.x - b.x;
+  const dy = a.y - b.y;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+export function findIdealRectPosition(blockingRects, rectToPlace, viewport, maxOverlap = 60) {
+  let targetX = rectToPlace.x;
+  for (const blockingRect of blockingRects) {
+    if (intersects(rectToPlace, blockingRect)) {
+      const a = Math.abs(rectToPlace.y + rectToPlace.height - blockingRect.y);
+      const b = Math.abs(blockingRect.y + blockingRect.height - rectToPlace.y);
+      const verticalOverlap = Math.min(a, b);
+      const smoothingFactor = easeOutSine(
+        Math.min(verticalOverlap, maxOverlap) / maxOverlap
+      );
+      if (rectToPlace.x + rectToPlace.width / 2 > blockingRect.x + blockingRect.width / 2) {
+        targetX = blockingRect.x + blockingRect.width;
+      } else {
+        targetX = blockingRect.x - rectToPlace.width;
+      }
+      targetX = rectToPlace.x + smoothingFactor * (targetX - rectToPlace.x);
+      break;
+    }
+  }
+  return {
+    x: Math.min(
+      Math.max(targetX, viewport.x),
+      viewport.x + viewport.width - rectToPlace.width
+    ),
+    y: Math.min(
+      Math.max(viewport.y, rectToPlace.y),
+      viewport.height + viewport.y - rectToPlace.height
+    )
+  };
+}
+export const calculateCenterPosition = (blockingRects, viewport, widthToPlace) => {
+  const viewportCenterX = (viewport.x + viewport.width) / 2;
+  const blockingThreshold = viewport.width / 7;
+  const x = blockingRects.reduce((acc, rect) => {
+    if (rect.x < viewportCenterX && viewportCenterX - rect.x > blockingThreshold && rect.x + rect.width > acc) {
+      return rect.x + rect.width;
+    }
+    return acc;
+  }, viewport.x);
+  const width = blockingRects.reduce((acc, rect) => {
+    if (rect.x > viewportCenterX && rect.x - viewportCenterX > blockingThreshold && rect.x < acc) {
+      return rect.x;
+    }
+    return acc;
+  }, viewport.width + viewport.x);
+  return (x + width) / 2 - widthToPlace / 2;
+};

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

@@ -0,0 +1,3 @@
+export declare function asValidNumber(v: unknown, defaultValue: number): number;
+export declare function modulo(n: number, m: number): number;
+export declare const lerp: (s: number, e: number, t: number) => number;

package/dist/runtime/editor/helpers/math/index.js

@@ -0,0 +1,10 @@
+export function asValidNumber(v, defaultValue) {
+  if (typeof v === "number" && !Number.isNaN(v)) {
+    return v;
+  }
+  return defaultValue;
+}
+export function modulo(n, m) {
+  return (n % m + m) % m;
+}
+export const lerp = (s, e, t) => s * (1 - t) + e * t;

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

@@ -0,0 +1 @@
+export declare function generateUUID(): string;

package/dist/runtime/editor/helpers/uuid/index.js

@@ -0,0 +1,18 @@
+export function generateUUID() {
+  try {
+    return crypto.randomUUID();
+  } catch {
+  }
+  let d = (/* @__PURE__ */ new Date()).getTime(), d2 = typeof performance !== "undefined" && performance.now && performance.now() * 1e3 || 0;
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    let r = Math.random() * 16;
+    if (d > 0) {
+      r = (d + r) % 16 | 0;
+      d = Math.floor(d / 16);
+    } else {
+      r = (d2 + r) % 16 | 0;
+      d2 = Math.floor(d2 / 16);
+    }
+    return (c == "x" ? r : r & 7 | 8).toString(16);
+  });
+}

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

@@ -0,0 +1,45 @@
+import { type BufferInfo } from 'twgl.js';
+import type { Rectangle } from '#blokkli/editor/types/geometry';
+type RectangleBufferRect = Rectangle & {
+    id: string;
+    index: number;
+    radius?: [number, number, number, number];
+    state?: number;
+};
+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> {
+    added: Set<string>;
+    rects: Record<string, T>;
+    positions: number[];
+    indices: number[];
+    rectId: number[];
+    types: number[];
+    quad: number[];
+    state: number[];
+    radius: number[];
+    index: number;
+    bufferInfo: BufferInfo | null;
+    placedRects: PlacedRectangle[];
+    deferredMode: boolean;
+    pendingRects: PendingRect<T>[];
+    constructor(options?: RectangleBufferCollectorOptions);
+    reset(): void;
+    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(gl: WebGLRenderingContext): BufferInfo;
+}
+export {};

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

@@ -0,0 +1,315 @@
+import { createBufferInfoFromArrays } from "twgl.js";
+import { intersects } from "./../geometry/index.js";
+export class RectangleBufferCollector {
+  added = /* @__PURE__ */ new Set();
+  rects = {};
+  positions = [];
+  indices = [];
+  rectId = [];
+  types = [];
+  quad = [];
+  state = [];
+  radius = [];
+  index = 0;
+  bufferInfo = null;
+  placedRects = [];
+  deferredMode = false;
+  pendingRects = [];
+  constructor(options) {
+    this.deferredMode = options?.deferredMode || false;
+  }
+  reset() {
+    this.added = /* @__PURE__ */ new Set();
+    if (!this.deferredMode) {
+      this.rects = {};
+    }
+    this.placedRects = [];
+    this.positions = [];
+    this.indices = [];
+    this.rectId = [];
+    this.types = [];
+    this.state = [];
+    this.quad = [];
+    this.radius = [];
+    this.index = 0;
+    this.bufferInfo = null;
+    this.pendingRects = [];
+  }
+  getIdealPosition(x, y, width, height, isEmptyField = false) {
+    const MIN_HEIGHT = 5;
+    const rect = {
+      x,
+      y,
+      width,
+      height,
+      originalY: y
+    };
+    const intersections = [];
+    for (let i = 0; i < this.placedRects.length; 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) => 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;
+      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) {
+    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,
+      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,
+      // First triangle
+      baseIndex,
+      baseIndex + 2,
+      baseIndex + 3
+      // Second triangle
+    );
+    const r = rect.radius || [4, 4, 4, 4];
+    this.radius.push(...r);
+    this.radius.push(...r);
+    this.radius.push(...r);
+    this.radius.push(...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++;
+  }
+  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;
+  }
+  updateRectangle() {
+  }
+  createBufferInfo(gl) {
+    return createBufferInfoFromArrays(gl, {
+      a_position: {
+        numComponents: 3,
+        data: this.positions,
+        type: gl.FLOAT
+      },
+      a_rect_id: {
+        numComponents: 1,
+        data: this.rectId,
+        type: gl.FLOAT
+      },
+      a_state: {
+        numComponents: 1,
+        data: this.state,
+        type: gl.FLOAT
+      },
+      a_rect_type: {
+        numComponents: 1,
+        data: this.types,
+        type: gl.FLOAT
+      },
+      a_rect_radius: {
+        numComponents: 4,
+        data: this.radius,
+        type: gl.FLOAT
+      },
+      a_quad: {
+        numComponents: 4,
+        data: this.quad,
+        type: gl.FLOAT
+      },
+      indices: this.indices
+    });
+  }
+}