@feedmepos/mf-order-setting 0.0.90 → 0.0.91

package/src/views/display-system/CanvasArea.vue

@@ -0,0 +1,355 @@
+<script setup lang="ts">
+import { useI18n } from '@feedmepos/mf-common'
+import {
+  blockDefinition,
+  type DisplayZoneDraft,
+  type DisplaySplitDraft
+} from '@/modules/display-system/interface'
+
+interface EdgeAction {
+  direction: DisplaySplitDraft['direction']
+  kind: 'bootstrap' | 'split' | 'extend'
+}
+defineProps<{
+  zone: DisplayZoneDraft
+  areaNumber: number
+  percent: number
+  weight: number
+  removable: boolean
+  edgeActions: EdgeAction[]
+  selectedZoneId: string
+  selectedBlockId: string
+  scope: 'area' | 'module'
+  dragging: boolean
+  dropZoneId: string
+}>()
+const emit = defineEmits<{
+  (event: 'select-zone', zoneId: string): void
+  (event: 'select-block', payload: { zoneId: string; blockId: string }): void
+  (event: 'open-module-picker', zoneId: string): void
+  (event: 'remove-area', zoneId: string): void
+  (event: 'edge-click', action: EdgeAction): void
+  (event: 'block-dragstart', eventData: DragEvent): void
+  (event: 'block-dragend'): void
+  (event: 'dragover'): void
+  (event: 'dragleave'): void
+  (event: 'drop'): void
+}>()
+const { t } = useI18n()
+function blockLabel(type: string): string {
+  const definition = blockDefinition(type)
+  return definition ? t(definition.editor.labelKey) : type
+}
+function blockIcon(type: string): string {
+  return blockDefinition(type)?.editor.icon ?? 'widgets'
+}
+function edgeClass(direction: DisplaySplitDraft['direction']): string {
+  return direction === 'ROW' ? 'canvas-edge-right' : 'canvas-edge-bottom'
+}
+</script>
+
+<template>
+  <section
+    class="canvas-area"
+    :style="{ flexGrow: weight, flexBasis: '0' }"
+    @click="emit('select-zone', zone.id)"
+    @dragover.prevent="emit('dragover')"
+    @dragleave="emit('dragleave')"
+    @drop.prevent="emit('drop')"
+  >
+    <div
+      class="canvas-area-card"
+      :class="{
+        'canvas-area-active': zone.id === selectedZoneId && scope === 'area',
+        'canvas-area-context': zone.id === selectedZoneId && scope === 'module',
+        'canvas-area-droppable': dragging,
+        'canvas-area-drop-over': dropZoneId === zone.id
+      }"
+    >
+      <header class="canvas-area-head">
+        <span class="canvas-area-name">
+          {{ t('order.displaySystem.editor.ui.area', { index: areaNumber }) }}
+        </span>
+        <span class="canvas-area-share">{{ percent }}%</span>
+        <button
+          v-if="removable"
+          type="button"
+          class="canvas-area-remove"
+          :title="t('order.displaySystem.editor.ui.removeAreaTooltip')"
+          @click.stop="emit('remove-area', zone.id)"
+        >
+          <FmIcon name="close" size="sm" />
+        </button>
+      </header>
+
+      <div class="canvas-chips">
+        <div
+          v-if="zone.block"
+          class="canvas-chip"
+          :class="{
+            'canvas-chip-active': zone.block.id === selectedBlockId && scope === 'module',
+            'canvas-chip-context': zone.block.id === selectedBlockId && scope === 'area'
+          }"
+          tabindex="0"
+          draggable="true"
+          @click.stop="emit('select-block', { zoneId: zone.id, blockId: zone.block!.id })"
+          @dragstart="emit('block-dragstart', $event)"
+          @dragend="emit('block-dragend')"
+        >
+          <FmIcon name="open_with" size="sm" class="canvas-chip-grip" />
+          <FmIcon :name="blockIcon(zone.block.type)" size="sm" />
+          <span class="canvas-chip-label">{{ blockLabel(zone.block.type) }}</span>
+          <button
+            type="button"
+            class="canvas-chip-swap"
+            :title="t('order.displaySystem.editor.ui.changeModuleTooltip')"
+            @click.stop="emit('open-module-picker', zone.id)"
+          >
+            <FmIcon name="sync_alt" size="sm" />
+          </button>
+        </div>
+        <button
+          v-else
+          type="button"
+          class="canvas-area-empty"
+          @click.stop="emit('open-module-picker', zone.id)"
+        >
+          {{ t('order.displaySystem.editor.ui.emptyArea') }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Each border offers whichever "+" the layout has room for: split
+             this area, or -- only on the container's last area -- extend it
+             with a new sibling. -->
+    <button
+      v-for="action in edgeActions"
+      :key="action.direction"
+      type="button"
+      class="canvas-edge"
+      :class="edgeClass(action.direction)"
+      :title="
+        action.kind === 'split'
+          ? t('order.displaySystem.editor.ui.splitAreaHint', {
+              direction: t(`order.displaySystem.editor.values.${action.direction.toLowerCase()}`)
+            })
+          : t('order.displaySystem.editor.ui.addArea')
+      "
+      @click.stop="emit('edge-click', action)"
+    >
+      <FmIcon name="add" size="sm" />
+    </button>
+  </section>
+</template>
+
+<style scoped>
+/* The sizing box has no border/padding, so flex weights match the live preview. */
+.canvas-area {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+}
+.canvas-area-card {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  gap: 8px;
+  overflow: visible;
+  border: 1.5px dashed rgb(255 255 255 / 55%);
+  border-radius: 10px;
+  padding: 6px;
+  background: rgb(17 24 39 / 32%);
+  text-align: left;
+}
+.canvas-area-card:hover {
+  background: rgb(17 24 39 / 42%);
+}
+.canvas-area-active {
+  border-style: solid;
+  border-color: #f97316;
+  background: rgb(249 115 22 / 30%);
+  box-shadow: 0 0 0 3px #f973161f;
+}
+.canvas-area-context {
+  border-style: solid;
+  border-color: #fed7aa;
+  background: rgb(253 186 116 / 20%);
+}
+.canvas-area-droppable {
+  border-color: #f97316;
+  background: rgb(249 115 22 / 36%);
+}
+.canvas-area-drop-over {
+  border-style: solid;
+  box-shadow: 0 0 0 3px #f9731633;
+}
+.canvas-area-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.canvas-area-name,
+.canvas-area-share {
+  color: #f9fafb;
+  text-shadow: 0 1px 3px rgb(0 0 0 / 70%);
+  font-weight: 700;
+}
+.canvas-area-name {
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.canvas-area-share {
+  margin-left: auto;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.canvas-area-remove {
+  display: grid;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 999px;
+  padding: 2px;
+  background: rgb(17 24 39 / 55%);
+  color: #f9fafb;
+  opacity: 0;
+  transition: opacity 0.1s ease;
+}
+.canvas-area-remove:hover {
+  background: #fef2f2;
+  color: #dc2626;
+}
+/* Controls straddle the border without taking any of the area's layout space. */
+.canvas-edge {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  background: white;
+  box-shadow: 0 0 0 1.5px #d1d5db;
+  color: #9ca3af;
+  opacity: 0;
+  transition: opacity 0.1s ease;
+  z-index: 1;
+}
+.canvas-area:hover .canvas-edge,
+.canvas-area:focus-within .canvas-edge,
+.canvas-area:hover .canvas-area-remove,
+.canvas-area:focus-within .canvas-area-remove {
+  opacity: 1;
+}
+.canvas-edge:hover {
+  box-shadow: 0 0 0 1.5px #f97316;
+  color: #f97316;
+}
+.canvas-edge-right {
+  top: 50%;
+  right: -10px;
+  transform: translateY(-50%);
+}
+.canvas-edge-bottom {
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.canvas-chips {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+}
+.canvas-chip {
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  max-width: 100%;
+  gap: 6px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 6px 8px;
+  background: rgb(255 255 255 / 92%);
+  color: #374151;
+  font-size: 12px;
+  text-align: left;
+  cursor: grab;
+}
+.canvas-chip:hover {
+  border-color: #fdba74;
+}
+.canvas-chip-active {
+  border-color: #f97316;
+  box-shadow:
+    inset 4px 0 0 #f97316,
+    0 0 0 3px #f973161f;
+  font-weight: 600;
+}
+.canvas-chip-active .canvas-chip-grip {
+  color: #f97316;
+}
+.canvas-chip-context {
+  border-color: #fed7aa;
+  background: #fffdfa;
+}
+.canvas-chip:active {
+  cursor: grabbing;
+}
+.canvas-chip-grip {
+  flex: 0 0 auto;
+  color: #9ca3af;
+}
+.canvas-chip-label {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.canvas-chip-swap {
+  display: grid;
+  flex: 0 0 auto;
+  place-items: center;
+  margin-left: 2px;
+  border-radius: 6px;
+  padding: 2px;
+  color: #9ca3af;
+  opacity: 0;
+  transition: opacity 0.1s ease;
+}
+.canvas-chip:hover .canvas-chip-swap,
+.canvas-chip:focus-within .canvas-chip-swap {
+  opacity: 1;
+}
+.canvas-chip-swap:hover {
+  background: white;
+  color: #f97316;
+}
+.canvas-area-empty {
+  display: grid;
+  flex: 1;
+  place-items: center;
+  border: 1px dashed rgb(255 255 255 / 60%);
+  border-radius: 8px;
+  background: transparent;
+  color: #f3f4f6;
+  font-size: 11px;
+  font-family: inherit;
+  cursor: pointer;
+}
+.canvas-area-empty:hover {
+  border-color: #f97316;
+  color: #f97316;
+}
+@media (hover: none), (pointer: coarse) {
+  .canvas-edge,
+  .canvas-area-remove,
+  .canvas-chip-swap {
+    opacity: 1;
+  }
+}
+</style>

package/src/views/display-system/DisplayLayoutCanvas.spec.ts

@@ -0,0 +1,57 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import {
+  defaultDisplayTemplateDraft,
+  addArea,
+  type DisplaySplitDraft
+} from '@/modules/display-system/interface'
+vi.mock('@feedmepos/mf-common', () => ({ useI18n: () => ({ t: (key: string) => key }) }))
+import Canvas from './DisplayLayoutCanvas.vue'
+let wrapper: VueWrapper
+
+afterEach(() => wrapper?.unmount())
+describe('DisplayLayoutCanvas divider gestures', () => {
+  it.each([
+    ['ROW', []],
+    ['COLUMN', [1]]
+  ] as const)(
+    'uses raw weights for %s pointer movement without a rounding jump',
+    async (direction, path) => {
+      const draft = defaultDisplayTemplateDraft(path.length ? 'ads' : 'mixed')
+      if (!path.length) addArea(draft, 'ROW')
+      const root = draft.root as DisplaySplitDraft
+      const group = path.length ? (root.children[1]!.node as DisplaySplitDraft) : root
+      if (path.length) group.children.push({ weight: 1, node: { kind: 'ZONE', id: 'third' } })
+      group.direction = direction
+      group.children.forEach((child, index) => {
+        child.weight = [333, 333, 334][index]!
+      })
+      wrapper = mount(Canvas, {
+        props: { root, selectedZoneId: '', selectedBlockId: '', scope: 'area', dragging: false },
+        global: { stubs: { FmIcon: true } }
+      })
+      const surface = path.length ? wrapper.find('.canvas-group') : wrapper
+      vi.spyOn(surface.element, 'getBoundingClientRect').mockReturnValue({
+        left: 0,
+        top: 0,
+        width: 1000,
+        height: 1000
+      } as DOMRect)
+      const dividers = path.length
+        ? surface.findAll('[role="separator"]')
+        : wrapper.findAll('[role="separator"]')
+      const divider = dividers[1]!
+      Object.assign(divider.element, { setPointerCapture: vi.fn(), releasePointerCapture: vi.fn() })
+      await divider.trigger('pointerdown', { pointerId: 1 })
+      await divider.trigger('pointermove', { pointerId: 1, clientX: 666, clientY: 666 })
+      expect(wrapper.emitted('resize')![0]![0]).toEqual({
+        path: [...path],
+        index: 1,
+        ratio: 333 / 667
+      })
+      await divider.trigger('pointerup', { pointerId: 1 })
+      expect(wrapper.emitted('resize-end')).toHaveLength(1)
+    }
+  )
+})