@nexxtmove/ui 1.36.0 → 1.38.0

package/src/components/molecules/Tree/tree-drop.ts

@@ -0,0 +1,155 @@
+import type { NexxtTreeNode } from './Tree.vue'
+
+/** A visible row of the tree, in document order. */
+export interface TreeRow {
+  node: NexxtTreeNode
+  depth: number
+  parentId: string | null
+  expandable: boolean
+  canHaveChildren: boolean
+  draggable: boolean
+  expanded: boolean
+  /** One-based position among its siblings. */
+  position: number
+  setSize: number
+}
+
+export type DropMarker = 'before' | 'inside' | 'after'
+
+export interface TreeDrop {
+  /** The row the pointer was over when this spot was picked. */
+  rowId: string
+  parentId: string | null
+  index: number
+  marker: DropMarker
+}
+
+/**
+ * Where a row sits with the ghost row taken out, relative to the top of the tree. `bottom` takes
+ * in the gap below the row: a gap belongs to the row above it, so moving across it never reads
+ * as leaving the tree.
+ */
+export interface RestSlot {
+  id: string
+  top: number
+  height: number
+  bottom: number
+}
+
+export interface DropLayout {
+  slots: RestSlot[]
+  /** The ghost row as it is laid out now, gap included; `null` while there is none. */
+  ghost: { top: number; bottom: number } | null
+}
+
+/** `keep` leaves the current spot as it is: the pointer is on the ghost row, or there are no rows. */
+export type DropHit = { kind: 'keep' } | { kind: 'row'; id: string; ratio: number }
+
+export const containsNode = (node: NexxtTreeNode, id: string): boolean =>
+  node.id === id || !!node.children?.some((child) => containsNode(child, id))
+
+export const findNode = (nodes: NexxtTreeNode[], id: string): NexxtTreeNode | null => {
+  for (const node of nodes) {
+    if (node.id === id) return node
+
+    const found = node.children ? findNode(node.children, id) : null
+    if (found) return found
+  }
+
+  return null
+}
+
+/**
+ * Reads the pointer against where the rows land without the ghost row, not against what is under
+ * it now. The ghost pushes rows aside, so reading what is under the pointer would find a shifted
+ * row or the ghost itself, pick another spot, move the ghost and flicker. Measured this way the
+ * same pointer always gives the same answer, however the ghost moves.
+ *
+ * @param layout - The rows at rest and the ghost row as it is laid out now.
+ * @param y - The pointer, relative to the top of the tree.
+ */
+export const hitTest = ({ slots, ghost }: DropLayout, y: number): DropHit => {
+  if (ghost && y >= ghost.top && y < ghost.bottom) return { kind: 'keep' }
+
+  const restY = ghost && y >= ghost.bottom ? y - (ghost.bottom - ghost.top) : y
+  const last = slots.at(-1)
+
+  // The empty space a tree can have below its last row is the end of that row's level, not a gap
+  if (last && restY >= last.bottom) return { kind: 'row', id: last.id, ratio: 1 }
+
+  const slot = slots.find((item) => restY >= item.top && restY < item.bottom)
+  if (!slot) return { kind: 'keep' }
+
+  const ratio = slot.height ? (restY - slot.top) / slot.height : 0
+
+  return { kind: 'row', id: slot.id, ratio: Math.min(1, Math.max(0, ratio)) }
+}
+
+/**
+ * The spot a pointer at `ratio` of `row` stands for. A group splits into before (top 30%),
+ * inside and after (bottom 30%), a leaf into before and after at the middle. Inside always lands
+ * as the first child, right under the group row, so the ghost shows up next to the pointer. The
+ * dragged node and everything inside it are no target at all.
+ */
+export const resolveDrop = (
+  row: TreeRow,
+  ratio: number,
+  moving: NexxtTreeNode,
+): TreeDrop | null => {
+  if (containsNode(moving, row.node.id)) return null
+
+  if (row.canHaveChildren && ratio > 0.3 && ratio < 0.7) {
+    return { rowId: row.node.id, parentId: row.node.id, index: 0, marker: 'inside' }
+  }
+
+  const after = ratio >= 0.5
+
+  return {
+    rowId: row.node.id,
+    parentId: row.parentId,
+    index: row.position - 1 + (after ? 1 : 0),
+    marker: after ? 'after' : 'before',
+  }
+}
+
+/** A spot where the dragged row already is: dropping there changes nothing, so it is no target. */
+export const isNoOp = (drop: TreeDrop, source: TreeRow) =>
+  drop.parentId === source.parentId &&
+  (drop.index === source.position - 1 || drop.index === source.position)
+
+/** Two spots are the same when they land the node in the same place, whichever row picked them. */
+export const samePlace = (a: TreeDrop | null, b: TreeDrop | null) =>
+  a === b || (!!a && !!b && a.parentId === b.parentId && a.index === b.index)
+
+/**
+ * Where the ghost row goes among the visible rows, and how deep. Right before the row of the
+ * sibling now at `index`, or after the last visible row inside the parent when `index` is past
+ * its last child. `null` for a spot inside a collapsed group: that group row marks itself.
+ */
+export const ghostSlot = (
+  rows: TreeRow[],
+  nodes: NexxtTreeNode[],
+  drop: TreeDrop | null,
+): { at: number; depth: number } | null => {
+  if (!drop) return null
+
+  const parentAt =
+    drop.parentId === null ? -1 : rows.findIndex((row) => row.node.id === drop.parentId)
+  const parent = rows[parentAt]
+  if (drop.parentId !== null && !parent) return null
+  if (parent?.expandable && !parent.expanded) return null
+
+  const depth = parent ? parent.depth + 1 : 0
+  const next = (parent ? (parent.node.children ?? []) : nodes)[drop.index]
+
+  if (next) {
+    const at = rows.findIndex((row) => row.node.id === next.id)
+
+    return at === -1 ? null : { at, depth }
+  }
+
+  let at = parentAt + 1
+  while (at < rows.length && rows[at]!.depth >= depth) at++
+
+  return { at, depth }
+}

package/src/components.json

@@ -80,6 +80,8 @@
   "NexxtEditorGap": "components/editor/molecules/EditorGap/EditorGap.vue",
   "NexxtEditorHeadingType": "components/editor/molecules/EditorHeadingType/EditorHeadingType.vue",
   "NexxtEditorJustifyContent": "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue",
+  "NexxtEditorLetterSpacing": "components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue",
+  "NexxtEditorLineHeight": "components/editor/molecules/EditorLineHeight/EditorLineHeight.vue",
   "NexxtEditorMaxWidth": "components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue",
   "NexxtEditorPadding": "components/editor/molecules/EditorPadding/EditorPadding.vue",
   "NexxtEditorRadius": "components/editor/molecules/EditorRadius/EditorRadius.vue",

package/src/env.d.ts

@@ -1,6 +1,11 @@
 /// <reference types="vite/client" />
 
-declare module '*.svg' {
+// vite-svg-loader compiles a plain SVG import to a Vue component, but
+// vite/client above declares `*.svg` as a URL string, and of two identical
+// wildcard patterns the one loaded first wins. TypeScript picks the pattern
+// with the longest prefix, so the library's own `@ui-assets` SVGs get their
+// component type here regardless of load order.
+declare module '@ui-assets/*.svg' {
   import type { DefineComponent } from 'vue'
   const component: DefineComponent<object, object, unknown>
   export default component

package/src/index.ts

@@ -23,6 +23,7 @@ export type {
   NexxtPickerItemData,
 } from './components/molecules/PickerList/PickerList.vue'
 export type {
+  NexxtTreeMove,
   NexxtTreeNode,
   NexxtTreeProps,
   NexxtTreeSlots,
@@ -83,6 +84,16 @@ export type {
   EditorMaxWidthMessages,
   EditorMaxWidthValue,
 } from './components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue'
+export { EDITOR_LINE_HEIGHT_STEPS } from './components/editor/molecules/EditorLineHeight/EditorLineHeight.vue'
+export type {
+  EditorLineHeightMessages,
+  EditorLineHeightValue,
+} from './components/editor/molecules/EditorLineHeight/EditorLineHeight.vue'
+export { EDITOR_LETTER_SPACING_STEPS } from './components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue'
+export type {
+  EditorLetterSpacingMessages,
+  EditorLetterSpacingValue,
+} from './components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue'
 export type { EditorPaddingMessages } from './components/editor/molecules/EditorPadding/EditorPadding.vue'
 export type {
   NexxtTemplateCardContentFeature,
@@ -115,6 +126,8 @@ export { default as NexxtEditorFlexDirection } from './components/editor/molecul
 export { default as NexxtEditorGap } from './components/editor/molecules/EditorGap/EditorGap.vue'
 export { default as NexxtEditorHeadingType } from './components/editor/molecules/EditorHeadingType/EditorHeadingType.vue'
 export { default as NexxtEditorJustifyContent } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue'
+export { default as NexxtEditorLetterSpacing } from './components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue'
+export { default as NexxtEditorLineHeight } from './components/editor/molecules/EditorLineHeight/EditorLineHeight.vue'
 export { default as NexxtEditorMaxWidth } from './components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue'
 export { default as NexxtEditorPadding } from './components/editor/molecules/EditorPadding/EditorPadding.vue'
 export { default as NexxtEditorRadius } from './components/editor/molecules/EditorRadius/EditorRadius.vue'