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

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

@@ -4,11 +4,11 @@
     :title="$t('artboardResetZoom', 'Reset zoom')"
     :shortcut-group="$t('artboard', 'Artboard')"
     :tour-text="
-      $t(
-        'artboardToolbarButtonTourText',
-        'Shows the current zoom factor. Click on it to reset the zoom back to 100%.',
-      )
-    "
+  $t(
+    'artboardToolbarButtonTourText',
+    'Shows the current zoom factor. Click on it to reset the zoom back to 100%.'
+  )
+"
     icon="magnifier"
     meta
     key-code="0"
@@ -28,11 +28,11 @@
     :title-on="$t('artboardOverviewShow', 'Show overview')"
     :title-off="$t('artboardOverviewHide', 'Hide overview')"
     :tour-text="
-      $t(
-        'artboardOverviewTourText',
-        `Displays a top level overview of your content.`,
-      )
-    "
+  $t(
+    'artboardOverviewTourText',
+    `Displays a top level overview of your content.`
+  )
+"
     icon="eye"
     key-code="O"
     weight="90"
@@ -45,142 +45,115 @@
   <Scrollbar :artboard="artboard" orientation="y" />
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   watch,
   computed,
   useBlokkli,
   onMounted,
   onBeforeUnmount,
-  defineBlokkliFeature,
-} from '#imports'
-import type { Coord } from '#blokkli/types'
-import { PluginToolbarButton, PluginViewOption } from '#blokkli/plugins'
-import Overview from './Overview/index.vue'
-import Scrollbar from './Scrollbar/index.vue'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import defineShortcut from '#blokkli/helpers/composables/defineShortcut'
+  defineBlokkliFeature
+} from "#imports";
+import { PluginToolbarButton, PluginViewOption } from "#blokkli/plugins";
+import { asValidNumber } from "#blokkli/helpers";
+import Overview from "./Overview/index.vue";
+import Scrollbar from "./Scrollbar/index.vue";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineShortcut from "#blokkli/helpers/composables/defineShortcut";
 import {
   createArtboard,
-  type ArtboardOptions,
-  type Artboard,
-  type PluginWheelOptions,
-  type PluginWheelFactory,
   touch,
   wheel,
   mouse,
-  dom as domPlugin,
-} from 'artboard-deluxe'
+  dom as domPlugin
+} from "artboard-deluxe";
 const { settings } = defineBlokkliFeature({
-  id: 'artboard',
-  label: 'Artboard',
-  icon: 'artboard',
-  description:
-    'Wraps the entire page in an artboard that can be zoomed and moved using the mouse.',
+  id: "artboard",
+  label: "Artboard",
+  icon: "artboard",
+  description: "Wraps the entire page in an artboard that can be zoomed and moved using the mouse.",
   settings: {
     persist: {
-      type: 'checkbox',
+      type: "checkbox",
       default: true,
-      label: 'Persist position and zoom',
-      description:
-        'Stores and restores the last position and zoom factor of the artboard.',
-      group: 'artboard',
-      viewports: ['desktop'],
+      label: "Persist position and zoom",
+      description: "Stores and restores the last position and zoom factor of the artboard.",
+      group: "artboard",
+      viewports: ["desktop"]
     },
     momentum: {
-      type: 'checkbox',
+      type: "checkbox",
       default: true,
-      label: 'Use smooth scrolling',
-      description:
-        'Applies smooth animations when scrolling or zooming the artboard.',
-      group: 'artboard',
-      viewports: ['desktop'],
+      label: "Use smooth scrolling",
+      description: "Applies smooth animations when scrolling or zooming the artboard.",
+      group: "artboard",
+      viewports: ["desktop"]
     },
     scrollSpeed: {
-      type: 'slider',
+      type: "slider",
       default: 1,
-      label: 'Artboard scroll speed',
-      group: 'artboard',
-      viewports: ['desktop'],
+      label: "Artboard scroll speed",
+      group: "artboard",
+      viewports: ["desktop"],
       min: 0.5,
       max: 1.5,
-      step: 0.05,
-    },
+      step: 0.05
+    }
   },
-  screenshot: 'feature-artboard.jpg',
-})
-
-const { context, storage, ui, animation, $t, dom, selection } = useBlokkli()
-
-const zoomLevel = computed(() => Math.round(ui.artboardScale.value * 100) + '%')
-
-const PADDING = 50
-
-const options = computed<ArtboardOptions>(() => {
+  screenshot: "feature-artboard.jpg"
+});
+const { context, storage, ui, animation, $t, dom, selection } = useBlokkli();
+const zoomLevel = computed(() => Math.round(ui.artboardScale.value * 100) + "%");
+const PADDING = 50;
+const options = computed(() => {
   return {
     maxScale: ui.isMobile.value ? 1 : 3,
-    direction: ui.isMobile.value ? 'vertical' : 'both',
+    direction: ui.isMobile.value ? "vertical" : "both",
     minScale: 0.1,
     overscrollBounds: {
       top: ui.visibleViewport.value.y + PADDING,
       left: ui.visibleViewport.value.x + PADDING,
-      right:
-        ui.viewport.value.width -
-        ui.visibleViewport.value.width -
-        ui.visibleViewport.value.x +
-        PADDING,
-      bottom: PADDING,
-    },
-  }
-})
-
-watch(options, function (newOptions) {
-  artboard.setOptions(newOptions)
-})
-
-type SavedState = {
-  offset: Coord
-  scale: number
-}
-const storageKey = computed(() => 'artboard:' + context.value.entityUuid)
-const savedState = storage.use<SavedState | null>(storageKey, null)
-
+      right: ui.viewport.value.width - ui.visibleViewport.value.width - ui.visibleViewport.value.x + PADDING,
+      bottom: PADDING
+    }
+  };
+});
+watch(options, function(newOptions) {
+  artboard.setOptions(newOptions);
+});
+const storageKey = computed(() => "artboard:" + context.value.entityUuid);
+const savedState = storage.use(storageKey, null);
 const saveState = () => {
   if (!settings.value.persist) {
-    return
+    return;
   }
   savedState.value = {
     offset: artboard.getOffset(),
-    scale: artboard.getScale(),
-  }
-}
-
-let pluginWheel: PluginWheelFactory | null = null
-
-const wheelOptions = computed<PluginWheelOptions>(() => {
+    scale: artboard.getScale()
+  };
+};
+let pluginWheel = null;
+const wheelOptions = computed(() => {
   return {
     useMomentumZoom: settings.value.momentum,
     useMomentumScroll: settings.value.momentum,
     interceptWheel: true,
     scrollSpeed: settings.value.scrollSpeed,
-    wheelZoomFactor: settings.value.scrollSpeed,
-  }
-})
-
-watch(wheelOptions, function (newOptions) {
+    wheelZoomFactor: settings.value.scrollSpeed
+  };
+});
+watch(wheelOptions, function(newOptions) {
   if (pluginWheel) {
-    pluginWheel.options.setAll(newOptions)
+    pluginWheel.options.setAll(newOptions);
   }
-})
-
-watch(selection.uuids, function () {
+});
+watch(selection.uuids, function() {
   if (artboard.getMomentum()) {
-    artboard.cancelAnimation()
+    artboard.cancelAnimation();
   }
-})
-
-function getArtboard(): Artboard {
-  pluginWheel = wheel(wheelOptions.value)
+});
+function getArtboard() {
+  pluginWheel = wheel(wheelOptions.value);
   return createArtboard(
     ui.rootElement(),
     [
@@ -189,159 +162,138 @@ function getArtboard(): Artboard {
       pluginWheel,
       domPlugin({
         element: ui.artboardElement(),
-        setInitTransformFromRect: !savedState.value || !settings.value.persist,
-        precision: 0.1,
-        restoreStyles: true,
-      }),
+        precision: 1,
+        restoreStyles: true
+      })
     ],
     {
-      initTransform:
-        savedState.value && settings.value.persist
-          ? {
-              x: savedState.value.offset.x,
-              y: savedState.value.offset.y,
-              scale: savedState.value?.scale || 1,
-            }
-          : undefined,
-      ...options.value,
-    },
-  )
+      initTransform: savedState.value && settings.value.persist ? {
+        x: asValidNumber(savedState.value.offset.x, 0),
+        y: asValidNumber(savedState.value.offset.y, 0),
+        scale: asValidNumber(savedState.value?.scale, 1)
+      } : void 0,
+      ...options.value
+    }
+  );
 }
-
-const artboard = getArtboard()
-
-watch(options, function (newOptions) {
-  artboard.setOptions(newOptions)
-})
-
-onBlokkliEvent('animationFrame:before', (time) => {
-  artboard.loop(time)
-  const artboardSize = artboard.getArtboardSize()
+const artboard = getArtboard();
+watch(options, function(newOptions) {
+  artboard.setOptions(newOptions);
+});
+onBlokkliEvent("animationFrame:before", (time) => {
+  artboard.loop(time);
+  const artboardSize = artboard.getArtboardSize();
   if (artboardSize) {
-    ui.artboardSize.value.height = artboardSize.height
-    ui.artboardSize.value.width = artboardSize.width
+    ui.artboardSize.value.height = artboardSize.height;
+    ui.artboardSize.value.width = artboardSize.width;
   }
-
-  const offset = artboard.getOffset()
-
-  // We don't need much precision here, so we can round it.
-  // This also prevents updating rects in WebGL buffers for small changes.
-  ui.artboardOffset.value.x = Math.ceil(offset.x)
-  ui.artboardOffset.value.y = Math.ceil(offset.y)
-  ui.artboardScale.value = artboard.getScale()
-  animation.requestDraw()
-})
-
+  const offset = artboard.getOffset();
+  ui.artboardOffset.value.x = asValidNumber(Math.ceil(offset.x), 0);
+  ui.artboardOffset.value.y = asValidNumber(Math.ceil(offset.y), 0);
+  ui.artboardScale.value = asValidNumber(artboard.getScale(), 1);
+  animation.requestDraw();
+});
 onMounted(() => {
-  window.addEventListener('beforeunload', saveState)
-})
-
+  window.addEventListener("beforeunload", saveState);
+});
 onBeforeUnmount(() => {
-  saveState()
-  artboard.destroy()
-  window.removeEventListener('beforeunload', saveState)
-})
-
+  saveState();
+  artboard.destroy();
+  window.removeEventListener("beforeunload", saveState);
+});
 const resetZoom = () => {
   artboard.resetZoom({
-    duration: 500,
-  })
-  animation.requestDraw()
-}
-
-onBlokkliEvent('keyPressed', (e) => {
-  if (e.code === 'Home') {
-    e.originalEvent.preventDefault()
-    artboard.scrollToTop()
-    animation.requestDraw()
-  } else if (e.code === 'End') {
-    e.originalEvent.preventDefault()
-    artboard.scrollToEnd()
-    animation.requestDraw()
-  } else if (e.code === 'PageUp') {
-    e.originalEvent.preventDefault()
-    artboard.scrollPageUp()
-    animation.requestDraw()
-  } else if (e.code === 'PageDown') {
-    e.originalEvent.preventDefault()
-    artboard.scrollPageDown()
-    animation.requestDraw()
-  } else if (e.code === 'ArrowUp') {
-    e.originalEvent.preventDefault()
-    artboard.scrollUp()
-    animation.requestDraw()
-  } else if (e.code === 'ArrowDown') {
-    e.originalEvent.preventDefault()
-    artboard.scrollDown()
-    animation.requestDraw()
-  } else if (e.code === '0' && e.meta) {
-    e.originalEvent.preventDefault()
-    resetZoom()
-  } else if (e.code === '1' && e.meta) {
-    e.originalEvent.preventDefault()
-    artboard.scaleToFit()
-    animation.requestDraw()
+    duration: 500
+  });
+  animation.requestDraw();
+};
+onBlokkliEvent("keyPressed", (e) => {
+  if (e.code === "Home") {
+    e.originalEvent.preventDefault();
+    artboard.scrollToTop();
+    animation.requestDraw();
+  } else if (e.code === "End") {
+    e.originalEvent.preventDefault();
+    artboard.scrollToEnd();
+    animation.requestDraw();
+  } else if (e.code === "PageUp") {
+    e.originalEvent.preventDefault();
+    artboard.scrollPageUp();
+    animation.requestDraw();
+  } else if (e.code === "PageDown") {
+    e.originalEvent.preventDefault();
+    artboard.scrollPageDown();
+    animation.requestDraw();
+  } else if (e.code === "ArrowUp") {
+    e.originalEvent.preventDefault();
+    artboard.scrollUp();
+    animation.requestDraw();
+  } else if (e.code === "ArrowDown") {
+    e.originalEvent.preventDefault();
+    artboard.scrollDown();
+    animation.requestDraw();
+  } else if (e.code === "0" && e.meta) {
+    e.originalEvent.preventDefault();
+    resetZoom();
+  } else if (e.code === "1" && e.meta) {
+    e.originalEvent.preventDefault();
+    artboard.scaleToFit();
+    animation.requestDraw();
   }
-})
-
+});
 defineShortcut(
   [
     {
-      code: 'Home',
-      label: $t('artboardScrollToTop', 'Scroll to top'),
+      code: "Home",
+      label: $t("artboardScrollToTop", "Scroll to top")
     },
     {
-      code: 'End',
-      label: $t('artboardScrollToEnd', 'Scroll to end'),
+      code: "End",
+      label: $t("artboardScrollToEnd", "Scroll to end")
     },
     {
-      code: 'PageUp',
-      label: $t('artboardScrollOnePageUp', 'Scroll one page up'),
+      code: "PageUp",
+      label: $t("artboardScrollOnePageUp", "Scroll one page up")
     },
     {
-      code: 'PageDown',
-      label: $t('artboardScrollOnePageDown', 'Scroll one page down'),
+      code: "PageDown",
+      label: $t("artboardScrollOnePageDown", "Scroll one page down")
     },
     {
-      code: 'ArrowUp',
-      label: $t('artboardScrollUp', 'Scroll up'),
+      code: "ArrowUp",
+      label: $t("artboardScrollUp", "Scroll up")
     },
     {
-      code: 'ArrowDown',
-      label: $t('artboardScrollDown', 'Scroll down'),
+      code: "ArrowDown",
+      label: $t("artboardScrollDown", "Scroll down")
     },
     {
-      code: '1',
-      label: $t('artboardScaleToFit', 'Scale to fit'),
-      meta: true,
-    },
+      code: "1",
+      label: $t("artboardScaleToFit", "Scale to fit"),
+      meta: true
+    }
   ].map((v) => {
-    return { ...v, group: $t('artboard', 'Artboard') }
-  }),
-)
-
-onBlokkliEvent('scrollIntoView', (e) => {
-  const rect = dom.getBlockRect(e.uuid)
+    return { ...v, group: $t("artboard", "Artboard") };
+  })
+);
+onBlokkliEvent("scrollIntoView", (e) => {
+  const rect = dom.getBlockRect(e.uuid);
   if (!rect) {
-    return
+    return;
   }
-
   if (dom.isBlockVisible(e.uuid)) {
-    return
+    return;
   }
-
-  // @TODO: Prevent scrolling into view when already
-
   artboard.scrollIntoView(rect, {
-    scale: 'none',
-    axis: 'y',
-    behavior: e.immediate ? 'instant' : 'auto',
-  })
-})
+    scale: "none",
+    axis: "y",
+    behavior: e.immediate ? "instant" : "auto"
+  });
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Artboard',
-}
+  name: "Artboard"
+};
 </script>

package/dist/runtime/components/Edit/Features/Artboard/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/Assistant/Overlay/ResultMarkup/index.vue

@@ -4,14 +4,14 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-defineProps<{
-  markup: string
-}>()
+<script setup>
+defineProps({
+  markup: { type: String, required: true }
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'AssistantResultMarkup',
-}
+  name: "AssistantResultMarkup"
+};
 </script>

package/dist/runtime/components/Edit/Features/Assistant/Overlay/ResultMarkup/index.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("vue").DefineComponent<{
+    markup: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    markup: string;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;