@blokkli/editor 2.0.0-alpha.12 → 2.0.0-alpha.14

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

@@ -14,10 +14,10 @@
     icon="clipboard"
     weight="-30"
   >
-    <div class="bk-clipboard bk-control">
+    <div class="bk bk-clipboard bk-control">
       <div
         v-if="!pastedItems.length"
-        class="bk bk-clipboard-info bk-sidebar-padding"
+        class="bk-clipboard-info bk-sidebar-padding"
       >
         <h4>{{ $t("clipboardEmpty", "No items in the clipboard") }}</h4>
         <div
@@ -63,6 +63,16 @@
       </div>
     </div>
   </PluginSidebar>
+  <PluginItemDropdown
+    id="clipboard"
+    :title="$t('clipboard', 'Clipboard')"
+    :enabled="
+  !!selection.blocks.value.length && state.editMode.value === 'editing'
+"
+    :items="itemDropdownItems"
+    icon="clipboard"
+    @select="onSelectDropdownItem"
+  />
 </template>
 
 <script setup>
@@ -71,15 +81,17 @@ import {
   ref,
   useBlokkli,
   onMounted,
-  onUnmounted
+  onUnmounted,
+  computed
 } from "#imports";
-import { PluginSidebar } from "#blokkli/plugins";
+import { PluginSidebar, PluginItemDropdown } from "#blokkli/plugins";
 import ClipboardList from "./List/index.vue";
-import { falsy, generateUUID, getFieldKey } from "#blokkli/helpers";
+import { generateUUID, getFieldKey } from "#blokkli/helpers";
 import { Icon } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import defineShortcut from "#blokkli/helpers/composables/defineShortcut";
 import getVideoId from "get-video-id";
+import { emitMessage } from "#blokkli/helpers/eventBus";
 const { settings, logger } = defineBlokkliFeature({
   id: "clipboard",
   label: "Clipboard",
@@ -96,8 +108,36 @@ const { settings, logger } = defineBlokkliFeature({
   },
   screenshot: "feature-clipboard.jpg"
 });
-const { selection, $t, adapter, dom, state, ui, types } = useBlokkli();
+const { selection, $t, adapter, dom, state, ui, types, keyboard } = useBlokkli();
 const plugin = ref(null);
+const selectionClipboard = ref([]);
+const itemDropdownItems = computed(() => {
+  return [
+    {
+      id: "copy",
+      label: $t("copy", "Copy"),
+      icon: "copy",
+      description: $t("clipboardCopyShortcutHelp", "Copy selected blocks")
+    },
+    {
+      id: "paste",
+      label: $t("paste", "Paste"),
+      enabled: !!selectionClipboard.value.length,
+      icon: "clipboard",
+      description: $t(
+        "clipboardPasteDescription",
+        "Paste blocks from clipboard"
+      )
+    }
+  ];
+});
+function onSelectDropdownItem(item) {
+  if (item.id === "copy") {
+    copyCurrentSelectionToClipboard();
+  } else if (item.id === "paste" && selectionClipboard.value.length) {
+    handleSelectionPaste(selectionClipboard.value);
+  }
+}
 const ALLOWED_HTML_ATTRIBUTES = ["href"];
 const _MOCK = [
   {
@@ -230,11 +270,21 @@ const showClipboardSidebar = () => {
     plugin?.value?.showSidebar();
   }
 };
+function emitPasteError(message) {
+  const prefix = $t("clipboardPasteError", "Failed to paste:");
+  emitMessage(`${prefix} ${message}`, "error");
+}
 const handleSelectionPaste = (pastedUuids) => {
   if (!adapter.pasteExistingBlocks) {
     return;
   }
   if (selection.uuids.value.length !== 1) {
+    emitPasteError(
+      $t(
+        "clipboardPasteErrorOneField",
+        "Pasting is only possible into one field at a time."
+      )
+    );
     return;
   }
   if (!pastedUuids.length) {
@@ -244,36 +294,114 @@ const handleSelectionPaste = (pastedUuids) => {
   if (!block) {
     return;
   }
-  const field = state.getMutatedField(block.hostUuid, block.hostFieldName);
-  if (!field) {
-    return;
+  let targetField = null;
+  let targetFieldConfig = null;
+  let targetFieldKey = null;
+  let preceedingUuid = void 0;
+  if (!keyboard.isPressingShift.value) {
+    const pastedBundles = pastedUuids.map((uuid) => dom.findBlock(uuid)?.itemBundle).filter((bundle) => !!bundle);
+    if (pastedBundles.length) {
+      const nestedFields = types.fieldConfig.forEntityTypeAndBundle(
+        block.entityType,
+        block.itemBundle
+      );
+      for (const fieldConfig of nestedFields) {
+        const allowedPastedBundles = pastedBundles.filter(
+          (bundle) => fieldConfig.allowedBundles.includes(bundle)
+        );
+        if (allowedPastedBundles.length > 0) {
+          const nestedFieldKey = getFieldKey(block.uuid, fieldConfig.name);
+          const currentCount = state.getFieldBlockCount(nestedFieldKey);
+          if (fieldConfig.cardinality === -1 || currentCount + allowedPastedBundles.length <= fieldConfig.cardinality) {
+            targetField = {
+              entityType: block.entityType,
+              entityUuid: block.uuid,
+              name: fieldConfig.name
+            };
+            targetFieldConfig = fieldConfig;
+            targetFieldKey = nestedFieldKey;
+            preceedingUuid = void 0;
+            break;
+          }
+        }
+      }
+    }
   }
-  const fieldConfig = types.getFieldConfig(
-    field.entityType,
-    block.hostBundle,
-    field.name
-  );
-  if (!fieldConfig) {
-    return;
+  if (!targetField || !targetFieldConfig || !targetFieldKey) {
+    const field = state.getMutatedField(block.hostUuid, block.hostFieldName);
+    if (!field) {
+      return;
+    }
+    const fieldConfig = types.getFieldConfig(
+      field.entityType,
+      block.hostBundle,
+      field.name
+    );
+    if (!fieldConfig) {
+      return;
+    }
+    targetField = {
+      entityType: field.entityType,
+      entityUuid: field.entityUuid,
+      name: field.name
+    };
+    targetFieldConfig = fieldConfig;
+    targetFieldKey = getFieldKey(field.entityUuid, field.name);
+    preceedingUuid = selection.uuids.value[0];
+  }
+  const pastedBlocks = [];
+  const notAllowedBundles = [];
+  for (let i = 0; i < pastedUuids.length; i++) {
+    const uuid = pastedUuids[i];
+    if (!uuid) {
+      continue;
+    }
+    const block2 = dom.findBlock(uuid);
+    if (!block2) {
+      continue;
+    }
+    const isAllowed = targetFieldConfig.allowedBundles.includes(
+      block2.itemBundle
+    );
+    if (!isAllowed) {
+      notAllowedBundles.push(block2.itemBundle);
+      continue;
+    }
+    pastedBlocks.push(block2);
   }
-  const fieldKey = getFieldKey(field.entityUuid, field.name);
-  const pastedBlocks = pastedUuids.map((uuid) => dom.findBlock(uuid)).filter(falsy).filter((block2) => fieldConfig.allowedBundles.includes(block2.itemBundle));
   if (!pastedBlocks.length) {
+    const blockTypes = notAllowedBundles.map((bundle) => {
+      return types.getBlockBundleDefinition(bundle)?.label ?? bundle;
+    });
+    const message = blockTypes.length === 1 ? $t(
+      "clipboardPasteErrorAllowedBundlesSingle",
+      'Block type "@types" is not allowed here.'
+    ) : $t(
+      "clipboardPasteErrorAllowedBundlesMultiple",
+      "Block types (@types) are not allowed here."
+    );
+    emitPasteError(message.replace("@types", blockTypes.join(", ")));
     return;
   }
-  const count = state.getFieldBlockCount(fieldKey);
-  if (fieldConfig.cardinality !== -1 && count + pastedBlocks.length > fieldConfig.cardinality) {
+  const count = state.getFieldBlockCount(targetFieldKey);
+  if (targetFieldConfig.cardinality !== -1 && count + pastedBlocks.length > targetFieldConfig.cardinality) {
+    emitPasteError(
+      $t(
+        "clipboardPasteErrorCardinality",
+        "This field only allows up to @count blocks."
+      ).replace("@count", targetFieldConfig.cardinality.toString())
+    );
     return;
   }
   state.mutateWithLoadingState(
     () => adapter.pasteExistingBlocks({
       uuids: pastedBlocks.map((v) => v.uuid),
       host: {
-        type: field.entityType,
-        uuid: field.entityUuid,
-        fieldName: field.name
+        type: targetField.entityType,
+        uuid: targetField.entityUuid,
+        fieldName: targetField.name
       },
-      preceedingUuid: selection.uuids.value[0]
+      preceedingUuid
     })
   );
 };
@@ -371,16 +499,21 @@ function setClipboard(text) {
   } catch (_e) {
   }
 }
-onBlokkliEvent("keyPressed", (e) => {
+function copyCurrentSelectionToClipboard() {
   if (!selection.blocks.value.length) {
-    return;
-  }
-  if (e.code !== "c" || !e.meta) {
+    selectionClipboard.value = [];
     return;
   }
   setClipboard(
     JSON.stringify({ type: "selection", uuids: selection.uuids.value })
   );
+  selectionClipboard.value = selection.uuids.value;
+}
+onBlokkliEvent("keyPressed", (e) => {
+  if (e.code !== "c" || !e.meta) {
+    return;
+  }
+  copyCurrentSelectionToClipboard();
 });
 defineShortcut([
   {

package/dist/runtime/components/Edit/Features/CommandPalette/Palette/Group/index.vue

@@ -1,6 +1,5 @@
 <template>
-  <div v-if="shouldRender" class="bk-command-palette-results-group">
-    <h2>{{ label }}</h2>
+  <div v-if="shouldRender" class="bk-command-palette-results-list">
     <div>
       <button
         v-for="item in mapped"
@@ -18,21 +17,22 @@
           <ItemIcon v-else :bundle="item.bundle" />
         </div>
         <Highlight :text="item.label" tag="span" :positions="item.positions" />
+        <div class="bk-command-group">{{ getGroupLabel(item.group) }}</div>
       </button>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed } from "#imports";
+import { computed, useBlokkli } from "#imports";
 import { Icon, ItemIcon, Highlight } from "#blokkli/components";
 const props = defineProps({
-  label: { type: String, required: true },
   commands: { type: Array, required: true },
   visibleIds: { type: null, required: true },
   focusedId: { type: String, required: true }
 });
 defineEmits(["close", "focus", "select"]);
+const { $t } = useBlokkli();
 const mapped = computed(() => {
   return props.commands.map((v) => {
     const found = props.visibleIds?.find((w) => w.id === v._id);
@@ -47,5 +47,17 @@ const mapped = computed(() => {
     return indexA - indexB;
   });
 });
+const getGroupLabel = (id) => {
+  if (id === "ui") {
+    return $t("commandGroup.ui", "Interface");
+  } else if (id === "add") {
+    return $t("commandGroup.add", "Add new");
+  } else if (id === "action") {
+    return $t("commandGroup.action", "Actions");
+  } else if (id === "selection") {
+    return $t("commandGroup.selection", "Selection");
+  }
+  return $t("commandGroup.misc", "Miscellaneous");
+};
 const shouldRender = computed(() => mapped.value.some((v) => v.visible));
 </script>

package/dist/runtime/components/Edit/Features/CommandPalette/Palette/Group/index.vue.d.ts

@@ -1,6 +1,5 @@
 import type { Command } from '#blokkli/types';
 type __VLS_Props = {
-    label: string;
     commands: Array<Command & {
         _id: number;
     }>;

package/dist/runtime/components/Edit/Features/CommandPalette/Palette/index.vue

@@ -19,10 +19,7 @@
     </div>
     <div class="bk-command-palette-results bk-scrollbar-dark">
       <Group
-        v-for="group in groups"
-        :key="group.id"
-        :label="group.label"
-        :commands="group.commands"
+        :commands="items"
         :visible-ids="visibleIds"
         :focused-id="focusedId"
         @close="$emit('close')"
@@ -59,26 +56,6 @@ function onFocus(id) {
   }
   focusedId.value = id;
 }
-const getGroupLabel = (id) => {
-  if (id === "ui") {
-    return $t("commandGroup.ui", "Interface");
-  } else if (id === "add") {
-    return $t("commandGroup.add", "Add new");
-  } else if (id === "action") {
-    return $t("commandGroup.action", "Actions");
-  } else if (id === "selection") {
-    return $t("commandGroup.selection", "Selection");
-  } else if (id === "misc") {
-    return $t("commandGroup.misc", "Miscellaneous");
-  }
-  return id;
-};
-const groupOrder = computed(() => {
-  if (selection.uuids.value.length) {
-    return ["selection", "add"];
-  }
-  return ["add"];
-});
 const items = computed(
   () => commands.getCommands().filter((v) => !v.disabled).map((doc, index) => {
     return {
@@ -101,38 +78,12 @@ const visibleIds = computed(
     return results.map((v) => {
       return {
         id: v.item._id,
-        positions: [...v.positions]
+        positions: [...v.positions],
+        score: v.score
       };
-    });
+    }).sort((a, b) => b.score - a.score);
   }
 );
-const groups = computed(() => {
-  return Object.values(
-    items.value.reduce((acc, command) => {
-      const group = command.group || "misc";
-      if (!acc[group]) {
-        acc[group] = {
-          id: group,
-          label: getGroupLabel(group),
-          commands: []
-        };
-      }
-      acc[group].commands.push(command);
-      return acc;
-    }, {})
-  ).sort((a, b) => {
-    const indexA = groupOrder.value.indexOf(a.id);
-    const indexB = groupOrder.value.indexOf(b.id);
-    if (indexA === -1 && indexB === -1) {
-      return 0;
-    } else if (indexA === -1) {
-      return 1;
-    } else if (indexB === -1) {
-      return -1;
-    }
-    return indexA - indexB;
-  });
-});
 watch(text, () => {
   nextTick(() => {
     focusFirst();

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

@@ -1,9 +1,9 @@
 <template>
   <Teleport to="body">
     <div class="bk">
-      <Transition name="bk-command-palette">
+      <BlokkliTransition name="command-palette">
         <Palette v-if="isVisible" @close="isVisible = false" />
-      </Transition>
+      </BlokkliTransition>
     </div>
   </Teleport>
   <PluginToolbarButton
@@ -26,6 +26,7 @@
 <script setup>
 import { useBlokkli, defineBlokkliFeature, ref, computed } from "#imports";
 import { PluginToolbarButton } from "#blokkli/plugins";
+import { BlokkliTransition } from "#blokkli/components";
 import Palette from "./Palette/index.vue";
 defineBlokkliFeature({
   id: "command-palette",

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

@@ -3,18 +3,10 @@
     id="conversions"
     :title="$t('convertTo', 'Convert to...')"
     :enabled="!!possibleConversions.length"
-  >
-    <button
-      v-for="conversion in possibleConversions"
-      :key="conversion.id"
-      @click.prevent="onConvert(conversion.id)"
-    >
-      <ItemIcon :bundle="conversion.id" />
-      <div>
-        <div>{{ conversion.label }}</div>
-      </div>
-    </button>
-  </PluginItemDropdown>
+    :items="possibleConversions"
+    weight="900"
+    @select="onConvert($event.id)"
+  />
 </template>
 
 <script setup>
@@ -25,7 +17,6 @@ import {
   useLazyAsyncData,
   watch
 } from "#imports";
-import { ItemIcon } from "#blokkli/components";
 import { PluginItemDropdown } from "#blokkli/plugins";
 import { falsy, onlyUnique } from "#blokkli/helpers";
 const { adapter } = defineBlokkliFeature({
@@ -69,9 +60,16 @@ const possibleConversions = computed(() => {
     return [];
   }
   const sourceType = itemBundleIds.value[0];
+  const titleBase = $t("conversionsConvertTo", "Convert to: @bundle");
   return conversions.value.filter(
     (v) => v.sourceBundle === sourceType && types.allowedTypesInList.value.includes(v.targetBundle)
-  ).map((v) => types.getBlockBundleDefinition(v.targetBundle)).filter(falsy);
+  ).map((v) => types.getBlockBundleDefinition(v.targetBundle)).filter(falsy).map((v) => {
+    return {
+      id: v.id,
+      label: titleBase.replace("@bundle", v.label),
+      bundle: v.id
+    };
+  });
 });
 </script>
 

package/dist/runtime/components/Edit/Features/Debug/Viewport/index.vue

@@ -15,6 +15,13 @@
     :style="rect"
   />
 
+  <div
+    v-for="(rect, i) in intersectionRects"
+    :key="'intersection_' + i"
+    class="bk-debug-intersection-rects"
+    :style="rect"
+  />
+
   <div
     v-for="(line, i) in linesRects"
     :key="i"
@@ -25,6 +32,7 @@
 
 <script setup>
 import { useBlokkli, computed } from "#imports";
+import { subtractRectFromViewport } from "#blokkli/helpers";
 const { ui } = useBlokkli();
 const rectToStyle = (rect) => {
   return {
@@ -81,4 +89,10 @@ const visibleViewportOverlayStyle = computed(
 const visibleViewportOverlayPaddedStyle = computed(
   () => rectToStyle(ui.visibleViewportPadded.value)
 );
+const intersectionRects = computed(() => {
+  return subtractRectFromViewport(
+    ui.viewport.value,
+    ui.visibleViewport.value
+  ).map(rectToStyle);
+});
 </script>

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

@@ -47,30 +47,26 @@
         <h2>Rendering</h2>
         <div class="bk-debug-list">
           <div v-for="overlay in debug.overlays.value" :key="overlay.id">
-            <label class="bk-checkbox-toggle">
-              <input
-                :checked="overlay.active"
-                type="checkbox"
-                @change="debug.toggleOverlay(overlay.id)"
-              />
-              <div class="bk-checkbox-toggle-toggle" />
-              <div class="bk-checkbox-toggle-label">
-                <div>{{ overlay.label }}</div>
-              </div>
-            </label>
+            <FormToggle
+              :label="overlay.label"
+              :model-value="overlay.active"
+              @update:model-value="debug.toggleOverlay(overlay.id)"
+            />
           </div>
           <div>
-            <label class="bk-checkbox-toggle">
-              <input
-                :checked="ui.isTransforming.value"
-                type="checkbox"
-                @change="toggleTransforming"
-              />
-              <div class="bk-checkbox-toggle-toggle" />
-              <div class="bk-checkbox-toggle-label">
-                <div>Set transforming</div>
-              </div>
-            </label>
+            <FormToggle
+              label="Set transforming"
+              :model-value="ui.isTransforming.value"
+              @update:model-value="toggleTransforming"
+            />
+          </div>
+
+          <div>
+            <FormToggle
+              label="Enable WebGL"
+              :model-value="animation.webglEnabled.value"
+              @update:model-value="toggleWebgl"
+            />
           </div>
         </div>
       </section>
@@ -124,7 +120,7 @@ import {
   computed
 } from "#imports";
 import { PluginSidebar, PluginDebugOverlay } from "#blokkli/plugins";
-import { Icon } from "#blokkli/components";
+import { Icon, FormToggle } from "#blokkli/components";
 import { icons } from "#blokkli-build/icons";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import DebugViewport from "./Viewport/index.vue";
@@ -135,7 +131,7 @@ const { logger } = defineBlokkliFeature({
   icon: "bug",
   description: "Provides debugging functionality."
 });
-const { keyboard, selection, eventBus, features, debug, ui } = useBlokkli();
+const { keyboard, selection, eventBus, features, debug, ui, animation } = useBlokkli();
 const iconItems = computed(() => Object.keys(icons));
 const featuresList = computed(() => {
   return features.features.value.map((v) => {
@@ -171,6 +167,13 @@ function toggleTransforming() {
     ui.setTransform("Transform plugin label");
   }
 }
+function toggleWebgl() {
+  if (animation.webglEnabled.value) {
+    animation.webglEnabled.value = false;
+  } else {
+    animation.webglEnabled.value = true;
+  }
+}
 onMounted(() => {
   eventBus.on("*", onEvent);
 });