@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/runtime/helpers/typesProvider.js

@@ -1,5 +1,4 @@
-import { eventBus } from "#blokkli/helpers/eventBus";
-import { useRuntimeConfig, computed, watch } from "#imports";
+import { useRuntimeConfig, computed } from "#imports";
 import { onlyUnique } from "./index.js";
 class ConfigMap {
   configs = [];
@@ -52,38 +51,23 @@ export default async function(adapter, selection, context) {
   const droppableFieldConfigData = adapter.getDroppableFieldConfig ? await adapter.getDroppableFieldConfig() : [];
   const droppableFieldConfig = new ConfigMap(droppableFieldConfigData);
   const allowedTypesInList = computed(() => {
-    if (!selection.blocks.value.length) {
+    if (!selection.items.value.length) {
       return [];
     }
     let hostType = "";
     let hostBundle = "";
     let fieldName = "";
-    for (let i = 0; i < selection.blocks.value.length; i++) {
-      const block = selection.blocks.value[i];
-      if (i !== 0 && (hostType !== block.hostType || hostBundle !== block.hostBundle || fieldName !== block.hostFieldName)) {
+    for (let i = 0; i < selection.items.value.length; i++) {
+      const block = selection.items.value[i];
+      if (i !== 0 && (hostType !== block.host.type || hostBundle !== block.host.bundle || fieldName !== block.host.fieldName)) {
         return [];
       }
-      hostType = block.hostType;
-      hostBundle = block.hostBundle;
-      fieldName = block.hostFieldName;
+      hostType = block.host.type;
+      hostBundle = block.host.bundle;
+      fieldName = block.host.fieldName;
     }
     return fieldConfig.forName(hostType, hostBundle, fieldName)?.allowedBundles || [];
   });
-  watch(selection.blocks, () => {
-    if (selection.blocks.value.length !== 1) {
-      return;
-    }
-    const item = selection.blocks.value[0];
-    const hasNested = itemBundlesWithNested.includes(item.itemBundle);
-    if (hasNested) {
-      const nestedFields = fieldConfig.forEntityTypeAndBundle(itemEntityType, item.itemBundle).map((v) => v.name) || [];
-      if (nestedFields.length === 1) {
-        eventBus.emit("setActiveFieldKey", `${item.uuid}:${nestedFields[0]}`);
-        return;
-      }
-    }
-    eventBus.emit("setActiveFieldKey", `${item.hostUuid}:${item.hostFieldName}`);
-  });
   const itemBundlesWithNested = fieldConfig.forEntityType(itemEntityType).map((v) => v.entityBundle) || [];
   const typeMap = bundleDefinitions.reduce((acc, type) => {
     acc[type.id] = type;
@@ -96,8 +80,8 @@ export default async function(adapter, selection, context) {
     return fieldConfig.forName(entityType, entityBundle, fieldName);
   }
   function getDroppableFieldConfig(fieldName, host) {
-    const entityType = "entityType" in host ? host.entityType : host.type;
-    const entityBundle = "itemBundle" in host ? host.itemBundle : host.bundle;
+    const entityType = "itemType" in host ? host.block.host.type : host.type;
+    const entityBundle = "itemType" in host ? host.block.host.bundle : host.bundle;
     const config = droppableFieldConfig.forName(
       entityType,
       entityBundle,

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

@@ -3,10 +3,13 @@ import type { StorageProvider } from './storageProvider.js';
 import type { AddListOrientation, Coord, Rectangle, Size } from '#blokkli/types';
 import type { Viewport } from '#blokkli/constants';
 import type { StateProvider } from './stateProvider.js';
+import type { AdapterContext } from '#blokkli/adapter';
+import type { ThemeColorName } from '#blokkli/types/theme';
+import type { ElementProvider } from './providers/element.js';
 export type UiProvider = {
     rootElement: () => HTMLElement;
     artboardElement: () => HTMLElement;
-    providerElement: () => HTMLElement;
+    providerElement: HTMLElement;
     menu: {
         isOpen: Readonly<Ref<boolean>>;
         close: () => void;
@@ -14,9 +17,16 @@ export type UiProvider = {
     };
     isMobile: ComputedRef<boolean>;
     isDesktop: ComputedRef<boolean>;
-    isArtboard: () => boolean;
     isAnimating: Ref<boolean>;
+    isAnalyzing: Ref<boolean>;
     isProxyMode: Ref<boolean>;
+    hasDialogOpen: Ref<boolean>;
+    hasTooltipOpen: ComputedRef<boolean>;
+    openTooltip: Ref<string>;
+    selectionColor: ComputedRef<ThemeColorName | null>;
+    setSelectionColor: (id: string, color: ThemeColorName) => void;
+    removeSelectionColor: (id: string) => void;
+    hasTransformOverlayOpen: Ref<boolean>;
     isTransforming: ComputedRef<boolean>;
     setTransform: (label?: string | null | undefined) => void;
     transformLabel: ComputedRef<string>;
@@ -35,7 +45,12 @@ export type UiProvider = {
     artboardScale: Ref<number>;
     artboardOffset: Ref<Coord>;
     selectionTopLeft: Ref<Coord>;
+    interfaceLanguage: ComputedRef<string>;
+    locale: ComputedRef<string>;
+    formatDate: (date: string | Date, options?: Intl.DateTimeFormatOptions) => string;
     getAbsoluteElementRect: (v: HTMLElement | Rectangle, scale?: number, offset?: Coord) => Rectangle;
     getViewportRelativeRect: (rect: Rectangle, scale?: number, offset?: Coord) => Rectangle;
+    setBannerHeight: (id: string, height: number) => void;
+    removeBanner: (id: string) => void;
 };
-export default function (storage: StorageProvider, state: StateProvider): UiProvider;
+export default function (providerElement: HTMLElement, storage: StorageProvider, state: StateProvider, context: ComputedRef<AdapterContext>, element: ElementProvider): UiProvider;

package/dist/runtime/helpers/uiProvider.js

@@ -2,29 +2,53 @@ import {
   onMounted,
   onBeforeUnmount,
   ref,
-  computed,
-  watch
+  computed
 } from "vue";
 import { eventBus } from "./eventBus.js";
 import { falsy } from "./index.js";
-const ARTBOARD_CLASS = "bk-is-artboard";
+import { addElementClasses } from "./addElementClasses.js";
+import { defaultLanguage, forceDefaultLanguage } from "#blokkli-build/config";
 const CLASS_PROXY_MODE = "bk-is-proxy-mode";
-export default function(storage, state) {
+const localeMap = {
+  de: "de-CH",
+  fr: "fr-CH",
+  it: "it-CH",
+  en: "en-GB"
+};
+export default function(providerElement, storage, state, context, element) {
   let cachedRootElement = null;
   let cachedArtboardElement = null;
-  let cachedProviderElement = null;
+  const interfaceLanguage = computed(() => {
+    return forceDefaultLanguage ? defaultLanguage : context.value.language;
+  });
+  const locale = computed(() => {
+    const lang = interfaceLanguage.value;
+    return localeMap[lang] || lang;
+  });
   const isProxyMode = ref(false);
   const menuIsOpen = ref(false);
+  const hasDialogOpen = ref(false);
+  const openTooltip = ref("");
+  const hasTransformOverlayOpen = ref(false);
   const isAnimating = ref(false);
+  const isAnalyzing = ref(false);
   const transformLabel = ref("");
   const openContextMenu = ref("");
+  const banners = ref({});
+  function setBannerHeight(id, height) {
+    banners.value[id] = height;
+  }
+  function removeBanner(id) {
+    banners.value[id] = 0;
+  }
   const selectionTopLeft = ref({ x: 0, y: 0 });
-  const useAnimationsSetting = storage.use("useAnimations", true);
-  const useAnimations = computed(() => useAnimationsSetting.value);
   const baseSettings = storage.use("feature:settings:settings", {});
   const lowPerformanceMode = computed(
     () => baseSettings.value.lowPerformanceMode
   );
+  const useAnimations = computed(
+    () => baseSettings.value.useAnimations !== false
+  );
   const viewportBlockingRectsMap = ref(
     {}
   );
@@ -61,7 +85,11 @@ export default function(storage, state) {
     if (cachedArtboardElement) {
       return cachedArtboardElement;
     }
-    const el = document.querySelector(".bk-main-canvas");
+    const el = element.query(
+      document.documentElement,
+      ".bk-main-canvas",
+      "Get main canvas."
+    );
     if (!el || !(el instanceof HTMLElement)) {
       throw new Error("Failed to locate artboard element.");
     }
@@ -72,24 +100,17 @@ export default function(storage, state) {
     if (cachedRootElement) {
       return cachedRootElement;
     }
-    const el = document.querySelector("#nuxt-root");
+    const el = element.query(
+      document.documentElement,
+      "#nuxt-root",
+      "Get Nuxt root element."
+    );
     if (!el || !(el instanceof HTMLElement)) {
       throw new Error("Failed to locate root Nuxt element.");
     }
     cachedRootElement = el;
     return el;
   };
-  const providerElement = () => {
-    if (cachedProviderElement) {
-      return cachedProviderElement;
-    }
-    const el = document.querySelector('[data-blokkli-provider-active="true"]');
-    if (!el || !(el instanceof HTMLElement)) {
-      throw new Error("Failed to locate provider element.");
-    }
-    cachedProviderElement = el;
-    return el;
-  };
   const appViewport = computed(() => {
     if (viewportWidth.value < 1024) {
       return "mobile";
@@ -109,16 +130,6 @@ export default function(storage, state) {
       eventBus.emit("ui:resized");
     }, 400);
   };
-  const isArtboard = () => {
-    return document.documentElement.classList.contains(ARTBOARD_CLASS);
-  };
-  watch(isAnimating, (is) => {
-    if (is) {
-      document.documentElement.classList.add("bk-is-animating");
-    } else {
-      document.documentElement.classList.remove("bk-is-animating");
-    }
-  });
   const toolbarHeight = computed(() => {
     if (isMobile.value) {
       return 80;
@@ -167,6 +178,11 @@ export default function(storage, state) {
         height -= 70;
       }
     }
+    const bannerHeights = Object.values(banners.value).filter(Boolean);
+    bannerHeights.forEach((bannerHeight) => {
+      height -= bannerHeight;
+    });
+    height -= bannerHeights.length * 10;
     return height;
   });
   const blockingPaddingX = computed(() => 15);
@@ -200,35 +216,6 @@ export default function(storage, state) {
       height: visibleViewportHeight.value - 20
     };
   });
-  function setProxyModeClass() {
-    document.documentElement.classList.remove(CLASS_PROXY_MODE);
-    if (isProxyMode.value) {
-      document.documentElement.classList.add(CLASS_PROXY_MODE);
-    }
-  }
-  watch(isProxyMode, setProxyModeClass);
-  onMounted(() => {
-    document.documentElement.classList.add("bk-html-root");
-    document.body.classList.add("bk-body");
-    document.documentElement.classList.add(ARTBOARD_CLASS);
-    setProxyModeClass();
-    viewportWidth.value = window.innerWidth;
-    viewportHeight.value = window.innerHeight;
-    window.addEventListener("resize", onResize);
-    const artboard = artboardElement();
-    resizeObserver.observe(artboard);
-  });
-  onBeforeUnmount(() => {
-    window.removeEventListener("resize", onResize);
-    document.documentElement.classList.remove("bk-html-root");
-    document.body.classList.remove("bk-body");
-    document.documentElement.classList.remove(ARTBOARD_CLASS);
-    document.documentElement.classList.remove(CLASS_PROXY_MODE);
-    clearTimeout(resizeTimeout);
-    const artboard = artboardElement();
-    resizeObserver.unobserve(artboard);
-    resizeObserver.disconnect();
-  });
   const viewport = computed(() => {
     return {
       width: viewportWidth.value,
@@ -260,6 +247,60 @@ export default function(storage, state) {
   function setTransform(label) {
     transformLabel.value = label || "";
   }
+  function formatDate(date, options) {
+    const dateObj = typeof date === "string" ? new Date(date) : date;
+    const defaultOptions = {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit"
+    };
+    return dateObj.toLocaleString(locale.value, options || defaultOptions);
+  }
+  addElementClasses(document.documentElement, "bk-is-animating", isAnimating);
+  addElementClasses(
+    document.documentElement,
+    "bk-has-sidebar-left",
+    activeSidebarLeft
+  );
+  addElementClasses(
+    document.documentElement,
+    "bk-has-sidebar-right",
+    activeSidebarRight
+  );
+  addElementClasses(document.documentElement, ["bk-html-root"]);
+  addElementClasses(document.body, "bk-body");
+  addElementClasses(document.documentElement, CLASS_PROXY_MODE, isProxyMode);
+  addElementClasses(document.documentElement, "bk-is-analyzing", isAnalyzing);
+  onMounted(() => {
+    viewportWidth.value = window.innerWidth;
+    viewportHeight.value = window.innerHeight;
+    window.addEventListener("resize", onResize);
+    const artboard = artboardElement();
+    resizeObserver.observe(artboard);
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("resize", onResize);
+    clearTimeout(resizeTimeout);
+    const artboard = artboardElement();
+    resizeObserver.unobserve(artboard);
+    resizeObserver.disconnect();
+  });
+  const hasTooltipOpen = computed(() => !!openTooltip.value);
+  const selectionColors = ref([]);
+  function setSelectionColor(id, color) {
+    selectionColors.value = [
+      ...selectionColors.value.filter((v) => v.id !== id),
+      { id, color }
+    ];
+  }
+  function removeSelectionColor(id) {
+    selectionColors.value = selectionColors.value.filter((v) => v.id !== id);
+  }
+  const selectionColor = computed(() => {
+    return selectionColors.value[selectionColors.value.length - 1]?.color ?? null;
+  });
   return {
     menu: {
       isOpen: menuIsOpen,
@@ -271,8 +312,8 @@ export default function(storage, state) {
     providerElement,
     isMobile,
     isDesktop,
-    isArtboard,
     isAnimating,
+    isAnalyzing,
     isTransforming,
     setTransform,
     transformLabel: computed(() => transformLabel.value),
@@ -293,6 +334,18 @@ export default function(storage, state) {
     selectionTopLeft,
     lowPerformanceMode,
     getAbsoluteElementRect,
-    getViewportRelativeRect
+    getViewportRelativeRect,
+    interfaceLanguage,
+    locale,
+    formatDate,
+    hasDialogOpen,
+    hasTransformOverlayOpen,
+    hasTooltipOpen,
+    openTooltip,
+    selectionColor,
+    setSelectionColor,
+    removeSelectionColor,
+    setBannerHeight,
+    removeBanner
   };
 }

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

@@ -0,0 +1,18 @@
+import type { RGB } from '#blokkli/types/theme';
+interface TransitionOptions {
+    /**
+     * Duration in milliseconds.
+     */
+    duration?: number;
+    /**
+     * The easing method. Defaults to "ease out quad".
+     */
+    easing?: (t: number) => number;
+}
+/**
+ * Creates a computed property from the given callback and transitions between values.
+ *
+ * Returns a method that, when called, will return the current transitioned value.
+ */
+export declare function useTransitionedValue<T extends RGB | number>(valueCallback: () => T, options?: TransitionOptions): () => T;
+export {};

package/dist/runtime/helpers/useTransitionedValue.js

@@ -0,0 +1,57 @@
+import { computed, watch } from "vue";
+import { easeOutQuad } from "./easing.js";
+function isRGB(value) {
+  return Array.isArray(value) && value.length === 3;
+}
+function lerp(start, end, t) {
+  return start + (end - start) * t;
+}
+function interpolateColor(from, to, t) {
+  return [
+    lerp(from[0], to[0], t),
+    lerp(from[1], to[1], t),
+    lerp(from[2], to[2], t)
+  ];
+}
+function interpolateValue(from, to, t) {
+  if (isRGB(from) && isRGB(to)) {
+    return interpolateColor(from, to, t);
+  } else if (typeof from === "number" && typeof to === "number") {
+    return lerp(from, to, t);
+  }
+  return to;
+}
+function cloneValue(value) {
+  if (isRGB(value)) {
+    return [...value];
+  }
+  return value;
+}
+export function useTransitionedValue(valueCallback, options = {}) {
+  const { duration = 300, easing = easeOutQuad } = options;
+  const value = computed(valueCallback);
+  const initial = value.value;
+  let current = cloneValue(initial);
+  let target = cloneValue(initial);
+  let from = cloneValue(initial);
+  let startTime = null;
+  watch(value, (newValue) => {
+    from = cloneValue(current);
+    target = cloneValue(newValue);
+    startTime = Date.now();
+  });
+  return function getCurrentValue() {
+    if (startTime !== null) {
+      const elapsed = Date.now() - startTime;
+      const rawProgress = Math.min(elapsed / duration, 1);
+      if (rawProgress >= 1) {
+        current = cloneValue(target);
+        startTime = null;
+      } else {
+        const easedProgress = easing(rawProgress);
+        current = interpolateValue(from, target, easedProgress);
+      }
+    }
+    return current;
+  };
+}

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;
   }