@blokkli/editor 2.0.0-alpha.28 → 2.0.0-alpha.29

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

@@ -0,0 +1,279 @@
+<template>
+  <div />
+</template>
+
+<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";
+import { toShaderColor } from "#blokkli/editor/helpers/color";
+import { defineRenderer, onBlokkliEvent, useTransitionedValue } from "#blokkli/editor/composables";
+const props = defineProps({
+  blocks: { type: Array, required: true },
+  hasHostSelected: { type: Boolean, required: true }
+});
+const { animation, theme, dom, ui, state } = useBlokkli();
+class SelectionRectangleBufferCollector extends RectangleBufferCollector {
+  uuids = [];
+  lastCount = 0;
+  prevKey = "";
+  getBufferInfo(gl, force) {
+    const key = props.blocks.map((block) => {
+      const uuid = block.uuid;
+      const rect = dom.getBlockRect(uuid);
+      if (!rect) {
+        return uuid + "no_rect";
+      }
+      return uuid + rect.time;
+    }).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)) {
+          continue;
+        }
+        this.added.add(block.uuid);
+        const el = dom.getDragElement(block);
+        const rect = dom.getBlockRect(block.uuid);
+        if (!rect || !el) {
+          continue;
+        }
+        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,
+            height: rect.height,
+            width: rect.width,
+            x: rect.x,
+            y: rect.y,
+            radius: style?.radius ?? [0, 0, 0, 0],
+            isInverted: !!style?.isInverted,
+            isFromLibrary
+          },
+          type
+        );
+        this.lastCount++;
+      }
+      this.prevKey = key;
+    }
+    if (hasChanged && gl) {
+      this.bufferInfo = this.createBufferInfo(gl);
+    }
+    return { info: this.bufferInfo, hasChanged };
+  }
+}
+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 theme.getColor(color, "500");
+  } else if (color === "accent") {
+    return theme.getColor(color, "700");
+  }
+  return theme.getColor(color, "normal");
+});
+const getColorDefault = useTransitionedValue(() => {
+  if (selectionColorOverride.value) {
+    return selectionColorOverride.value;
+  }
+  if (hasTransformingStyle.value) {
+    return theme.orange.value.normal;
+  }
+  return theme.accent.value[600];
+});
+const getColorInverted = useTransitionedValue(() => {
+  if (selectionColorOverride.value) {
+    return selectionColorOverride.value;
+  }
+  if (hasTransformingStyle.value) {
+    return theme.orange.value.normal;
+  }
+  return [255, 255, 255];
+});
+const getColorLibrary = useTransitionedValue(() => {
+  if (selectionColorOverride.value) {
+    return selectionColorOverride.value;
+  }
+  if (hasTransformingStyle.value) {
+    return theme.orange.value.normal;
+  }
+  return theme.lime.value.normal;
+});
+const getColorHost = useTransitionedValue(() => {
+  return theme.mono.value[700];
+});
+const getTransforming = useTransitionedValue(() => {
+  return ui.isTransforming.value ? 1 : 0;
+});
+const { collector } = defineRenderer("selection-overlay", {
+  zIndex: 100,
+  collector: () => new SelectionRectangleBufferCollector(),
+  program: () => ({ shaders: [vs, fs] }),
+  render: (ctx, gl, program) => {
+    gl.useProgram(program.program);
+    const { info } = collector.getBufferInfo(gl);
+    if (!info) {
+      return;
+    }
+    setUniforms(program, {
+      u_color_default: toShaderColor(getColorDefault()),
+      u_color_inverted: toShaderColor(getColorInverted()),
+      u_color_library: toShaderColor(getColorLibrary()),
+      u_color_host: toShaderColor(getColorHost()),
+      u_artboard_size: [
+        ui.artboardSize.value.width,
+        ui.artboardSize.value.height
+      ],
+      u_is_transforming: getTransforming(),
+      u_opacity: ctx.changeOptionsTransition,
+      u_time: ctx.time
+    });
+    animation.setSharedUniforms(gl, program);
+    setBuffersAndAttributes(gl, program, info);
+    drawBufferInfo(gl, info, gl.TRIANGLES);
+  },
+  renderFallback: (ctx, ctx2d) => {
+    collector.getBufferInfo();
+    const rects = Object.values(collector.rects);
+    if (rects.length === 0) {
+      return;
+    }
+    ctx2d.globalAlpha = ctx.changeOptionsTransition;
+    const rgbaToCss = (rgb) => {
+      return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+    };
+    const colorDefault = rgbaToCss(getColorDefault());
+    const colorInverted = rgbaToCss(getColorInverted());
+    const colorLibrary = rgbaToCss(getColorLibrary());
+    const colorHost = rgbaToCss(getColorHost());
+    const smoothstepValue = Math.max(
+      0,
+      Math.min(1, (ctx.artboardScale - 0.3) / 0.7)
+    );
+    const thickness = (0.5 + smoothstepValue * 2.5) * ctx.dpi;
+    for (let i = 0; i < rects.length; i++) {
+      const rect = rects[i];
+      let strokeColor = colorDefault;
+      if (rect.isFromLibrary) {
+        strokeColor = colorLibrary;
+      } else if (rect.isInverted) {
+        strokeColor = colorInverted;
+      } else if (rect.id === "host") {
+        strokeColor = colorHost;
+      }
+      ctx2d.strokeStyle = strokeColor;
+      ctx2d.lineWidth = thickness;
+      const viewportX = (rect.x * ctx.artboardScale + ctx.artboardOffset.x) * ctx.dpi;
+      const viewportY = (rect.y * ctx.artboardScale + ctx.artboardOffset.y) * ctx.dpi;
+      const viewportWidth = rect.width * ctx.artboardScale * ctx.dpi;
+      const viewportHeight = rect.height * ctx.artboardScale * ctx.dpi;
+      const maxRadius = Math.min(viewportWidth, viewportHeight) / 2;
+      const rtl = Math.min(
+        rect.radius[0] * ctx.artboardScale * ctx.dpi,
+        maxRadius
+      );
+      const rtr = Math.min(
+        rect.radius[1] * ctx.artboardScale * ctx.dpi,
+        maxRadius
+      );
+      const rbr = Math.min(
+        rect.radius[2] * ctx.artboardScale * ctx.dpi,
+        maxRadius
+      );
+      const rbl = Math.min(
+        rect.radius[3] * ctx.artboardScale * ctx.dpi,
+        maxRadius
+      );
+      ctx2d.beginPath();
+      ctx2d.moveTo(viewportX + rtl, viewportY);
+      ctx2d.lineTo(viewportX + viewportWidth - rtr, viewportY);
+      if (rtr > 0) {
+        ctx2d.arcTo(
+          viewportX + viewportWidth,
+          viewportY,
+          viewportX + viewportWidth,
+          viewportY + rtr,
+          rtr
+        );
+      }
+      ctx2d.lineTo(viewportX + viewportWidth, viewportY + viewportHeight - rbr);
+      if (rbr > 0) {
+        ctx2d.arcTo(
+          viewportX + viewportWidth,
+          viewportY + viewportHeight,
+          viewportX + viewportWidth - rbr,
+          viewportY + viewportHeight,
+          rbr
+        );
+      }
+      ctx2d.lineTo(viewportX + rbl, viewportY + viewportHeight);
+      if (rbl > 0) {
+        ctx2d.arcTo(
+          viewportX,
+          viewportY + viewportHeight,
+          viewportX,
+          viewportY + viewportHeight - rbl,
+          rbl
+        );
+      }
+      ctx2d.lineTo(viewportX, viewportY + rtl);
+      if (rtl > 0) {
+        ctx2d.arcTo(viewportX, viewportY, viewportX + rtl, viewportY, rtl);
+      }
+      ctx2d.closePath();
+      ctx2d.stroke();
+    }
+    ctx2d.globalAlpha = 1;
+  }
+});
+onBlokkliEvent("ui:resized", function() {
+  collector.reset();
+});
+onBlokkliEvent("state:reloaded", function() {
+  collector.reset();
+});
+</script>
+
+<script>
+export default {
+  name: "SelectionOverlay"
+};
+</script>

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

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

package/dist/runtime/editor/features/selection/index.d.vue.ts

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

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

@@ -0,0 +1,304 @@
+<template>
+  <Renderer
+    v-if="isVisible"
+    :key="animation.renderKey.value"
+    :blocks="selection.items.value"
+    :uuids="selection.uuids.value"
+    :has-host-selected="selection.hasHostSelected.value"
+  />
+
+  <SelectionAddButtons
+    v-if="state.editMode.value === 'editing'"
+    :items="selection.items.value"
+  />
+</template>
+
+<script setup>
+import Renderer from "./Renderer/index.vue";
+import SelectionAddButtons from "./AddButtons/index.vue";
+import {
+  calculateIntersection,
+  getBounds,
+  intersects
+} from "#blokkli/editor/helpers/geometry";
+import { modulo } from "#blokkli/editor/helpers/math";
+import {
+  computed,
+  useBlokkli,
+  defineBlokkliFeature,
+  ref,
+  watch
+} from "#imports";
+import { itemEntityType } from "#blokkli-build/config";
+import { defineItemDropdownAction, onBlokkliEvent, useStateBasedCache } from "#blokkli/editor/composables";
+defineBlokkliFeature({
+  id: "selection",
+  icon: "bk_mdi_select",
+  label: "Selection",
+  description: "Renders an overlay that highlights the selected blocks."
+});
+const {
+  selection,
+  ui,
+  eventBus,
+  animation,
+  dom,
+  tour,
+  $t,
+  types,
+  state,
+  blocks,
+  element
+} = useBlokkli();
+const originatesFromTextInput = (e) => e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement;
+const getSelectionOrder = useStateBasedCache(
+  () => element.queryAll(
+    ui.providerElement,
+    ".bk-field-list-item",
+    "getSelectionOrder",
+    (el) => el.dataset.bkUuid
+  )
+);
+const selectedBundle = computed(() => {
+  if (selection.bundles.value.length === 1) {
+    return selection.bundles.value[0] ?? null;
+  }
+  return null;
+});
+const hasSelectedOnce = ref(false);
+const stop = watch(
+  selection.hasAnythingSelected,
+  function(hasAnythingSelected) {
+    if (hasAnythingSelected) {
+      hasSelectedOnce.value = true;
+    }
+    stop();
+  }
+);
+const isVisible = computed(
+  () => dom.isReady.value && !selection.isMultiSelecting.value && !selection.activeEditableLabel.value && !selection.isDragging.value && !ui.isAnimating.value && hasSelectedOnce.value
+);
+const findMostVisibleBlock = () => {
+  const viewport = ui.visibleViewportPadded.value;
+  const uuids = dom.getVisibleBlocks();
+  let maxIntersection = 0;
+  let maxY = 9999;
+  let mostVisibleUuid = null;
+  for (let i = 0; i < uuids.length; i++) {
+    const uuid = uuids[i];
+    const absoluteRect = dom.getBlockRect(uuid);
+    if (!absoluteRect) {
+      continue;
+    }
+    const rect = ui.getViewportRelativeRect(absoluteRect);
+    const intersection = calculateIntersection(rect, viewport);
+    if (intersection && intersection > maxIntersection && rect.y < maxY && rect.y > 0) {
+      mostVisibleUuid = uuid;
+      maxIntersection = intersection;
+      maxY = rect.y;
+    }
+  }
+  return mostVisibleUuid;
+};
+const getSelectAllUuids = (allBlocks, currentlySelected) => {
+  if (currentlySelected.length >= 1) {
+    const selectedHostUuids = currentlySelected.map((block) => block.host.uuid);
+    const selectedHostTypes = currentlySelected.map((block) => block.host.type);
+    const selectedHostFieldNames = currentlySelected.map(
+      (block) => block.host.fieldName
+    );
+    const selectedUuids = currentlySelected.map((v) => v.uuid);
+    const commonHostUuids = selectedHostUuids.filter(
+      (uuid, index, self) => self.indexOf(uuid) === index
+    );
+    const commonHostTypes = selectedHostTypes.filter(
+      (type, index, self) => self.indexOf(type) === index
+    );
+    const commonHostFieldNames = selectedHostFieldNames.filter(
+      (fieldName, index, self) => self.indexOf(fieldName) === index
+    );
+    const newUuids = allBlocks.filter(
+      (block) => commonHostUuids.includes(block.host.uuid) && commonHostTypes.includes(block.host.type) && commonHostFieldNames.includes(block.host.fieldName)
+    ).map((block) => block.uuid);
+    const isSame = newUuids.every((uuid) => selectedUuids.includes(uuid));
+    if (!isSame) {
+      return newUuids;
+    }
+  }
+  return allBlocks.filter((block) => block.host.type !== itemEntityType).map((block) => block.uuid);
+};
+const visuallySelectBlocks = (toggleUuid) => {
+  const rects = dom.getBlockRects();
+  const allUuids = Object.keys(rects);
+  const selected = selection.uuids.value;
+  if (selected.length === 0) {
+    return [toggleUuid];
+  }
+  const singleSelectedBlock = selected.length === 1 ? blocks.getBlock(selected[0]) : null;
+  const toggleRect = rects[toggleUuid];
+  if (!toggleRect) {
+    return;
+  }
+  const toggleBlock = blocks.getBlock(toggleUuid);
+  if (!toggleBlock) {
+    return;
+  }
+  const filter = (encompassingRect2) => {
+    const candidates = [];
+    for (let i = 0; i < allUuids.length; i++) {
+      const uuid = allUuids[i];
+      const rect = rects[uuid];
+      if (!rect) {
+        continue;
+      }
+      if (!intersects(rect, encompassingRect2)) {
+        continue;
+      }
+      const block = blocks.getBlock(uuid);
+      if (!block) {
+        continue;
+      }
+      if (block.isNested === toggleBlock.isNested || singleSelectedBlock?.isNested === block.isNested) {
+        candidates.push(uuid);
+      }
+    }
+    return candidates;
+  };
+  const isToggleSelected = selected.includes(toggleUuid);
+  if (selected.length === 1) {
+    if (isToggleSelected) {
+      return [];
+    }
+    const selectedUuid = selected[0];
+    const selectedRect = rects[selectedUuid];
+    if (!selectedRect) {
+      return;
+    }
+    const encompassingRect2 = getBounds([selectedRect, toggleRect]);
+    if (!encompassingRect2) {
+      return;
+    }
+    return filter(encompassingRect2);
+  }
+  const upperLeftUuid = selected.filter((uuid) => isToggleSelected ? uuid !== toggleUuid : true).reduce((prev, current) => {
+    const prevRect = rects[prev];
+    const currentRect = rects[current];
+    return currentRect && prevRect && prevRect.x <= currentRect.x && prevRect.y <= currentRect.y ? prev : current;
+  });
+  const upperLeftRect = rects[upperLeftUuid];
+  if (!upperLeftRect) {
+    return;
+  }
+  const encompassingRect = getBounds([upperLeftRect, toggleRect]);
+  if (!encompassingRect) {
+    return;
+  }
+  return filter(encompassingRect);
+};
+function selectAllBlocks() {
+  eventBus.emit(
+    "select:end",
+    getSelectAllUuids(blocks.getAllBlocks(), selection.items.value)
+  );
+}
+onBlokkliEvent("select:shiftToggle", (uuid) => {
+  const uuids = visuallySelectBlocks(uuid);
+  if (uuids) {
+    eventBus.emit("select", uuids);
+  }
+});
+function selectBlock(uuid) {
+  eventBus.emit("select", uuid);
+  dom.refreshBlockRect(uuid);
+  eventBus.emit("scrollIntoView", { uuid });
+}
+function selectInList(prev) {
+  const currentUuid = selection.uuids.value[selection.uuids.value.length - 1];
+  if (!currentUuid) {
+    return;
+  }
+  const selectionOrder = getSelectionOrder();
+  const currentIndex = selectionOrder.indexOf(currentUuid);
+  const delta = prev ? -1 : 1;
+  const newIndex = modulo(currentIndex + delta, selectionOrder.length);
+  const newUuid = selectionOrder[newIndex];
+  if (newUuid) {
+    selectBlock(newUuid);
+  }
+}
+onBlokkliEvent("keyPressed", (e) => {
+  if (selection.isDragging.value || selection.isMultiSelecting.value || ui.hasDialogOpen.value || ui.hasTooltipOpen.value) {
+    return;
+  }
+  if (e.code === "Escape") {
+    if (!ui.openTooltip.value) {
+      eventBus.emit("select:end", []);
+      eventBus.emit("select:host:unselect");
+    }
+  } else if (e.code === "Tab") {
+    if (tour.isTouring.value || ui.hasDialogOpen.value) {
+      return;
+    }
+    e.originalEvent.preventDefault();
+    if (!selection.items.value.length) {
+      const uuid = findMostVisibleBlock();
+      if (uuid) {
+        eventBus.emit("select", uuid);
+        eventBus.emit("scrollIntoView", { uuid });
+      }
+      return;
+    }
+    if (e.shift) {
+      selectInList(true);
+    } else {
+      selectInList();
+    }
+    animation.requestDraw();
+  } else if (e.code === "a" && e.meta) {
+    if (originatesFromTextInput(e.originalEvent)) {
+      return;
+    }
+    e.originalEvent.preventDefault();
+    selectAllBlocks();
+  }
+});
+defineItemDropdownAction(() => {
+  if (selectedBundle.value) {
+    const label = types.getBlockBundleDefinition(selectedBundle.value)?.label ?? selectedBundle.value;
+    return {
+      id: "selection-select-all-of-bundle",
+      label: $t("selectAllOfBundle", 'Select all "@bundle" blocks').replace(
+        "@bundle",
+        label
+      ),
+      icon: "bk_mdi_select_all",
+      group: "selection",
+      weight: 200,
+      callback: () => {
+        if (selectedBundle.value) {
+          const uuids = state.getAllUuids(selectedBundle.value);
+          eventBus.emit("select", uuids);
+        }
+      }
+    };
+  }
+});
+defineItemDropdownAction(() => {
+  if (selection.hasHostSelected.value) {
+    return {
+      id: "selection-select-all-blocks",
+      label: $t("selectAllBlocks", "Select all blocks"),
+      icon: "bk_mdi_select_all",
+      group: "selection",
+      weight: 200,
+      callback: selectAllBlocks
+    };
+  }
+});
+</script>
+
+<script>
+export default {
+  name: "Selection"
+};
+</script>

package/dist/runtime/editor/features/selection/index.vue.d.ts

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

package/dist/runtime/editor/features/settings/Dialog/FeatureSetting/index.d.vue.ts

@@ -0,0 +1,10 @@
+import type { ValidFeatureKey } from '#blokkli-build/features';
+import type { FeatureDefinitionSetting } from '#blokkli/editor/types/features';
+type __VLS_Props = {
+    featureId: ValidFeatureKey;
+    settingsKey: string;
+    setting: FeatureDefinitionSetting;
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;