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

package/dist/runtime/components/Edit/Features/Selection/AddButtons/index.vue

@@ -1,58 +1,12 @@
 <template>
-  <Teleport to="#bk-indicators">
-    <div
-      v-if="shouldRender"
-      v-show="showOverlay"
-      class="bk-selection-add"
-      :class="orientationClass"
-      :style="containerStyle"
-    >
-      <button
-        ref="before"
-        :key="'before' + orientationClass"
-        class="bk-selection-add-button bk-before"
-        :style="beforeAfterStyle"
-        :data-title="beforeTooltip"
-        tabindex="-1"
-        @click="onClickBefore"
-      >
-        <div>
-          <Icon name="plus" />
-        </div>
-      </button>
-
-      <button
-        ref="after"
-        :key="'after' + orientationClass"
-        class="bk-selection-add-button bk-after"
-        :style="beforeAfterStyle"
-        :data-title="afterTooltip"
-        tabindex="-1"
-        @click="onClickAfter"
-      >
-        <div>
-          <Icon name="plus" />
-        </div>
-      </button>
-    </div>
-    <AddButtonsField
-      v-for="(slot, index) in fieldButtonSlots"
-      v-show="showOverlay"
-      :key="index"
-      :field-key="slot.fieldKey"
-      :container-rect="containerRect"
-      :title="fieldTooltips[index] || ''"
-      @click="(el) => onClickEmptyField(index, el)"
-    />
-  </Teleport>
-
-  <Teleport to="body">
+  <Teleport to="#bk-canvas-overlay">
     <BlokkliTransition name="caret-tooltip">
       <Overlay
         v-if="addData"
         :key="addData.key"
         :bundles="addData.allowedBundles"
         :anchor-el="addData.anchorEl"
+        :anchor-coordinates="addData.anchorCoordinates"
         :label="addData.label"
         @select="onSelectBundle"
         @close="closeOverlay"
@@ -60,12 +14,14 @@
       />
     </BlokkliTransition>
   </Teleport>
+
+  <Renderer @toggle="onRendererToggle" @toggle-field="onRendererToggleField" />
 </template>
 
 <script setup>
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { computed, useBlokkli, ref, watch, useTemplateRef } from "#imports";
-import { Icon, BlokkliTransition } from "#blokkli/components";
+import { computed, useBlokkli, ref, watch } from "#imports";
+import { BlokkliTransition } from "#blokkli/components";
 import {
   getChildrenOrientation,
   getGapSize,
@@ -73,25 +29,21 @@ import {
   determineCanAddChildren
 } from "#blokkli/helpers/dropTargets";
 import Overlay from "./Overlay/index.vue";
-import AddButtonsField from "./AddButtonsField.vue";
 import { renderCycle } from "#blokkli/helpers/renderCycle";
 import { getFieldKey } from "#blokkli/helpers";
 import { isInternalBundle } from "#blokkli/helpers/bundles";
+import Renderer from "./Renderer/index.vue";
+import { itemEntityType } from "#blokkli-build/config";
 const props = defineProps({
-  blocks: { type: Array, required: true }
+  items: { type: Array, required: true }
 });
-const { dom, state, eventBus, types, ui, selection, $t } = useBlokkli();
-const showOverlay = computed(
-  () => !ui.isTransforming.value && !ui.isAnalyzing.value && !selection.isMultiSelecting.value && !selection.isDragging.value && !ui.hasTransformOverlayOpen.value && !selection.isChangingOptions.value
-);
-const afterEl = useTemplateRef("after");
-const beforeEL = useTemplateRef("before");
+const { dom, state, eventBus, types, $t, blocks, fields } = useBlokkli();
 const shouldRender = computed(() => {
-  return props.blocks.length === 1;
+  return props.items.length === 1;
 });
 const block = computed(() => {
-  if (props.blocks.length === 1) {
-    return props.blocks[0] ?? null;
+  if (props.items.length === 1) {
+    return props.items[0] ?? null;
   }
   return null;
 });
@@ -103,7 +55,7 @@ const emptyBlockFields = computed(() => {
     return [];
   }
   const uuid2 = block.value.uuid;
-  return types.fieldConfig.forEntityTypeAndBundle(block.value.entityType, block.value.itemBundle).map((field) => {
+  return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, block.value.bundle).map((field) => {
     const key = getFieldKey(uuid2, field.name);
     const count = state.getFieldBlockCount(key);
     return {
@@ -123,17 +75,17 @@ const bundleLabel = computed(() => {
   if (!block.value) {
     return "";
   }
-  return types.getBlockBundleDefinition(block.value.itemBundle)?.label || block.value.itemBundle;
+  return types.getBlockBundleDefinition(block.value.bundle)?.label || block.value.bundle;
 });
 const allowedBundlesForField = computed(() => {
   if (!block.value) {
     return [];
   }
-  const blockData = dom.findBlock(block.value.uuid);
+  const blockData = blocks.getBlock(block.value.uuid);
   if (!blockData) {
     return [];
   }
-  const field = dom.findField(blockData.hostUuid, blockData.hostFieldName);
+  const field = fields.find(blockData.host.uuid, blockData.host.fieldName);
   if (!field) {
     return [];
   }
@@ -171,9 +123,9 @@ const fieldTooltips = computed(() => {
     return [];
   }
   return emptyBlockFields.value.map((field) => {
-    const fieldConfig = types.fieldConfig.forEntityTypeAndBundle(block.value.entityType, block.value.itemBundle).find((f) => f.name === field.name);
+    const fieldConfig = types.fieldConfig.forEntityTypeAndBundle(itemEntityType, block.value.bundle).find((f) => f.name === field.name);
     const fieldLabel = fieldConfig?.label || field.name;
-    const fieldElement = dom.findField(block.value.uuid, field.name);
+    const fieldElement = fields.find(block.value.uuid, field.name);
     if (fieldElement) {
       const allowedBundles = fieldElement.allowedBundles.filter(
         (bundle) => !isInternalBundle(bundle)
@@ -195,8 +147,8 @@ const fieldTooltips = computed(() => {
     ).replace("@parentBundle", bundleLabel.value).replace("@fieldLabel", fieldLabel);
   });
 });
-watch(emptyBlockFields, (fields) => {
-  const neededCount = fields.length;
+watch(emptyBlockFields, (fields2) => {
+  const neededCount = fields2.length;
   while (fieldButtonSlots.value.length < neededCount) {
     fieldButtonSlots.value.push({ fieldKey: void 0 });
   }
@@ -205,8 +157,8 @@ watch(emptyBlockFields, (fields) => {
     if (!slot) {
       continue;
     }
-    if (i < fields.length) {
-      const field = fields[i];
+    if (i < fields2.length) {
+      const field = fields2[i];
       slot.fieldKey = field?.key;
     } else {
       slot.fieldKey = void 0;
@@ -241,24 +193,19 @@ function onSelectAction(id) {
   closeOverlay();
 }
 const cache = /* @__PURE__ */ new Map();
-const canShowBeforeAfter = ref(false);
-const beforeAfterStyle = computed(() => ({
-  visibility: canShowBeforeAfter.value ? "visible" : "hidden"
-}));
 function clearAllCache() {
   cache.clear();
-  canShowBeforeAfter.value = false;
   containerStyle.value = { visibility: "hidden" };
   orientationClass.value = "";
 }
 function updateCache(uuid2) {
   let cachedState = cache.get(uuid2);
   if (!cachedState) {
-    const block2 = dom.findBlock(uuid2);
+    const block2 = blocks.getBlock(uuid2);
     if (!block2) {
       return;
     }
-    const field = dom.findField(block2.hostUuid, block2.hostFieldName);
+    const field = fields.find(block2.host.uuid, block2.host.fieldName);
     if (!field) {
       return;
     }
@@ -284,7 +231,6 @@ function updateCache(uuid2) {
     };
     cache.set(uuid2, cachedState);
   }
-  canShowBeforeAfter.value = cachedState.canShowBeforeAfter;
   orientationClass.value = cachedState.orientation === "vertical" ? "bk-is-vertical" : "bk-is-horizontal";
 }
 watch(
@@ -292,7 +238,6 @@ watch(
   async (newUuid) => {
     closeOverlay();
     if (!shouldRender.value) {
-      canShowBeforeAfter.value = false;
       containerStyle.value = { visibility: "hidden" };
       return;
     }
@@ -303,7 +248,7 @@ watch(
   },
   { immediate: true }
 );
-onBlokkliEvent("canvas:draw", () => {
+onBlokkliEvent("animationFrame:after", () => {
   if (!shouldRender.value || !uuid.value) {
     containerStyle.value = { visibility: "hidden" };
     containerRect.value = null;
@@ -337,8 +282,10 @@ onBlokkliEvent("state:reloaded", () => {
     updateCache(uuid.value);
   }
 });
-function setAddData(key, field, anchorEl, label, preceedingUuid) {
-  const allowedBundles = field.allowedBundles;
+function setAddData(key, field, label, preceedingUuid, anchorEl, anchorCoordinates) {
+  const allowedBundles = field.allowedBundles.filter(
+    (bundle) => !isInternalBundle(bundle)
+  );
   if (allowedBundles.length === 0) {
     return;
   }
@@ -362,6 +309,7 @@ function setAddData(key, field, anchorEl, label, preceedingUuid) {
     preceedingUuid,
     host,
     anchorEl,
+    anchorCoordinates,
     label,
     field
   };
@@ -382,34 +330,9 @@ function getPreceedingUuidBefore(uuid2, field) {
   }
   return void 0;
 }
-function onClickBefore() {
-  if (addData.value?.key === "before") {
-    return closeOverlay();
-  }
-  if (!uuid.value) {
-    return;
-  }
-  const cachedState = cache.get(uuid.value);
-  if (!cachedState) {
-    return;
-  }
-  const block2 = dom.findBlock(uuid.value);
-  if (!block2) {
-    return;
-  }
-  const field = dom.findField(block2.hostUuid, block2.hostFieldName);
-  if (!field) {
-    return;
-  }
-  const preceedingUuid = getPreceedingUuidBefore(uuid.value, field);
-  if (!beforeEL.value) {
-    return;
-  }
-  const label = beforeTooltip.value.replace("...", "");
-  setAddData("before", field, beforeEL.value, label, preceedingUuid);
-}
-function onClickAfter() {
-  if (addData.value?.key === "after") {
+function onRendererToggle(data) {
+  const key = data.position;
+  if (addData.value?.key === key) {
     return closeOverlay();
   }
   if (!uuid.value) {
@@ -419,41 +342,46 @@ function onClickAfter() {
   if (!cachedState) {
     return;
   }
-  const block2 = dom.findBlock(uuid.value);
+  const block2 = blocks.getBlock(uuid.value);
   if (!block2) {
     return;
   }
-  const field = dom.findField(block2.hostUuid, block2.hostFieldName);
+  const field = fields.find(block2.host.uuid, block2.host.fieldName);
   if (!field) {
     return;
   }
-  if (!afterEl.value) {
-    return;
-  }
   if (!field.allowedBundles.length) {
     return;
   }
-  const label = afterTooltip.value.replace("...", "");
-  setAddData("after", field, afterEl.value, label, uuid.value);
+  let preceedingUuid;
+  let label;
+  if (data.position === "before") {
+    preceedingUuid = getPreceedingUuidBefore(uuid.value, field);
+    label = beforeTooltip.value.replace("...", "");
+  } else {
+    preceedingUuid = uuid.value;
+    label = afterTooltip.value.replace("...", "");
+  }
+  setAddData(key, field, label, preceedingUuid, void 0, data.coordinates);
 }
-function onClickEmptyField(index, element) {
-  const key = "field:" + index;
+function onRendererToggleField(data) {
+  const key = "field:" + data.index;
   if (addData.value?.key === key) {
     return closeOverlay();
   }
   if (!uuid.value) {
     return;
   }
-  const emptyField = emptyBlockFields.value[index];
+  const emptyField = emptyBlockFields.value[data.index];
   if (!emptyField) {
     return;
   }
-  const field = dom.findField(uuid.value, emptyField.name);
+  const field = fields.find(uuid.value, emptyField.name);
   if (!field) {
     return;
   }
-  const label = (fieldTooltips.value[index] || "").replace("...", "");
-  setAddData(key, field, element, label);
+  const label = (fieldTooltips.value[data.index] || "").replace("...", "");
+  setAddData(key, field, label, void 0, void 0, data.coordinates);
 }
-onBlokkliEvent("mouse:up", closeOverlay);
+onBlokkliEvent("dragging:start", closeOverlay);
 </script>

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

@@ -1,6 +1,6 @@
-import type { DraggableExistingBlock } from '#blokkli/types';
+import type { RenderedFieldListItem } from '#blokkli/types';
 type __VLS_Props = {
-    blocks: DraggableExistingBlock[];
+    items: RenderedFieldListItem[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -4,7 +4,8 @@
 
 <script setup>
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { useBlokkli, onBeforeUnmount, computed } from "#imports";
+import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
+import { useBlokkli, computed } from "#imports";
 import {
   setBuffersAndAttributes,
   drawBufferInfo,
@@ -17,9 +18,10 @@ import { useTransitionedValue } from "#blokkli/helpers/useTransitionedValue";
 import { toShaderColor } from "#blokkli/helpers";
 const props = defineProps({
   blocks: { type: Array, required: true },
-  gl: { type: null, required: true }
+  gl: { type: null, required: true },
+  hasHostSelected: { type: Boolean, required: true }
 });
-const { animation, theme, dom, ui } = useBlokkli();
+const { animation, theme, dom, ui, state } = useBlokkli();
 const programInfo = animation.registerProgram("selection", props.gl, [vs, fs]);
 class SelectionRectangleBufferCollector extends RectangleBufferCollector {
   uuids = [];
@@ -33,11 +35,28 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector {
         return uuid + "no_rect";
       }
       return uuid + rect.time;
-    }).join("_");
+    }).join("_") + "_host_" + props.hasHostSelected;
     const hasChanged = force || this.prevKey !== key;
     if (hasChanged) {
       this.reset();
       this.lastCount = 0;
+      if (props.hasHostSelected) {
+        this.addRectangle(
+          {
+            id: "host",
+            height: ui.artboardSize.value.height,
+            width: ui.artboardSize.value.width,
+            x: 0,
+            y: 0,
+            radius: [0, 0, 0, 0],
+            isInverted: false,
+            isFromLibrary: false
+          },
+          3
+          // Type 3 = host selection
+        );
+        this.lastCount++;
+      }
       for (let i = 0; i < props.blocks.length; i++) {
         const block = props.blocks[i];
         if (this.added.has(block.uuid)) {
@@ -49,7 +68,14 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector {
         if (!rect || !el) {
           continue;
         }
-        const style = theme.getDraggableStyle(el);
+        const style = ui.lowPerformanceMode.value ? null : theme.getDraggableStyle(el);
+        const isFromLibrary = state.fromLibraryUuids.value.includes(block.uuid);
+        let type = 0;
+        if (isFromLibrary) {
+          type = 2;
+        } else if (style?.isInverted) {
+          type = 1;
+        }
         this.addRectangle(
           {
             id: block.uuid,
@@ -57,10 +83,11 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector {
             width: rect.width,
             x: rect.x,
             y: rect.y,
-            radius: style.radius,
-            isInverted: style.isInverted
+            radius: style?.radius ?? [0, 0, 0, 0],
+            isInverted: !!style?.isInverted,
+            isFromLibrary
           },
-          style.isInverted ? 1 : 0
+          type
         );
         this.lastCount++;
       }
@@ -76,40 +103,75 @@ const collector = new SelectionRectangleBufferCollector(props.gl);
 const hasTransformingStyle = computed(
   () => ui.hasTransformOverlayOpen.value || ui.isTransforming.value
 );
+const selectionColorOverride = computed(() => {
+  const color = ui.selectionColor.value;
+  if (!color) {
+    return null;
+  }
+  if (color === "mono") {
+    return toShaderColor(theme.getColor(color, "500"));
+  } else if (color === "accent") {
+    return toShaderColor(theme.getColor(color, "700"));
+  }
+  return toShaderColor(theme.getColor(color, "normal"));
+});
 const getColorDefault = useTransitionedValue(() => {
+  if (selectionColorOverride.value) {
+    return selectionColorOverride.value;
+  }
   if (hasTransformingStyle.value) {
     return toShaderColor(theme.orange.value.normal);
   }
   return toShaderColor(theme.accent.value[600]);
 });
 const getColorInverted = useTransitionedValue(() => {
+  if (selectionColorOverride.value) {
+    return selectionColorOverride.value;
+  }
   if (hasTransformingStyle.value) {
     return toShaderColor(theme.orange.value.normal);
   }
   return toShaderColor([255, 255, 255]);
 });
+const getColorLibrary = useTransitionedValue(() => {
+  if (selectionColorOverride.value) {
+    return selectionColorOverride.value;
+  }
+  if (hasTransformingStyle.value) {
+    return toShaderColor(theme.orange.value.normal);
+  }
+  return toShaderColor(theme.lime.value.normal);
+});
+const getColorHost = useTransitionedValue(() => {
+  return toShaderColor(theme.mono.value[700]);
+});
 const getTransforming = useTransitionedValue(() => {
   return ui.isTransforming.value ? 1 : 0;
 });
-onBlokkliEvent("canvas:draw", (e) => {
-  props.gl.useProgram(programInfo.program);
-  const { info, hasChanged } = collector.getBufferInfo();
-  if (!info) {
-    return;
+defineRenderer("selection-overlay", {
+  zIndex: 100,
+  render: (ctx) => {
+    props.gl.useProgram(programInfo.program);
+    const { info } = collector.getBufferInfo();
+    if (!info) {
+      return;
+    }
+    setUniforms(programInfo, {
+      u_color_default: getColorDefault(),
+      u_color_inverted: getColorInverted(),
+      u_color_library: getColorLibrary(),
+      u_color_host: getColorHost(),
+      u_artboard_size: [
+        ui.artboardSize.value.width,
+        ui.artboardSize.value.height
+      ],
+      u_is_transforming: getTransforming(),
+      u_time: ctx.time
+    });
+    animation.setSharedUniforms(props.gl, programInfo);
+    setBuffersAndAttributes(props.gl, programInfo, info);
+    drawBufferInfo(props.gl, info, props.gl.TRIANGLES);
   }
-  setUniforms(programInfo, {
-    u_color_default: getColorDefault(),
-    u_color_inverted: getColorInverted(),
-    u_artboard_size: [
-      ui.artboardSize.value.width,
-      ui.artboardSize.value.height
-    ],
-    u_is_transforming: getTransforming(),
-    u_time: e.time
-  });
-  animation.setSharedUniforms(props.gl, programInfo);
-  setBuffersAndAttributes(props.gl, programInfo, info);
-  drawBufferInfo(props.gl, info, props.gl.TRIANGLES);
 });
 onBlokkliEvent("ui:resized", function() {
   collector.reset();
@@ -117,9 +179,6 @@ onBlokkliEvent("ui:resized", function() {
 onBlokkliEvent("state:reloaded", function() {
   collector.reset();
 });
-onBeforeUnmount(() => {
-  props.gl.clear(props.gl.COLOR_BUFFER_BIT);
-});
 </script>
 
 <script>

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

@@ -1,9 +1,11 @@
-import type { DraggableExistingBlock } from '#blokkli/types';
+import type { RenderedFieldListItem } from '#blokkli/types';
 declare const _default: import("vue").DefineComponent<{
-    blocks: DraggableExistingBlock[];
+    blocks: RenderedFieldListItem[];
     gl: WebGLRenderingContext;
+    hasHostSelected: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    blocks: DraggableExistingBlock[];
+    blocks: RenderedFieldListItem[];
     gl: WebGLRenderingContext;
+    hasHostSelected: boolean;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -18,6 +18,8 @@ uniform float u_offset_y;
 uniform vec2 u_resolution;
 uniform vec3 u_color_default;
 uniform vec3 u_color_inverted;
+uniform vec3 u_color_library;
+uniform vec3 u_color_host;
 
 // The transformed quad for the fragment shader.
 varying vec4 v_quad;
@@ -79,8 +81,15 @@ void main() {
 
   v_rect_width = adjusted_quad.x;
 
-  // Set color and other varying variables
-  v_color = a_rect_type > 0.5 ? u_color_inverted : u_color_default;
+  // Set color based on type: 0=default, 1=inverted, 2=library, 3=host
+  v_color = u_color_default;
+  if (a_rect_type > 2.5) {
+    v_color = u_color_host;
+  } else if (a_rect_type > 1.5) {
+    v_color = u_color_library;
+  } else if (a_rect_type > 0.5) {
+    v_color = u_color_inverted;
+  }
   v_rect_radius = a_rect_radius * u_dpi;
   v_thickness = thickness;
   v_rect_id = a_rect_id;

package/dist/runtime/components/Edit/Features/Selection/OverlayFallback/index.vue

@@ -22,11 +22,11 @@ import { useBlokkli, computed } from "#imports";
 const props = defineProps({
   uuids: { type: Array, required: true }
 });
-const { ui, dom } = useBlokkli();
+const { ui, dom, blocks } = useBlokkli();
 const artboard = ui.artboardElement();
 const items = computed(() => {
   return props.uuids.map((uuid) => {
-    const block = dom.findBlock(uuid);
+    const block = blocks.getBlock(uuid);
     if (!block) {
       return null;
     }