@blokkli/editor 2.0.0-alpha.22 → 2.0.0-alpha.24

package/dist/runtime/components/Edit/Features/MultiSelect/{Overlay → Renderer}/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <Teleport to="body">
-    <div />
-  </Teleport>
+  <div />
 </template>
 
 <script setup>
@@ -22,13 +20,15 @@ const logger = useDebugLogger();
 const props = defineProps({
   startX: { type: Number, required: true },
   startY: { type: Number, required: true },
-  isPressingControl: { type: Boolean, required: true },
-  gl: { type: null, required: true }
+  isPressingControl: { type: Boolean, required: true }
 });
 const startTimestamp = Date.now();
 defineEmits(["select"]);
 class MultiSelectRectangleBufferCollector extends RectangleBufferCollector {
-  getBufferInfo(offset, scale) {
+  getBufferInfo(gl, offset, scale) {
+    if (!offset || !scale) {
+      return { info: this.bufferInfo, hasChanged: false };
+    }
     const visibleBlocks = dom.getVisibleBlocks();
     const lengthBefore = this.positions.length;
     for (let i = 0; i < visibleBlocks.length; i++) {
@@ -63,8 +63,8 @@ class MultiSelectRectangleBufferCollector extends RectangleBufferCollector {
       );
     }
     const hasChanged = lengthBefore !== this.positions.length;
-    if (hasChanged) {
-      this.bufferInfo = this.createBufferInfo();
+    if (hasChanged && gl) {
+      this.bufferInfo = this.createBufferInfo(gl);
     }
     return { info: this.bufferInfo, hasChanged };
   }
@@ -95,68 +95,11 @@ class MultiSelectRectangleBufferCollector extends RectangleBufferCollector {
     return false;
   }
 }
-const collector = new MultiSelectRectangleBufferCollector(props.gl);
-const thick = 300;
-collector.addRectangle(
-  {
-    width: 1e3,
-    height: thick,
-    x: 100,
-    y: 100,
-    id: "select-rect-top",
-    isNested: false,
-    radius: [0, 0, 0, 0]
-  },
-  0
-);
-collector.addRectangle(
-  {
-    width: thick,
-    height: 1e3,
-    x: 1e3 + thick,
-    y: thick,
-    id: "select-rect-right",
-    isNested: false,
-    radius: [0, 0, 0, 0]
-  },
-  0
-);
-collector.addRectangle(
-  {
-    width: 1e3,
-    height: thick,
-    x: 100 + thick,
-    y: 1e3 + thick,
-    id: "select-rect-bottom",
-    isNested: false,
-    radius: [0, 0, 0, 0]
-  },
-  0
-);
-collector.addRectangle(
-  {
-    width: thick,
-    height: 1e3,
-    x: 100,
-    y: 100 + thick,
-    id: "select-rect-left",
-    isNested: false,
-    radius: [0, 0, 0, 0]
-  },
-  0
-);
 const artboardOffsetStart = { ...ui.artboardOffset.value };
 const artboardScaleStart = ui.artboardScale.value;
-const programInfo = animation.registerProgram(
-  "multi_select_overlay",
-  props.gl,
-  [vs, fs]
-);
 const uniforms = {
-  u_color_field_active: toShaderColor(theme.accent.value[700]),
-  u_color_field_default: toShaderColor(theme.mono.value[400]),
-  u_color_area_active: toShaderColor(theme.teal.value.normal),
-  u_color_area_default: toShaderColor(theme.teal.value.normal)
+  u_color_field_active: theme.accent.value[700],
+  u_color_field_default: theme.mono.value[400]
 };
 let mouseX = 0;
 let mouseY = 0;
@@ -181,11 +124,65 @@ function getSelectRect(offset, scale) {
   };
   return { shader, check };
 }
-defineRenderer("multiselect-overlay", {
+const { collector } = defineRenderer("multiselect-overlay", {
   zIndex: 450,
   only: true,
+  collector: () => {
+    const c = new MultiSelectRectangleBufferCollector();
+    const thick = 300;
+    c.addRectangle(
+      {
+        width: 1e3,
+        height: thick,
+        x: 100,
+        y: 100,
+        id: "select-rect-top",
+        isNested: false,
+        radius: [0, 0, 0, 0]
+      },
+      0
+    );
+    c.addRectangle(
+      {
+        width: thick,
+        height: 1e3,
+        x: 1e3 + thick,
+        y: thick,
+        id: "select-rect-right",
+        isNested: false,
+        radius: [0, 0, 0, 0]
+      },
+      0
+    );
+    c.addRectangle(
+      {
+        width: 1e3,
+        height: thick,
+        x: 100 + thick,
+        y: 1e3 + thick,
+        id: "select-rect-bottom",
+        isNested: false,
+        radius: [0, 0, 0, 0]
+      },
+      0
+    );
+    c.addRectangle(
+      {
+        width: thick,
+        height: 1e3,
+        x: 100,
+        y: 100 + thick,
+        id: "select-rect-left",
+        isNested: false,
+        radius: [0, 0, 0, 0]
+      },
+      0
+    );
+    return c;
+  },
+  program: () => ({ shaders: [vs, fs] }),
   cursor: () => "crosshair",
-  render: (ctx) => {
+  render: (ctx, gl, program) => {
     mouseX = ctx.mouseX;
     mouseY = ctx.mouseY;
     const { shader, check } = getSelectRect(
@@ -194,16 +191,20 @@ defineRenderer("multiselect-overlay", {
     );
     const { nested } = collector.getSelectedUuids(check);
     const shouldSelectAll = props.isPressingControl || !nested.length;
-    ctx.gl.useProgram(programInfo.program);
+    gl.useProgram(program.program);
     const time = (Date.now() - startTimestamp) / 1e3;
-    setUniforms(programInfo, uniforms);
-    setUniforms(programInfo, {
+    setUniforms(program, {
+      u_color_field_active: toShaderColor(uniforms.u_color_field_active),
+      u_color_field_default: toShaderColor(uniforms.u_color_field_default)
+    });
+    setUniforms(program, {
       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);
+    animation.setSharedUniforms(gl, program);
     const { info, hasChanged } = collector.getBufferInfo(
+      gl,
       ctx.artboardOffset,
       ctx.artboardScale
     );
@@ -211,9 +212,64 @@ defineRenderer("multiselect-overlay", {
       return;
     }
     if (hasChanged) {
-      setBuffersAndAttributes(ctx.gl, programInfo, info);
+      setBuffersAndAttributes(gl, program, info);
+    }
+    drawBufferInfo(gl, info, gl.TRIANGLES);
+  },
+  renderFallback: (ctx, ctx2d) => {
+    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;
+    collector.getBufferInfo(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++) {
+      const rect = rects[i];
+      if (rect.id.startsWith("select-rect-")) {
+        continue;
+      }
+      if (!intersects(rect, check)) {
+        continue;
+      }
+      if (!rect.isNested && !shouldSelectAll) {
+        continue;
+      }
+      ctx2d.fillStyle = colorFieldActive;
+      ctx2d.fillRect(
+        (rect.x * ctx.artboardScale + ctx.artboardOffset.x) * ctx.dpi,
+        (rect.y * ctx.artboardScale + ctx.artboardOffset.y) * ctx.dpi,
+        rect.width * ctx.artboardScale * ctx.dpi,
+        rect.height * ctx.artboardScale * ctx.dpi
+      );
     }
-    drawBufferInfo(ctx.gl, info, ctx.gl.TRIANGLES);
+    const time = (Date.now() - startTimestamp) / 1e3;
+    const speed = 100 * ctx.dpi;
+    const dashLength = 8 * ctx.dpi;
+    const phase = time * speed * -1;
+    ctx2d.lineWidth = 2 * ctx.dpi;
+    ctx2d.setLineDash([dashLength, dashLength]);
+    ctx2d.strokeStyle = "rgba(255, 255, 255, 0.8)";
+    ctx2d.lineDashOffset = phase % (dashLength * 2);
+    ctx2d.strokeRect(
+      shader.x * ctx.dpi,
+      shader.y * ctx.dpi,
+      shader.width * ctx.dpi,
+      shader.height * ctx.dpi
+    );
+    ctx2d.strokeStyle = "rgba(0, 0, 0, 0.8)";
+    ctx2d.lineDashOffset = (phase + dashLength) % (dashLength * 2);
+    ctx2d.strokeRect(
+      shader.x * ctx.dpi,
+      shader.y * ctx.dpi,
+      shader.width * ctx.dpi,
+      shader.height * ctx.dpi
+    );
+    ctx2d.setLineDash([]);
   }
 });
 function getUuidsToSelect() {

package/dist/runtime/components/Edit/Features/MultiSelect/{Overlay → Renderer}/index.vue.d.ts

@@ -2,7 +2,6 @@ type __VLS_Props = {
     startX: number;
     startY: number;
     isPressingControl: boolean;
-    gl: WebGLRenderingContext;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     select: (uuids: string[]) => any;

package/dist/runtime/components/Edit/Features/MultiSelect/{Overlay → Renderer}/vertex.glsl

@@ -17,8 +17,6 @@ uniform float u_select_all;
 uniform vec2 u_resolution;
 uniform vec3 u_color_field_default;
 uniform vec3 u_color_field_active;
-uniform vec3 u_color_area_default;
-uniform vec3 u_color_area_active;
 uniform vec4 u_select_rect;
 
 out vec4 v_quad;
@@ -28,6 +26,13 @@ out vec3 v_color_default;
 out vec3 v_color_active;
 out float v_rect_id;
 
+// Optimized outputs - values computed once per vertex instead of per pixel
+out vec2 v_size;
+out vec2 v_location;
+out float v_thickness;
+out float v_edge_softness;
+out float v_radius;
+
 bool isIntersecting(vec4 a, vec4 b) {
   return a.x < b.x + b.z &&
   a.x + a.z > b.x &&
@@ -179,4 +184,24 @@ void main() {
 
   v_color_default = u_color_field_default;
   v_color_active = u_color_field_active;
+
+  // Compute values that are constant per quad (optimization)
+  float radius_base = 2.0 * u_scale;
+  v_thickness = max(min(1.0 * u_scale, 3.0), 0.5);
+  float inset = max(min(2.0 * u_scale, 1.0), 2.0) * v_thickness;
+
+  float u_rect_x = transformed_quad.x + inset;
+  float u_rect_y = transformed_quad.y + inset;
+  float u_rectWidth = transformed_quad.z - 2.0 * inset;
+  float u_rectHeight = transformed_quad.w - 2.0 * inset;
+
+  v_size = vec2(u_rectWidth, u_rectHeight);
+
+  float x = u_rect_x;
+  float y = u_rect_y;
+  v_location = vec2(x + v_size.x / 2.0, y + v_size.y / 2.0);
+
+  v_edge_softness = 1.0 * u_dpi;
+  v_radius =
+    min(radius_base * u_dpi, min(v_size.x, v_size.y) / 2.0) + v_thickness * 2.0;
 }

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

@@ -1,18 +1,25 @@
 <template>
-  <Overlay
-    v-if="shouldRender && gl"
-    :start-x="downX"
-    :start-y="downY"
-    :is-pressing-control="keyboard.isPressingControl.value"
-    :gl="gl"
-    @select="onSelect"
-  />
+  <ErrorBoundary
+    v-model="isLocked"
+    :label="$t('feature_multi-select_label', 'Multiselect')"
+    @error="onError"
+  >
+    <Renderer
+      v-if="shouldRender"
+      :key="animation.renderKey.value"
+      :start-x="downX"
+      :start-y="downY"
+      :is-pressing-control="keyboard.isPressingControl.value"
+      @select="onSelect"
+    />
+  </ErrorBoundary>
 </template>
 
 <script setup>
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import { ref, useBlokkli, defineBlokkliFeature, computed } from "#imports";
-import Overlay from "./Overlay/index.vue";
+import { ErrorBoundary } from "#blokkli/components";
+import Renderer from "./Renderer/index.vue";
 defineBlokkliFeature({
   id: "multi-select",
   label: "Multiselect",
@@ -20,12 +27,18 @@ defineBlokkliFeature({
   description: "Implements support for selecting multiple blocks using a select rectangle.",
   viewports: ["desktop"]
 });
-const { keyboard, eventBus, selection, animation } = useBlokkli();
-const gl = animation.gl();
-const enabled = computed(() => !selection.editableActive.value && gl);
+const { keyboard, eventBus, selection, animation, $t } = useBlokkli();
+const isLocked = ref(false);
+const enabled = computed(
+  () => !selection.editableActive.value && !isLocked.value
+);
 const shouldRender = ref(false);
 const downX = ref(0);
 const downY = ref(0);
+function onError() {
+  eventBus.emit("select:end");
+  shouldRender.value = false;
+}
 const onSelect = (uuids) => {
   shouldRender.value = false;
   eventBus.emit("select:end", uuids);

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

@@ -1,12 +1,12 @@
 <template>
   <Teleport to="#bk-banner-list">
-    <Renderer v-if="shouldRender" @submit="takeOwnership" />
+    <OwnershipBanner v-if="shouldRender" @submit="takeOwnership" />
   </Teleport>
 </template>
 
 <script setup>
 import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
-import Renderer from "./Renderer.vue";
+import OwnershipBanner from "./Banner/index.vue";
 const { adapter } = defineBlokkliFeature({
   id: "ownership",
   icon: "user",

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

@@ -15,10 +15,11 @@
     @click="qrCodeVisible = true"
   />
 
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-up">
       <DialogModal
         v-if="qrCodeVisible"
+        id="preview-grant"
         :title="$t('previewDialogTitle', 'Preview with smartphone')"
         :lead="
   $t(

package/dist/runtime/components/Edit/Features/Publish/Dialog/index.vue

@@ -1,5 +1,6 @@
 <template>
   <DialogModal
+    id="publish"
     :title="$t('publishDialogTitle', 'Publish changes')"
     :width="900"
     :submit-label

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

@@ -1,15 +1,5 @@
 <template>
-  <PluginMenuButton
-    id="publish"
-    :title="publishLabel"
-    :description="publishDescription"
-    :disabled="!mutations.length || !canEdit"
-    :type="isScheduled ? 'yellow' : 'success'"
-    :weight="0"
-    :icon="icon"
-    @click="onMenuClick"
-  />
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-up">
       <PublishDialog v-if="showDialog" @close="onClose" @submit="onSubmit" />
     </BlokkliTransition>
@@ -22,13 +12,13 @@ import {
   defineBlokkliFeature,
   computed,
   useRoute,
-  ref,
   nextTick
 } from "#imports";
-import { PluginMenuButton } from "#blokkli/plugins";
 import { BlokkliTransition } from "#blokkli/components";
 import PublishDialog from "./Dialog/index.vue";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineMenuButton from "#blokkli/helpers/composables/defineMenuButton";
+import { useDialog } from "#blokkli/helpers/composables/useDialog";
 const { adapter, settings } = defineBlokkliFeature({
   id: "publish",
   icon: "publish",
@@ -46,14 +36,14 @@ const { adapter, settings } = defineBlokkliFeature({
   }
 });
 const route = useRoute();
-const { state, $t, broadcast, context, eventBus } = useBlokkli();
+const { state, $t, broadcast, context, eventBus, ui } = useBlokkli();
 const { mutations, canEdit, mutateWithLoadingState } = state;
 const hasPublishOptions = !!adapter.getPublishOptions;
 const isPublished = computed(() => !!state.entity.value.status);
 const isScheduled = computed(
   () => !!state.publishOptions.value.publishOn
 );
-const showDialog = ref(false);
+const showDialog = useDialog("publish", "center");
 const publishLabel = computed(() => {
   const suffix = hasPublishOptions ? "..." : "";
   if (isScheduled.value) {
@@ -122,6 +112,18 @@ async function onClose() {
 onBlokkliEvent("publish:show-dialog", () => {
   showDialog.value = true;
 });
+defineMenuButton(() => {
+  return {
+    id: "publish",
+    title: publishLabel.value,
+    description: publishDescription.value,
+    icon: icon.value,
+    type: isScheduled.value ? "yellow" : "success",
+    disabled: !mutations.value.length || !canEdit.value,
+    weight: 0,
+    callback: onMenuClick
+  };
+});
 </script>
 
 <script>

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

@@ -37,7 +37,7 @@
           </div>
           <Icon name="caret" />
         </button>
-        <div v-show="dropdownOpen" class="bk-dropdown-content">
+        <div v-if="dropdownOpen" class="bk-dropdown-content">
           <label v-for="option in viewportOptions" :key="option.id">
             <input
               v-model="selectedViewportId"

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

@@ -1,21 +1,9 @@
 <template>
-  <PluginMenuButton
-    id="revert"
-    :title="$t('revertMenuTitle', 'Discard...')"
-    :description="
-  $t('revertMenuDescription', 'Restore currently published state')
-"
-    icon="revert"
-    type="danger"
-    :disabled="!mutations.length || !canEdit"
-    :weight="10"
-    @click="showConfirm = true"
-  />
-
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-up">
       <DialogModal
         v-if="showConfirm"
+        id="revert"
         :title="$t('revertDialogTitle', 'Irrevocably discard changes')"
         :lead="
   $t(
@@ -33,9 +21,10 @@
 </template>
 
 <script setup>
-import { useBlokkli, ref, defineBlokkliFeature } from "#imports";
-import { PluginMenuButton } from "#blokkli/plugins";
+import { useBlokkli, defineBlokkliFeature } from "#imports";
 import { DialogModal, BlokkliTransition } from "#blokkli/components";
+import defineMenuButton from "#blokkli/helpers/composables/defineMenuButton";
+import { useDialog } from "#blokkli/helpers/composables/useDialog";
 const { adapter } = defineBlokkliFeature({
   id: "revert",
   icon: "revert",
@@ -43,9 +32,9 @@ const { adapter } = defineBlokkliFeature({
   requiredAdapterMethods: ["revertAllChanges"],
   description: "Provides a menu button to revert all changes done on the current entity."
 });
-const { state, $t } = useBlokkli();
+const { state, $t, ui } = useBlokkli();
 const { mutations, canEdit, mutateWithLoadingState } = state;
-const showConfirm = ref(false);
+const showConfirm = useDialog("revert", "center");
 async function onSubmit() {
   await mutateWithLoadingState(
     () => adapter.revertAllChanges(),
@@ -54,6 +43,23 @@ async function onSubmit() {
   );
   showConfirm.value = false;
 }
+defineMenuButton(() => {
+  return {
+    id: "revert",
+    title: $t("revertMenuTitle", "Discard..."),
+    description: $t(
+      "revertMenuDescription",
+      "Restore currently published state"
+    ),
+    icon: "revert",
+    type: "danger",
+    disabled: !mutations.value.length || !canEdit.value,
+    weight: 10,
+    callback: () => {
+      showConfirm.value = true;
+    }
+  };
+});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/Search/Overlay/Results/Content/index.vue

@@ -4,16 +4,14 @@
       <Icon name="spinner" />
     </div>
     <div :class="{ 'bk-search-is-loading': isLoading }">
-      <Sortli no-transition>
+      <Sortli :build-item>
         <button
           v-for="(item, i) in items"
           :key="tab + item.id"
           ref="listItems"
-          data-element-type="search_content"
           class="bk bk-search-item bk-is-content"
           :class="{ 'bk-is-active': i === index }"
-          :data-sortli-id="'search_' + tab + i"
-          :data-search-item="JSON.stringify(item)"
+          :data-sortli-id="i"
           @mouseenter="index = i"
         >
           <div
@@ -56,7 +54,7 @@
 <script setup>
 import { watch, ref, useBlokkli, onMounted } from "#imports";
 import { ItemIcon, Icon, Sortli } from "#blokkli/components";
-import { buildDraggableItem, modulo } from "#blokkli/helpers";
+import { modulo } from "#blokkli/helpers";
 const listItems = ref([]);
 const props = defineProps({
   visible: { type: Boolean, required: true },
@@ -101,6 +99,25 @@ const goToFirst = () => setIndex(0);
 const select = () => clickItem();
 const isActive = () => props.visible;
 defineExpose({ prev, next, select, isActive, goToFirst });
+function buildItem(element) {
+  if (!element.dataset.sortliId) {
+    return;
+  }
+  const index2 = Number.parseInt(element.dataset.sortliId);
+  if (Number.isNaN(index2) || !Number.isFinite(index2)) {
+    return;
+  }
+  const item = items.value[index2];
+  if (!item) {
+    return;
+  }
+  return {
+    itemType: "search_content",
+    element: () => element,
+    itemBundle: item.targetBundles[0] ?? "",
+    searchItem: item
+  };
+}
 const setIndex = (newIndex) => {
   index.value = modulo(newIndex, items.value.length);
   scrollItemIntoView();
@@ -110,7 +127,7 @@ const clickItem = () => {
   if (!element) {
     return;
   }
-  const item = buildDraggableItem(element);
+  const item = buildItem(element);
   if (!item) {
     return;
   }

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

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value" defer>
     <BlokkliTransition name="search">
       <div
         v-if="isRendered"