@blokkli/editor 1.0.3 → 1.1.0

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

@@ -1,176 +0,0 @@
-<template>
-  <Teleport to="body">
-    <div
-      ref="scrollbarEl"
-      class="bk bk-artboard-scrollbar"
-      :class="[
-        { 'bk-is-active': isDraggingThumb },
-        'bk-orientation-' + orientation,
-      ]"
-      @touchstart.prevent
-      @mousedown.stop.prevent="onClickScrollbar"
-    >
-      <button ref="button" @mousedown.capture.prevent.stop="onThumbMouseDown" />
-    </div>
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import { ref, onBeforeUnmount, onMounted } from '#imports'
-
-const isDraggingThumb = ref(false)
-
-const props = defineProps<{
-  padding: number
-  offset: number
-  rootSize: number
-  artboardSize: number
-  scale: number
-  orientation: 'height' | 'width'
-}>()
-
-type ScrollbarOptions = {
-  padding?: number
-  orientation?: 'height' | 'width'
-}
-
-class Scrollbar {
-  scrollStart = 0
-  thumbStart = 0
-  scrollbarSize = 0
-  padding = 50
-  offset = 0
-  rootSize = 0
-  artboardSize = 0
-  scale = 1
-  orientation: 'height' | 'width' = 'height'
-
-  constructor(options?: ScrollbarOptions) {
-    this.padding = options?.padding || this.padding
-    this.orientation = options?.orientation || this.orientation
-  }
-
-  getMouseCoordinate(e: MouseEvent): number {
-    return this.orientation === 'height' ? e.clientY : e.clientX
-  }
-}
-
-const scrollbar = new Scrollbar(props)
-
-const scrollbarEl = ref<HTMLElement | null>(null)
-const button = ref<HTMLButtonElement | null>(null)
-
-const emit = defineEmits(['pageUp', 'pageDown', 'setOffset'])
-
-let scrollStart = 0
-let thumbStart = 0
-let scrollbarSize = 300
-
-const scrollTop = () =>
-  Math.round(props.offset - props.rootSize + props.padding)
-
-// The scroll progress as a value from 0 to 1.
-const scrollProgress = () => Math.abs(scrollTop() / scrollSize())
-const thumbOffset = () => (scrollbarSize - scrollThumbSize()) * scrollProgress()
-
-const scrollSize = () =>
-  props.artboardSize * props.scale + props.rootSize - 2 * props.padding
-
-const scrollThumbSize = () => (props.rootSize / scrollSize()) * props.rootSize
-
-function onThumbMouseDown(e: MouseEvent) {
-  isDraggingThumb.value = true
-  scrollStart = scrollbar.getMouseCoordinate(e)
-  thumbStart = thumbOffset()
-  document.body.addEventListener('mouseup', onMouseUp, {
-    passive: false,
-    capture: true,
-  })
-  document.body.addEventListener('mousemove', onThumbMouseMove, {
-    passive: false,
-    capture: true,
-  })
-}
-
-function onMouseUp() {
-  isDraggingThumb.value = false
-  document.body.removeEventListener('mousemove', onThumbMouseMove, {
-    capture: true,
-  })
-  document.body.removeEventListener('mouseup', onMouseUp, {
-    capture: true,
-  })
-}
-
-function getOffsetFromThumb(newThumb: number): number {
-  const maxThumb = scrollbarSize - scrollThumbSize()
-  const newScrollProgress = newThumb / maxThumb
-  const newScrollOffset = newScrollProgress * scrollSize()
-  return newScrollOffset + props.rootSize - props.padding
-}
-
-function onThumbMouseMove(e: MouseEvent) {
-  const diff = scrollStart - scrollbar.getMouseCoordinate(e)
-  const newThumb = Math.max(
-    Math.min(-thumbStart + diff, 0),
-    -(scrollbarSize - scrollThumbSize()),
-  )
-  emit('setOffset', getOffsetFromThumb(newThumb))
-}
-
-function getStyle() {
-  const offset = thumbOffset()
-  const size = scrollThumbSize()
-  if (props.orientation === 'height') {
-    return {
-      height: size + 'px',
-      transform: `translateY(${offset}px)`,
-    }
-  }
-  return {
-    width: size + 'px',
-    transform: `translateX(${offset}px)`,
-  }
-}
-
-function onClickScrollbar(e: MouseEvent) {
-  if (e.offsetY < thumbOffset()) {
-    emit('pageUp')
-  } else {
-    emit('pageDown')
-  }
-}
-
-const observer = new ResizeObserver((entries) => {
-  const size = entries[0]?.contentBoxSize?.[0]
-  if (!size) {
-    return
-  }
-
-  scrollbarSize =
-    props.orientation === 'height' ? size.blockSize : size.inlineSize
-})
-
-onBlokkliEvent('animationFrame', () => {
-  if (!button.value) {
-    return
-  }
-
-  const style = getStyle()
-
-  button.value.style.width = style.width || ''
-  button.value.style.height = style.height || ''
-  button.value.style.transform = style.transform
-})
-
-onMounted(() => {
-  if (scrollbarEl.value) {
-    observer.observe(scrollbarEl.value)
-  }
-})
-
-onBeforeUnmount(() => {
-  observer.disconnect()
-})
-</script>

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

@@ -1,317 +0,0 @@
-<template>
-  <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="magnifier"
-    meta
-    key-code="0"
-    region="view-options"
-    weight="10"
-    @click="resetZoom"
-  >
-    <div class="bk-feature-canvas-button">
-      <span>{{ zoomLevel }}</span>
-    </div>
-  </PluginToolbarButton>
-
-  <Scrollbar
-    :padding="props.padding"
-    :offset="ui.artboardOffset.value.y"
-    :root-size="ui.viewport.value.height"
-    :artboard-size="ui.artboardSize.value.height"
-    :scale="ui.artboardScale.value"
-    orientation="height"
-    @page-down="onPageDown"
-    @page-up="onPageUp"
-    @set-offset="setOffset('y', $event)"
-  />
-
-  <Scrollbar
-    :padding="props.padding"
-    :offset="ui.artboardOffset.value.x"
-    :root-size="ui.viewport.value.width"
-    :artboard-size="ui.artboardSize.value.width"
-    :scale="ui.artboardScale.value"
-    orientation="width"
-    @page-down="onPageDown"
-    @page-up="onPageUp"
-    @set-offset="setOffset('x', $event)"
-  />
-
-  <Teleport v-if="showDebug" to="body">
-    <div class="bk-artboard-debug">
-      <div v-for="v in debugValues" :key="v.key">
-        <div>{{ v.key }}</div>
-        <div>{{ v.value }}</div>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import {
-  ref,
-  watch,
-  computed,
-  useBlokkli,
-  onMounted,
-  onBeforeUnmount,
-} from '#imports'
-import type { Coord } from '#blokkli/types'
-import { PluginToolbarButton } from '#blokkli/plugins'
-import Scrollbar from './Scrollbar/index.vue'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import defineShortcut from '#blokkli/helpers/composables/defineShortcut'
-import { Artboard, type ArtboardOptions } from './Artboard'
-
-const { context, storage, ui, animation, $t, dom } = useBlokkli()
-
-const zoomLevel = computed(() => Math.round(ui.artboardScale.value * 100) + '%')
-
-const showDebug = ref(false)
-
-const props = withDefaults(
-  defineProps<{
-    padding?: number
-    minScale?: number
-    maxScale?: number
-    persist?: boolean
-    scrollSpeed?: number
-  }>(),
-  {
-    padding: 50,
-    minScale: 0.05,
-    maxScale: 3.5,
-    scrollSpeed: 1,
-  },
-)
-
-const options = computed<ArtboardOptions>(() => {
-  return {
-    maxScale: ui.isMobile.value ? 1 : 3,
-    scrollSpeed: props.scrollSpeed,
-  }
-})
-
-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)
-
-const saveState = () => {
-  if (!props.persist) {
-    return
-  }
-  savedState.value = { offset: artboard.offset, scale: artboard.scale }
-}
-
-function getArtboard(): Artboard {
-  return new Artboard(ui.artboardElement(), ui.rootElement(), {
-    x: savedState.value?.offset.x,
-    y: savedState.value?.offset.y,
-    scale: savedState.value?.scale,
-    ...options.value,
-  })
-}
-
-const artboard = getArtboard()
-
-function setOffset(key: 'x' | 'y', value: number) {
-  artboard.stopAnimate()
-  artboard.offset[key] = value
-}
-
-type DebugValue = {
-  key: string
-  value: string | number | boolean
-}
-
-const debugValues = ref<DebugValue[]>([])
-
-const coordToString = (v: Coord): string =>
-  `x: ${Math.round(v.x)}, y: ${Math.round(v.y)}`
-
-onBlokkliEvent('animationFrame:before', () => {
-  artboard.loop()
-  ui.artboardSize.value.height = artboard.artboardSize.height
-  ui.artboardSize.value.width = artboard.artboardSize.width
-  // 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.round(artboard.offset.x)
-  ui.artboardOffset.value.y = Math.round(artboard.offset.y)
-  ui.artboardScale.value = artboard.scale
-  animation.requestDraw()
-  if (!showDebug.value) {
-    return
-  }
-  debugValues.value = [
-    {
-      key: 'scale',
-      value: artboard.scale.toString(),
-    },
-    {
-      key: 'isScaling',
-      value: artboard.isScaling,
-    },
-    {
-      key: 'isDragging',
-      value: artboard.isDragging,
-    },
-    {
-      key: 'isTouching',
-      value: artboard.isTouching,
-    },
-    {
-      key: 'maxScale',
-      value: artboard.maxScale,
-    },
-    {
-      key: 'isMomentumScrolling',
-      value: artboard.isMomentumScrolling,
-    },
-    {
-      key: 'scaleMidpoint',
-      value: artboard.scaleMidpoint
-        ? coordToString(artboard.scaleMidpoint)
-        : 'undefined',
-    },
-  ]
-})
-
-onMounted(() => {
-  window.addEventListener('beforeunload', saveState)
-})
-
-onBeforeUnmount(() => {
-  saveState()
-  artboard.destroy()
-  window.removeEventListener('beforeunload', saveState)
-})
-
-const resetZoom = () => {
-  artboard.resetZoom()
-}
-
-function onPageUp() {
-  artboard.scrollPageUp()
-  animation.requestDraw()
-}
-
-function onPageDown() {
-  artboard.scrollPageDown()
-  animation.requestDraw()
-}
-
-onBlokkliEvent('keyPressed', (e) => {
-  if (e.code === 'Home') {
-    artboard.scrollToTop()
-    animation.requestDraw()
-  } else if (e.code === 'End') {
-    artboard.scrollToEnd()
-    animation.requestDraw()
-  } else if (e.code === 'PageUp') {
-    onPageUp()
-  } else if (e.code === 'PageDown') {
-    onPageDown()
-  } else if (e.code === 'ArrowUp') {
-    artboard.animateOrJumpBy(200)
-    animation.requestDraw()
-  } else if (e.code === 'ArrowDown') {
-    artboard.animateOrJumpBy(-200)
-    animation.requestDraw()
-  } else if (e.code === '0' && e.meta) {
-    artboard.resetZoom()
-    animation.requestDraw()
-  } else if (e.code === '1' && e.meta) {
-    artboard.scaleToFit()
-    animation.requestDraw()
-  }
-})
-
-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') }
-  }),
-)
-
-onBlokkliEvent('scrollIntoView', (e) => {
-  artboard.stopAnimate()
-  const visible = dom.getBlockVisibilities()[e.uuid]
-  if (visible) {
-    return
-  }
-
-  const rect = dom.getBlockRect(e.uuid)
-  if (!rect) {
-    return
-  }
-
-  const rectY = rect.y * artboard.scale + artboard.offset.y
-
-  let targetY: number | null = null
-  const currentY = artboard.animationTarget?.y || artboard.offset.y
-  const rootHeight = ui.visibleViewportPadded.value.height
-
-  if (e.center) {
-    targetY =
-      currentY - rectY + props.padding + rootHeight / 2 - rect.height / 2
-  } else if (rectY < 70) {
-    targetY = currentY - (rectY - props.padding) + 70
-  } else if (rectY + rect.height > rootHeight) {
-    targetY = currentY + (rootHeight - (rectY + rect.height) - 40)
-  }
-
-  if (targetY) {
-    artboard.setOffset(artboard.offset.x, targetY)
-  }
-})
-</script>
-
-<script lang="ts">
-export default {
-  name: 'ArtboardManager',
-}
-</script>

package/dist/runtime/helpers/Artboard/index.d.ts

@@ -1,16 +0,0 @@
-type ArtboardOptions = {
-    x?: number;
-    y?: number;
-    scale?: number;
-};
-export default class Artboard {
-    el: HTMLElement;
-    scale: number;
-    x: number;
-    y: number;
-    height: number;
-    width: number;
-    constructor(el: HTMLElement, options?: ArtboardOptions);
-    updateStyles(): void;
-}
-export {};

package/dist/runtime/helpers/Artboard/index.js

@@ -1,20 +0,0 @@
-export default class Artboard {
-  el;
-  scale;
-  x;
-  y;
-  height;
-  width;
-  constructor(el, options) {
-    this.el = el;
-    this.scale = options?.scale || 0;
-    this.x = options?.x || 0;
-    this.y = options?.y || 0;
-    this.height = el.offsetHeight;
-    this.width = el.offsetWidth;
-  }
-  updateStyles() {
-    this.el.style.scale = this.scale.toString();
-    this.el.style.translate = `${Math.round(this.x)}px ${Math.round(this.y)}px`;
-  }
-}