@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -1,23 +1,43 @@
 <template>
   <Overlay
-    v-if="isVisible && gl"
-    :blocks="selection.blocks.value"
+    v-if="isVisible && gl && animation.webglEnabled.value"
+    :blocks="selection.items.value"
     :uuids="selection.uuids.value"
     :gl="gl"
+    :has-host-selected="selection.hasHostSelected.value"
   />
   <OverlayFallback v-if="isVisible && !gl" :uuids="selection.uuids.value" />
+  <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'"
+    :items="selection.items.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,
   intersects,
+  modulo,
   originatesFromTextInput
 } from "#blokkli/helpers";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import useStateBasedCache from "#blokkli/helpers/composables/useStateBasedCache";
+import { PluginItemDropdown } from "#blokkli/plugins";
 import {
   computed,
   useBlokkli,
@@ -25,19 +45,84 @@ import {
   ref,
   watch
 } from "#imports";
+import { itemEntityType } from "#blokkli-build/config";
 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 {
+  selection,
+  ui,
+  eventBus,
+  animation,
+  dom,
+  tour,
+  $t,
+  types,
+  state,
+  blocks,
+  element
+} = useBlokkli();
+const getSelectionOrder = useStateBasedCache(() => {
+  return element.queryAll(
+    ui.artboardElement(),
+    "[data-uuid]",
+    "getSelectionOrder",
+    (el) => el.dataset.uuid
+  );
+});
+const selectedBundle = computed(() => {
+  if (selection.bundles.value.length === 1) {
+    return selection.bundles.value[0] ?? null;
+  }
+  return 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
+        )
+      }
+    ];
+  } else if (selection.hasHostSelected.value) {
+    return [
+      {
+        id: "select-all-blocks",
+        label: $t("selectAllBlocks", "Select all blocks")
+      }
+    ];
+  }
+  return [];
+});
+function onSelectDropdownItem(item) {
+  if (item.id === "select-all-of-bundle") {
+    if (selectedBundle.value) {
+      const uuids = state.getAllUuids(selectedBundle.value);
+      eventBus.emit("select", uuids);
+    }
+  } else if (item.id === "select-all-blocks") {
+    selectAllBlocks();
+  }
+}
 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
 );
@@ -65,10 +150,10 @@ const findMostVisibleBlock = () => {
 };
 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.host.uuid);
+    const selectedHostTypes = currentlySelected.map((block) => block.host.type);
     const selectedHostFieldNames = currentlySelected.map(
-      (block) => block.hostFieldName
+      (block) => block.host.fieldName
     );
     const selectedUuids = currentlySelected.map((v) => v.uuid);
     const commonHostUuids = selectedHostUuids.filter(
@@ -81,14 +166,14 @@ const getSelectAllUuids = (allBlocks, currentlySelected) => {
       (fieldName, index, self) => self.indexOf(fieldName) === index
     );
     const newUuids = allBlocks.filter(
-      (block) => commonHostUuids.includes(block.hostUuid) && commonHostTypes.includes(block.hostType) && commonHostFieldNames.includes(block.hostFieldName)
+      (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.hostType !== "block").map((block) => block.uuid);
+  return allBlocks.filter((block) => block.host.type !== itemEntityType).map((block) => block.uuid);
 };
 const visuallySelectBlocks = (toggleUuid) => {
   const rects = dom.getBlockRects();
@@ -97,12 +182,12 @@ const visuallySelectBlocks = (toggleUuid) => {
   if (selected.length === 0) {
     return [toggleUuid];
   }
-  const singleSelectedBlock = selected.length === 1 ? dom.findBlock(selected[0]) : null;
+  const singleSelectedBlock = selected.length === 1 ? blocks.getBlock(selected[0]) : null;
   const toggleRect = rects[toggleUuid];
   if (!toggleRect) {
     return;
   }
-  const toggleBlock = dom.findBlock(toggleUuid);
+  const toggleBlock = blocks.getBlock(toggleUuid);
   if (!toggleBlock) {
     return;
   }
@@ -117,7 +202,7 @@ const visuallySelectBlocks = (toggleUuid) => {
       if (!intersects(rect, encompassingRect2)) {
         continue;
       }
-      const block = dom.findBlock(uuid);
+      const block = blocks.getBlock(uuid);
       if (!block) {
         continue;
       }
@@ -158,24 +243,52 @@ const visuallySelectBlocks = (toggleUuid) => {
   }
   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) {
+  if (selection.isDragging.value || selection.isMultiSelecting.value || ui.hasDialogOpen.value || ui.hasTooltipOpen.value) {
     return;
   }
   if (e.code === "Escape") {
-    eventBus.emit("select:end", []);
+    if (!ui.openTooltip.value) {
+      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();
-    if (selection.blocks.value.length !== 1) {
+    if (!selection.items.value.length) {
       const uuid = findMostVisibleBlock();
       if (uuid) {
         eventBus.emit("select", uuid);
@@ -184,9 +297,9 @@ onBlokkliEvent("keyPressed", (e) => {
       return;
     }
     if (e.shift) {
-      eventBus.emit("select:previous");
+      selectInList(true);
     } else {
-      eventBus.emit("select:next");
+      selectInList();
     }
     animation.requestDraw();
   } else if (e.code === "a" && e.meta) {
@@ -194,10 +307,7 @@ onBlokkliEvent("keyPressed", (e) => {
       return;
     }
     e.originalEvent.preventDefault();
-    eventBus.emit(
-      "select:end",
-      getSelectAllUuids(dom.getAllBlocks(), selection.blocks.value)
-    );
+    selectAllBlocks();
   }
 });
 </script>

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

@@ -1,20 +1,14 @@
 <template>
   <div class="bk-form-item" :class="'bk-is-' + setting.type">
-    <label v-if="setting.type === 'checkbox'" class="bk-checkbox-toggle">
-      <input
-        :checked="settingsStorage[settingsKey]"
-        type="checkbox"
-        class="peer"
-        @change="toggleCheckbox"
-      />
-      <div class="bk-checkbox-toggle-toggle" />
-      <div class="bk-checkbox-toggle-label">
-        <div>{{ settingLabel }}</div>
-        <div v-if="settingDescription">
-          {{ settingDescription }}
-        </div>
-      </div>
-    </label>
+    <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 }}
@@ -64,7 +58,7 @@
 </template>
 
 <script setup>
-import { Icon } from "#blokkli/components";
+import { Icon, FormToggle } from "#blokkli/components";
 import { useBlokkli, computed } from "#imports";
 const props = defineProps({
   featureId: { type: null, required: true },
@@ -94,7 +88,8 @@ const getOptionLabel = (key, defaultLabel) => {
 };
 const settingsStorage = storage.use(
   `feature:${props.featureId}:settings`,
-  {}
+  {},
+  true
 );
 const toggleCheckbox = () => {
   const current = settingsStorage.value[props.settingsKey];

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

@@ -10,25 +10,19 @@
     @click="onClick"
   />
   <Teleport to="body">
-    <transition appear name="bk-slide-up">
+    <BlokkliTransition name="slide-up">
       <SettingsDialog v-if="showSettings" @cancel="showSettings = false" />
-    </transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
 <script setup>
-import {
-  ref,
-  useBlokkli,
-  defineBlokkliFeature,
-  watch,
-  onMounted,
-  onBeforeUnmount
-} from "#imports";
+import { ref, useBlokkli, defineBlokkliFeature, computed } from "#imports";
 import { PluginMenuButton } from "#blokkli/plugins";
 import SettingsDialog from "./Dialog/index.vue";
+import { addElementClasses } from "#blokkli/helpers/addElementClasses";
+import { BlokkliTransition } from "#blokkli/components";
 const { $t } = useBlokkli();
-const LOW_PERFORMANCE_CLASS = "bk-low-performance-mode";
 const { settings } = defineBlokkliFeature({
   id: "settings",
   label: "Settings",
@@ -61,20 +55,12 @@ const { settings } = defineBlokkliFeature({
 });
 const showSettings = ref(false);
 const onClick = () => showSettings.value = true;
-function setRootClass() {
-  if (settings.value.lowPerformanceMode) {
-    document.documentElement.classList.add(LOW_PERFORMANCE_CLASS);
-  } else {
-    document.documentElement.classList.remove(LOW_PERFORMANCE_CLASS);
-  }
-}
-watch(settings, setRootClass);
-onMounted(() => {
-  setRootClass();
-});
-onBeforeUnmount(() => {
-  document.documentElement.classList.remove(LOW_PERFORMANCE_CLASS);
-});
+const lowPerformanceMode = computed(() => settings.value.lowPerformanceMode);
+addElementClasses(
+  document.documentElement,
+  "bk-low-performance-mode",
+  lowPerformanceMode
+);
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/Structure/List/Field/index.vue

@@ -75,14 +75,14 @@ const targetStyle = computed(() => {
     zIndex: 50 + props.level
   };
 });
-const { types, state, selection, dom, eventBus } = useBlokkli();
+const { types, state, selection, eventBus, fields } = useBlokkli();
 const mutatedField = computed(
   () => state.getMutatedField(props.entityUuid, props.name)
 );
 const list = computed(() => mutatedField.value?.list || []);
 const key = computed(() => props.entityUuid + ":" + props.name);
 function onMouseUp(preceedingUuid) {
-  const field = dom.findField(props.entityUuid, props.name);
+  const field = fields.find(props.entityUuid, props.name);
   if (!field) {
     return;
   }

package/dist/runtime/components/Edit/Features/Structure/List/Item/index.vue

@@ -33,14 +33,18 @@ const props = defineProps({
   isVisible: { type: Boolean, required: true },
   isSelectedFromParent: { type: Boolean, required: false }
 });
+const { runtimeConfig, types, selection, eventBus, state, element } = useBlokkli();
 function getRootEl() {
-  const rootEl = document.querySelector("#bk-structure");
+  const rootEl = element.query(
+    document.documentElement,
+    "#bk-structure",
+    "Get root structure element."
+  );
   if (!(rootEl instanceof HTMLElement)) {
     throw new TypeError("Failed to locate root structure element.");
   }
   return rootEl;
 }
-const { runtimeConfig, types, selection, eventBus, state } = useBlokkli();
 const canMove = computed(() => state.editMode.value === "editing");
 const isSelected = computed(() => selection.uuids.value.includes(props.uuid));
 const type = computed(() => types.getBlockBundleDefinition(props.bundle));
@@ -66,15 +70,18 @@ function onMouseUp(e) {
   }
 }
 function buildDraggableItems() {
-  return selection.blocks.value.map((block) => {
-    const el = document.querySelector(`[bk-structure-uuid="${block.uuid}"]`);
+  return selection.items.value.map((block) => {
+    const el = element.query(
+      document.documentElement,
+      `[bk-structure-uuid="${block.uuid}"]`,
+      "Get structure item for draggable item."
+    );
     if (!(el instanceof HTMLElement)) {
       return null;
     }
     return {
       itemType: "existing_structure",
-      uuid: block.uuid,
-      itemBundle: block.itemBundle,
+      block,
       element: function() {
         return el;
       }

package/dist/runtime/components/Edit/Features/Theme/Color/index.vue

@@ -48,7 +48,11 @@ const initValue = computed(
 );
 const inputValue = computed({
   get() {
-    return rgbToHex(theme[props.group].value[props.shade]);
+    const v = theme[props.group]?.value[props.shade];
+    if (v) {
+      return rgbToHex(v);
+    }
+    return "#ffffff";
   },
   set(hex) {
     const rgb = hexToRgb(hex);

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

@@ -96,7 +96,8 @@ const contextGroups = [
   "teal",
   "yellow",
   "red",
-  "lime"
+  "lime",
+  "orange"
 ];
 const contextShades = ["light", "normal", "dark"];
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <Transition name="bk-touch-bar">
+    <BlokkliTransition name="touch-bar">
       <Bar
         v-if="
   selection.isMultiSelecting.value && selection.interactionMode.value === 'touch'
@@ -16,12 +16,13 @@
         danger
         @click="eventBus.emit('dragging:end')"
       />
-    </Transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
 <script setup>
 import { useBlokkli, defineBlokkliFeature } from "#imports";
+import { BlokkliTransition } from "#blokkli/components";
 import Bar from "./Bar/index.vue";
 const { eventBus, selection, $t } = useBlokkli();
 defineBlokkliFeature({

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

@@ -188,6 +188,9 @@ function calculatePosition(rect) {
   };
 }
 onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value) {
+    return;
+  }
   if (e.code === "Tab") {
     e.originalEvent.preventDefault();
     if (e.shift) {