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

package/dist/runtime/components/Edit/Features/Hover/Overlay/vertex.glsl

@@ -0,0 +1,117 @@
+precision highp float;
+
+// [x, y] position.
+attribute vec2 a_position;
+// The [x,y,width, height] of the quad the vertex belongs to.
+attribute vec4 a_quad;
+attribute float a_rect_id;
+attribute float a_rect_type;
+attribute vec4 a_rect_radius;
+
+// The global scaling applied to all quads.
+uniform float u_scale;
+uniform float u_dpi;
+// The amount of pixels to offset on the x axis.
+uniform float u_offset_x;
+// The amount of pixels to offset on the y axis.
+uniform float u_offset_y;
+uniform vec2 u_resolution;
+
+// Hover state uniforms (11 rectangles)
+uniform vec4 u_hover_positions[11]; // x, y, width, height
+uniform vec4 u_hover_radii[11]; // topLeft, topRight, bottomRight, bottomLeft
+uniform float u_hover_types[11]; // 0=mono, 1=accent, 2=teal fill
+uniform float u_hover_visible[11]; // 0=hidden, 1=visible
+
+// The transformed quad for the fragment shader.
+varying vec4 v_quad;
+varying vec4 v_rect_radius;
+varying vec2 v_rect_size;
+varying vec2 v_rect_center;
+varying float v_rect_type;
+varying vec2 v_quad_artboard_pos;
+
+void main() {
+  int rectIndex = int(a_rect_id);
+
+  // If not visible, move off-screen
+  if (u_hover_visible[rectIndex] < 0.5) {
+    gl_Position = vec4(-2.0, -2.0, 0.0, 1.0);
+    return;
+  }
+
+  // Get rect data from uniforms
+  vec4 hoverPos = u_hover_positions[rectIndex]; // x, y, width, height
+  vec4 hoverRadius = u_hover_radii[rectIndex];
+  float hoverType = u_hover_types[rectIndex];
+
+  // Define the increase size to prevent border clipping
+  float borderThickness = 2.0 * u_dpi;
+  float increaseSize = max(borderThickness, 10.0) + 4.0;
+
+  // Calculate the new dimensions of the quad
+  vec4 adjusted_quad = hoverPos;
+  adjusted_quad.z += 2.0 * increaseSize; // increase width
+  adjusted_quad.w += 2.0 * increaseSize; // increase height
+
+  // Adjust vertex positions to scale from the center of the rectangle
+  // Calculate the center of the original quad
+  vec2 center = vec2(
+    hoverPos.x + hoverPos.z / 2.0,
+    hoverPos.y + hoverPos.w / 2.0
+  );
+
+  // Calculate vertex offset relative to dummy quad center
+  vec2 dummyCenter = vec2(a_quad.x + a_quad.z / 2.0, a_quad.y + a_quad.w / 2.0);
+  vec2 vertexOffset = a_position - dummyCenter;
+
+  // Map vertex offset to new rect
+  vec2 newOffset =
+    vertexOffset *
+    (vec2(adjusted_quad.z, adjusted_quad.w) / vec2(a_quad.z, a_quad.w));
+
+  // New position is center plus the new offset
+  vec2 newPosition = center + newOffset;
+
+  // Apply global scale and offsets
+  vec2 offsetPosition = newPosition * u_scale;
+  offsetPosition.x += u_offset_x;
+  offsetPosition.y += u_offset_y;
+
+  // Normalize position for rendering
+  vec2 normalizedPosition = offsetPosition / u_resolution;
+
+  // Transform to screen space (-1 to 1)
+  vec2 screenSpacePosition = normalizedPosition * 2.0 - vec2(1.0, 1.0);
+  screenSpacePosition.y = -screenSpacePosition.y;
+
+  // Output final position in clip space
+  gl_Position = vec4(screenSpacePosition, 0.0, 1.0) * u_dpi;
+
+  // Pass the dimensions to fragment shader for SDF calculations
+  vec4 transformed_quad = vec4(
+    (hoverPos.x * u_scale + u_offset_x) * u_dpi,
+    (u_resolution.y -
+      hoverPos.y * u_scale -
+      hoverPos.w * u_scale -
+      u_offset_y) *
+      u_dpi,
+    hoverPos.z * u_scale * u_dpi,
+    hoverPos.w * u_scale * u_dpi
+  );
+  v_quad = transformed_quad;
+
+  // Expand the rect by 2px for border rendering
+  float borderExpansion = 2.0 * u_dpi;
+
+  // Set varying variables
+  v_rect_radius = hoverRadius * u_dpi;
+  v_rect_size = vec2(
+    v_quad.z + 2.0 * borderExpansion,
+    v_quad.w + 2.0 * borderExpansion
+  );
+  v_rect_center = vec2(v_quad.x + v_quad.z / 2.0, v_quad.y + v_quad.w / 2.0);
+  v_rect_type = hoverType;
+  // Pass the original artboard-space quad position for stable dash pattern
+  v_quad_artboard_pos = vec2(hoverPos.x, hoverPos.y);
+}

package/dist/runtime/components/Edit/Features/Hover/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <Overlay v-if="isVisible && gl && animation.webglEnabled.value" :gl="gl" />
+</template>
+
+<script setup>
+import Overlay from "./Overlay/index.vue";
+import { computed, useBlokkli, defineBlokkliFeature } from "#imports";
+defineBlokkliFeature({
+  id: "hover",
+  icon: "selection",
+  label: "Hover",
+  description: "Renders a border around blocks that are currently being hovered."
+});
+const { selection, ui, animation, dom } = useBlokkli();
+const gl = animation.gl();
+const isVisible = computed(
+  () => dom.isReady.value && !selection.isMultiSelecting.value && !selection.editableActive.value && !selection.isDragging.value && !ui.hasTransformOverlayOpen.value && !ui.hasDialogOpen.value && !ui.isAnimating.value
+);
+</script>
+
+<script>
+export default {
+  name: "Hover"
+};
+</script>

package/dist/runtime/components/Edit/Features/Hover/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/Library/EditReusable/index.vue

@@ -46,16 +46,15 @@ const props = defineProps({
   uuid: { type: String, required: true },
   label: { type: String, required: false }
 });
+const { $t, element } = useBlokkli();
 const DURATION = 530;
 const emit = defineEmits(["submit", "close"]);
 function getOriginatingElement() {
-  const el = document.querySelector(
-    `[data-bk-library-item-uuid="${props.uuid}"]`
+  return element.query(
+    document.documentElement,
+    `[data-bk-library-item-uuid="${props.uuid}"]`,
+    "Get originating library item element"
   );
-  if (el instanceof HTMLElement) {
-    return el;
-  }
-  return null;
 }
 function onEnter(el, done) {
   if (el instanceof HTMLElement) {
@@ -125,7 +124,6 @@ function onAfterLeave(el) {
     emit("close");
   }
 }
-const { $t } = useBlokkli();
 const iframe = ref(null);
 const isLoaded = ref(false);
 const isLoading = ref(true);

package/dist/runtime/components/Edit/Features/Library/LibraryDialog/index.vue

@@ -17,15 +17,11 @@
         </p>
         <div class="bk">
           <div class="bk-form-group">
-            <div>
-              <label class="bk-form-label" for="library_search">
-                {{ $t("libraryPlaceSearchLabel", "Filter library items") }}
-              </label>
-              <input
+            <FormItem>
+              <FormText
                 id="library_search"
                 v-model.lazy="searchText"
-                type="text"
-                class="bk-form-input"
+                :label="$t('libraryPlaceSearchLabel', 'Filter library items')"
                 :placeholder="
   $t(
     'libraryPlaceSearchInputPlaceholder',
@@ -34,25 +30,15 @@
 "
                 required
               />
-            </div>
-            <div>
-              <label class="bk-form-label" for="library_bundle">
-                {{ $t("libraryPlaceBundleSelectLabel", "Bundle") }}
-              </label>
-              <select
+            </FormItem>
+            <FormItem>
+              <FormSelect
                 id="library_bundle"
                 v-model="selectedBundle"
-                class="bk-form-input"
-              >
-                <option
-                  v-for="v in bundleOptions"
-                  :key="v.bundle"
-                  :value="v.bundle"
-                >
-                  {{ v.label }}
-                </option>
-              </select>
-            </div>
+                :label="$t('libraryPlaceBundleSelectLabel', 'Bundle')"
+                :options="bundleOptions"
+              />
+            </FormItem>
           </div>
         </div>
         <div class="bk-library-dialog-content">
@@ -85,7 +71,13 @@
 </template>
 
 <script setup>
-import { FormOverlay, Pagination } from "#blokkli/components";
+import {
+  FormOverlay,
+  Pagination,
+  FormText,
+  FormItem,
+  FormSelect
+} from "#blokkli/components";
 import Loading from "./../../../Loading/index.vue";
 import { ref, useBlokkli, useAsyncData, computed, watch } from "#imports";
 import LibraryListItem from "./Item/index.vue";
@@ -147,10 +139,10 @@ const bundleOptions = computed(() => {
   const bundles = allowedBundles.value.map((bundle) => {
     const definition = types.getBlockBundleDefinition(bundle);
     return {
-      bundle,
+      value: bundle,
       label: definition?.label || bundle
     };
   });
-  return [{ bundle: "all", label: $t("all", "All") }, ...bundles];
+  return [{ value: "all", label: $t("all", "All") }, ...bundles];
 });
 </script>

package/dist/runtime/components/Edit/Features/Library/ReusableDialog/index.vue

@@ -23,39 +23,43 @@
   )
 "
       />
-      <label for="reusable_label" class="bk-form-label">{{
-        $t("libraryDialogDescriptionLabel", "Description")
-      }}</label>
-      <input
-        id="reusable_label"
-        v-model="label"
-        type="text"
-        class="bk-form-input"
-        :placeholder="
-  $t('libraryDialogTitleInputPlaceholder', 'e.g. Teaser Campaign 2024')
+      <FormItem>
+        <FormText
+          id="reusable_label"
+          v-model="label"
+          :label="$t('libraryDialogDescriptionLabel', 'Description')"
+          type="text"
+          :placeholder="
+  $t(
+    'libraryDialogTitleInputPlaceholder',
+    'e.g. Teaser Campaign 2024'
+  )
 "
-        required
-      />
-    </div>
-    <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" />
+          required
+        />
+      </FormItem>
+      <FormItem>
+        <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>
+      </FormItem>
     </div>
   </DialogModal>
 </template>
 
 <script setup>
 import { ref, useBlokkli, onMounted } from "#imports";
-import { DialogModal, InfoBox } from "#blokkli/components";
+import { DialogModal, InfoBox, FormText, FormItem } from "#blokkli/components";
 import { realBackgroundColor } from "#blokkli/helpers";
 defineEmits(["confirm", "cancel"]);
-const { dom, $t } = useBlokkli();
+const { dom, $t, blocks } = useBlokkli();
 const props = defineProps({
   uuid: { type: String, required: true },
   backgroundClass: { type: String, required: false }
@@ -66,14 +70,14 @@ const previewEl = ref(null);
 const backgroundColor = ref("");
 onMounted(() => {
   if (previewEl.value) {
-    const item = dom.findBlock(props.uuid);
+    const item = blocks.getBlock(props.uuid);
     if (!item) {
       return;
     }
-    if (item.editTitle) {
-      label.value = item.editTitle.substring(0, 40);
+    const element = dom.getDragElement(item);
+    if (!element) {
+      return;
     }
-    const element = item.element();
     const markup = dom.getDropElementMarkup(item);
     width.value = element.getBoundingClientRect().width + 40;
     const clone = document.createElement("div");

package/dist/runtime/components/Edit/Features/Library/index.vue

@@ -4,6 +4,7 @@
     id="library_detach"
     :title="$t('libraryDetach', 'Detach from library')"
     icon="detach"
+    edit-only
     multiple
     :weight="-70"
     @click="onDetach"
@@ -11,8 +12,9 @@
   <PluginItemAction
     v-else-if="!isReusable"
     id="library_make_reusable"
-    :title="$t('libraryAdd', 'Add to library')"
-    :disabled="!canMakeReusable || state.editMode.value !== 'editing'"
+    :title="$t('libraryAdd', 'Add to library...')"
+    :disabled="!canMakeReusable"
+    edit-only
     icon="reusable"
     :weight="-70"
     @click="showReusableDialog = true"
@@ -40,8 +42,8 @@
   <Teleport to="body">
     <BlokkliTransition name="slide-up">
       <ReusableDialog
-        v-if="showReusableDialog && selectedItem"
-        :uuid="selectedItem.uuid"
+        v-if="showReusableDialog && selection.item.value"
+        :uuid="selection.item.value.uuid"
         :background-class="definition?.editor?.previewBackgroundClass"
         @confirm="onMakeReusable"
         @cancel="showReusableDialog = false"
@@ -86,12 +88,6 @@ const { adapter } = defineBlokkliFeature({
 });
 const { selection, state, types, $t, eventBus, definitions } = useBlokkli();
 const showReusableDialog = ref(false);
-const selectedItem = computed(() => {
-  if (selection.blocks.value.length !== 1) {
-    return;
-  }
-  return selection.blocks.value[0];
-});
 const onDetach = async () => {
   if (!adapter.detachReusableBlock || !selection.uuids.value.length) {
     return;
@@ -117,28 +113,37 @@ const onAddLibraryItem = async (uuid) => {
   );
   placedAction.value = null;
 };
-const definition = computed(
-  () => selectedItem?.value ? definitions.getBlockDefinition(
-    selectedItem.value.itemBundle,
-    selectedItem.value.hostFieldListType,
-    selectedItem.value.parentBlockBundle
-  ) : null
-);
-const itemBundle = computed(
-  () => selectedItem?.value ? types.getBlockBundleDefinition(selectedItem.value.itemBundle) : null
-);
+const definition = computed(() => {
+  const item = selection.item.value;
+  if (!item) {
+    return null;
+  }
+  return definitions.getBlockDefinition(
+    item.bundle,
+    item.fieldListType,
+    item.parentBlockBundle
+  );
+});
+const itemBundle = computed(() => {
+  const item = selection.item.value;
+  if (!item) {
+    return null;
+  }
+  return types.getBlockBundleDefinition(item.bundle);
+});
 const isReusable = computed(
-  () => selection.blocks.value.length && selection.blocks.value.every((v) => v.itemBundle === BUNDLE_FROM_LIBRARY)
+  () => selection.bundles.value.every((bundle) => bundle === BUNDLE_FROM_LIBRARY)
 );
 async function onMakeReusable(label) {
   showReusableDialog.value = false;
-  if (!selectedItem?.value?.uuid) {
+  const item = selection.item.value;
+  if (!item) {
     return;
   }
   await state.mutateWithLoadingState(
     () => adapter.makeBlockReusable({
       label,
-      uuid: selectedItem.value.uuid
+      uuid: item.uuid
     }),
     $t("libraryError", "Failed to add block to library.")
   );

package/dist/runtime/components/Edit/Features/MediaLibrary/Library/index.vue

@@ -88,7 +88,7 @@ defineProps({
   isSortli: { type: Boolean, required: false },
   modelValue: { type: String, required: false }
 });
-const { adapter, storage, $t } = useBlokkli();
+const { adapter, storage, $t, element } = useBlokkli();
 const selected = ref([]);
 const listEl = ref(null);
 const page = ref(0);
@@ -97,10 +97,13 @@ function getDragItems(activeItem) {
   if (!selected.value.length || !listEl.value) {
     return null;
   }
+  const listElement = listEl.value;
   const activeId = activeItem?.itemType === "media_library" ? activeItem.mediaId : null;
   const items2 = selected.value.map((id) => {
-    const el = listEl.value?.querySelector(
-      `[data-sortli-id="media_library_${id}"]`
+    const el = element.query(
+      listElement,
+      `[data-sortli-id="media_library_${id}"]`,
+      "Find media library drag item."
     );
     if (!(el instanceof HTMLElement)) {
       return null;

package/dist/runtime/components/Edit/Features/MediaLibrary/index.vue

@@ -32,6 +32,7 @@ import { PluginSidebar, PluginDroppableEdit } from "#blokkli/plugins";
 import Library from "./Library/index.vue";
 import defineDropAreas from "#blokkli/helpers/composables/defineDropAreas";
 import { falsy } from "#blokkli/helpers";
+import { itemEntityType } from "#blokkli-build/config";
 defineBlokkliFeature({
   id: "media-library",
   icon: "image",
@@ -39,7 +40,7 @@ defineBlokkliFeature({
   description: "Implements a media library to easily drag and drop media like images or videos.",
   requiredAdapterMethods: ["mediaLibraryGetResults", "mediaLibraryAddBlock"]
 });
-const { $t, dom, adapter, state, runtimeConfig, types } = useBlokkli();
+const { $t, adapter, state, runtimeConfig, types, directive } = useBlokkli();
 const selected = ref("");
 const ERROR_MESSAGE = $t(
   "mediaLibraryReplaceFailed",
@@ -49,11 +50,12 @@ const onDroppableEditSave = async (e) => {
   if (!selected.value) {
     return;
   }
-  if ("itemBundle" in e.host && adapter.mediaLibraryReplaceMedia) {
+  if ("itemType" in e.host && adapter.mediaLibraryReplaceMedia) {
+    const host = e.host;
     await state.mutateWithLoadingState(
       () => adapter.mediaLibraryReplaceMedia({
         host: {
-          uuid: e.host.uuid,
+          uuid: host.block.uuid,
           type: runtimeConfig.itemEntityType,
           fieldName: e.fieldName
         },
@@ -62,11 +64,12 @@ const onDroppableEditSave = async (e) => {
       ERROR_MESSAGE
     );
   } else if ("type" in e.host && adapter.mediaLibraryReplaceEntityMedia) {
-    const type = e.host.type;
+    const host = e.host;
+    const type = host.type;
     await state.mutateWithLoadingState(
       () => adapter.mediaLibraryReplaceEntityMedia({
         host: {
-          uuid: e.host.uuid,
+          uuid: host.uuid,
           type,
           fieldName: e.fieldName
         },
@@ -87,18 +90,18 @@ defineDropAreas((dragItems) => {
   if (item.itemType !== "media_library") {
     return;
   }
-  return dom.getAllDroppableFields().map((field) => {
-    const config = types.getDroppableFieldConfig(field.fieldName, field.host);
+  return directive.getDroppableElements().map((field) => {
+    const config = types.getDroppableFieldConfig(field.fieldName, field);
     if (config.allowedEntityType !== "media") {
       return;
     }
     if (!config.allowedBundles.includes(item.mediaBundle)) {
       return;
     }
-    const isBlock = "itemBundle" in field.host;
+    const isBlock = field.type === itemEntityType;
     const draggableHost = {
-      uuid: field.host.uuid,
-      type: "itemBundle" in field.host ? runtimeConfig.itemEntityType : field.host.type,
+      uuid: field.uuid,
+      type: field.type,
       fieldName: field.fieldName
     };
     const label = $t("mediaLibraryReplaceMedia", "Replace @field").replace(
@@ -107,7 +110,7 @@ defineDropAreas((dragItems) => {
     );
     if (adapter.mediaLibraryReplaceMedia && isBlock) {
       return {
-        id: `replace-media:${field.host.uuid}:${field.fieldName}`,
+        id: `replace-media:${field.uuid}:${field.fieldName}`,
         label,
         element: field.element,
         icon: "swap-horizontal",
@@ -123,7 +126,7 @@ defineDropAreas((dragItems) => {
       };
     } else if (adapter.mediaLibraryReplaceEntityMedia && !isBlock) {
       return {
-        id: `replace-entity-media:${field.host.uuid}:${field.fieldName}`,
+        id: `replace-entity-media:${field.uuid}:${field.fieldName}`,
         label,
         element: field.element,
         icon: "swap-horizontal",

package/dist/runtime/components/Edit/Features/MultiSelect/Overlay/index.vue

@@ -7,7 +7,7 @@
 <script setup>
 import { useBlokkli, onBeforeUnmount } from "#imports";
 import { intersects, toShaderColor } from "#blokkli/helpers";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
 import vs from "./vertex.glsl?raw";
 import fs from "./fragment.glsl?raw";
 import {
@@ -17,7 +17,7 @@ import {
 } from "twgl.js";
 import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
 import useDebugLogger from "#blokkli/helpers/composables/useDebugLogger";
-const { eventBus, dom, theme, animation, ui } = useBlokkli();
+const { eventBus, dom, theme, animation, ui, blocks } = useBlokkli();
 const logger = useDebugLogger();
 const props = defineProps({
   startX: { type: Number, required: true },
@@ -39,7 +39,7 @@ class MultiSelectRectangleBufferCollector extends RectangleBufferCollector {
       if (this.added.has(uuid)) {
         continue;
       }
-      const block = dom.findBlock(uuid);
+      const block = blocks.getBlock(uuid);
       if (!block) {
         continue;
       }
@@ -181,32 +181,40 @@ function getSelectRect(offset, scale) {
   };
   return { shader, check };
 }
-onBlokkliEvent("canvas:draw", (e) => {
-  mouseX = e.mouseX;
-  mouseY = e.mouseY;
-  const { shader, check } = getSelectRect(e.artboardOffset, e.artboardScale);
-  const { nested } = collector.getSelectedUuids(check);
-  const shouldSelectAll = props.isPressingControl || !nested.length;
-  props.gl.useProgram(programInfo.program);
-  const time = (Date.now() - startTimestamp) / 1e3;
-  setUniforms(programInfo, uniforms);
-  setUniforms(programInfo, {
-    u_select_all: shouldSelectAll ? 1 : 0,
-    u_select_rect: [shader.x, shader.y, shader.width, shader.height],
-    u_time: time
-  });
-  animation.setSharedUniforms(props.gl, programInfo);
-  const { info, hasChanged } = collector.getBufferInfo(
-    e.artboardOffset,
-    e.artboardScale
-  );
-  if (!info) {
-    return;
-  }
-  if (hasChanged) {
-    setBuffersAndAttributes(props.gl, programInfo, info);
+defineRenderer("multiselect-overlay", {
+  zIndex: 450,
+  only: true,
+  cursor: () => "crosshair",
+  render: (ctx) => {
+    mouseX = ctx.mouseX;
+    mouseY = ctx.mouseY;
+    const { shader, check } = getSelectRect(
+      ctx.artboardOffset,
+      ctx.artboardScale
+    );
+    const { nested } = collector.getSelectedUuids(check);
+    const shouldSelectAll = props.isPressingControl || !nested.length;
+    ctx.gl.useProgram(programInfo.program);
+    const time = (Date.now() - startTimestamp) / 1e3;
+    setUniforms(programInfo, uniforms);
+    setUniforms(programInfo, {
+      u_select_all: shouldSelectAll ? 1 : 0,
+      u_select_rect: [shader.x, shader.y, shader.width, shader.height],
+      u_time: time
+    });
+    animation.setSharedUniforms(ctx.gl, programInfo);
+    const { info, hasChanged } = collector.getBufferInfo(
+      ctx.artboardOffset,
+      ctx.artboardScale
+    );
+    if (!info) {
+      return;
+    }
+    if (hasChanged) {
+      setBuffersAndAttributes(ctx.gl, programInfo, info);
+    }
+    drawBufferInfo(ctx.gl, info, ctx.gl.TRIANGLES);
   }
-  drawBufferInfo(props.gl, info, props.gl.TRIANGLES);
 });
 function getUuidsToSelect() {
   const { check } = getSelectRect(
@@ -222,7 +230,6 @@ function getUuidsToSelect() {
   return nested;
 }
 onBeforeUnmount(() => {
-  props.gl.clear(props.gl.COLOR_BUFFER_BIT);
   const diff = Date.now() - startTimestamp;
   if (diff > 175) {
     eventBus.emit("select:end", getUuidsToSelect());

package/dist/runtime/components/Edit/Features/MultiSelect/index.vue

@@ -20,11 +20,9 @@ defineBlokkliFeature({
   description: "Implements support for selecting multiple blocks using a select rectangle.",
   viewports: ["desktop"]
 });
-const { keyboard, eventBus, selection, state, animation } = useBlokkli();
+const { keyboard, eventBus, selection, animation } = useBlokkli();
 const gl = animation.gl();
-const enabled = computed(
-  () => !selection.editableActive.value && (state.editMode.value === "editing" || state.editMode.value === "translating") && gl
-);
+const enabled = computed(() => !selection.editableActive.value && gl);
 const shouldRender = ref(false);
 const downX = ref(0);
 const downY = ref(0);