@blokkli/editor 2.0.0-alpha.13 → 2.0.0-alpha.15

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);
 });

package/dist/runtime/components/Edit/Features/Diff/DiffView/index.vue

@@ -1,197 +1,20 @@
 <template>
-  <div class="bk bk-diff-view bk-scrollbar-light">
-    <table class="bk-diff-table">
-      <thead>
-        <tr>
-          <th>{{ $t("diffTableChange", "Change") }}</th>
-          <th>{{ $t("diffTableBundle", "Type") }}</th>
-          <th>{{ $t("diffTableProperty", "Property") }}</th>
-          <th>{{ $t("diffTableDiff", "Diff") }}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <template v-for="item in diffItems" :key="item.uuid">
-          <tr>
-            <td
-              :rowspan="Math.max(1, item.props.length)"
-              class="bk-diff-status"
-            >
-              <div
-                v-if="item.status === 'added'"
-                class="bk-diff-status-label bk-is-added"
-              >
-                {{ $t("diffStatusAdded", "Added") }}
-              </div>
-              <div
-                v-else-if="item.status === 'removed'"
-                class="bk-diff-status-label bk-is-removed"
-              >
-                {{ $t("diffStatusDeleted", "Deleted") }}
-              </div>
-              <div v-else class="bk-diff-status-label">
-                {{ $t("diffStatusEdited", "Edited") }}
-              </div>
-            </td>
-            <td
-              :rowspan="Math.max(1, item.props.length)"
-              class="bk-diff-bundle"
-            >
-              <button
-                class="bk-blokkli-item-label"
-                :disabled="item.status === 'removed'"
-                @click="scrollToBlock(item.uuid)"
-              >
-                <div class="bk-blokkli-item-label-icon">
-                  <ItemIcon :bundle="item.bundle" />
-                </div>
-                <span>{{ getLabel(item.bundle) }}</span>
-              </button>
-            </td>
-
-            <template v-if="item.props.length > 0">
-              <td>
-                <strong>{{ item.props[0].key }}</strong>
-              </td>
-              <td class="bk-diff-monospace">
-                <div class="bk-diff-prop-diff" v-html="item.props[0].diff" />
-              </td>
-            </template>
-            <template v-else>
-              <td />
-              <td />
-            </template>
-          </tr>
-          <tr
-            v-for="prop in item.props.slice(1)"
-            :key="prop.key"
-            class="bk-diff-prop-row"
-          >
-            <td>
-              <strong>{{ prop.key }}</strong>
-            </td>
-            <td class="bk-diff-monospace">
-              <div class="bk-diff-prop-diff" v-html="prop.diff" />
-            </td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
+  <div class="bk bk-diff-sidebar-pane">
+    <DiffViewerState
+      v-if="stateBefore"
+      :state-before
+      :state-after
+      scheme="orange"
+    />
   </div>
 </template>
 
 <script setup>
-import { computed, useBlokkli } from "#imports";
-import { ItemIcon } from "#blokkli/components";
-import diff from "html-diff-ts";
-const { types, $t, adapter, state, eventBus, dom, definitions } = useBlokkli();
-function getProps(bundle, props) {
-  const definition = definitions.getDefaultDefinition(bundle);
-  if (definition?.editor?.mapDiffProps) {
-    return definition.editor.mapDiffProps(props);
-  }
-  if (typeof props === "object") {
-    return Object.entries(props).reduce(
-      (acc, [key, value]) => {
-        if (typeof value === "string" || typeof value === "number") {
-          acc[key] = value.toString();
-        } else if (typeof value === "object") {
-          try {
-            const json = JSON.stringify(value, null, 2);
-            acc[key] = `<pre>${json}</pre>`;
-          } catch {
-          }
-        }
-        return acc;
-      },
-      {}
-    );
-  }
-  return {};
-}
-const stateBefore = await adapter.loadStateAtIndex(-1).then(
-  (v) => adapter.mapState(v)
-);
-function buildDiffItems(fields) {
-  const items = (fields || []).flatMap((v) => v.list);
-  return items;
-}
-const itemsBefore = computed(
-  () => buildDiffItems(stateBefore.mutatedState?.fields)
-);
-const itemsAfter = computed(() => buildDiffItems(state.mutatedFields.value));
-const diffItems = computed(() => {
-  const diffMap = /* @__PURE__ */ new Map();
-  itemsBefore.value.forEach((beforeItem) => {
-    const afterItem = itemsAfter.value.find(
-      (item) => item.uuid === beforeItem.uuid
-    );
-    const beforeProps = getProps(beforeItem.bundle, beforeItem.props);
-    if (!afterItem) {
-      diffMap.set(beforeItem.uuid, {
-        uuid: beforeItem.uuid,
-        bundle: beforeItem.bundle,
-        status: "removed",
-        props: Object.entries(beforeProps).map(([key, value]) => ({
-          key,
-          value,
-          diff: diff(value, "")
-        }))
-      });
-    } else {
-      const afterProps = getProps(afterItem.bundle, afterItem.props);
-      const changedProps = [];
-      Object.entries(beforeProps).forEach(([key, beforeValue]) => {
-        const afterValue = afterProps[key];
-        if (beforeValue !== afterValue) {
-          changedProps.push({
-            key,
-            diff: diff(beforeValue, afterValue)
-          });
-        }
-      });
-      Object.keys(afterProps).forEach((key) => {
-        if (!(key in beforeProps)) {
-          changedProps.push({
-            key,
-            diff: diff("", afterProps[key])
-          });
-        }
-      });
-      if (changedProps.length > 0) {
-        diffMap.set(beforeItem.uuid, {
-          uuid: beforeItem.uuid,
-          bundle: beforeItem.bundle,
-          status: "changed",
-          props: changedProps
-        });
-      }
-    }
-  });
-  itemsAfter.value.forEach((afterItem) => {
-    if (!itemsBefore.value.some((item) => item.uuid === afterItem.uuid)) {
-      const afterProps = getProps(afterItem.bundle, afterItem.props);
-      diffMap.set(afterItem.uuid, {
-        uuid: afterItem.uuid,
-        bundle: afterItem.bundle,
-        status: "added",
-        props: Object.entries(afterProps).map(([key, value]) => ({
-          key,
-          diff: diff("", value)
-        }))
-      });
-    }
-  });
-  return Array.from(diffMap.values()).sort((a, b) => {
-    const aY = dom.getBlockRect(a.uuid)?.y || 0;
-    const bY = dom.getBlockRect(b.uuid)?.y || 0;
-    return aY - bY;
-  });
+import { useBlokkli, useAsyncData } from "#imports";
+import { DiffViewerState } from "#blokkli/components";
+const { adapter, state } = useBlokkli();
+const { data: stateBefore } = await useAsyncData("stateBefore", () => {
+  return adapter.loadStateAtIndex(-1).then((v) => adapter.mapState(v));
 });
-function getLabel(bundle) {
-  return types.getBlockBundleDefinition(bundle)?.label || bundle;
-}
-function scrollToBlock(uuid) {
-  eventBus.emit("scrollIntoView", { uuid, center: true });
-  eventBus.emit("select", uuid);
-}
+const stateAfter = state.getMappedState();
 </script>

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

@@ -9,7 +9,7 @@
     weight="-400"
     beta
   >
-    <DiffView />
+    <DiffView :key="state.currentMutationIndex.value" />
   </PluginSidebar>
 </template>
 
@@ -25,7 +25,7 @@ defineBlokkliFeature({
   requiredAdapterMethods: ["loadStateAtIndex"],
   beta: true
 });
-const { $t } = useBlokkli();
+const { $t, state } = useBlokkli();
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/DraggingOverlay/DragItems/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    class="bk-dragging-overlay"
+    class="bk-vars bk-dragging-overlay"
     :style="style"
     :class="[{ 'bk-is-touch': isTouch }, { 'bk-is-active': !!activeLabel }]"
   >
-    <Transition name="bk-drag-item">
+    <BlokkliTransition name="drag-item">
       <div
         v-show="activeLabel"
         class="bk-dragging-overlay-label"
@@ -13,7 +13,7 @@
         <Icon name="cursor-move" />
         <p v-html="currentActiveLabel" />
       </div>
-    </Transition>
+    </BlokkliTransition>
     <div
       v-for="(rect, i) in rects"
       :key="i"
@@ -66,7 +66,7 @@ import {
   lerp,
   falsy
 } from "#blokkli/helpers";
-import { Icon, ItemIcon } from "#blokkli/components";
+import { Icon, ItemIcon, BlokkliTransition } from "#blokkli/components";
 import { easeOutElastic } from "#blokkli/helpers/easing";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 const { dom, ui, animation, theme, types } = useBlokkli();

package/dist/runtime/components/Edit/Features/DraggingOverlay/DropTargets/fragment.glsl

@@ -1,4 +1,4 @@
-precision mediump float;
+precision highp float;
 
 varying float v_intersecting;
 varying float v_is_hover_area;