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

package/dist/runtime/components/Edit/Features/Conversions/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/Debug/Rects/index.vue

@@ -3,80 +3,67 @@
     <canvas
       ref="canvasRects"
       :style="{
-        width: ui.viewport.value.width + 'px',
-        height: ui.viewport.value.height + 'px',
-      }"
+  width: ui.viewport.value.width + 'px',
+  height: ui.viewport.value.height + 'px'
+}"
     />
   </div>
 </template>
 
-<script setup lang="ts">
-import { useBlokkli, ref } from '#imports'
-import { intersects } from '#blokkli/helpers'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-
-const { ui, dom } = useBlokkli()
-
-const canvasRects = ref<HTMLCanvasElement | null>(null)
-
-onBlokkliEvent('canvas:draw', (e) => {
+<script setup>
+import { useBlokkli, ref } from "#imports";
+import { intersects } from "#blokkli/helpers";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+const { ui, dom } = useBlokkli();
+const canvasRects = ref(null);
+onBlokkliEvent("canvas:draw", (e) => {
   if (!canvasRects.value) {
-    return
+    return;
   }
-
-  canvasRects.value.width = ui.viewport.value.width
-  canvasRects.value.height = ui.viewport.value.height
-
-  const ctx = canvasRects.value.getContext('2d')
+  canvasRects.value.width = ui.viewport.value.width;
+  canvasRects.value.height = ui.viewport.value.height;
+  const ctx = canvasRects.value.getContext("2d");
   if (!ctx) {
-    return
+    return;
   }
-  ctx.clearRect(0, 0, ui.viewport.value.width, ui.viewport.value.height)
-  ctx.strokeStyle = 'blue'
-  const blockRects = dom.getBlockRects()
-  const viewport = ui.visibleViewport.value
-
-  const rects = Object.values(blockRects)
-
+  ctx.clearRect(0, 0, ui.viewport.value.width, ui.viewport.value.height);
+  ctx.strokeStyle = "blue";
+  const blockRects = dom.getBlockRects();
+  const viewport = ui.visibleViewport.value;
+  const rects = Object.values(blockRects);
   for (let i = 0; i < rects.length; i++) {
-    const rect = rects[i]
-
+    const rect = rects[i];
     const drawnRect = {
       x: rect.x * e.artboardScale + e.artboardOffset.x,
       y: rect.y * e.artboardScale + e.artboardOffset.y,
       width: rect.width * e.artboardScale,
-      height: rect.height * e.artboardScale,
-    }
+      height: rect.height * e.artboardScale
+    };
     if (intersects(drawnRect, viewport)) {
-      ctx.beginPath()
-      ctx.rect(drawnRect.x, drawnRect.y, drawnRect.width, drawnRect.height)
-      ctx.stroke()
+      ctx.beginPath();
+      ctx.rect(drawnRect.x, drawnRect.y, drawnRect.width, drawnRect.height);
+      ctx.stroke();
     }
   }
-
-  ctx.strokeStyle = 'red'
-
-  const visibleFieldRects = dom.getVisibleFields()
+  ctx.strokeStyle = "red";
+  const visibleFieldRects = dom.getVisibleFields();
   for (let i = 0; i < visibleFieldRects.length; i++) {
-    const key = visibleFieldRects[i]
-
-    const rect = dom.getFieldRect(key)
-
+    const key = visibleFieldRects[i];
+    const rect = dom.getFieldRect(key);
     if (!rect) {
-      continue
+      continue;
     }
-
     const drawnRect = {
       x: rect.x * e.artboardScale + e.artboardOffset.x,
       y: rect.y * e.artboardScale + e.artboardOffset.y,
       width: rect.width * e.artboardScale,
-      height: rect.height * e.artboardScale,
-    }
+      height: rect.height * e.artboardScale
+    };
     if (intersects(drawnRect, viewport)) {
-      ctx.beginPath()
-      ctx.rect(drawnRect.x, drawnRect.y, drawnRect.width, drawnRect.height)
-      ctx.stroke()
+      ctx.beginPath();
+      ctx.rect(drawnRect.x, drawnRect.y, drawnRect.width, drawnRect.height);
+      ctx.stroke();
     }
   }
-})
+});
 </script>

package/dist/runtime/components/Edit/Features/Debug/Rects/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/Debug/Viewport/index.vue

@@ -23,71 +23,62 @@
   />
 </template>
 
-<script setup lang="ts">
-import { useBlokkli, computed } from '#imports'
-import type { Rectangle } from '#blokkli/types'
-
-const { ui } = useBlokkli()
-
-const rectToStyle = (rect: Rectangle) => {
+<script setup>
+import { useBlokkli, computed } from "#imports";
+const { ui } = useBlokkli();
+const rectToStyle = (rect) => {
   return {
-    top: rect.y + 'px',
-    left: rect.x + 'px',
-    width: rect.width + 'px',
-    height: rect.height + 'px',
-  }
-}
-const viewportBlockingRects = computed(() =>
-  ui.viewportBlockingRects.value.map(rectToStyle),
-)
-
+    top: rect.y + "px",
+    left: rect.x + "px",
+    width: rect.width + "px",
+    height: rect.height + "px"
+  };
+};
+const viewportBlockingRects = computed(
+  () => ui.viewportBlockingRects.value.map(rectToStyle)
+);
 const linesRects = computed(() => {
-  const rects: any = []
-
+  const rects = [];
   ui.viewportBlockingRects.value.forEach((rect) => {
     rects.push(
       rectToStyle({
         x: rect.x,
         y: 0,
         width: 1,
-        height: window.innerHeight,
-      }),
-    )
+        height: window.innerHeight
+      })
+    );
     rects.push(
       rectToStyle({
         x: rect.x + rect.width,
         y: 0,
         width: 1,
-        height: window.innerHeight,
-      }),
-    )
+        height: window.innerHeight
+      })
+    );
     rects.push(
       rectToStyle({
         x: 0,
         y: rect.y,
         width: window.innerWidth,
-        height: 1,
-      }),
-    )
-
+        height: 1
+      })
+    );
     rects.push(
       rectToStyle({
         x: 0,
         y: rect.y + rect.height,
         width: window.innerWidth,
-        height: 1,
-      }),
-    )
-  })
-
-  return rects
-})
-
-const visibleViewportOverlayStyle = computed(() =>
-  rectToStyle(ui.visibleViewport.value),
-)
-
-const visibleViewportOverlayPaddedStyle = computed(() =>
-  rectToStyle(ui.visibleViewportPadded.value),
-)
+        height: 1
+      })
+    );
+  });
+  return rects;
+});
+const visibleViewportOverlayStyle = computed(
+  () => rectToStyle(ui.visibleViewport.value)
+);
+const visibleViewportOverlayPaddedStyle = computed(
+  () => rectToStyle(ui.visibleViewportPadded.value)
+);
 </script>

package/dist/runtime/components/Edit/Features/Debug/Viewport/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/Debug/index.vue

@@ -115,86 +115,72 @@
   </PluginDebugOverlay>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   useBlokkli,
   onMounted,
   onBeforeUnmount,
   defineBlokkliFeature,
-  computed,
-} from '#imports'
-import { PluginSidebar, PluginDebugOverlay } from '#blokkli/plugins'
-import { Icon } from '#blokkli/components'
-import { icons, type BlokkliIcon } from '#blokkli-build/icons'
-import { featureComponents } from '#blokkli-build/features'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import DebugViewport from './Viewport/index.vue'
-import DebugRects from './Rects/index.vue'
-
+  computed
+} from "#imports";
+import { PluginSidebar, PluginDebugOverlay } from "#blokkli/plugins";
+import { Icon } 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";
 const { logger } = defineBlokkliFeature({
-  id: 'debug',
-  label: 'Debug',
-  icon: 'bug',
-  description: 'Provides debugging functionality.',
-})
-
-const { keyboard, selection, eventBus, features, debug, ui } = useBlokkli()
-
-const iconItems = computed(() => Object.keys(icons) as BlokkliIcon[])
-
+  id: "debug",
+  label: "Debug",
+  icon: "bug",
+  description: "Provides debugging functionality."
+});
+const { keyboard, selection, eventBus, features, debug, ui } = useBlokkli();
+const iconItems = computed(() => Object.keys(icons));
 const featuresList = computed(() => {
-  return featureComponents.map((v) => {
-    const feature = features.features.value.find((f) => f.id === v.id)
+  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,
-    }
-  })
-})
-
-onBlokkliEvent('keyPressed', (e) => {
-  if (e.code === '=' && e.meta) {
-    e.originalEvent.preventDefault()
-    debug.toggle()
+      dependencies: v.dependencies?.join(", "),
+      mounted: !!feature
+    };
+  });
+});
+onBlokkliEvent("keyPressed", (e) => {
+  if (e.code === "=" && e.meta) {
+    e.originalEvent.preventDefault();
+    debug.toggle();
   }
-})
-
-const onEvent = (name: string | number | symbol, data: any) => {
+});
+const onEvent = (name, data) => {
   if (!debug.isEnabled.value) {
-    return
+    return;
   }
-  if (
-    name === 'animationFrame' ||
-    name === 'animationFrame:before' ||
-    name === 'canvas:draw'
-  ) {
-    return
+  if (name === "animationFrame" || name === "animationFrame:before" || name === "canvas:draw") {
+    return;
   }
-  logger.log('Event: ' + String(name), data)
-}
-
+  logger.log("Event: " + String(name), data);
+};
 function toggleTransforming() {
   if (ui.isTransforming.value) {
-    ui.setTransform()
+    ui.setTransform();
   } else {
-    ui.setTransform('Transform plugin label')
+    ui.setTransform("Transform plugin label");
   }
 }
-
 onMounted(() => {
-  eventBus.on('*', onEvent)
-})
-
+  eventBus.on("*", onEvent);
+});
 onBeforeUnmount(() => {
-  eventBus.off('*', onEvent)
-})
+  eventBus.off("*", onEvent);
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Debug',
-}
+  name: "Debug"
+};
 </script>

package/dist/runtime/components/Edit/Features/Debug/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/Delete/index.vue

@@ -11,77 +11,56 @@
   />
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, defineBlokkliFeature } from '#imports'
-
-import type { DraggableExistingBlock } from '#blokkli/types'
-import { PluginItemAction } from '#blokkli/plugins'
-
-const { state, $t, eventBus, dom, runtimeConfig } = useBlokkli()
-
+<script setup>
+import { useBlokkli, defineBlokkliFeature } from "#imports";
+import { PluginItemAction } from "#blokkli/plugins";
+const { state, $t, eventBus, dom, runtimeConfig } = useBlokkli();
 const { adapter } = defineBlokkliFeature({
-  id: 'delete',
-  icon: 'delete',
-  label: 'Delete',
-  requiredAdapterMethods: ['deleteBlocks'],
-  description: 'Provides an action to delete one or more blocks.',
-})
-
-/**
- * Try to find a block to select after deleting a single block.
- */
-function getSelectionAfterDelete(
-  items: DraggableExistingBlock[],
-): string | undefined {
+  id: "delete",
+  icon: "delete",
+  label: "Delete",
+  requiredAdapterMethods: ["deleteBlocks"],
+  description: "Provides an action to delete one or more blocks."
+});
+function getSelectionAfterDelete(items) {
   if (items.length !== 1) {
-    return
+    return;
   }
-
-  const uuid = items[0].uuid
-  const field = state.getFieldListForBlock(uuid)
+  const uuid = items[0].uuid;
+  const field = state.getFieldListForBlock(uuid);
   if (!field) {
-    return
+    return;
   }
-
-  const index = field.list.findIndex((v) => v.uuid === uuid)
+  const index = field.list.findIndex((v) => v.uuid === uuid);
   if (index === -1) {
-    return
+    return;
   }
-
-  // Find a matching block to select in the same field list.
-  const inList = field.list[index + 1]?.uuid || field.list[index - 1]?.uuid
+  const inList = field.list[index + 1]?.uuid || field.list[index - 1]?.uuid;
   if (inList) {
-    return inList
+    return inList;
   }
-
-  // Field does not belong to a block.
   if (field.entityType !== runtimeConfig.itemEntityType) {
-    return
+    return;
   }
-
-  // Select the block which contains the field.
-  return field.entityUuid
+  return field.entityUuid;
 }
-
-async function onClick(items: DraggableExistingBlock[]) {
-  const selectedUuidsAfter = getSelectionAfterDelete(items)
-
+async function onClick(items) {
+  const selectedUuidsAfter = getSelectionAfterDelete(items);
   await state.mutateWithLoadingState(
     () => adapter.deleteBlocks(items.map((v) => v.uuid)),
-    $t('deleteError', 'The block could not be deleted.'),
-  )
-
+    $t("deleteError", "The block could not be deleted.")
+  );
   if (selectedUuidsAfter) {
-    eventBus.emit('select', selectedUuidsAfter)
-    dom.refreshBlockRect(selectedUuidsAfter)
+    eventBus.emit("select", selectedUuidsAfter);
+    dom.refreshBlockRect(selectedUuidsAfter);
   } else {
-    eventBus.emit('select:unselect')
+    eventBus.emit("select:unselect");
   }
 }
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Delete',
-}
+  name: "Delete"
+};
 </script>

package/dist/runtime/components/Edit/Features/Delete/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;