@blokkli/editor 2.0.0-alpha.13 → 2.0.0-alpha.15

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

@@ -0,0 +1,459 @@
+<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">
+    <BlokkliTransition name="caret-tooltip">
+      <Overlay
+        v-if="addData"
+        :key="addData.key"
+        :bundles="addData.allowedBundles"
+        :anchor-el="addData.anchorEl"
+        :label="addData.label"
+        @select="onSelectBundle"
+        @close="closeOverlay"
+        @action="onSelectAction"
+      />
+    </BlokkliTransition>
+  </Teleport>
+</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 {
+  getChildrenOrientation,
+  getGapSize,
+  MIN_GAP,
+  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";
+const props = defineProps({
+  blocks: { 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 shouldRender = computed(() => {
+  return props.blocks.length === 1;
+});
+const block = computed(() => {
+  if (props.blocks.length === 1) {
+    return props.blocks[0] ?? null;
+  }
+  return null;
+});
+const uuid = computed(() => {
+  return block.value?.uuid ?? null;
+});
+const emptyBlockFields = computed(() => {
+  if (!block.value) {
+    return [];
+  }
+  const uuid2 = block.value.uuid;
+  return types.fieldConfig.forEntityTypeAndBundle(block.value.entityType, block.value.itemBundle).map((field) => {
+    const key = getFieldKey(uuid2, field.name);
+    const count = state.getFieldBlockCount(key);
+    return {
+      key,
+      count,
+      name: field.name
+    };
+  }).filter((v) => {
+    return v.count === 0;
+  });
+});
+const containerStyle = ref({ visibility: "hidden" });
+const orientationClass = ref("");
+const containerRect = ref(null);
+const fieldButtonSlots = ref([]);
+const bundleLabel = computed(() => {
+  if (!block.value) {
+    return "";
+  }
+  return types.getBlockBundleDefinition(block.value.itemBundle)?.label || block.value.itemBundle;
+});
+const allowedBundlesForField = computed(() => {
+  if (!block.value) {
+    return [];
+  }
+  const blockData = dom.findBlock(block.value.uuid);
+  if (!blockData) {
+    return [];
+  }
+  const field = dom.findField(blockData.hostUuid, blockData.hostFieldName);
+  if (!field) {
+    return [];
+  }
+  return field.allowedBundles.filter((bundle) => !isInternalBundle(bundle));
+});
+const singleAllowedBundleLabel = computed(() => {
+  if (allowedBundlesForField.value.length === 1) {
+    const bundle = allowedBundlesForField.value[0];
+    if (bundle) {
+      return types.getBlockBundleDefinition(bundle)?.label || bundle;
+    }
+  }
+  return null;
+});
+const beforeTooltip = computed(() => {
+  if (singleAllowedBundleLabel.value) {
+    return $t("addButtonBundleBefore", 'Add "@bundle" before').replace(
+      "@bundle",
+      singleAllowedBundleLabel.value
+    );
+  }
+  return $t("addButtonBeforeBundle", "Add before...");
+});
+const afterTooltip = computed(() => {
+  if (singleAllowedBundleLabel.value) {
+    return $t("addButtonBundleAfter", 'Add "@bundle" after').replace(
+      "@bundle",
+      singleAllowedBundleLabel.value
+    );
+  }
+  return $t("addButtonAfterBundle", "Add after...");
+});
+const fieldTooltips = computed(() => {
+  if (!block.value || !bundleLabel.value) {
+    return [];
+  }
+  return emptyBlockFields.value.map((field) => {
+    const fieldConfig = types.fieldConfig.forEntityTypeAndBundle(block.value.entityType, block.value.itemBundle).find((f) => f.name === field.name);
+    const fieldLabel = fieldConfig?.label || field.name;
+    const fieldElement = dom.findField(block.value.uuid, field.name);
+    if (fieldElement) {
+      const allowedBundles = fieldElement.allowedBundles.filter(
+        (bundle) => !isInternalBundle(bundle)
+      );
+      if (allowedBundles.length === 1) {
+        const bundle = allowedBundles[0];
+        if (bundle) {
+          const singleBundleLabel = types.getBlockBundleDefinition(bundle)?.label || bundle;
+          return $t(
+            "addButtonBundleInsideField",
+            'Add "@bundle" inside @parentBundle \xBB @fieldLabel'
+          ).replace("@bundle", singleBundleLabel).replace("@parentBundle", bundleLabel.value).replace("@fieldLabel", fieldLabel);
+        }
+      }
+    }
+    return $t(
+      "addButtonInsideField",
+      "Add inside @parentBundle \xBB @fieldLabel..."
+    ).replace("@parentBundle", bundleLabel.value).replace("@fieldLabel", fieldLabel);
+  });
+});
+watch(emptyBlockFields, (fields) => {
+  const neededCount = fields.length;
+  while (fieldButtonSlots.value.length < neededCount) {
+    fieldButtonSlots.value.push({ fieldKey: void 0 });
+  }
+  for (let i = 0; i < fieldButtonSlots.value.length; i++) {
+    const slot = fieldButtonSlots.value[i];
+    if (!slot) {
+      continue;
+    }
+    if (i < fields.length) {
+      const field = fields[i];
+      slot.fieldKey = field?.key;
+    } else {
+      slot.fieldKey = void 0;
+    }
+  }
+});
+const addData = ref(null);
+function closeOverlay() {
+  addData.value = null;
+}
+function onSelectBundle(bundle) {
+  if (!addData.value) {
+    return;
+  }
+  eventBus.emit("block:append", {
+    bundle,
+    host: { ...addData.value.host },
+    afterUuid: addData.value.preceedingUuid
+  });
+  closeOverlay();
+}
+function onSelectAction(id) {
+  if (!addData.value) {
+    return;
+  }
+  eventBus.emit("action:placed", {
+    id,
+    field: addData.value.field,
+    preceedingUuid: addData.value.preceedingUuid,
+    host: { ...addData.value.host }
+  });
+  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);
+    if (!block2) {
+      return;
+    }
+    const field = dom.findField(block2.hostUuid, block2.hostFieldName);
+    if (!field) {
+      return;
+    }
+    const orientation = getChildrenOrientation(field.element);
+    const gap = Math.max(getGapSize(orientation, field.element), MIN_GAP);
+    const fieldChildren = [...field.element.children];
+    const currentCount = state.getFieldBlockCount(field.key);
+    const canShow = determineCanAddChildren(
+      field,
+      fieldChildren,
+      [],
+      // Not moving any blocks, adding a new one
+      currentCount,
+      1,
+      // Adding 1 new block
+      []
+      // Don't know which bundle will be added
+    );
+    cachedState = {
+      orientation,
+      gap,
+      canShowBeforeAfter: canShow
+    };
+    cache.set(uuid2, cachedState);
+  }
+  canShowBeforeAfter.value = cachedState.canShowBeforeAfter;
+  orientationClass.value = cachedState.orientation === "vertical" ? "bk-is-vertical" : "bk-is-horizontal";
+}
+watch(
+  uuid,
+  async (newUuid) => {
+    closeOverlay();
+    if (!shouldRender.value) {
+      canShowBeforeAfter.value = false;
+      containerStyle.value = { visibility: "hidden" };
+      return;
+    }
+    if (newUuid) {
+      await renderCycle();
+      updateCache(newUuid);
+    }
+  },
+  { immediate: true }
+);
+onBlokkliEvent("canvas:draw", () => {
+  if (!shouldRender.value || !uuid.value) {
+    containerStyle.value = { visibility: "hidden" };
+    containerRect.value = null;
+    return;
+  }
+  const cachedState = cache.get(uuid.value);
+  if (!cachedState) {
+    return;
+  }
+  const blockRect = dom.getBlockRect(uuid.value);
+  if (!blockRect) {
+    return;
+  }
+  if (blockRect.width === 0) {
+    containerStyle.value = { visibility: "hidden" };
+    containerRect.value = null;
+    return;
+  }
+  containerStyle.value = {
+    transform: `translate(${blockRect.x}px, ${blockRect.y}px)`,
+    width: `${blockRect.width}px`,
+    height: `${blockRect.height}px`,
+    "--gap": `${cachedState.gap}px`,
+    visibility: "visible"
+  };
+  containerRect.value = { x: blockRect.x, y: blockRect.y };
+});
+onBlokkliEvent("state:reloaded", () => {
+  clearAllCache();
+  if (shouldRender.value && uuid.value) {
+    updateCache(uuid.value);
+  }
+});
+function setAddData(key, field, anchorEl, label, preceedingUuid) {
+  const allowedBundles = field.allowedBundles;
+  if (allowedBundles.length === 0) {
+    return;
+  }
+  const host = {
+    type: field.hostEntityType,
+    uuid: field.hostEntityUuid,
+    fieldName: field.name
+  };
+  if (allowedBundles.length === 1) {
+    const bundle = allowedBundles[0];
+    eventBus.emit("block:append", {
+      bundle,
+      host,
+      afterUuid: preceedingUuid
+    });
+    return;
+  }
+  addData.value = {
+    key,
+    allowedBundles,
+    preceedingUuid,
+    host,
+    anchorEl,
+    label,
+    field
+  };
+}
+function getPreceedingUuidBefore(uuid2, field) {
+  const children = [...field.element.children];
+  let prevUuid = void 0;
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    if (!child) {
+      continue;
+    }
+    const childUuid = child.dataset.uuid;
+    if (childUuid === uuid2) {
+      return prevUuid;
+    }
+    prevUuid = childUuid;
+  }
+  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") {
+    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;
+  }
+  if (!afterEl.value) {
+    return;
+  }
+  if (!field.allowedBundles.length) {
+    return;
+  }
+  const label = afterTooltip.value.replace("...", "");
+  setAddData("after", field, afterEl.value, label, uuid.value);
+}
+function onClickEmptyField(index, element) {
+  const key = "field:" + index;
+  if (addData.value?.key === key) {
+    return closeOverlay();
+  }
+  if (!uuid.value) {
+    return;
+  }
+  const emptyField = emptyBlockFields.value[index];
+  if (!emptyField) {
+    return;
+  }
+  const field = dom.findField(uuid.value, emptyField.name);
+  if (!field) {
+    return;
+  }
+  const label = (fieldTooltips.value[index] || "").replace("...", "");
+  setAddData(key, field, element, label);
+}
+onBlokkliEvent("mouse:up", closeOverlay);
+</script>

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

@@ -0,0 +1,6 @@
+import type { DraggableExistingBlock } from '#blokkli/types';
+type __VLS_Props = {
+    blocks: DraggableExistingBlock[];
+};
+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/fragment.glsl

@@ -1,4 +1,5 @@
-precision mediump float;
+precision highp float;
+
 varying vec4 v_quad;
 varying vec3 v_color;
 varying vec4 v_rect_radius;
@@ -80,9 +81,10 @@ vec4 drawBox(float thickness, vec4 bg, vec4 fill, vec4 border, float offset) {
     (sin(u_time / 270.0 - v_rect_id + offset) + 1.0) / 2.0
   );
 
-  if (u_is_transforming >= 0.5) {
-    borderThickness = (t * 0.7 + 0.5) * borderThickness;
-  }
+  // Smoothly transition borderThickness animation
+  float animatedThickness = (t * 0.7 + 0.5) * borderThickness;
+  borderThickness = mix(borderThickness, animatedThickness, u_is_transforming);
+
   vec2 size = v_rect_size + borderThickness * 2.0 * v_transition;
   float u_edgeSoftness = 1.0 + v_transition;
   vec4 radius = v_rect_radius * u_scale + vec4(borderThickness);
@@ -100,12 +102,15 @@ vec4 drawBox(float thickness, vec4 bg, vec4 fill, vec4 border, float offset) {
   float borderAlpha =
     1.0 - smoothstep(-u_borderSoftness, 0.0, abs(mainDist) - borderThickness);
 
+  // Smoothly transition stripe pattern
   vec4 stripedFill = vec4(1.0, 1.0, 1.0, 0.0);
-  if (u_is_transforming >= 0.5) {
-    stripedFill = fill;
-    stripedFill.a = getStripePattern(posRelativeToQuad, u_time);
-    borderAlpha *= t + 0.6;
-  }
+  vec4 animatedStripedFill = fill;
+  animatedStripedFill.a = getStripePattern(posRelativeToQuad, u_time);
+  stripedFill = mix(stripedFill, animatedStripedFill, u_is_transforming);
+
+  // Smoothly transition borderAlpha modification
+  float animatedBorderAlpha = borderAlpha * (t + 0.6);
+  borderAlpha = mix(borderAlpha, animatedBorderAlpha, u_is_transforming);
 
   vec4 res_with_fill = mix(bg, stripedFill, fillAlpha * stripedFill.a);
   return mix(res_with_fill, border, borderAlpha * border.a);

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

@@ -4,7 +4,7 @@
 
 <script setup>
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { useBlokkli, onBeforeUnmount } from "#imports";
+import { useBlokkli, onBeforeUnmount, computed } from "#imports";
 import {
   setBuffersAndAttributes,
   drawBufferInfo,
@@ -13,6 +13,7 @@ import {
 import vs from "./vertex.glsl?raw";
 import fs from "./fragment.glsl?raw";
 import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
+import { useTransitionedValue } from "#blokkli/helpers/useTransitionedValue";
 import { toShaderColor } from "#blokkli/helpers";
 const props = defineProps({
   blocks: { type: Array, required: true },
@@ -72,22 +73,42 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector {
   }
 }
 const collector = new SelectionRectangleBufferCollector(props.gl);
+const hasTransformingStyle = computed(
+  () => ui.hasTransformOverlayOpen.value || ui.isTransforming.value
+);
+const getColorDefault = useTransitionedValue(() => {
+  if (hasTransformingStyle.value) {
+    return toShaderColor(theme.orange.value.normal);
+  }
+  return toShaderColor(theme.accent.value[600]);
+});
+const getColorInverted = useTransitionedValue(() => {
+  if (hasTransformingStyle.value) {
+    return toShaderColor(theme.orange.value.normal);
+  }
+  return toShaderColor([255, 255, 255]);
+});
+const getTransforming = useTransitionedValue(() => {
+  return ui.isTransforming.value ? 1 : 0;
+});
 onBlokkliEvent("canvas:draw", (e) => {
   props.gl.useProgram(programInfo.program);
-  setUniforms(programInfo, {
-    u_color_default: toShaderColor(theme.accent.value[600]),
-    u_color_inverted: [255, 255, 255],
-    u_is_transforming: ui.isTransforming.value ? 1 : 0,
-    u_time: e.time
-  });
-  animation.setSharedUniforms(props.gl, programInfo);
   const { info, hasChanged } = collector.getBufferInfo();
   if (!info) {
     return;
   }
-  if (hasChanged) {
-    setBuffersAndAttributes(props.gl, programInfo, info);
-  }
+  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() {

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

@@ -1,4 +1,4 @@
-precision mediump float;
+precision highp float;
 
 // [x, y] position.
 attribute vec2 a_position;

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

@@ -1,16 +1,41 @@
 <template>
   <Overlay
-    v-if="isVisible && gl"
+    v-if="isVisible && gl && animation.webglEnabled.value"
     :blocks="selection.blocks.value"
     :uuids="selection.uuids.value"
     :gl="gl"
   />
   <OverlayFallback v-if="isVisible && !gl" :uuids="selection.uuids.value" />
+  <Teleport :to="artboardElement">
+    <div
+      class="bk bk-host-selection-overlay"
+      :style="{
+  visibility: selection.hasHostSelected.value ? 'visible' : 'hidden'
+}"
+    />
+  </Teleport>
+
+  <PluginItemDropdown
+    v-if="itemDropdownItems.length"
+    id="selection"
+    :title="$t('selectionActionGroupTitle', 'Selection')"
+    :enabled="itemDropdownEnabled"
+    :items="itemDropdownItems"
+    icon="selection"
+    weight="200"
+    @select="onSelectDropdownItem"
+  />
+
+  <SelectionAddButtons
+    v-if="state.editMode.value === 'editing'"
+    :blocks="selection.blocks.value"
+  />
 </template>
 
 <script setup>
 import Overlay from "./Overlay/index.vue";
 import OverlayFallback from "./OverlayFallback/index.vue";
+import SelectionAddButtons from "./AddButtons/index.vue";
 import {
   calculateIntersection,
   getBounds,
@@ -18,6 +43,7 @@ import {
   originatesFromTextInput
 } from "#blokkli/helpers";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { PluginItemDropdown } from "#blokkli/plugins";
 import {
   computed,
   useBlokkli,
@@ -31,13 +57,55 @@ defineBlokkliFeature({
   label: "Selection",
   description: "Renders an overlay that highlights the selected blocks."
 });
-const { selection, ui, eventBus, animation, dom, tour } = useBlokkli();
+const { selection, ui, eventBus, animation, dom, tour, $t, types, state } = useBlokkli();
+const selectedBundle = computed(() => {
+  let bundle = "";
+  for (let i = 0; i < selection.blocks.value.length; i++) {
+    const block = selection.blocks.value[i];
+    if (!block) {
+      return null;
+    }
+    if (bundle && bundle !== block.itemBundle) {
+      return null;
+    }
+    bundle = block.itemBundle;
+  }
+  return bundle || null;
+});
+const itemDropdownEnabled = computed(() => true);
+const itemDropdownItems = computed(() => {
+  if (selectedBundle.value) {
+    const label = types.getBlockBundleDefinition(selectedBundle.value)?.label ?? selectedBundle.value;
+    return [
+      {
+        id: "select-all-of-bundle",
+        label: $t("selectAllOfBundle", 'Select all "@bundle" blocks').replace(
+          "@bundle",
+          label
+        )
+      }
+    ];
+  }
+  return [];
+});
+function onSelectDropdownItem(item) {
+  if (item.id === "select-all-of-bundle" && selectedBundle.value) {
+    const uuids = state.getAllUuids(selectedBundle.value);
+    eventBus.emit("select", uuids);
+  }
+}
+const artboardElement = ui.artboardElement();
 const gl = animation.gl();
 const hasSelectedOnce = ref(false);
-const stop = watch(selection.uuids, function() {
-  hasSelectedOnce.value = true;
-  stop();
-});
+const stop = watch(
+  selection.hasAnythingSelected,
+  function(hasAnythingSelected) {
+    if (hasAnythingSelected) {
+      hasSelectedOnce.value = true;
+    }
+    stop();
+  }
+);
 const isVisible = computed(
   () => dom.isReady.value && !selection.isMultiSelecting.value && !selection.editableActive.value && !selection.isChangingOptions.value && !selection.isDragging.value && !ui.isAnimating.value && hasSelectedOnce.value
 );
@@ -170,8 +238,9 @@ onBlokkliEvent("keyPressed", (e) => {
   }
   if (e.code === "Escape") {
     eventBus.emit("select:end", []);
+    eventBus.emit("select:host:unselect");
   } else if (e.code === "Tab") {
-    if (tour.isTouring.value) {
+    if (tour.isTouring.value || ui.hasDialogOpen.value) {
       return;
     }
     e.originalEvent.preventDefault();