@blokkli/editor 2.0.0-alpha.16 → 2.0.0-alpha.18

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

@@ -0,0 +1,240 @@
+<template>
+  <PluginSidebar id="debug" title="Debug" icon="bug" weight="200">
+    <div class="bk bk-debug">
+      <section>
+        <h2>Keyboard</h2>
+        <div class="bk-debug-list">
+          <div>
+            <div>Space</div>
+            <div>{{ keyboard.isPressingSpace.value }}</div>
+          </div>
+          <div>
+            <div>Control</div>
+            <div>{{ keyboard.isPressingControl.value }}</div>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2>Selection</h2>
+        <div class="bk-debug-list">
+          <div>
+            <div>Count</div>
+            <div>{{ selection.uuids.value.length }}</div>
+          </div>
+          <div>
+            <div>isDragging</div>
+            <div>{{ selection.isDragging.value }}</div>
+          </div>
+          <div>
+            <div>isDraggingExisting</div>
+            <div>{{ selection.isDraggingExisting.value }}</div>
+          </div>
+          <div>
+            <div>Is multiselecting</div>
+            <div>{{ selection.isMultiSelecting.value }}</div>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2>Rendering</h2>
+        <div class="bk-debug-list">
+          <div>
+            <div>DPI</div>
+            <div>{{ animation.dpi.value }}</div>
+          </div>
+          <div v-for="overlay in debug.overlays.value" :key="overlay.id">
+            <FormToggle
+              :label="overlay.label"
+              :model-value="overlay.active"
+              @update:model-value="debug.toggleOverlay(overlay.id)"
+            />
+          </div>
+          <div>
+            <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>
+            <button
+              class="bk-button bk-is-small"
+              @click.prevent="() => dom.updateVisibleRects()"
+            >
+              Refresh Rects
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2>Logging</h2>
+        <div class="bk-debug-list">
+          <div>
+            <div>
+              <FormToggle v-model="logEvents" label="Log Events" />
+            </div>
+            <div>
+              <button
+                class="bk-button bk-is-small"
+                @click.prevent="() => console.log(dom.getDebugData())"
+              >
+                Log DOM state
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2>Icons</h2>
+        <div class="bk-debug-icons">
+          <div v-for="icon in iconItems" :key="icon">
+            <Icon :name="icon" />
+            <p>{{ icon }}</p>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2>Features</h2>
+        <div class="bk-debug-features">
+          <div v-for="feature in featuresList" :key="feature.id">
+            <div>
+              <span
+                class="bk-status-indicator"
+                :class="feature.mounted ? 'bk-is-success' : 'bk-is-danger'"
+              />
+            </div>
+            <div>
+              <h3>{{ feature.label }}</h3>
+              <div>{{ feature.id }}</div>
+              <p>{{ feature.description }}</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </PluginSidebar>
+
+  <PluginDebugOverlay id="viewport" title="Show viewport overlay">
+    <DebugViewport />
+  </PluginDebugOverlay>
+
+  <PluginDebugOverlay id="rects" title="Show field and block rects">
+    <DebugRects />
+  </PluginDebugOverlay>
+
+  <PluginItemDropdown
+    v-if="itemDropdownItems.length"
+    id="selection"
+    :title="$t('selectionActionGroupTitle', 'Selection')"
+    enabled
+    :items="itemDropdownItems"
+    icon="bug"
+    weight="200"
+    @select="onSelectDropdownItem"
+  />
+</template>
+
+<script setup>
+import { useBlokkli, onMounted, onBeforeUnmount, computed } from "#imports";
+import {
+  PluginSidebar,
+  PluginDebugOverlay,
+  PluginItemDropdown
+} from "#blokkli/plugins";
+import { Icon, FormToggle } from "#blokkli/components";
+import { icons } from "#blokkli-build/icons";
+import DebugViewport from "./Viewport/index.vue";
+import DebugRects from "./Rects/index.vue";
+const { logger } = defineProps({
+  logger: { type: Object, required: true }
+});
+const {
+  keyboard,
+  selection,
+  eventBus,
+  features,
+  debug,
+  ui,
+  animation,
+  dom,
+  storage,
+  $t
+} = useBlokkli();
+const logEvents = storage.use("debug:log-events", true);
+const iconItems = computed(() => Object.keys(icons));
+const featuresList = computed(() => {
+  return features.features.value.map((v) => {
+    const feature = features.mountedFeatures.value.find((f) => f.id === v.id);
+    return {
+      id: v.id,
+      label: v.label,
+      description: v.description,
+      dependencies: v.dependencies?.join(", "),
+      mounted: !!feature
+    };
+  });
+});
+const onEvent = (name, data) => {
+  if (!logEvents.value) {
+    return;
+  }
+  if (name === "animationFrame" || name === "animationFrame:before" || name === "animationFrame:after" || name === "canvas:draw") {
+    return;
+  }
+  logger.log("Event: " + String(name), data);
+};
+function toggleTransforming() {
+  if (ui.isTransforming.value) {
+    ui.setTransform();
+  } else {
+    ui.setTransform("Transform plugin label");
+  }
+}
+function toggleWebgl() {
+  if (animation.webglEnabled.value) {
+    animation.webglEnabled.value = false;
+  } else {
+    animation.webglEnabled.value = true;
+  }
+}
+onMounted(() => {
+  eventBus.on("*", onEvent);
+});
+onBeforeUnmount(() => {
+  eventBus.off("*", onEvent);
+});
+const itemDropdownItems = computed(() => {
+  if (selection.uuids.value.length === 1) {
+    return [
+      {
+        id: "copy-uuid",
+        label: "Copy UUID"
+      }
+    ];
+  }
+  return [];
+});
+async function onSelectDropdownItem(item) {
+  if (item.id === "copy-uuid") {
+    const type = "text/plain";
+    const clipboardItemData = {
+      [type]: selection.uuids.value.at(0) ?? ""
+    };
+    const clipboardItem = new ClipboardItem(clipboardItemData);
+    await navigator.clipboard.write([clipboardItem]);
+  }
+}
+</script>

package/dist/runtime/components/Edit/Features/Debug/Renderer.vue.d.ts

@@ -0,0 +1,6 @@
+import type { DebugLogger } from '#blokkli/helpers/debugProvider';
+type __VLS_Props = {
+    logger: DebugLogger;
+};
+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;

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

@@ -1,185 +1,27 @@
 <template>
-  <PluginSidebar
-    v-if="debug.isEnabled.value"
-    id="debug"
-    title="Debug"
-    icon="bug"
-    weight="200"
-  >
-    <div class="bk bk-debug">
-      <section>
-        <h2>Keyboard</h2>
-        <div class="bk-debug-list">
-          <div>
-            <div>Space</div>
-            <div>{{ keyboard.isPressingSpace.value }}</div>
-          </div>
-          <div>
-            <div>Control</div>
-            <div>{{ keyboard.isPressingControl.value }}</div>
-          </div>
-        </div>
-      </section>
-
-      <section>
-        <h2>Selection</h2>
-        <div class="bk-debug-list">
-          <div>
-            <div>Count</div>
-            <div>{{ selection.uuids.value.length }}</div>
-          </div>
-          <div>
-            <div>isDragging</div>
-            <div>{{ selection.isDragging.value }}</div>
-          </div>
-          <div>
-            <div>isDraggingExisting</div>
-            <div>{{ selection.isDraggingExisting.value }}</div>
-          </div>
-          <div>
-            <div>Is multiselecting</div>
-            <div>{{ selection.isMultiSelecting.value }}</div>
-          </div>
-        </div>
-      </section>
-
-      <section>
-        <h2>Rendering</h2>
-        <div class="bk-debug-list">
-          <div v-for="overlay in debug.overlays.value" :key="overlay.id">
-            <FormToggle
-              :label="overlay.label"
-              :model-value="overlay.active"
-              @update:model-value="debug.toggleOverlay(overlay.id)"
-            />
-          </div>
-          <div>
-            <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>
-
-      <section>
-        <h2>Icons</h2>
-        <div class="bk-debug-icons">
-          <div v-for="icon in iconItems" :key="icon">
-            <Icon :name="icon" />
-            <p>{{ icon }}</p>
-          </div>
-        </div>
-      </section>
-
-      <section>
-        <h2>Features</h2>
-        <div class="bk-debug-features">
-          <div v-for="feature in featuresList" :key="feature.id">
-            <div>
-              <span
-                class="bk-status-indicator"
-                :class="feature.mounted ? 'bk-is-success' : 'bk-is-danger'"
-              />
-            </div>
-            <div>
-              <h3>{{ feature.label }}</h3>
-              <div>{{ feature.id }}</div>
-              <p>{{ feature.description }}</p>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  </PluginSidebar>
-
-  <PluginDebugOverlay id="viewport" title="Show viewport overlay">
-    <DebugViewport />
-  </PluginDebugOverlay>
-
-  <PluginDebugOverlay id="rects" title="Show field and block rects">
-    <DebugRects />
-  </PluginDebugOverlay>
+  <Renderer v-if="debug.isEnabled.value" :logger />
 </template>
 
 <script setup>
-import {
-  useBlokkli,
-  onMounted,
-  onBeforeUnmount,
-  defineBlokkliFeature,
-  computed
-} from "#imports";
-import { PluginSidebar, PluginDebugOverlay } from "#blokkli/plugins";
-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";
-import DebugRects from "./Rects/index.vue";
+import { defineBlokkliFeature, useBlokkli } from "#imports";
+import Renderer from "./Renderer.vue";
 const { logger } = defineBlokkliFeature({
   id: "debug",
   label: "Debug",
   icon: "bug",
   description: "Provides debugging functionality."
 });
-const { keyboard, selection, eventBus, features, debug, ui, animation } = useBlokkli();
-const iconItems = computed(() => Object.keys(icons));
-const featuresList = computed(() => {
-  return features.features.value.map((v) => {
-    const feature = features.mountedFeatures.value.find((f) => f.id === v.id);
-    return {
-      id: v.id,
-      label: v.label,
-      description: v.description,
-      dependencies: v.dependencies?.join(", "),
-      mounted: !!feature
-    };
-  });
-});
+const { debug, ui } = useBlokkli();
 onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value) {
+    return;
+  }
   if (e.code === "=" && e.meta) {
     e.originalEvent.preventDefault();
     debug.toggle();
   }
 });
-const onEvent = (name, data) => {
-  if (!debug.isEnabled.value) {
-    return;
-  }
-  if (name === "animationFrame" || name === "animationFrame:before" || name === "canvas:draw") {
-    return;
-  }
-  logger.log("Event: " + String(name), data);
-};
-function toggleTransforming() {
-  if (ui.isTransforming.value) {
-    ui.setTransform();
-  } else {
-    ui.setTransform("Transform plugin label");
-  }
-}
-function toggleWebgl() {
-  if (animation.webglEnabled.value) {
-    animation.webglEnabled.value = false;
-  } else {
-    animation.webglEnabled.value = true;
-  }
-}
-onMounted(() => {
-  eventBus.on("*", onEvent);
-});
-onBeforeUnmount(() => {
-  eventBus.off("*", onEvent);
-});
 </script>
 
 <script>

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

@@ -1,8 +1,8 @@
 <template>
   <PluginItemAction
     id="delete"
+    edit-only
     :title="$t('deleteButton', 'Delete')"
-    :disabled="state.editMode.value !== 'editing'"
     multiple
     key-code="Delete"
     icon="delete"

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

@@ -7,7 +7,7 @@
     <BlokkliTransition name="drag-item">
       <div
         v-show="activeLabel"
-        class="bk-dragging-overlay-label"
+        class="bk bk-dragging-overlay-label"
         :style="{ backgroundColor: currentActiveColor }"
       >
         <Icon name="cursor-move" />
@@ -69,7 +69,14 @@ import {
 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();
+const {
+  dom,
+  ui,
+  animation,
+  theme,
+  types,
+  element: elementProvider
+} = useBlokkli();
 const props = defineProps({
   items: { type: Array, required: true },
   x: { type: Number, required: true },
@@ -201,7 +208,11 @@ onMounted(() => {
     if (!itemElement) {
       return;
     }
-    const element = itemElement.querySelector(".bk-drop-element") || itemElement;
+    const element = elementProvider.query(
+      itemElement,
+      ".bk-drop-element",
+      "Find drop element for drag item."
+    ) || itemElement;
     return {
       rect: element.getBoundingClientRect(),
       element,
@@ -259,9 +270,6 @@ onMounted(() => {
     let bundle;
     let label = "";
     if (!markup) {
-      if (item.item.itemType === "existing" && item.item.editTitle) {
-        label = item.item.editTitle;
-      }
       if ("itemBundle" in item.item) {
         bundle = item.item.itemBundle;
         if (bundle) {

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

@@ -14,6 +14,7 @@ import {
   toShaderColor
 } from "#blokkli/helpers";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
 import { ref, computed, useBlokkli, onBeforeUnmount } from "#imports";
 import {
   setBuffersAndAttributes,
@@ -60,7 +61,8 @@ const {
   animation,
   state,
   runtimeConfig,
-  types
+  types,
+  fields
 } = useBlokkli();
 const gl = animation.gl();
 const canvas = animation.getCanvasElement();
@@ -120,7 +122,7 @@ const emitDrop = async () => {
       if (!hostUuid || !fieldName) {
         return;
       }
-      const field = dom.findField(hostUuid, fieldName);
+      const field = fields.find(hostUuid, fieldName);
       if (!field) {
         return;
       }
@@ -148,19 +150,21 @@ const emitDrop = async () => {
 const draggingBundles = computed(
   () => props.items.flatMap((item) => {
     const bundles = [];
-    if ("itemBundle" in item && item.itemBundle) {
+    if (item.itemType === "existing" || item.itemType === "existing_structure") {
+      bundles.push(item.block.bundle);
+      if (item.block.library?.reusableBundle) {
+        bundles.push(item.block.library.reusableBundle);
+      }
+    } else if (item.itemBundle) {
       bundles.push(item.itemBundle);
     }
-    if ("reusableBundle" in item && item.reusableBundle) {
-      bundles.push(item.reusableBundle);
-    }
     return bundles;
   }).filter(falsy)
 );
 const selectionUuids = computed(
   () => props.items.map((item) => {
     if (item.itemType === "existing") {
-      return item.uuid;
+      return item.block.uuid;
     }
   }).filter(falsy)
 );
@@ -304,7 +308,7 @@ const buildFieldRect = (key) => {
   if (!uuid || !name) {
     return;
   }
-  const field = dom.findField(uuid, name);
+  const field = fields.find(uuid, name);
   if (!field) {
     return;
   }
@@ -604,11 +608,11 @@ function setHoveredFieldArea(box, mouse) {
     }
     return;
   }
-  const fields = Object.values(fieldCache);
+  const fields2 = Object.values(fieldCache);
   let highestNestingLevel = 0;
   let candidate = null;
-  for (let i = 0; i < fields.length; i++) {
-    const field = fields[i];
+  for (let i = 0; i < fields2.length; i++) {
+    const field = fields2[i];
     if (!field.canAddChildren) {
       continue;
     }
@@ -626,6 +630,8 @@ function setHoveredFieldArea(box, mouse) {
     activeHoverField.value = candidate;
   }
 }
+let bufferInfo = null;
+let bufferChanged = false;
 onBlokkliEvent("canvas:draw", () => {
   const scale = ui.artboardScale.value;
   const offset = { ...ui.artboardOffset.value };
@@ -636,11 +642,9 @@ onBlokkliEvent("canvas:draw", () => {
     height: props.box.height / scale
   };
   const mouseAbsolute = toCanvasSpaceCoordinates(props.mouseX, props.mouseY);
-  if (gl && programInfo) {
-    gl.useProgram(programInfo.program);
-    animation.setSharedUniforms(gl, programInfo);
-  }
-  const { info, hasChanged } = collector.getBufferInfo();
+  const result = collector.getBufferInfo();
+  bufferInfo = result.info;
+  bufferChanged = result.hasChanged;
   if (!props.isTouch) {
     if (cursorIsInsideClipped()) {
       const closest = collector.getClosestIntersectingRect(
@@ -652,43 +656,46 @@ onBlokkliEvent("canvas:draw", () => {
       active.value = null;
     }
   }
-  if (programInfo && gl) {
-    setHoveredFieldArea(dragBox.value, mouseAbsolute);
-    setUniforms(programInfo, uniforms.value);
-    if (info) {
-      if (hasChanged && gl && programInfo) {
-        setBuffersAndAttributes(gl, programInfo, info);
-      }
-      if (gl) {
-        drawBufferInfo(gl, info, gl.TRIANGLES);
+  setHoveredFieldArea(dragBox.value, mouseAbsolute);
+  if (!gl && ctx) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    const rects = Object.values(collector.rects);
+    for (let i = 0; i < rects.length; i++) {
+      const rect = rects[i];
+      if (active.value?.id === rect.id) {
+        ctx.fillStyle = rect.color;
+      } else {
+        ctx.fillStyle = rect.colorAlpha;
       }
+      ctx.fillRect(
+        (rect.x * scale + offset.x) * animation.dpi.value,
+        (rect.y * scale + offset.y) * animation.dpi.value,
+        rect.width * animation.dpi.value * scale,
+        rect.height * animation.dpi.value * scale
+      );
     }
-    return;
-  }
-  if (!ctx) {
-    return;
-  }
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  const rects = Object.values(collector.rects);
-  for (let i = 0; i < rects.length; i++) {
-    const rect = rects[i];
-    if (active.value?.id === rect.id) {
-      ctx.fillStyle = rect.color;
-    } else {
-      ctx.fillStyle = rect.colorAlpha;
-    }
-    ctx.fillRect(
-      (rect.x * scale + offset.x) * animation.dpi.value,
-      (rect.y * scale + offset.y) * animation.dpi.value,
-      rect.width * animation.dpi.value * scale,
-      rect.height * animation.dpi.value * scale
-    );
   }
 });
+if (gl && programInfo) {
+  defineRenderer("drop-targets", {
+    zIndex: 400,
+    only: true,
+    cursor: () => "grabbing",
+    render: () => {
+      gl.useProgram(programInfo.program);
+      animation.setSharedUniforms(gl, programInfo);
+      setUniforms(programInfo, uniforms.value);
+      if (!bufferInfo) {
+        return;
+      }
+      if (bufferChanged) {
+        setBuffersAndAttributes(gl, programInfo, bufferInfo);
+      }
+      drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
+    }
+  });
+}
 onBeforeUnmount(() => {
-  if (gl) {
-    gl.clear(gl.COLOR_BUFFER_BIT);
-  }
   if (ctx) {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
   }