@blokkli/editor 1.0.4 → 1.1.1

package/dist/runtime/components/Edit/DragInteractions/index.vue

@@ -3,13 +3,19 @@
 </template>
 
 <script setup lang="ts">
-import { falsy, getDistance, getInteractionCoordinates } from '#blokkli/helpers'
+import {
+  falsy,
+  getDistance,
+  getInteractionCoordinates,
+  isInsideRect,
+} from '#blokkli/helpers'
 import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
 import type { Coord, Rectangle } from '#blokkli/types'
 import { watch, ref, useBlokkli, onMounted, onBeforeUnmount } from '#imports'
 
-const { dom, eventBus, selection, keyboard, ui, animation, state } =
-  useBlokkli()
+const { dom, eventBus, selection, keyboard, ui, state } = useBlokkli()
+
+const rootEl = ui.rootElement()
 
 const rects = ref<{ uuid: string; rect: Rectangle }[]>([])
 
@@ -93,17 +99,36 @@ function getInteractedElement(
     return { editableFieldName, uuid, timestamp: Date.now(), x, y }
   }
 
+  // Try to find a block to select by matching its rects.
+  // Some blocks might not render anything and thus have a height of 0.
+  // All registered block rects enfore a minimum height. That way we might
+  // still be able to select a block.
+  const visibleUuids = dom.getVisibleBlocks()
+  for (let i = 0; i < visibleUuids.length; i++) {
+    const rect = dom.getBlockRect(visibleUuids[i])
+    if (rect) {
+      const relativeRect = ui.getViewportRelativeRect(rect)
+      if (isInsideRect(x, y, relativeRect)) {
+        return {
+          uuid: visibleUuids[i],
+          timestamp: Date.now(),
+          x,
+          y,
+        }
+      }
+    }
+  }
+
   return null
 }
 
 function onPointerMove(e: PointerEvent) {
-  e.preventDefault()
-  e.stopPropagation()
-  e.stopImmediatePropagation()
-  animation.setMouseCoords(e.clientX, e.clientY)
   if (keyboard.isPressingSpace.value || state.editMode.value !== 'editing') {
     return
   }
+  e.preventDefault()
+  e.stopPropagation()
+  e.stopImmediatePropagation()
   if (e.pointerType === 'touch') {
     return onTouchMove(e)
   }
@@ -150,6 +175,7 @@ function onPointerMove(e: PointerEvent) {
 }
 
 let pointerDownTimestamp = 0
+let pointerUpTimestamp = 0
 
 function onPointerDown(e: PointerEvent) {
   if (!keyboard.isPressingSpace.value) {
@@ -158,6 +184,9 @@ function onPointerDown(e: PointerEvent) {
     e.stopImmediatePropagation()
   }
 
+  rootEl.removeEventListener('pointermove', onPointerMove)
+  rootEl.addEventListener('pointermove', onPointerMove)
+
   if (e.pointerType === 'touch') {
     return onTouchStart(e)
   }
@@ -171,17 +200,19 @@ function onPointerDown(e: PointerEvent) {
 
   pointerDownTimestamp = Date.now()
   const coords = { x: e.clientX, y: e.clientY }
+  mouseStartCoordinates = coords
 
   const interacted = getInteractedElement(e)
   pointerDownElement = interacted
   if (interacted) {
     return
   }
-  mouseStartCoordinates = coords
+
   eventBus.emit('mouse:down', { ...coords, type: 'mouse', distance: 0 })
 }
 
 function onPointerUp(e: PointerEvent) {
+  rootEl.removeEventListener('pointermove', onPointerMove)
   e.preventDefault()
   e.stopPropagation()
   e.stopImmediatePropagation()
@@ -223,11 +254,12 @@ function onPointerUp(e: PointerEvent) {
   // Handle double clicking.
   if (
     clicked &&
+    pointerUpTimestamp &&
     lastInteractedElement &&
     (clicked.uuid === lastInteractedElement.uuid ||
       clicked.editableFieldName === lastInteractedElement.editableFieldName)
   ) {
-    const deltaTime = Date.now() - pointerDownTimestamp
+    const deltaTime = Date.now() - pointerUpTimestamp
     const deltaX = Math.abs(lastInteractedElement.x - e.clientX)
     const deltaY = Math.abs(lastInteractedElement.y - e.clientY)
     if (deltaTime < 400 && deltaX < 3 && deltaY < 3) {
@@ -248,6 +280,7 @@ function onPointerUp(e: PointerEvent) {
     }
   }
   lastInteractedElement = clicked
+  pointerUpTimestamp = Date.now()
   if (clicked?.uuid) {
     dom.refreshBlockRect(clicked.uuid)
     if (keyboard.isPressingControl.value || selection.isMultiSelecting.value) {
@@ -387,51 +420,42 @@ function onClick(e: MouseEvent) {
 }
 
 onMounted(() => {
-  const el = ui.rootElement()
   const providerElement = ui.providerElement()
 
   providerElement.addEventListener('click', onClick, {
     capture: true,
   })
 
-  el.addEventListener('click', onClick, {
+  rootEl.addEventListener('click', onClick, {
     capture: true,
   })
 
-  el.addEventListener('pointerdown', onPointerDown, {
+  rootEl.addEventListener('pointerdown', onPointerDown, {
     capture: true,
   })
 
-  el.addEventListener('pointermove', onPointerMove, {
-    capture: true,
-  })
-
-  el.addEventListener('pointerup', onPointerUp, {
+  rootEl.addEventListener('pointerup', onPointerUp, {
     capture: true,
   })
 })
 
 onBeforeUnmount(() => {
-  const el = ui.rootElement()
   const providerElement = ui.providerElement()
 
   providerElement.removeEventListener('click', onClick, {
     capture: true,
   })
 
-  el.removeEventListener('click', onClick, {
-    capture: true,
-  })
-
-  el.removeEventListener('pointerdown', onPointerDown, {
+  rootEl.removeEventListener('click', onClick, {
     capture: true,
   })
 
-  el.removeEventListener('pointermove', onPointerMove, {
+  rootEl.removeEventListener('pointerdown', onPointerDown, {
     capture: true,
   })
+  rootEl.removeEventListener('pointermove', onPointerMove)
 
-  el.removeEventListener('pointerup', onPointerUp, {
+  rootEl.removeEventListener('pointerup', onPointerUp, {
     capture: true,
   })
 })

package/dist/runtime/components/Edit/DraggableList.vue

@@ -1,22 +1,54 @@
 <template>
+  <div
+    v-if="proxyMode || globalProxyMode"
+    class="bk bk-field-list-proxy"
+    :class="[
+      {
+        'bk-is-visible': proxyVisible,
+      },
+      'bk-is-' +
+        (dropAlignment || (nestingLevel === 0 ? 'vertical' : 'horizontal')),
+    ]"
+  >
+    <div
+      ref="root"
+      class="bk-field-list-proxy-list bk-draggable-list-container"
+      v-bind="fieldAttributes"
+    >
+      <BlokkliItem
+        v-for="(item, i) in list"
+        :key="item.uuid + fieldListType"
+        :uuid="item.uuid"
+        :bundle="item.bundle"
+        :is-new="item.isNew"
+        :options="item.options"
+        :props="item.props"
+        is-editing
+        :index="i"
+        :parent-type="isNested ? entity.bundle : ''"
+        data-editing="true"
+        data-element-type="existing"
+        :data-sortli-id="item.uuid"
+        :data-uuid="item.uuid"
+        :data-host-type="entity.type"
+        :data-host-bundle="entity.bundle"
+        :data-host-uuid="entity.uuid"
+        :data-item-bundle="item.bundle"
+        :data-host-field-name="name"
+        :data-host-field-list-type="fieldListType"
+        :data-is-nested="isNested"
+        :data-is-new="item.isNew"
+        :data-entity-type="runtimeConfig.itemEntityType"
+        :data-bk-is-muted="isMuted(item)"
+      />
+    </div>
+  </div>
   <Component
     :is="tag"
+    v-else
     ref="root"
-    class="bk-draggable-list-container"
-    :data-field-name="name"
-    :data-field-label="fieldConfig?.label"
-    :data-field-is-nested="isNested"
-    :data-host-entity-type="entity.type"
-    :data-host-entity-uuid="entity.uuid"
-    :data-host-entity-bundle="entity.bundle"
-    :data-field-key="fieldKey"
-    :data-field-drop-alignment="dropAlignment"
-    :data-allowed-fragments="
-      allowedFragments ? allowedFragments.join(',') : undefined
-    "
-    :data-field-allowed-bundles="allowedBundles"
-    :data-field-list-type="fieldListType"
-    :data-field-cardinality="fieldConfig?.cardinality"
+    :class="['bk-draggable-list-container', attrs.class]"
+    v-bind="fieldAttributes"
   >
     <BlokkliItem
       v-for="(item, i) in list"
@@ -42,31 +74,71 @@
       :data-is-nested="isNested"
       :data-is-new="item.isNew"
       :data-entity-type="runtimeConfig.itemEntityType"
+      :data-bk-is-muted="isMuted(item)"
     />
   </Component>
 </template>
 
 <script lang="ts" setup>
-import { computed, useBlokkli, ref, onMounted, onBeforeUnmount } from '#imports'
+import {
+  computed,
+  useBlokkli,
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  useAttrs,
+  provide,
+  watch,
+} from '#imports'
 import type { FieldListItem, EntityContext, FieldConfig } from '#blokkli/types'
 import type { BlokkliFragmentName } from '#blokkli/definitions'
 import BlokkliItem from './../BlokkliItem.vue'
+import { isVisibleByOptions } from '#blokkli/helpers/runtimeHelpers'
+import {
+  INJECT_FIELD_PROXY_MODE,
+  INJECT_IS_EDITING,
+} from '#blokkli/helpers/symbols'
 
-const { dom, types, runtimeConfig } = useBlokkli()
+const { dom, types, runtimeConfig, selection } = useBlokkli()
 
 const root = ref<HTMLElement | null>(null)
 
-const props = defineProps<{
-  name: string
-  fieldKey: string
-  list: FieldListItem[]
-  entity: EntityContext
-  tag?: string
-  isNested: boolean
-  fieldListType: string
-  allowedFragments?: BlokkliFragmentName[]
-  dropAlignment?: 'vertical' | 'horizontal'
-}>()
+const props = withDefaults(
+  defineProps<{
+    name: string
+    fieldKey: string
+    list: FieldListItem[]
+    entity: EntityContext
+    language?: string
+    tag?: string
+    isNested: boolean
+    fieldListType: string
+    allowedFragments?: BlokkliFragmentName[]
+    dropAlignment?: 'vertical' | 'horizontal'
+    proxyMode?: boolean
+    globalProxyMode?: boolean
+    nestingLevel: number
+  }>(),
+  {
+    tag: 'div',
+    allowedFragments: undefined,
+    dropAlignment: undefined,
+    language: undefined,
+  },
+)
+
+const attrs = useAttrs()
+
+provide(INJECT_FIELD_PROXY_MODE, props.proxyMode)
+provide(INJECT_IS_EDITING, true)
+
+const proxyVisible = computed(
+  () =>
+    props.proxyMode &&
+    (selection.uuids.value.length ||
+      selection.isDragging.value ||
+      selection.isMultiSelecting.value),
+)
 
 const fieldConfig = computed<FieldConfig>(() => {
   const match = types.getFieldConfig(
@@ -98,13 +170,51 @@ const allowedBundles = computed<string>(() => {
   return bundles.join(',')
 })
 
+const fieldAttributes = computed(() => {
+  return {
+    'data-field-name': props.name,
+    'data-field-label': fieldConfig.value.label,
+    'data-field-is-nested': props.isNested,
+    'data-bk-nesting-level': props.nestingLevel,
+    'data-host-entity-type': props.entity.type,
+    'data-host-entity-uuid': props.entity.uuid,
+    'data-host-entity-bundle': props.entity.bundle,
+    'data-field-key': props.fieldKey,
+    'data-field-drop-alignment': props.dropAlignment,
+    'data-allowed-fragments': props.allowedFragments
+      ? props.allowedFragments.join(',')
+      : undefined,
+    'data-field-allowed-bundles': allowedBundles.value,
+    'data-field-list-type': props.fieldListType,
+    'data-field-cardinality': fieldConfig.value.cardinality,
+  }
+})
+
+// @TODO: This should be handled differently to prevent constant updates in the
+// component when the options change.
+// Ideally this is handled as an overlay on top of the blocks, similar to how
+// selection or multi-select works.
+function isMuted(item?: FieldListItem) {
+  return !isVisibleByOptions(item, props.language)
+}
+
+watch(root, function (newRoot) {
+  if (newRoot) {
+    dom.updateFieldElement(props.entity, props.name, newRoot)
+  }
+})
+
 onMounted(() => {
   if (root.value) {
-    dom.registerField(props.entity.uuid, props.name, root.value)
+    dom.registerField(props.entity, props.name, root.value)
   }
 })
 
 onBeforeUnmount(() => {
-  dom.unregisterField(props.entity.uuid, props.name)
+  dom.unregisterField(props.entity, props.name)
+})
+
+defineOptions({
+  inheritAttrs: false,
 })
 </script>

package/dist/runtime/components/Edit/EditProvider.vue

@@ -70,6 +70,7 @@ import {
   INJECT_EDIT_CONTEXT,
   INJECT_EDIT_FIELD_LIST_COMPONENT,
   INJECT_EDIT_LOGGER,
+  INJECT_GLOBAL_PROXY_MODE,
   INJECT_IS_EDITING,
 } from '#blokkli/helpers/symbols'
 import type { AdapterContext } from '#blokkli/adapter'
@@ -211,4 +212,7 @@ provide<BlokkliApp>(INJECT_APP, {
   dropAreas,
   debug,
 })
+
+const isProxyMode = computed(() => ui.isProxyMode.value)
+provide(INJECT_GLOBAL_PROXY_MODE, isProxyMode)
 </script>

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

@@ -154,6 +154,9 @@ function onMouseLeave() {
 }
 
 const onWheel = (e: WheelEvent) => {
+  if (e.ctrlKey || e.metaKey) {
+    return
+  }
   if (ui.addListOrientation.value === 'horizontal' && e.deltaX) {
     e.stopPropagation()
     return

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

@@ -0,0 +1,111 @@
+<template>
+  <div
+    ref="overviewEl"
+    class="bk bk-artboard-overview"
+    @touchstart.stop
+    @pointerdown.stop
+    @mousedown.stop
+    @mousemove.stop
+  >
+    <div ref="overviewArtboardEl" class="bk-artboard-overview-artboard">
+      <canvas ref="canvas" />
+    </div>
+    <div class="bk-artboard-overview-visible">
+      <button ref="overviewVisibleEl" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type Artboard, type ArtboardPlugin, overview } from 'artboard-deluxe'
+import { onBeforeUnmount, onMounted, ref, useBlokkli, computed } from '#imports'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+
+const props = defineProps<{
+  artboard: Artboard
+}>()
+
+const { theme, dom, ui, selection } = useBlokkli()
+
+const overviewFillColor = computed(() => {
+  return theme.getColorString('mono', '500', 0.2)
+})
+
+const selectedColor = computed(() => {
+  return theme.getColorString('accent', '700', 1)
+})
+
+const overviewEl = ref<HTMLDivElement>()
+const overviewArtboardEl = ref<HTMLDivElement>()
+const overviewVisibleEl = ref<HTMLDivElement>()
+const canvas = ref<HTMLCanvasElement>()
+
+let pluginOverview: ArtboardPlugin | null = null
+
+function updateCanvas() {
+  const ctx = canvas.value?.getContext('2d')
+
+  if (!ctx || !canvas.value || !overviewArtboardEl.value) {
+    return
+  }
+
+  const rect = overviewArtboardEl.value.getBoundingClientRect()
+
+  canvas.value.width = rect.width
+  canvas.value.height = rect.height
+
+  ctx.clearRect(0, 0, rect.width, rect.height)
+
+  const rects = Object.entries(dom.getBlockRects())
+
+  const scale = rect.width / ui.artboardSize.value.width
+
+  ctx.fillStyle = overviewFillColor.value
+  ctx.lineWidth = 1
+  ctx.strokeStyle = selectedColor.value
+
+  for (let i = 0; i < rects.length; i++) {
+    const [uuid, blockRect] = rects[i]
+    ctx.fillRect(
+      Math.round(blockRect.x * scale),
+      Math.round(blockRect.y * scale),
+      Math.round(blockRect.width * scale),
+      Math.round(blockRect.height * scale),
+    )
+    if (selection.isBlockSelected(uuid)) {
+      ctx.strokeRect(
+        Math.round(blockRect.x * scale) + 0.5,
+        Math.round(blockRect.y * scale) + 0.5,
+        Math.round(blockRect.width * scale),
+        Math.round(blockRect.height * scale),
+      )
+    }
+  }
+}
+
+onBlokkliEvent('animationFrame', updateCanvas)
+
+onMounted(() => {
+  if (overviewEl.value && overviewArtboardEl.value && overviewVisibleEl.value) {
+    pluginOverview = props.artboard.addPlugin(
+      overview({
+        element: overviewEl.value,
+        artboardElement: overviewArtboardEl.value,
+        visibleAreaElement: overviewVisibleEl.value,
+        padding: 20,
+        autoHeight: true,
+      }),
+    )
+  }
+})
+
+onBeforeUnmount(() => {
+  if (pluginOverview) {
+    props.artboard.removePlugin(pluginOverview)
+  }
+})
+
+defineOptions({
+  name: 'ArtboardOverview',
+})
+</script>

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

@@ -0,0 +1,47 @@
+<template>
+  <Teleport to="body">
+    <div
+      class="bk bk-artboard-scrollbar"
+      :class="'bk-orientation-' + orientation"
+    >
+      <div ref="el">
+        <button ref="thumb" />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { type Artboard, type ArtboardPlugin, scrollbar } from 'artboard-deluxe'
+import { onBeforeUnmount, onMounted, ref } from '#imports'
+
+const props = defineProps<{
+  artboard: Artboard
+  orientation: 'x' | 'y'
+}>()
+
+const el = ref<HTMLDivElement>()
+const thumb = ref<HTMLButtonElement>()
+let scrollbarPlugin: ArtboardPlugin | null = 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>