@revenexx/editor 0.1.0

package/dist/runtime/editor/features/artboard/Renderer.vue

@@ -0,0 +1,454 @@
+<template>
+  <Scrollbar :artboard="artboard" orientation="y" />
+  <PluginToolbarButton
+    id="artboard_reset_zoom"
+    :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%.'
+  )
+"
+    icon="bk_mdi_zoom_in"
+    meta
+    key-code="0"
+    region="artboard"
+    weight="100"
+    class="_bk_!px-0"
+    @click="onClickToolbarButton"
+  >
+    <PluginContextMenu
+      id="artboard_zoom"
+      :menu="zoomMenu"
+      class="_bk_flex _bk_h-full _bk_items-center _bk_justify-center _bk_min-w-70 _bk_px-10 _bk_tabular-nums _bk_cursor-context-menu"
+    >
+      <span>{{ zoomLevel }}</span>
+    </PluginContextMenu>
+  </PluginToolbarButton>
+
+  <Teleport
+    v-if="isOverviewVisible && dom.isReady.value"
+    :to="ui.mainLayoutElement.value"
+  >
+    <Overview :artboard="artboard" />
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  watch,
+  computed,
+  useBlokkli,
+  onMounted,
+  onBeforeUnmount,
+  defineAsyncComponent
+} from "#imports";
+import {
+  calculateIntersection,
+  isInsideRect,
+  subtractRectFromViewport
+} from "#blokkli/editor/helpers/geometry";
+import { PluginToolbarButton, PluginContextMenu } from "#blokkli/editor/plugins";
+import Scrollbar from "./Scrollbar/index.vue";
+import {
+  addElementClasses,
+  defineViewOption,
+  onBlokkliEvent
+} from "#blokkli/editor/composables";
+import { asValidNumber } from "#blokkli/editor/helpers/math";
+import {
+  createArtboard,
+  touch,
+  wheel,
+  mouse,
+  dom as domPlugin
+} from "artboard-deluxe";
+const Overview = defineAsyncComponent(() => import("./Overview/index.vue"));
+const props = defineProps({
+  persist: { type: Boolean, required: true },
+  momentum: { type: Boolean, required: true },
+  scrollSpeed: { type: Number, required: true }
+});
+addElementClasses(document.documentElement, "bk-is-artboard");
+const { context, storage, ui, animation, $t, dom, selection } = useBlokkli();
+const { isVisible: isOverviewVisible } = defineViewOption({
+  id: "artboardOverview",
+  label: $t("viewOptionArtboardOverview", "Overview"),
+  description: $t(
+    "viewOptionArtboardOverviewDescription",
+    "Displays a top-level overview of all content blocks."
+  ),
+  tourText: $t(
+    "artboardOverviewTourText",
+    "Displays a top level overview of your content."
+  ),
+  icon: "bk_mdi_crop_9_16",
+  keyCode: "O",
+  weight: 90
+});
+const artboardElement = ui.artboardElement();
+const zoomLevel = computed(() => Math.round(ui.artboardScale.value * 100) + "%");
+const ZOOM_LEVELS = [10, 25, 50, 75, 100, 125, 150, 200, 300];
+const zoomMenu = computed(() => [
+  ...ZOOM_LEVELS.map((level) => ({
+    type: "button",
+    label: level + "%",
+    icon: "bk_mdi_zoom_in",
+    callback: () => {
+      const targetScale = level / 100;
+      artboard.scaleAroundPoint(
+        ui.viewport.value.width / 2,
+        ui.viewport.value.height / 2,
+        targetScale,
+        true
+      );
+      animation.requestDraw();
+    }
+  })),
+  { type: "rule" },
+  {
+    type: "button",
+    label: $t("artboardScaleToFit", "Scale to fit"),
+    icon: "bk_mdi_fit_screen",
+    callback: () => {
+      artboard.scaleToFit();
+      animation.requestDraw();
+    }
+  }
+]);
+const PADDING = 50;
+const options = computed(() => {
+  return {
+    maxScale: ui.isMobile.value ? 1 : 3,
+    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
+    },
+    getBlockingRects: () => {
+      const toolbarRects = subtractRectFromViewport(
+        ui.viewport.value,
+        ui.visibleViewport.value
+      );
+      return [...toolbarRects, ...ui.viewportBlockingRects.value];
+    }
+  };
+});
+watch(options, function(newOptions) {
+  artboard.setOptions(newOptions);
+});
+const storageKey = computed(
+  () => "artboard:" + context.value.entityUuid + (ui.isMobile.value ? "mobile" : "desktop")
+);
+const savedState = storage.use(storageKey, null);
+const saveState = () => {
+  if (!props.persist) {
+    return;
+  }
+  savedState.value = {
+    offset: artboard.getOffset(),
+    scale: artboard.getScale()
+  };
+};
+let pluginWheel = null;
+const wheelOptions = computed(() => {
+  return {
+    useMomentumZoom: props.momentum,
+    useMomentumScroll: props.momentum,
+    interceptWheel: true,
+    scrollSpeed: props.scrollSpeed,
+    wheelZoomFactor: props.scrollSpeed
+  };
+});
+watch(wheelOptions, function(newOptions) {
+  if (pluginWheel) {
+    pluginWheel.options.setAll(newOptions);
+  }
+});
+watch(selection.uuids, function() {
+  if (artboard.getMomentum()) {
+    artboard.cancelAnimation();
+  }
+});
+function getArtboard() {
+  pluginWheel = wheel(wheelOptions.value);
+  return createArtboard(
+    ui.rootElement(),
+    [
+      mouse(),
+      touch(),
+      pluginWheel,
+      domPlugin({
+        element: artboardElement,
+        precision: 1,
+        restoreStyles: true
+      })
+    ],
+    {
+      initTransform: savedState.value && props.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);
+});
+const AUTOSCROLL_EDGE_ZONE = 80;
+const AUTOSCROLL_SPEED = 12;
+let autoScrollSpeed = 1;
+let lastScrollDirection = 0;
+function edgeStep(distance) {
+  const ratio = distance / AUTOSCROLL_EDGE_ZONE;
+  return Math.pow(ratio, 3) * AUTOSCROLL_SPEED;
+}
+let hasLeftAddList = false;
+let hasLeftEdgeZone = false;
+onBlokkliEvent("dragging:end", () => {
+  hasLeftAddList = false;
+  hasLeftEdgeZone = false;
+  autoScrollSpeed = 1;
+  lastScrollDirection = 0;
+});
+function handleAutoScroll(mouseX, mouseY) {
+  if (selection.isDragging.value) {
+    if (!hasLeftAddList) {
+      if (isInsideRect(mouseX, mouseY, ui.visibleViewportPadded.value)) {
+        hasLeftAddList = true;
+      } else {
+        return;
+      }
+    }
+    const viewportHeight = ui.visibleViewport.value.height;
+    const currentOffset = artboard.getOffset();
+    const y = Math.min(
+      Math.max(mouseY - ui.visibleViewport.value.y, 0),
+      viewportHeight
+    );
+    const isInEdgeZone = y < AUTOSCROLL_EDGE_ZONE || y > viewportHeight - AUTOSCROLL_EDGE_ZONE;
+    if (!isInEdgeZone && !hasLeftEdgeZone) {
+      hasLeftEdgeZone = true;
+    }
+    let dy = 0;
+    let currentDirection = 0;
+    if (hasLeftEdgeZone && isInEdgeZone) {
+      if (y < AUTOSCROLL_EDGE_ZONE) {
+        const dist = AUTOSCROLL_EDGE_ZONE - y;
+        dy = edgeStep(dist);
+        currentDirection = 1;
+      } else if (y > viewportHeight - AUTOSCROLL_EDGE_ZONE) {
+        const dist = y - (viewportHeight - AUTOSCROLL_EDGE_ZONE);
+        dy = -edgeStep(dist);
+        currentDirection = -1;
+      }
+    }
+    if (currentDirection !== 0 && currentDirection !== lastScrollDirection) {
+      autoScrollSpeed = 1;
+      lastScrollDirection = currentDirection;
+    }
+    if (dy !== 0) {
+      artboard.setOffset(null, currentOffset.y + dy * autoScrollSpeed);
+      autoScrollSpeed = Math.min(autoScrollSpeed * 1.01, 2.25);
+    }
+  }
+}
+onBlokkliEvent("animationFrame:before", ({ time, mouseY, mouseX }) => {
+  handleAutoScroll(mouseX, mouseY);
+  artboard.loop(time);
+  const artboardSize = artboard.getArtboardSize();
+  if (artboardSize) {
+    ui.artboardSize.value.height = artboardSize.height;
+    ui.artboardSize.value.width = artboardSize.width;
+  }
+  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);
+});
+onBeforeUnmount(() => {
+  saveState();
+  artboard.destroy();
+  window.removeEventListener("beforeunload", saveState);
+});
+function onClickToolbarButton() {
+  ui.openContextMenu.value = "";
+  resetZoom();
+}
+const resetZoom = () => {
+  artboard.resetZoom({
+    duration: 500
+  });
+  animation.requestDraw();
+};
+onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value || ui.hasNestedEditorOpen.value) {
+    return;
+  }
+  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" && !ui.isApproving.value) {
+    e.originalEvent.preventDefault();
+    artboard.scrollUp();
+    animation.requestDraw();
+  } else if (e.code === "ArrowDown" && !ui.isApproving.value) {
+    e.originalEvent.preventDefault();
+    artboard.scrollDown();
+    animation.requestDraw();
+  } else if (e.code === "0" && e.meta) {
+    e.originalEvent.preventDefault();
+    resetZoom();
+  }
+});
+onBlokkliEvent("scrollIntoView", (e) => {
+  if ("uuid" in e) {
+    dom.refreshBlockRect(e.uuid);
+    const rect = dom.getBlockRect(e.uuid);
+    if (!rect) {
+      return;
+    }
+    const viewportRelativeRect = ui.getViewportRelativeRect(rect);
+    if (calculateIntersection(viewportRelativeRect, ui.visibleViewport.value) >= 0.75) {
+      return;
+    }
+    artboard.scrollIntoView(rect, {
+      scale: "none",
+      axis: "y",
+      behavior: e.immediate ? "instant" : "auto",
+      area: "blocking"
+    });
+  } else if ("rect" in e) {
+    artboard.scrollIntoView(e.rect, {
+      scale: "none",
+      axis: "both",
+      block: "center",
+      inline: "center",
+      area: "viewport",
+      behavior: e.immediate ? "instant" : "auto"
+    });
+  } else {
+    if (artboardElement.contains(e.element)) {
+      const elRect = e.element.getBoundingClientRect();
+      if (calculateIntersection(elRect, ui.visibleViewport.value) >= 0.75) {
+        return;
+      }
+      artboard.scrollElementIntoView(e.element, {
+        scale: "none",
+        axis: "both",
+        behavior: e.immediate ? "instant" : "auto",
+        area: "blocking",
+        block: "auto",
+        inline: "auto"
+      });
+    } else {
+      artboard.scrollToTop({
+        duration: 0
+      });
+    }
+  }
+});
+onBlokkliEvent("setArtboardOffset", (e) => {
+  artboard.setOffset(e.x ?? null, e.y ?? null, e.immediate ?? false);
+  animation.requestDraw();
+});
+onBlokkliEvent("scrollSelectionIntoView", (e) => {
+  const uuids = selection.uuids.value;
+  if (uuids.length === 0) {
+    return;
+  }
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const uuid of uuids) {
+    dom.refreshBlockRect(uuid);
+    const rect = dom.getBlockRect(uuid);
+    if (!rect) {
+      continue;
+    }
+    minX = Math.min(minX, rect.x);
+    minY = Math.min(minY, rect.y);
+    maxX = Math.max(maxX, rect.x + rect.width);
+    maxY = Math.max(maxY, rect.y + rect.height);
+  }
+  if (minX === Infinity) {
+    return;
+  }
+  const boundingRect = {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+  const viewportRelativeRect = ui.getViewportRelativeRect(boundingRect);
+  if (calculateIntersection(viewportRelativeRect, ui.visibleViewport.value) >= 0.75) {
+    return;
+  }
+  artboard.scrollIntoView(boundingRect, {
+    scale: "none",
+    axis: "both",
+    behavior: e.immediate ? "instant" : "auto"
+  });
+});
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+:is(.bk-html-root.bk-is-artboard .bk-body) .bk-main-canvas {
+  pointer-events: none;
+  position: fixed;
+  top: 0px;
+  left: calc(1 / 2 * 100%);
+  z-index: 10;
+  width: 100vw;
+  max-width: 1920px;
+}
+@media (width >= 64rem) {
+  :is(.bk-html-root.bk-is-artboard .bk-body) .bk-main-canvas {
+    width: 100%;
+  }
+}
+@media (width >= 64rem) {
+  :is(.bk-html-root.bk-is-artboard .bk-body) .bk-main-canvas {
+    min-width: 1280px;
+  }
+}
+@media (width >= 80rem) {
+  :is(.bk-html-root.bk-is-artboard .bk-body) .bk-main-canvas {
+    width: 80vw;
+  }
+}
+:is(.bk-html-root.bk-is-artboard .bk-body) .bk-main-canvas {
+  background: white;
+  user-select: none;
+  image-rendering: crisp-edges;
+  backface-visibility: hidden;
+  transform-origin: 0 0;
+  transform: translateX(-50%) translateY(100px);
+  contain: layout paint inline-size style;
+}
+</style>

package/dist/runtime/editor/features/artboard/Renderer.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    persist: boolean;
+    momentum: boolean;
+    scrollSpeed: number;
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/artboard/Scrollbar/index.d.vue.ts

@@ -0,0 +1,8 @@
+import { type Artboard } from 'artboard-deluxe';
+type __VLS_Props = {
+    artboard: Artboard;
+    orientation: 'x' | 'y';
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/artboard/Scrollbar/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <Teleport :to="ui.mainLayoutElement.value" defer>
+    <div
+      class="bk bk-artboard-scrollbar _bk_bg-mono-300 _bk_z-artboard-scrollbar _bk_overflow-hidden _bk_pointer-events-auto _bk_contain-strict _bk_group _bk_border-l _bk_border-l-mono-400"
+      :class="'bk-orientation-' + orientation"
+    >
+      <div ref="el">
+        <button
+          ref="thumb"
+          class="_bk_bg-mono-400 _bk_group-hover:bg-mono-500 _bk_rounded-full"
+        />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { scrollbar } from "artboard-deluxe";
+import {
+  onBeforeUnmount,
+  onMounted,
+  useBlokkli,
+  useTemplateRef
+} from "#imports";
+const props = defineProps({
+  artboard: { type: Object, required: true },
+  orientation: { type: String, required: true }
+});
+const { ui } = useBlokkli();
+const el = useTemplateRef("el");
+const thumb = useTemplateRef("thumb");
+let scrollbarPlugin = null;
+onMounted(() => {
+  if (el.value && thumb.value) {
+    const plugin = scrollbar({
+      element: el.value,
+      thumbElement: thumb.value,
+      orientation: props.orientation
+    });
+    scrollbarPlugin = props.artboard.addPlugin(plugin);
+  }
+});
+onBeforeUnmount(() => {
+  if (scrollbarPlugin) {
+    props.artboard.removePlugin(scrollbarPlugin);
+  }
+});
+defineOptions({
+  name: "ArtboardScrollbar"
+});
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk-html-root {
+  --bk-artboard-scrollbar-size: 4px;
+}
+@media (width >= 48rem) {
+  .bk-html-root {
+    --bk-artboard-scrollbar-size: 10px;
+  }
+}
+@media (width >= 64rem) {
+  .bk-html-root {
+    --bk-artboard-scrollbar-size: 16px;
+  }
+}
+.bk.bk-artboard-scrollbar {
+  grid-area: scrollbar-y;
+}
+.bk.bk-artboard-scrollbar.bk-orientation-y {
+  width: var(--bk-artboard-scrollbar-size);
+}
+.bk.bk-artboard-scrollbar.bk-orientation-y  > div {
+  height: 100%;
+}
+.bk.bk-artboard-scrollbar.bk-orientation-y button {
+  width: 100%;
+}
+.bk.bk-artboard-scrollbar.bk-orientation-x {
+  height: var(--bk-artboard-scrollbar-size);
+  left: calc(var(--bk-root-offset-left));
+  right: calc(var(--bk-root-offset-right));
+  bottom: calc(var(--bk-root-offset-bottom) - 1px);
+}
+.bk.bk-artboard-scrollbar.bk-orientation-x button {
+  height: 100%;
+}
+.bk.bk-artboard-scrollbar.bk-orientation-x  > div {
+  width: 100%;
+}
+</style>

package/dist/runtime/editor/features/artboard/Scrollbar/index.vue.d.ts

@@ -0,0 +1,8 @@
+import { type Artboard } from 'artboard-deluxe';
+type __VLS_Props = {
+    artboard: Artboard;
+    orientation: 'x' | 'y';
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/artboard/index.d.vue.ts

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

package/dist/runtime/editor/features/artboard/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <Renderer
+    v-if="renderArtboard"
+    :persist="settings.persist"
+    :momentum="settings.momentum"
+    :scroll-speed="settings.scrollSpeed"
+  />
+</template>
+
+<script setup>
+import { computed, useBlokkli, defineBlokkliFeature } from "#imports";
+import Renderer from "./Renderer.vue";
+import { defineShortcut } from "#blokkli/editor/composables";
+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.",
+  settings: {
+    persist: {
+      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"]
+    },
+    momentum: {
+      type: "checkbox",
+      default: true,
+      label: "Use smooth scrolling",
+      description: "Applies smooth animations when scrolling or zooming the artboard.",
+      group: "artboard",
+      viewports: ["desktop"]
+    },
+    scrollSpeed: {
+      type: "slider",
+      default: 1,
+      label: "Artboard scroll speed",
+      group: "artboard",
+      viewports: ["desktop"],
+      min: 0.5,
+      max: 1.5,
+      step: 0.05
+    }
+  },
+  screenshot: "feature-artboard.jpg"
+});
+const { ui, $t } = useBlokkli();
+const renderArtboard = computed(() => !ui.isAnalyzing.value);
+defineShortcut(
+  [
+    {
+      code: "Home",
+      label: $t("artboardScrollToTop", "Scroll to top")
+    },
+    {
+      code: "End",
+      label: $t("artboardScrollToEnd", "Scroll to end")
+    },
+    {
+      code: "PageUp",
+      label: $t("artboardScrollOnePageUp", "Scroll one page up")
+    },
+    {
+      code: "PageDown",
+      label: $t("artboardScrollOnePageDown", "Scroll one page down")
+    },
+    {
+      code: "ArrowUp",
+      label: $t("artboardScrollUp", "Scroll up")
+    },
+    {
+      code: "ArrowDown",
+      label: $t("artboardScrollDown", "Scroll down")
+    },
+    {
+      code: "1",
+      label: $t("artboardScaleToFit", "Scale to fit"),
+      meta: true
+    }
+  ].map((v) => {
+    return { ...v, group: $t("artboard", "Artboard") };
+  })
+);
+</script>
+
+<script>
+export default {
+  name: "Artboard"
+};
+</script>

package/dist/runtime/editor/features/artboard/index.vue.d.ts

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