@blokkli/editor 1.0.3 → 1.1.0

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

@@ -1,14 +1,76 @@
 <template>
-  <ArtboardManager
-    :persist="settings.persist"
-    :scroll-speed="settings.scrollSpeed"
-  />
+  <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="100"
+    @click="resetZoom"
+  >
+    <div class="bk-feature-canvas-button">
+      <span>{{ zoomLevel }}</span>
+    </div>
+  </PluginToolbarButton>
+
+  <PluginViewOption
+    id="artboardOverview"
+    v-slot="{ isActive }"
+    :label="$t('artboardOverviewToggle', 'Toggle overview')"
+    :title-on="$t('artboardOverviewShow', 'Show overview')"
+    :title-off="$t('artboardOverviewHide', 'Hide overview')"
+    :tour-text="
+      $t(
+        'artboardOverviewTourText',
+        `Displays a top level overview of your content.`,
+      )
+    "
+    icon="eye"
+    key-code="O"
+    weight="90"
+  >
+    <Teleport v-if="isActive" to="body">
+      <Overview :artboard="artboard" />
+    </Teleport>
+  </PluginViewOption>
+
+  <Scrollbar :artboard="artboard" orientation="y" />
 </template>
 
 <script lang="ts" setup>
-import ArtboardManager from './Manager/index.vue'
-import { defineBlokkliFeature } from '#imports'
-
+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'
+import {
+  createArtboard,
+  type ArtboardOptions,
+  type Artboard,
+  type PluginWheelOptions,
+  touch,
+  wheel,
+  mouse,
+  dom as domPlugin,
+  type PluginWheel,
+} from 'artboard-deluxe'
 const { settings } = defineBlokkliFeature({
   id: 'artboard',
   label: 'Artboard',
@@ -20,14 +82,21 @@ const { settings } = defineBlokkliFeature({
       type: 'checkbox',
       default: true,
       label: 'Persist position and zoom',
-      group: 'behavior',
+      group: 'artboard',
+      viewports: ['desktop'],
+    },
+    momentum: {
+      type: 'checkbox',
+      default: true,
+      label: 'Use smooth scrolling',
+      group: 'artboard',
       viewports: ['desktop'],
     },
     scrollSpeed: {
       type: 'slider',
       default: 1,
       label: 'Artboard scroll speed',
-      group: 'behavior',
+      group: 'artboard',
       viewports: ['desktop'],
       min: 0.5,
       max: 1.5,
@@ -36,6 +105,229 @@ const { settings } = defineBlokkliFeature({
   },
   screenshot: 'feature-artboard.jpg',
 })
+
+const { context, storage, ui, animation, $t, dom } = useBlokkli()
+
+const zoomLevel = computed(() => Math.round(ui.artboardScale.value * 100) + '%')
+
+const PADDING = 50
+
+const options = computed<ArtboardOptions>(() => {
+  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,
+    },
+  }
+})
+
+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 (!settings.value.persist) {
+    return
+  }
+  savedState.value = {
+    offset: artboard.getOffset(),
+    scale: artboard.getScale(),
+  }
+}
+
+let pluginWheel: PluginWheel | null = null
+
+const wheelOptions = computed<PluginWheelOptions>(() => {
+  return {
+    useMomentumZoom: settings.value.momentum,
+    useMomentumScroll: settings.value.momentum,
+    interceptWheel: true,
+    scrollSpeed: settings.value.scrollSpeed,
+    wheelZoomFactor: settings.value.scrollSpeed,
+  }
+})
+
+watch(wheelOptions, function (newOptions) {
+  if (pluginWheel) {
+    pluginWheel.options.setAll(newOptions)
+  }
+})
+
+function getArtboard(): Artboard {
+  pluginWheel = wheel(wheelOptions.value)
+  return createArtboard(
+    ui.rootElement(),
+    [
+      mouse(),
+      touch(),
+      pluginWheel,
+      domPlugin({
+        element: ui.artboardElement(),
+        setInitTransformFromRect: !savedState.value || !settings.value.persist,
+        precision: 0.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,
+    },
+  )
+}
+
+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
+  }
+
+  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()
+})
+
+onMounted(() => {
+  window.addEventListener('beforeunload', saveState)
+})
+
+onBeforeUnmount(() => {
+  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()
+  }
+})
+
+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) => {
+  const rect = dom.getBlockRect(e.uuid)
+  if (!rect) {
+    return
+  }
+
+  if (dom.isBlockVisible(e.uuid)) {
+    return
+  }
+
+  // @TODO: Prevent scrolling into view when already
+
+  artboard.scrollIntoView(rect, {
+    scale: 'none',
+    axis: 'y',
+    behavior: e.immediate ? 'instant' : 'auto',
+  })
+})
 </script>
 
 <script lang="ts">

package/dist/runtime/components/Edit/Features/CommandPalette/Palette/index.vue

@@ -1,7 +1,6 @@
 <template>
-  <div
+  <ScrollBoundary
     class="bk-command-palette bk-control"
-    @wheel.passive.stop
     @keydown.stop="onKeyDown"
     @keyup.stop
     @click.stop
@@ -30,7 +29,7 @@
         @select="onSelect($event)"
       />
     </div>
-  </div>
+  </ScrollBoundary>
 </template>
 
 <script lang="ts" setup>
@@ -43,7 +42,7 @@ import {
   nextTick,
   onBeforeUnmount,
 } from '#imports'
-import { Icon } from '#blokkli/components'
+import { Icon, ScrollBoundary } from '#blokkli/components'
 import type { Command, CommandGroup } from '#blokkli/types'
 import Group from './Group/index.vue'
 import { falsy } from '#blokkli/helpers'

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

@@ -32,6 +32,7 @@ onBlokkliEvent('canvas:draw', (e) => {
     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
 
@@ -47,6 +48,32 @@ onBlokkliEvent('canvas:draw', (e) => {
       height: rect.height * e.artboardScale,
     }
     if (intersects(drawnRect, viewport)) {
+      ctx.beginPath()
+      ctx.rect(drawnRect.x, drawnRect.y, drawnRect.width, drawnRect.height)
+      ctx.stroke()
+    }
+  }
+
+  ctx.strokeStyle = 'red'
+
+  const visibleFieldRects = dom.getVisibleFields()
+  for (let i = 0; i < visibleFieldRects.length; i++) {
+    const key = visibleFieldRects[i]
+
+    const rect = dom.getFieldRect(key)
+
+    if (!rect) {
+      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,
+    }
+    if (intersects(drawnRect, viewport)) {
+      ctx.beginPath()
       ctx.rect(drawnRect.x, drawnRect.y, drawnRect.width, drawnRect.height)
       ctx.stroke()
     }

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

@@ -11,7 +11,7 @@
         :style="{ backgroundColor: activeColor }"
       >
         <Icon name="cursor-move" />
-        <p v-html="activeLabel" />
+        <p v-html="prevActiveLabel" />
       </div>
     </Transition>
     <div
@@ -52,7 +52,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, useBlokkli, onMounted, onBeforeUnmount } from '#imports'
+import {
+  ref,
+  watch,
+  computed,
+  useBlokkli,
+  onMounted,
+  onBeforeUnmount,
+} from '#imports'
 import type { Coord, DraggableItem, Rectangle } from '#blokkli/types'
 import {
   isInsideRect,
@@ -93,6 +100,17 @@ const props = defineProps<{
   activeLabel?: string
 }>()
 
+const prevActiveLabel = ref('')
+
+watch(
+  () => props.activeLabel,
+  function (label) {
+    if (label) {
+      prevActiveLabel.value = label
+    }
+  },
+)
+
 const width = ref(10)
 const height = ref(10)
 
@@ -122,7 +140,10 @@ const style = computed(() => {
     width: width.value + 'px',
     height: height.value + 'px',
     transform: `translate(${translateX.value}px, ${translateY.value}px)`,
-    '--bk-active-color': props.activeColor || 'rgba(255,255,255,0)',
+    '--bk-active-color':
+      props.activeColor && props.activeLabel
+        ? props.activeColor
+        : 'rgba(255,255,255,0)',
   }
 })
 

package/dist/runtime/components/Edit/Features/DraggingOverlay/DropTargets/fragment.glsl

@@ -1,9 +1,9 @@
 precision mediump float;
 
 varying float v_intersecting;
+varying float v_is_hover_area;
 varying vec4 v_quad;
-varying vec3 v_color_default;
-varying vec3 v_color_active;
+varying vec3 v_color;
 
 uniform float u_scale;
 uniform float u_dpi;
@@ -14,10 +14,16 @@ float roundedBoxSDF(vec2 CenterPosition, vec2 Size, float Radius) {
 }
 
 void main() {
-  float radius_base = 2.0 * u_scale;
+  bool isHoverArea = v_is_hover_area >= 1.0;
+  float stroke = isHoverArea ? 0.75 : 2.0;
+  float radiusBase = stroke * u_scale;
+
   float thickness = max(min(1.0 * u_scale, 3.0), 0.5);
-  float inset = max(min(2.0 * u_scale, 1.0), 2.0) * thickness;
 
+  // Calculate the resulting inset so that we draw the rounded box and border *inside* the quad (vs. that it would bleed outside the quad).
+  float inset = max(min(2.0 * u_scale, 1.0), 3.0) * thickness + stroke;
+
+  // Rectangle dimensions with inset.
   float u_rect_x = v_quad.x + inset;
   float u_rect_y = v_quad.y + inset;
   float u_rectWidth = v_quad.z - 2.0 * inset;
@@ -25,34 +31,60 @@ void main() {
 
   vec2 size = vec2(u_rectWidth, u_rectHeight);
 
-  float x = u_rect_x;
-  float y = u_rect_y;
-  vec2 offsetPosition = vec2(x + size.x / 2.0, y + size.y / 2.0);
+  // Center position of the rectangle.
+  vec2 offsetPosition = vec2(u_rect_x + size.x / 2.0, u_rect_y + size.y / 2.0);
+  vec2 location = offsetPosition;
+
+  // Make sure the edges of the border are not too harsh.
+  float edgeSoftness = 0.5 * u_dpi;
 
-  vec2 location = vec2(offsetPosition);
+  float borderWidth = stroke * u_scale * u_dpi;
 
-  float edgeSoftness = 1.0 * u_dpi;
-  float radius =
-    min(radius_base * u_dpi, min(size.x, size.y) / 2.0) + thickness * 2.0;
+  // Different radius for inner and outer.
+  float radiusOutside =
+    min(radiusBase * u_dpi, min(size.x, size.y)) + thickness;
+  float radiusInside = radiusOutside - borderWidth;
 
-  float distance = roundedBoxSDF(
+  vec2 sizeInner = size - 2.0 * borderWidth;
+
+  // Compute different distance for inside and outside.
+  float distanceOuter = roundedBoxSDF(
     location - gl_FragCoord.xy,
     size / 2.0,
-    radius
+    radiusOutside
+  );
+  float distanceInner = roundedBoxSDF(
+    location - gl_FragCoord.xy,
+    sizeInner / 2.0,
+    radiusInside
   );
 
-  bool is_intersecting = v_intersecting >= 0.5;
+  float alphaOuter =
+    1.0 - smoothstep(-edgeSoftness, edgeSoftness, distanceOuter - thickness);
+  float alphaInner =
+    1.0 - smoothstep(-edgeSoftness, edgeSoftness, distanceInner - thickness);
 
-  vec3 color = is_intersecting ? v_color_active : v_color_default;
-  float mixedDistance = is_intersecting ? distance : abs(distance);
+  // Alpha value for the border.
+  float alphaBorder = clamp(alphaOuter - alphaInner, 0.0, 1.0);
 
-  float smoothedAlpha =
-    1.0 - smoothstep(-edgeSoftness, edgeSoftness, mixedDistance - thickness);
+  // Adjust alphas based on intersection.
+  float adjustedAlphaFill =
+    v_intersecting >= 0.5
+      ? alphaInner * 0.95
+      : alphaInner * 0.2;
 
-  gl_FragColor = vec4(
-    color,
-    is_intersecting
-      ? smoothedAlpha - 0.4
-      : smoothedAlpha
-  );
+  if (v_is_hover_area >= 1.0) {
+    adjustedAlphaFill *= 0.12;
+  }
+
+  if (alphaBorder > 0.0) {
+    float a = isHoverArea ? 0.6 : 1.0;
+    gl_FragColor = vec4(v_color, a);
+    return;
+  } else if (adjustedAlphaFill > 0.0) {
+    gl_FragColor = vec4(v_color, adjustedAlphaFill);
+    return;
+  }
+
+  discard;
 }