@revenexx/editor 0.1.0

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

@@ -0,0 +1,355 @@
+<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 {
+  calculateIntersection,
+  getBounds,
+  intersects
+} from "#blokkli/editor/helpers/geometry";
+import { modulo } from "#blokkli/editor/helpers/math";
+import {
+  computed,
+  useBlokkli,
+  defineBlokkliFeature,
+  ref,
+  watch,
+  defineAsyncComponent
+} from "#imports";
+import { itemEntityType } from "#blokkli-build/config";
+import {
+  defineItemDropdownAction,
+  onBlokkliEvent,
+  useStateBasedCache
+} from "#blokkli/editor/composables";
+const Renderer = defineAsyncComponent(() => import("./Renderer/index.vue"));
+const SelectionAddButtons = defineAsyncComponent(
+  () => import("./AddButtons/index.vue")
+);
+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,
+  permissions
+} = 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.activeFieldLabel.value && !selection.isDragging.value && !ui.isAnimating.value && hasSelectedOnce.value && !ui.isApproving.value
+);
+const findMostVisibleBlock = (allowedSet) => {
+  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];
+    if (allowedSet && !allowedSet.has(uuid)) {
+      continue;
+    }
+    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, allowedUuids) {
+  const allUuids = getSelectionOrder();
+  const uuids = allowedUuids ? (() => {
+    const allowed = new Set(allowedUuids);
+    return allUuids.filter((uuid) => allowed.has(uuid));
+  })() : allUuids;
+  if (!uuids.length) {
+    return;
+  }
+  const currentUuid = selection.uuids.value[selection.uuids.value.length - 1] || findMostVisibleBlock();
+  if (!currentUuid) {
+    return;
+  }
+  const currentIndex = uuids.indexOf(currentUuid);
+  if (currentIndex !== -1) {
+    const delta2 = prev ? -1 : 1;
+    const length = uuids.length;
+    for (let step = 1; step < length; step++) {
+      const newIndex = modulo(currentIndex + delta2 * step, length);
+      const candidate = uuids[newIndex];
+      if (!candidate) {
+        continue;
+      }
+      const resolved = permissions.getRestrictedAncestor(candidate) ?? candidate;
+      if (resolved !== currentUuid) {
+        selectBlock(candidate);
+        return;
+      }
+    }
+    return;
+  }
+  const fullIndex = allUuids.indexOf(currentUuid);
+  if (fullIndex === -1) {
+    return;
+  }
+  const uuidSet = new Set(uuids);
+  const delta = prev ? -1 : 1;
+  for (let step = 1; step < allUuids.length; step++) {
+    const idx = modulo(fullIndex + delta * step, allUuids.length);
+    const candidate = allUuids[idx];
+    if (candidate && uuidSet.has(candidate)) {
+      selectBlock(candidate);
+      return;
+    }
+  }
+}
+onBlokkliEvent("select:next", (allowedUuids) => {
+  selectInList(false, allowedUuids);
+  animation.requestDraw();
+});
+onBlokkliEvent("select:prev", (allowedUuids) => {
+  selectInList(true, allowedUuids);
+  animation.requestDraw();
+});
+onBlokkliEvent("keyPressed", (e) => {
+  if (selection.isDragging.value || selection.isMultiSelecting.value || ui.hasDialogOpen.value || ui.hasTooltipOpen.value || ui.hasNestedEditorOpen.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 || ui.hasNestedEditorOpen.value || ui.isApproving.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/selection/types.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Programmatically trigger one of the add buttons rendered for the current
+ * single-block (or host) selection — the same effect as clicking the button on
+ * the canvas, without needing its screen coordinates.
+ *
+ *  - `before` / `after`: the insert-before / insert-after buttons (only act
+ *    when the field can actually accept another block, mirroring the canvas
+ *    buttons' visibility);
+ *  - `field`: the empty-field button at `index` (the n-th empty block field of
+ *    the selected block, or empty host field when the host is selected).
+ */
+export type SelectionAddButtonTriggerEvent = {
+    position: 'before' | 'after';
+} | {
+    position: 'field';
+    index: number;
+};
+declare module '#blokkli/editor/events' {
+    interface EventbusEvents {
+        'selection:add-button:trigger': SelectionAddButtonTriggerEvent;
+    }
+}

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;

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

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <FormToggle
+      v-if="setting.type === 'checkbox'"
+      :label="settingLabel"
+      :description="settingDescription"
+      :model-value="
+  settingsStorage[settingsKey] ?? setting.default
+"
+      @update:model-value="toggleCheckbox"
+    />
+    <div v-else-if="setting.type === 'radios'">
+      <h3 class="bk-form-label">
+        {{ settingLabel }}
+      </h3>
+      <ul class="bk-settings-ui">
+        <li
+          v-for="[value, config] in Object.entries(setting.options)"
+          :key="value"
+        >
+          <label>
+            <input
+              :checked="settingsStorage[settingsKey] === value"
+              type="radio"
+              :value="true"
+              :name="settingsKey"
+              @change="setRadioValue(value)"
+            />
+            <Icon v-if="config.icon" :name="config.icon" />
+            <span>{{ getOptionLabel(value, config.label) }}</span>
+          </label>
+        </li>
+      </ul>
+    </div>
+    <div v-else-if="setting.type === 'method'">
+      <button
+        class="bk-button bk-scheme-mono bk-is-light"
+        @click="setting.method(blokkliApp)"
+      >
+        {{ settingLabel }}
+      </button>
+    </div>
+    <div v-else-if="setting.type === 'slider'">
+      <label class="bk-input-range">
+        <span>{{ settingLabel }}: {{ settingsStorage[settingsKey] }}</span>
+        <input
+          :value="settingsStorage[settingsKey]"
+          type="range"
+          :min="setting.min"
+          :max="setting.max"
+          :step="setting.step"
+          list="tickmarks"
+          @input="setSliderValue($event)"
+        />
+        <datalist id="tickmarks">
+          <option v-for="tick in tickmarks" :key="tick" :value="tick" />
+        </datalist>
+      </label>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Icon, FormToggle } from "#blokkli/editor/components";
+import { useBlokkli, computed } from "#imports";
+const props = defineProps({
+  featureId: { type: null, required: true },
+  settingsKey: { type: String, required: true },
+  setting: { type: Object, required: true }
+});
+const { storage, $t } = useBlokkli();
+const blokkliApp = useBlokkli();
+const settingKeyPrefix = computed(
+  () => "feature_" + props.featureId + "_setting_" + props.settingsKey
+);
+const settingLabel = computed(
+  () => $t(settingKeyPrefix.value + "_label", props.setting.label)
+);
+const settingDescription = computed(() => {
+  if ("description" in props.setting && props.setting.description) {
+    return $t(
+      settingKeyPrefix.value + "_description",
+      props.setting.description
+    );
+  }
+  return void 0;
+});
+const getOptionLabel = (key, defaultLabel) => $t(settingKeyPrefix.value + "_option_" + key, defaultLabel);
+const settingsStorage = storage.use(
+  `feature:${props.featureId}:settings`,
+  {},
+  true
+);
+const toggleCheckbox = () => {
+  const current = settingsStorage.value[props.settingsKey];
+  settingsStorage.value = {
+    ...settingsStorage.value,
+    [props.settingsKey]: !current
+  };
+};
+const setRadioValue = (value) => {
+  settingsStorage.value = {
+    ...settingsStorage.value,
+    [props.settingsKey]: value
+  };
+};
+const setSliderValue = (e) => {
+  if (e.target instanceof HTMLInputElement) {
+    settingsStorage.value = {
+      ...settingsStorage.value,
+      [props.settingsKey]: Number.parseFloat(e.target.value)
+    };
+  }
+};
+const tickmarks = computed(() => {
+  if (props.setting.type === "slider") {
+    const values = [];
+    for (let value = props.setting.min; value <= props.setting.max; value += props.setting.step) {
+      values.push(value);
+    }
+    values.push(props.setting.max);
+    return values;
+  }
+  return [];
+});
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk .bk-input-range {
+  display: block;
+  width: 100%;
+}
+:is(.bk .bk-input-range) input {
+  display: block;
+  width: 100%;
+  border-radius: calc(infinity * 1px);
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-300) / 1);
+  background-color: rgb(var(--bk-theme-mono-100) / 1);
+  accent-color: rgb(var(--bk-theme-accent-700) / 1);
+}
+:is(.bk .bk-input-range) span {
+  margin-bottom: 5px;
+  display: inline-block;
+  --bk-tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
+}
+</style>

package/dist/runtime/editor/features/settings/Dialog/FeatureSetting/index.vue.d.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;

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

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