@blokkli/editor 2.0.0-alpha.53 → 2.0.0-alpha.55

package/dist/runtime/editor/features/import-existing/types.d.ts

@@ -1,20 +1,9 @@
-import type { BlokkliAdapterSearchResults } from '#blokkli/editor/adapter';
-export type BlokkliAdapterGetImportItemsResult = BlokkliAdapterSearchResults<ImportItem>;
 export type ImportFromExistingEvent = {
     sourceUuid: string;
     sourceFields: string[];
 };
-export interface ImportItem {
-    uuid: string;
-    label: string;
-    description?: string;
-}
 declare module '#blokkli/editor/adapter' {
     interface BlokkliAdapter<T> {
-        /**
-         * Get all existing entities for importing.
-         */
-        getImportItems?: (e: AdapterSearchArguments) => Promise<BlokkliAdapterGetImportItemsResult>;
         /**
          * Import items from an existing entity.
          */

package/dist/runtime/editor/features/library/ReusableDialog/index.vue

@@ -28,6 +28,7 @@
         <FormText
           id="reusable_label"
           v-model="label"
+          lazy
           :label="$t('libraryDialogDescriptionLabel', 'Description')"
           type="text"
           :placeholder="
@@ -43,37 +44,28 @@
         <div class="bk-form-label">
           {{ $t("libraryPreviewLabel", "Preview") }}
         </div>
-        <div
-          class="bk-dialog-content-element"
-          :class="[backgroundClass, { 'bk-default-bg': !backgroundClass }]"
-          :style="backgroundClass ? {} : { backgroundColor }"
-        >
-          <div ref="previewEl" />
-        </div>
+        <BlockPreviewRenderer :uuids="[uuid]" />
       </FormItem>
     </div>
   </DialogModal>
 </template>
 
 <script setup>
-import { ref, useBlokkli, onMounted, useTemplateRef, watch } from "#imports";
+import { ref, useBlokkli, watch } from "#imports";
 import {
   DialogModal,
   InfoBox,
   FormText,
-  FormItem
+  FormItem,
+  BlockPreviewRenderer
 } from "#blokkli/editor/components";
-import { realBackgroundColor } from "#blokkli/editor/helpers/dom";
 defineEmits(["confirm", "cancel"]);
-const { dom, $t, blocks, ui } = useBlokkli();
-const props = defineProps({
+const { $t, ui } = useBlokkli();
+defineProps({
   uuid: { type: String, required: true },
   backgroundClass: { type: String, required: false }
 });
 const label = ref("");
-const width = ref(450);
-const previewEl = useTemplateRef("previewEl");
-const backgroundColor = ref("");
 watch(
   label,
   () => {
@@ -83,22 +75,4 @@ watch(
     once: true
   }
 );
-onMounted(() => {
-  if (previewEl.value) {
-    const item = blocks.getBlock(props.uuid);
-    if (!item) {
-      return;
-    }
-    const element = dom.getDragElement(item);
-    if (!element) {
-      return;
-    }
-    const markup = dom.getDropElementMarkup(item);
-    width.value = element.getBoundingClientRect().width + 40;
-    const clone = document.createElement("div");
-    clone.innerHTML = markup;
-    previewEl.value.appendChild(clone);
-    backgroundColor.value = realBackgroundColor(element);
-  }
-});
 </script>

package/dist/runtime/editor/features/library/index.vue

@@ -55,10 +55,14 @@
 </template>
 
 <script setup>
-import { ref, computed, useBlokkli, defineBlokkliFeature } from "#imports";
+import {
+  ref,
+  computed,
+  useBlokkli,
+  defineBlokkliFeature,
+  defineAsyncComponent
+} from "#imports";
 import { PluginItemAction } from "#blokkli/editor/plugins";
-import ReusableDialog from "./ReusableDialog/index.vue";
-import LibraryDialog from "./LibraryDialog/index.vue";
 import {
   BlokkliTransition,
   NestedEditorOverlay
@@ -70,13 +74,18 @@ import {
   useDialog
 } from "#blokkli/editor/composables";
 import { fromLibraryBlockBundle } from "#blokkli-build/config";
+const ReusableDialog = defineAsyncComponent(
+  () => import("./ReusableDialog/index.vue")
+);
+const LibraryDialog = defineAsyncComponent(
+  () => import("./LibraryDialog/index.vue")
+);
 const { adapter } = defineBlokkliFeature({
   id: "library",
   icon: "reusable",
   label: "Library",
   description: "Implements support for a block library to manage reusable blocks.",
-  requiredAdapterMethods: ["makeBlockReusable", "detachReusableBlock"],
-  dependencies: ["add-list"]
+  requiredAdapterMethods: ["makeBlockReusable", "detachReusableBlock"]
 });
 const { selection, state, types, $t, eventBus, definitions, ui, permissions } = useBlokkli();
 const showReusableDialog = useDialog("library-reusable", "center");

package/dist/runtime/editor/features/media-library/Library/index.vue

@@ -176,7 +176,9 @@ function buildItem(element2) {
     mediaId: item.mediaId,
     mediaBundle: item.mediaBundle ?? "",
     itemBundles: item.targetBundles,
-    element: () => element2
+    element: () => element2,
+    label: item.label,
+    thumbnailSrc: item.thumbnail
   };
 }
 onBlokkliEvent("item:dropped", function() {

package/dist/runtime/editor/features/media-library/index.vue

@@ -17,12 +17,16 @@
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature } from "#imports";
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  defineAsyncComponent
+} from "#imports";
 import { PluginSidebar } from "#blokkli/editor/plugins";
-import Library from "./Library/index.vue";
 import { falsy } from "#blokkli/helpers";
 import { itemEntityType } from "#blokkli-build/config";
 import { defineDropAreas, defineDropHandler } from "#blokkli/editor/composables";
+const Library = defineAsyncComponent(() => import("./Library/index.vue"));
 defineBlokkliFeature({
   id: "media-library",
   icon: "bk_mdi_image",
@@ -48,6 +52,9 @@ defineDropAreas((dragItems) => {
   }
   return directive.getDroppableElements().map((field) => {
     const config = types.getDroppableFieldConfig(field.fieldName, field);
+    if (config.cardinality !== 1) {
+      return;
+    }
     const allowedBundles = config.allowed.find(
       (v) => v.type === "media"
     )?.bundles;

package/dist/runtime/editor/features/media-library/types.d.ts

@@ -17,6 +17,8 @@ export interface DraggableMediaLibraryItem {
     itemBundles: string[];
     mediaId: string;
     mediaBundle: string;
+    label: string;
+    thumbnailSrc?: string;
 }
 export type MediaLibraryAddBlockEvent = {
     host: BlokkliItemHost;

package/dist/runtime/editor/features/multi-select/Renderer/index.vue

@@ -8,11 +8,6 @@ import { intersects } from "#blokkli/editor/helpers/geometry";
 import { toShaderColor } from "#blokkli/editor/helpers/color";
 import vs from "./vertex.glsl?raw";
 import fs from "./fragment.glsl?raw";
-import {
-  setBuffersAndAttributes,
-  drawBufferInfo,
-  setUniforms
-} from "twgl.js";
 import { RectangleBufferCollector } from "#blokkli/editor/helpers/webgl";
 import { defineRenderer, useDebugLogger } from "#blokkli/editor/composables";
 const { eventBus, dom, theme, animation, ui, blocks, permissions } = useBlokkli();
@@ -25,7 +20,7 @@ const props = defineProps({
 const startTimestamp = Date.now();
 defineEmits(["select"]);
 class MultiSelectRectangleBufferCollector extends RectangleBufferCollector {
-  getBufferInfo(gl, offset, scale) {
+  getBufferInfo(gl, twgl, offset, scale) {
     if (!offset || !scale) {
       return { info: this.bufferInfo, hasChanged: false };
     }
@@ -66,8 +61,8 @@ class MultiSelectRectangleBufferCollector extends RectangleBufferCollector {
       );
     }
     const hasChanged = lengthBefore !== this.positions.length;
-    if (hasChanged && gl) {
-      this.bufferInfo = this.createBufferInfo(gl);
+    if (hasChanged && gl && twgl) {
+      this.bufferInfo = this.createBufferInfo(gl, twgl);
     }
     return { info: this.bufferInfo, hasChanged };
   }
@@ -127,7 +122,7 @@ function getSelectRect(offset, scale) {
   };
   return { shader, check };
 }
-const { collector } = defineRenderer("multiselect-overlay", {
+const { collector } = await defineRenderer("multiselect-overlay", {
   zIndex: 450,
   only: true,
   collector: () => {
@@ -185,7 +180,7 @@ const { collector } = defineRenderer("multiselect-overlay", {
   },
   program: () => ({ shaders: [vs, fs] }),
   cursor: () => "crosshair",
-  render: (ctx, gl, program) => {
+  render: (ctx, gl, program, twgl) => {
     mouseX = ctx.mouseX;
     mouseY = ctx.mouseY;
     const { shader, check } = getSelectRect(
@@ -196,11 +191,11 @@ const { collector } = defineRenderer("multiselect-overlay", {
     const shouldSelectAll = props.isPressingControl || !nested.length;
     gl.useProgram(program.program);
     const time = (Date.now() - startTimestamp) / 1e3;
-    setUniforms(program, {
+    twgl.setUniforms(program, {
       u_color_field_active: toShaderColor(uniforms.u_color_field_active),
       u_color_field_default: toShaderColor(uniforms.u_color_field_default)
     });
-    setUniforms(program, {
+    twgl.setUniforms(program, {
       u_select_all: shouldSelectAll ? 1 : 0,
       u_select_rect: [shader.x, shader.y, shader.width, shader.height],
       u_time: time
@@ -208,6 +203,7 @@ const { collector } = defineRenderer("multiselect-overlay", {
     animation.setSharedUniforms(gl, program);
     const { info, hasChanged } = collector.getBufferInfo(
       gl,
+      twgl,
       ctx.artboardOffset,
       ctx.artboardScale
     );
@@ -215,9 +211,9 @@ const { collector } = defineRenderer("multiselect-overlay", {
       return;
     }
     if (hasChanged) {
-      setBuffersAndAttributes(gl, program, info);
+      twgl.setBuffersAndAttributes(gl, program, info);
     }
-    drawBufferInfo(gl, info, gl.TRIANGLES);
+    twgl.drawBufferInfo(gl, info, gl.TRIANGLES);
   },
   renderFallback: (ctx, ctx2d) => {
     mouseX = ctx.mouseX;
@@ -228,7 +224,12 @@ const { collector } = defineRenderer("multiselect-overlay", {
     );
     const { nested } = collector.getSelectedUuids(check);
     const shouldSelectAll = props.isPressingControl || !nested.length;
-    collector.getBufferInfo(void 0, ctx.artboardOffset, ctx.artboardScale);
+    collector.getBufferInfo(
+      void 0,
+      void 0,
+      ctx.artboardOffset,
+      ctx.artboardScale
+    );
     const rects = Object.values(collector.rects);
     const colorFieldActive = `rgba(${uniforms.u_color_field_active[0]}, ${uniforms.u_color_field_active[1]}, ${uniforms.u_color_field_active[2]}, 0.3)`;
     for (let i = 0; i < rects.length; i++) {

package/dist/runtime/editor/features/multi-select/index.vue

@@ -16,10 +16,16 @@
 </template>
 
 <script setup>
-import { ref, useBlokkli, defineBlokkliFeature, computed } from "#imports";
+import {
+  ref,
+  useBlokkli,
+  defineBlokkliFeature,
+  computed,
+  defineAsyncComponent
+} from "#imports";
 import { ErrorBoundary } from "#blokkli/editor/components";
-import Renderer from "./Renderer/index.vue";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
+const Renderer = defineAsyncComponent(() => import("./Renderer/index.vue"));
 defineBlokkliFeature({
   id: "multi-select",
   label: "Multiselect",
@@ -30,7 +36,7 @@ defineBlokkliFeature({
 const { keyboard, eventBus, selection, animation, $t } = useBlokkli();
 const isLocked = ref(false);
 const enabled = computed(
-  () => !selection.activeEditableLabel.value && !isLocked.value
+  () => !selection.activeFieldLabel.value && !isLocked.value
 );
 const shouldRender = ref(false);
 const downX = ref(0);

package/dist/runtime/editor/features/options/Form/Radios/index.vue

@@ -41,11 +41,7 @@
             :style="{ flex: v }"
           />
         </div>
-        <span
-          v-else-if="
-  typeof option.value === 'string' || typeof option.value === 'object' && displayAs === 'colors'
-"
-        >
+        <span v-else>
           {{
             typeof option.value === "string" ? option.value : option.value.label
           }}
@@ -103,13 +99,13 @@ const isDefaultRadios = computed(
   () => props.displayAs === "radios" || !props.displayAs
 );
 function onOptionMouseEnter(option) {
-  if (!isDefaultRadios.value) {
+  if (!isDefaultRadios.value || option.description) {
     active.value = option.label;
   }
   activeDescription.value = option.description;
 }
 function onMouseLeave() {
-  if (!isDefaultRadios.value) {
+  if (!isDefaultRadios.value || selectedOption.value?.description) {
     active.value = selectedOption.value?.label ?? "";
   }
   activeDescription.value = selectedOption.value?.description ?? "";
@@ -134,7 +130,7 @@ defineCommands(() => {
   });
 });
 onMounted(() => {
-  if (!isDefaultRadios.value) {
+  if (!isDefaultRadios.value || selectedOption.value?.description) {
     active.value = selectedOption.value?.label ?? "";
   }
   activeDescription.value = selectedOption.value?.description ?? "";

package/dist/runtime/editor/features/options/index.vue

@@ -12,10 +12,15 @@
 </template>
 
 <script setup>
-import { computed, useBlokkli, defineBlokkliFeature } from "#imports";
+import {
+  computed,
+  useBlokkli,
+  defineBlokkliFeature,
+  defineAsyncComponent
+} from "#imports";
 import { falsy, onlyUnique } from "#blokkli/helpers";
-import OptionsForm from "./Form/index.vue";
 import { fragmentBlockBundle } from "#blokkli-build/config";
+const OptionsForm = defineAsyncComponent(() => import("./Form/index.vue"));
 defineBlokkliFeature({
   id: "options",
   label: "Options",

package/dist/runtime/editor/features/preview-grant/index.vue

@@ -42,10 +42,16 @@
 </template>
 
 <script setup>
-import { ref, watch, useBlokkli, defineBlokkliFeature } from "#imports";
+import {
+  ref,
+  watch,
+  useBlokkli,
+  defineBlokkliFeature,
+  defineAsyncComponent
+} from "#imports";
 import { PluginToolbarButton } from "#blokkli/editor/plugins";
-import QrCode from "./QrCode/index.vue";
 import { DialogModal, BlokkliTransition } from "#blokkli/editor/components";
+const QrCode = defineAsyncComponent(() => import("./QrCode/index.vue"));
 const { adapter } = defineBlokkliFeature({
   id: "preview-grant",
   label: "Preview Grant",

package/dist/runtime/editor/features/publish/index.vue

@@ -12,15 +12,16 @@ import {
   defineBlokkliFeature,
   computed,
   useRoute,
-  nextTick
+  nextTick,
+  defineAsyncComponent
 } from "#imports";
 import { BlokkliTransition } from "#blokkli/editor/components";
-import PublishDialog from "./Dialog/index.vue";
 import {
   defineMenuButton,
   onBlokkliEvent,
   useDialog
 } from "#blokkli/editor/composables";
+const PublishDialog = defineAsyncComponent(() => import("./Dialog/index.vue"));
 const { adapter, settings } = defineBlokkliFeature({
   id: "publish",
   icon: "bk_mdi_publish",

package/dist/runtime/editor/features/referenced-entities/index.vue

@@ -9,9 +9,14 @@
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  computed,
+  defineAsyncComponent
+} from "#imports";
 import { useStateBasedCache } from "#blokkli/editor/composables";
-import List from "./List/index.vue";
+const List = defineAsyncComponent(() => import("./List/index.vue"));
 defineBlokkliFeature({
   id: "referenced-entities",
   label: "Referenced Entities",

package/dist/runtime/editor/features/responsive-preview/index.vue

@@ -68,11 +68,12 @@ import {
   computed,
   useBlokkli,
   defineBlokkliFeature,
-  watch
+  watch,
+  defineAsyncComponent
 } from "#imports";
 import { PluginSidebar } from "#blokkli/editor/plugins";
-import PreviewFrame from "./Frame/index.vue";
 import { Icon } from "#blokkli/editor/components";
+const PreviewFrame = defineAsyncComponent(() => import("./Frame/index.vue"));
 defineBlokkliFeature({
   id: "responsive-preview",
   icon: "bk_mdi_mobile",
@@ -115,18 +116,18 @@ const buildViewportSubtitle = (w, h, canRotate) => {
   }
 };
 const viewportOptions = computed(() => {
-  return [
+  const base = [
     {
       label: $t("responsivePreviewCustomViewport", "Custom"),
       id: "custom",
-      icon: "resize"
+      icon: "bk_mdi_resize"
     },
     {
       label: "iPhone SE",
       id: "iphone-se",
       width: 375,
       height: 667,
-      icon: "cellphone",
+      icon: "bk_mdi_mobile",
       canRotate: true
     },
     {
@@ -134,7 +135,7 @@ const viewportOptions = computed(() => {
       id: "iphone-15",
       width: 393,
       height: 852,
-      icon: "cellphone",
+      icon: "bk_mdi_mobile",
       canRotate: true
     },
     {
@@ -142,7 +143,7 @@ const viewportOptions = computed(() => {
       id: "iphone-15-pro-max",
       width: 430,
       height: 932,
-      icon: "cellphone",
+      icon: "bk_mdi_mobile",
       canRotate: true
     },
     {
@@ -150,7 +151,7 @@ const viewportOptions = computed(() => {
       id: "ipad-mini",
       width: 768,
       height: 1024,
-      icon: "tablet",
+      icon: "bk_mdi_tablet",
       canRotate: true
     },
     {
@@ -158,16 +159,17 @@ const viewportOptions = computed(() => {
       id: "13-laptop",
       width: 1280,
       height: 800,
-      icon: "laptop"
+      icon: "bk_mdi_laptop_mac"
     },
     {
       label: '24" Monitor',
       id: "24-monitor",
       width: 1920,
       height: 1200,
-      icon: "monitor"
+      icon: "bk_mdi_monitor"
     }
-  ].map((option) => {
+  ];
+  return base.map((option) => {
     return {
       ...option,
       subtitle: buildViewportSubtitle(

package/dist/runtime/editor/features/search/index.vue

@@ -40,9 +40,9 @@ import {
   ref,
   useBlokkli,
   defineBlokkliFeature,
-  useTemplateRef
+  useTemplateRef,
+  defineAsyncComponent
 } from "#imports";
-import Overlay from "./Overlay/index.vue";
 import { BlokkliTransition } from "#blokkli/editor/components";
 import { PluginToolbarButton } from "#blokkli/editor/plugins";
 import {
@@ -52,6 +52,7 @@ import {
 } from "#blokkli/editor/composables";
 import { falsy } from "#blokkli/helpers";
 import { itemEntityType } from "#blokkli-build/config";
+const Overlay = defineAsyncComponent(() => import("./Overlay/index.vue"));
 defineBlokkliFeature({
   id: "search",
   icon: "bk_mdi_search",
@@ -83,6 +84,9 @@ defineDropAreas((dragItems) => {
       return;
     }
     const config = types.getDroppableFieldConfig(field.fieldName, field);
+    if (config.cardinality !== 1) {
+      return;
+    }
     const allowedBundles = config.allowed.find(
       (v) => v.type === searchItem.entityType
     )?.bundles;

package/dist/runtime/editor/features/selection/AddButtons/Renderer/index.vue

@@ -18,11 +18,6 @@
 
 <script setup>
 import { useBlokkli, computed, ref } from "#imports";
-import {
-  setBuffersAndAttributes,
-  drawBufferInfo,
-  setUniforms
-} from "twgl.js";
 import vs from "./vertex.glsl?raw";
 import fs from "./fragment.glsl?raw";
 import { RectangleBufferCollector } from "#blokkli/editor/helpers/webgl";
@@ -322,7 +317,7 @@ function getCircleAtPoint(x, y) {
   }
   return -1;
 }
-const { collector } = defineRenderer("add-buttons", {
+const { collector } = await defineRenderer("add-buttons", {
   zIndex: 1e3,
   collector: () => {
     const c = new CircleBufferCollector();
@@ -381,9 +376,9 @@ const { collector } = defineRenderer("add-buttons", {
     }
     return false;
   },
-  render: (ctx, gl, program) => {
+  render: (ctx, gl, program, twgl) => {
     if (!bufferInfoCache) {
-      bufferInfoCache = collector.createBufferInfo(gl);
+      bufferInfoCache = collector.createBufferInfo(gl, twgl);
     }
     if (!bufferInfoCache) {
       return;
@@ -470,7 +465,7 @@ const { collector } = defineRenderer("add-buttons", {
       ctx.mouseArtboard.y
     );
     gl.useProgram(program.program);
-    setUniforms(program, {
+    twgl.setUniforms(program, {
       u_circle_positions: circlePositions,
       u_circle_visible: circleVisible,
       u_color: toShaderColor(color.value),
@@ -482,8 +477,8 @@ const { collector } = defineRenderer("add-buttons", {
       u_scale_transition: ctx.changeOptionsTransition
     });
     animation.setSharedUniforms(gl, program);
-    setBuffersAndAttributes(gl, program, bufferInfoCache);
-    drawBufferInfo(gl, bufferInfoCache, gl.TRIANGLES);
+    twgl.setBuffersAndAttributes(gl, program, bufferInfoCache);
+    twgl.drawBufferInfo(gl, bufferInfoCache, gl.TRIANGLES);
   },
   renderFallback: (ctx, ctx2d) => {
     circleVisible.fill(0);

package/dist/runtime/editor/features/selection/Renderer/index.vue

@@ -4,11 +4,6 @@
 
 <script setup>
 import { useBlokkli, computed } from "#imports";
-import {
-  setBuffersAndAttributes,
-  drawBufferInfo,
-  setUniforms
-} from "twgl.js";
 import vs from "./vertex.glsl?raw";
 import fs from "./fragment.glsl?raw";
 import { RectangleBufferCollector } from "#blokkli/editor/helpers/webgl";
@@ -27,7 +22,7 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector {
   uuids = [];
   lastCount = 0;
   prevKey = "";
-  getBufferInfo(gl, force) {
+  getBufferInfo(gl, twgl, force) {
     const key = props.blocks.map((block) => {
       const uuid = block.uuid;
       const rect = dom.getBlockRect(uuid);
@@ -98,8 +93,8 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector {
       }
       this.prevKey = key;
     }
-    if (hasChanged && gl) {
-      this.bufferInfo = this.createBufferInfo(gl);
+    if (hasChanged && gl && twgl) {
+      this.bufferInfo = this.createBufferInfo(gl, twgl);
     }
     return { info: this.bufferInfo, hasChanged };
   }
@@ -161,17 +156,17 @@ const getColorHost = useTransitionedValue(() => {
 const getTransforming = useTransitionedValue(() => {
   return ui.isTransforming.value ? 1 : 0;
 });
-const { collector } = defineRenderer("selection-overlay", {
+const { collector } = await defineRenderer("selection-overlay", {
   zIndex: 100,
   collector: () => new SelectionRectangleBufferCollector(),
   program: () => ({ shaders: [vs, fs] }),
-  render: (ctx, gl, program) => {
+  render: (ctx, gl, program, twgl) => {
     gl.useProgram(program.program);
-    const { info } = collector.getBufferInfo(gl);
+    const { info } = collector.getBufferInfo(gl, twgl);
     if (!info) {
       return;
     }
-    setUniforms(program, {
+    twgl.setUniforms(program, {
       u_color_default: toShaderColor(getColorDefault()),
       u_color_inverted: toShaderColor(getColorInverted()),
       u_color_library: toShaderColor(getColorLibrary()),
@@ -186,8 +181,8 @@ const { collector } = defineRenderer("selection-overlay", {
       u_time: ctx.time
     });
     animation.setSharedUniforms(gl, program);
-    setBuffersAndAttributes(gl, program, info);
-    drawBufferInfo(gl, info, gl.TRIANGLES);
+    twgl.setBuffersAndAttributes(gl, program, info);
+    twgl.drawBufferInfo(gl, info, gl.TRIANGLES);
   },
   renderFallback: (ctx, ctx2d) => {
     collector.getBufferInfo();