@blokkli/editor 1.4.0-alpha.1 → 2.0.0-alpha.2

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

@@ -8,288 +8,202 @@
   <OverlayFallback v-if="isVisible && !gl" :uuids="selection.uuids.value" />
 </template>
 
-<script lang="ts" setup>
-import Overlay from './Overlay/index.vue'
-import OverlayFallback from './OverlayFallback/index.vue'
+<script setup>
+import Overlay from "./Overlay/index.vue";
+import OverlayFallback from "./OverlayFallback/index.vue";
 import {
   calculateIntersection,
   getBounds,
   intersects,
-  originatesFromTextInput,
-} from '#blokkli/helpers'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import type { DraggableExistingBlock, Rectangle } from '#blokkli/types'
+  originatesFromTextInput
+} from "#blokkli/helpers";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import {
   computed,
   useBlokkli,
   defineBlokkliFeature,
   ref,
-  watch,
-} from '#imports'
-
+  watch
+} from "#imports";
 defineBlokkliFeature({
-  id: 'selection',
-  icon: 'selection',
-  label: 'Selection',
-  description: 'Renders an overlay that highlights the selected blocks.',
-})
-
-const { selection, ui, eventBus, animation, dom, tour } = useBlokkli()
-
-const gl = animation.gl()
-
-const hasSelectedOnce = ref(false)
-
-const stop = watch(selection.uuids, function () {
-  hasSelectedOnce.value = true
-  stop()
-})
-
+  id: "selection",
+  icon: "selection",
+  label: "Selection",
+  description: "Renders an overlay that highlights the selected blocks."
+});
+const { selection, ui, eventBus, animation, dom, tour } = useBlokkli();
+const gl = animation.gl();
+const hasSelectedOnce = ref(false);
+const stop = watch(selection.uuids, function() {
+  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,
-)
-
-/**
- * Find the block that is most visible for the user.
- *
- * Most visible is determined by how much of the block intersects with the
- * padded visible viewport area.
- */
-const findMostVisibleBlock = (): string | null => {
-  const viewport = ui.visibleViewportPadded.value
-  const uuids = dom.getVisibleBlocks()
-
-  let maxIntersection = 0
-  let maxY = 9999
-  let mostVisibleUuid: string | null = null
-
+  () => dom.isReady.value && !selection.isMultiSelecting.value && !selection.editableActive.value && !selection.isChangingOptions.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)
+    const uuid = uuids[i];
+    const absoluteRect = dom.getBlockRect(uuid);
     if (!absoluteRect) {
-      continue
+      continue;
     }
-
-    const rect = ui.getViewportRelativeRect(absoluteRect)
-
-    // The intersection as a value from 0 to 1.
-    const intersection = calculateIntersection(rect, viewport)
-    if (
-      intersection &&
-      intersection > maxIntersection &&
-      rect.y < maxY &&
-      rect.y > 0
-    ) {
-      mostVisibleUuid = uuid
-      maxIntersection = intersection
-      maxY = rect.y
+    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: DraggableExistingBlock[],
-  currentlySelected: DraggableExistingBlock[],
-): string[] => {
-  // One or more blocks are selected.
+  return mostVisibleUuid;
+};
+const getSelectAllUuids = (allBlocks, currentlySelected) => {
   if (currentlySelected.length >= 1) {
-    const selectedHostUuids = currentlySelected.map((block) => block.hostUuid)
-    const selectedHostTypes = currentlySelected.map((block) => block.hostType)
+    const selectedHostUuids = currentlySelected.map((block) => block.hostUuid);
+    const selectedHostTypes = currentlySelected.map((block) => block.hostType);
     const selectedHostFieldNames = currentlySelected.map(
-      (block) => block.hostFieldName,
-    )
-    const selectedUuids = currentlySelected.map((v) => v.uuid)
-
+      (block) => block.hostFieldName
+    );
+    const selectedUuids = currentlySelected.map((v) => v.uuid);
     const commonHostUuids = selectedHostUuids.filter(
-      (uuid, index, self) => self.indexOf(uuid) === index,
-    )
+      (uuid, index, self) => self.indexOf(uuid) === index
+    );
     const commonHostTypes = selectedHostTypes.filter(
-      (type, index, self) => self.indexOf(type) === index,
-    )
+      (type, index, self) => self.indexOf(type) === index
+    );
     const commonHostFieldNames = selectedHostFieldNames.filter(
-      (fieldName, index, self) => self.indexOf(fieldName) === index,
-    )
-
-    // Find all blocks that share the same host.
-    const newUuids = allBlocks
-      .filter(
-        (block) =>
-          commonHostUuids.includes(block.hostUuid) &&
-          commonHostTypes.includes(block.hostType) &&
-          commonHostFieldNames.includes(block.hostFieldName),
-      )
-      .map((block) => block.uuid)
-
-    const isSame = newUuids.every((uuid) => selectedUuids.includes(uuid))
-
+      (fieldName, index, self) => self.indexOf(fieldName) === index
+    );
+    const newUuids = allBlocks.filter(
+      (block) => commonHostUuids.includes(block.hostUuid) && commonHostTypes.includes(block.hostType) && commonHostFieldNames.includes(block.hostFieldName)
+    ).map((block) => block.uuid);
+    const isSame = newUuids.every((uuid) => selectedUuids.includes(uuid));
     if (!isSame) {
-      return newUuids
+      return newUuids;
     }
   }
-
-  return allBlocks
-    .filter((block) => block.hostType !== 'block')
-    .map((block) => block.uuid)
-}
-
-/**
- * Determine which blocks to select when the user is clicking on a block with the shift key.
- */
-const visuallySelectBlocks = (toggleUuid: string): string[] | undefined => {
-  const rects = dom.getBlockRects()
-  const allUuids = Object.keys(rects)
-  const selected = selection.uuids.value
-  // Nothing selected yet, so we select the new block.
+  return allBlocks.filter((block) => block.hostType !== "block").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]
+    return [toggleUuid];
   }
-
-  const singleSelectedBlock =
-    selected.length === 1 ? dom.findBlock(selected[0]) : null
-
-  const toggleRect = rects[toggleUuid]
+  const singleSelectedBlock = selected.length === 1 ? dom.findBlock(selected[0]) : null;
+  const toggleRect = rects[toggleUuid];
   if (!toggleRect) {
-    return
+    return;
   }
-  const toggleBlock = dom.findBlock(toggleUuid)
+  const toggleBlock = dom.findBlock(toggleUuid);
   if (!toggleBlock) {
-    return
+    return;
   }
-  const filter = (encompassingRect: Rectangle): string[] => {
-    const candidates: string[] = []
+  const filter = (encompassingRect2) => {
+    const candidates = [];
     for (let i = 0; i < allUuids.length; i++) {
-      const uuid = allUuids[i]
-      const rect = rects[uuid]
+      const uuid = allUuids[i];
+      const rect = rects[uuid];
       if (!rect) {
-        continue
+        continue;
       }
-
-      if (!intersects(rect, encompassingRect)) {
-        continue
+      if (!intersects(rect, encompassingRect2)) {
+        continue;
       }
-
-      const block = dom.findBlock(uuid)
-
+      const block = dom.findBlock(uuid);
       if (!block) {
-        continue
+        continue;
       }
-
-      if (
-        block.isNested === toggleBlock.isNested ||
-        singleSelectedBlock?.isNested === block.isNested
-      ) {
-        candidates.push(uuid)
+      if (block.isNested === toggleBlock.isNested || singleSelectedBlock?.isNested === block.isNested) {
+        candidates.push(uuid);
       }
     }
-
-    return candidates
-  }
-  const isToggleSelected = selected.includes(toggleUuid)
-
-  // One block selected.
+    return candidates;
+  };
+  const isToggleSelected = selected.includes(toggleUuid);
   if (selected.length === 1) {
     if (isToggleSelected) {
-      return []
+      return [];
     }
-
-    const selectedUuid = selected[0]
-    const selectedRect = rects[selectedUuid]
+    const selectedUuid = selected[0];
+    const selectedRect = rects[selectedUuid];
     if (!selectedRect) {
-      return
+      return;
     }
-    const encompassingRect = getBounds([selectedRect, toggleRect])
-    if (!encompassingRect) {
-      return
+    const encompassingRect2 = getBounds([selectedRect, toggleRect]);
+    if (!encompassingRect2) {
+      return;
     }
-
-    return filter(encompassingRect)
+    return filter(encompassingRect2);
   }
-
-  // More than one selected.
-  // Find the most upper left element excluding the toggleElement.
-  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]
-  const encompassingRect = getBounds([upperLeftRect, toggleRect])
+  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;
   }
-
-  return filter(encompassingRect)
-}
-
-onBlokkliEvent('select:shiftToggle', (uuid) => {
-  const uuids = visuallySelectBlocks(uuid)
+  return filter(encompassingRect);
+};
+onBlokkliEvent("select:shiftToggle", (uuid) => {
+  const uuids = visuallySelectBlocks(uuid);
   if (uuids) {
-    eventBus.emit('select', uuids)
+    eventBus.emit("select", uuids);
   }
-})
-
-onBlokkliEvent('keyPressed', (e) => {
+});
+onBlokkliEvent("keyPressed", (e) => {
   if (selection.isDragging.value || selection.isMultiSelecting.value) {
-    return
+    return;
   }
-  if (e.code === 'Escape') {
-    eventBus.emit('select:end', [])
-  } else if (e.code === 'Tab') {
+  if (e.code === "Escape") {
+    eventBus.emit("select:end", []);
+  } else if (e.code === "Tab") {
     if (tour.isTouring.value) {
-      return
+      return;
     }
-    e.originalEvent.preventDefault()
-
-    // No block is selected.
+    e.originalEvent.preventDefault();
     if (selection.blocks.value.length !== 1) {
-      // Select the most visible block for the user.
-      const uuid = findMostVisibleBlock()
+      const uuid = findMostVisibleBlock();
       if (uuid) {
-        eventBus.emit('select', uuid)
-        eventBus.emit('scrollIntoView', { uuid })
+        eventBus.emit("select", uuid);
+        eventBus.emit("scrollIntoView", { uuid });
       }
-      return
+      return;
     }
-
     if (e.shift) {
-      eventBus.emit('select:previous')
+      eventBus.emit("select:previous");
     } else {
-      eventBus.emit('select:next')
+      eventBus.emit("select:next");
     }
-    animation.requestDraw()
-  } else if (e.code === 'a' && e.meta) {
-    // Regular native CTRL+A behaviour should not be overriden.
+    animation.requestDraw();
+  } else if (e.code === "a" && e.meta) {
     if (originatesFromTextInput(e.originalEvent)) {
-      return
+      return;
     }
-    e.originalEvent.preventDefault()
+    e.originalEvent.preventDefault();
     eventBus.emit(
-      'select:end',
-      getSelectAllUuids(dom.getAllBlocks(), selection.blocks.value),
-    )
+      "select:end",
+      getSelectAllUuids(dom.getAllBlocks(), selection.blocks.value)
+    );
   }
-})
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Selection',
-}
+  name: "Selection"
+};
 </script>

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

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

package/dist/runtime/components/Edit/Features/Settings/Dialog/FeatureSetting/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="bk-settings-feature-setting" :class="'bk-is-' + setting.type">
+  <div class="bk-form-item" :class="'bk-is-' + setting.type">
     <label v-if="setting.type === 'checkbox'" class="bk-checkbox-toggle">
       <input
-        :checked="settingsStorage[settingsKey] as boolean"
+        :checked="settingsStorage[settingsKey]"
         type="checkbox"
         class="peer"
         @change="toggleCheckbox"
@@ -39,7 +39,7 @@
       </ul>
     </div>
     <div v-else-if="setting.type === 'method'">
-      <button class="bk-button" @click="setting.method()">
+      <button class="bk-button" @click="setting.method(blokkliApp)">
         {{ settingLabel }}
       </button>
     </div>
@@ -63,100 +63,69 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import type { FeatureDefinitionSetting } from '#blokkli/types'
-import { Icon } from '#blokkli/components'
-import type { ValidFeatureKey } from '#blokkli-build/features'
-import { useBlokkli, computed } from '#imports'
-
-const props = defineProps<{
-  featureId: ValidFeatureKey
-  settingsKey: string
-  setting: FeatureDefinitionSetting
-}>()
-
-const { storage, $t: textTranslation } = useBlokkli()
-
+<script setup>
+import { Icon } from "#blokkli/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: textTranslation } = useBlokkli();
+const blokkliApp = useBlokkli();
 const settingLabel = computed(() => {
-  return (
-    textTranslation(
-      'feature_' + props.featureId + '_setting_' + props.settingsKey + '_label',
-    ) || props.setting.label
-  )
-})
-
+  return textTranslation(
+    "feature_" + props.featureId + "_setting_" + props.settingsKey + "_label"
+  ) || props.setting.label;
+});
 const settingDescription = computed(() => {
   const translated = textTranslation(
-    'feature_' +
-      props.featureId +
-      '_setting_' +
-      props.settingsKey +
-      '_description',
-  )
-
-  if (!translated && 'description' in props.setting) {
-    return props.setting.description
+    "feature_" + props.featureId + "_setting_" + props.settingsKey + "_description"
+  );
+  if (!translated && "description" in props.setting) {
+    return props.setting.description;
   }
-
-  return translated
-})
-
-const getOptionLabel = (key: string, defaultLabel: string) => {
-  return (
-    textTranslation(
-      'feature_' +
-        props.featureId +
-        '_setting_' +
-        props.settingsKey +
-        '_option_' +
-        key,
-    ) || defaultLabel
-  )
-}
-
+  return translated;
+});
+const getOptionLabel = (key, defaultLabel) => {
+  return textTranslation(
+    "feature_" + props.featureId + "_setting_" + props.settingsKey + "_option_" + key
+  ) || defaultLabel;
+};
 const settingsStorage = storage.use(
   `feature:${props.featureId}:settings`,
-  {} as Record<string, boolean | string | number>,
-)
-
+  {}
+);
 const toggleCheckbox = () => {
-  const current = settingsStorage.value[props.settingsKey]
+  const current = settingsStorage.value[props.settingsKey];
   settingsStorage.value = {
     ...settingsStorage.value,
-    [props.settingsKey]: !current,
-  }
-}
-
-const setRadioValue = (value: string) => {
+    [props.settingsKey]: !current
+  };
+};
+const setRadioValue = (value) => {
   settingsStorage.value = {
     ...settingsStorage.value,
-    [props.settingsKey]: value,
-  }
-}
-
-const setSliderValue = (e: Event) => {
+    [props.settingsKey]: value
+  };
+};
+const setSliderValue = (e) => {
   if (e.target instanceof HTMLInputElement) {
     settingsStorage.value = {
       ...settingsStorage.value,
-      [props.settingsKey]: Number.parseFloat(e.target.value),
-    }
+      [props.settingsKey]: Number.parseFloat(e.target.value)
+    };
   }
-}
-
+};
 const tickmarks = computed(() => {
-  if (props.setting.type === 'slider') {
-    const values: number[] = []
-    for (
-      let value = props.setting.min;
-      value <= props.setting.max;
-      value += props.setting.step
-    ) {
-      values.push(value)
+  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
+    values.push(props.setting.max);
+    return values;
   }
-
-  return []
-})
+  return [];
+});
 </script>

package/dist/runtime/components/Edit/Features/Settings/Dialog/FeatureSetting/index.vue.d.ts

@@ -0,0 +1,9 @@
+import type { FeatureDefinitionSetting } from '#blokkli/types';
+import type { ValidFeatureKey } from '#blokkli-build/features';
+type __VLS_Props = {
+    featureId: ValidFeatureKey;
+    settingsKey: string;
+    setting: FeatureDefinitionSetting;
+};
+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;