@llc3233149/core 0.9.0

package/src/snap.ts

@@ -0,0 +1,122 @@
+import type { SceneNode } from './scene-graph'
+import type { Rect } from './types'
+import { SNAP_THRESHOLD } from './constants'
+import { rotatedBBox } from './geometry'
+
+export interface SnapGuide {
+  axis: 'x' | 'y'
+  position: number
+  from: number
+  to: number
+}
+
+export interface SnapResult {
+  dx: number
+  dy: number
+  guides: SnapGuide[]
+}
+
+function getEdges(node: SceneNode) {
+  return rotatedBBox(node.x, node.y, node.width, node.height, node.rotation)
+}
+
+export function computeSnap(
+  movingIds: Set<string>,
+  movingBounds: Rect,
+  allNodes: SceneNode[]
+): SnapResult {
+  const targets = allNodes.filter((n) => !movingIds.has(n.id))
+  if (targets.length === 0) return { dx: 0, dy: 0, guides: [] }
+
+  const m = {
+    left: movingBounds.x,
+    right: movingBounds.x + movingBounds.width,
+    centerX: movingBounds.x + movingBounds.width / 2,
+    top: movingBounds.y,
+    bottom: movingBounds.y + movingBounds.height,
+    centerY: movingBounds.y + movingBounds.height / 2
+  }
+
+  let bestDx = Infinity
+  let bestDy = Infinity
+  const guides: SnapGuide[] = []
+
+  for (const target of targets) {
+    const t = getEdges(target)
+
+    // X-axis snapping: left-to-left, left-to-right, right-to-left, right-to-right, center-to-center
+    const xPairs: [number, number][] = [
+      [m.left, t.left],
+      [m.left, t.right],
+      [m.right, t.left],
+      [m.right, t.right],
+      [m.centerX, t.centerX]
+    ]
+
+    for (const [mVal, tVal] of xPairs) {
+      const d = tVal - mVal
+      if (Math.abs(d) < SNAP_THRESHOLD && Math.abs(d) <= Math.abs(bestDx)) {
+        if (Math.abs(d) < Math.abs(bestDx)) {
+          bestDx = d
+          // Remove old x guides if we found a closer snap
+          for (let i = guides.length - 1; i >= 0; i--) {
+            if (guides[i].axis === 'x') guides.splice(i, 1)
+          }
+        }
+        if (Math.abs(d) === Math.abs(bestDx)) {
+          const minY = Math.min(m.top, t.top)
+          const maxY = Math.max(m.bottom, t.bottom)
+          guides.push({ axis: 'x', position: tVal, from: minY, to: maxY })
+        }
+      }
+    }
+
+    // Y-axis snapping
+    const yPairs: [number, number][] = [
+      [m.top, t.top],
+      [m.top, t.bottom],
+      [m.bottom, t.top],
+      [m.bottom, t.bottom],
+      [m.centerY, t.centerY]
+    ]
+
+    for (const [mVal, tVal] of yPairs) {
+      const d = tVal - mVal
+      if (Math.abs(d) < SNAP_THRESHOLD && Math.abs(d) <= Math.abs(bestDy)) {
+        if (Math.abs(d) < Math.abs(bestDy)) {
+          for (let i = guides.length - 1; i >= 0; i--) {
+            if (guides[i].axis === 'y') guides.splice(i, 1)
+          }
+          bestDy = d
+        }
+        if (Math.abs(d) === Math.abs(bestDy)) {
+          const minX = Math.min(m.left, t.left)
+          const maxX = Math.max(m.right, t.right)
+          guides.push({ axis: 'y', position: tVal, from: minX, to: maxX })
+        }
+      }
+    }
+  }
+
+  return {
+    dx: Math.abs(bestDx) <= SNAP_THRESHOLD ? bestDx : 0,
+    dy: Math.abs(bestDy) <= SNAP_THRESHOLD ? bestDy : 0,
+    guides
+  }
+}
+
+export function computeSelectionBounds(nodes: SceneNode[]): Rect | null {
+  if (nodes.length === 0) return null
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+  for (const n of nodes) {
+    const edges = getEdges(n)
+    minX = Math.min(minX, edges.left)
+    minY = Math.min(minY, edges.top)
+    maxX = Math.max(maxX, edges.right)
+    maxY = Math.max(maxY, edges.bottom)
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY }
+}

package/src/style-runs.ts

@@ -0,0 +1,234 @@
+import type { CharacterStyleOverride, StyleRun, TextDecoration } from './scene-graph'
+
+export function getStyleAt(runs: StyleRun[], index: number): CharacterStyleOverride {
+  for (const run of runs) {
+    if (index >= run.start && index < run.start + run.length) {
+      return run.style
+    }
+  }
+  return {}
+}
+
+function expandRuns(runs: StyleRun[], textLength: number): (CharacterStyleOverride | null)[] {
+  const chars: (CharacterStyleOverride | null)[] = Array.from({ length: textLength }, (): CharacterStyleOverride | null => null)
+  for (const run of runs) {
+    for (let i = run.start; i < run.start + run.length && i < textLength; i++) {
+      chars[i] = { ...chars[i], ...run.style }
+    }
+  }
+  return chars
+}
+
+export function applyStyleToRange(
+  runs: StyleRun[],
+  start: number,
+  end: number,
+  patch: CharacterStyleOverride,
+  textLength: number
+): StyleRun[] {
+  const chars = expandRuns(runs, textLength)
+
+  for (let i = start; i < end && i < textLength; i++) {
+    chars[i] = { ...chars[i], ...patch }
+  }
+
+  return compactRuns(chars)
+}
+
+export function removeStyleFromRange(
+  runs: StyleRun[],
+  start: number,
+  end: number,
+  keys: (keyof CharacterStyleOverride)[],
+  textLength: number
+): StyleRun[] {
+  const chars = expandRuns(runs, textLength)
+
+  for (let i = start; i < end && i < textLength; i++) {
+    if (chars[i]) {
+      const copy = { ...chars[i] }
+      for (const k of keys) delete copy[k]
+      chars[i] = Object.keys(copy).length > 0 ? copy : null
+    }
+  }
+
+  return compactRuns(chars)
+}
+
+export function selectionHasStyle(
+  runs: StyleRun[],
+  start: number,
+  end: number,
+  key: keyof CharacterStyleOverride,
+  value: unknown
+): boolean {
+  for (let i = start; i < end; i++) {
+    const style = getStyleAt(runs, i)
+    if (style[key] !== value) return false
+  }
+  return true
+}
+
+function stylesEqual(a: CharacterStyleOverride | null, b: CharacterStyleOverride | null): boolean {
+  if (a === b) return true
+  if (!a || !b) return a === b
+  const aKeys = Object.keys(a) as (keyof CharacterStyleOverride)[]
+  const bKeys = Object.keys(b) as (keyof CharacterStyleOverride)[]
+  if (aKeys.length !== bKeys.length) return false
+  for (const k of aKeys) {
+    if (a[k] !== b[k]) return false
+  }
+  return true
+}
+
+function isEmptyStyle(style: CharacterStyleOverride | null): boolean {
+  return !style || Object.keys(style).length === 0
+}
+
+function compactRuns(chars: (CharacterStyleOverride | null)[]): StyleRun[] {
+  const result: StyleRun[] = []
+  let i = 0
+  while (i < chars.length) {
+    if (isEmptyStyle(chars[i])) {
+      i++
+      continue
+    }
+    const start = i
+    const style = chars[i]
+    if (!style) { i++; continue }
+    while (i < chars.length && stylesEqual(chars[i], style)) i++
+    result.push({ start, length: i - start, style: { ...style } })
+  }
+  return result
+}
+
+export function adjustRunsForInsert(
+  runs: StyleRun[],
+  pos: number,
+  insertLength: number
+): StyleRun[] {
+  return runs.map((run) => {
+    if (pos <= run.start) {
+      return { ...run, start: run.start + insertLength }
+    }
+    if (pos > run.start && pos < run.start + run.length) {
+      return { ...run, length: run.length + insertLength }
+    }
+    return run
+  })
+}
+
+export function adjustRunsForDelete(
+  runs: StyleRun[],
+  start: number,
+  deleteLength: number
+): StyleRun[] {
+  const end = start + deleteLength
+  const result: StyleRun[] = []
+  for (const run of runs) {
+    const runEnd = run.start + run.length
+    if (runEnd <= start) {
+      result.push(run)
+    } else if (run.start >= end) {
+      result.push({ ...run, start: run.start - deleteLength })
+    } else {
+      const newStart = Math.max(run.start, start)
+      const newEnd = Math.min(runEnd, end)
+      const removed = newEnd - newStart
+      const newLength = run.length - removed
+      if (newLength > 0) {
+        result.push({
+          ...run,
+          start: Math.min(run.start, start),
+          length: newLength
+        })
+      }
+    }
+  }
+  return result
+}
+
+export function toggleBoldInRange(
+  runs: StyleRun[],
+  start: number,
+  end: number,
+  nodeWeight: number,
+  textLength: number
+): { runs: StyleRun[]; newWeight: number } {
+  const allBold = selectionAllBold(runs, start, end, nodeWeight)
+  const targetWeight = allBold ? 400 : 700
+  const newRuns = allBold
+    ? removeStyleFromRange(runs, start, end, ['fontWeight'], textLength)
+    : applyStyleToRange(runs, start, end, { fontWeight: 700 }, textLength)
+  return { runs: newRuns, newWeight: targetWeight }
+}
+
+function selectionAllBold(
+  runs: StyleRun[],
+  start: number,
+  end: number,
+  nodeWeight: number
+): boolean {
+  for (let i = start; i < end; i++) {
+    const style = getStyleAt(runs, i)
+    const weight = style.fontWeight ?? nodeWeight
+    if (weight < 700) return false
+  }
+  return true
+}
+
+export function toggleItalicInRange(
+  runs: StyleRun[],
+  start: number,
+  end: number,
+  nodeItalic: boolean,
+  textLength: number
+): { runs: StyleRun[]; newItalic: boolean } {
+  const allItalic = selectionAllItalic(runs, start, end, nodeItalic)
+  const newRuns = allItalic
+    ? removeStyleFromRange(runs, start, end, ['italic'], textLength)
+    : applyStyleToRange(runs, start, end, { italic: true }, textLength)
+  return { runs: newRuns, newItalic: !allItalic }
+}
+
+function selectionAllItalic(
+  runs: StyleRun[],
+  start: number,
+  end: number,
+  nodeItalic: boolean
+): boolean {
+  for (let i = start; i < end; i++) {
+    const style = getStyleAt(runs, i)
+    if (!(style.italic ?? nodeItalic)) return false
+  }
+  return true
+}
+
+export function toggleDecorationInRange(
+  runs: StyleRun[],
+  start: number,
+  end: number,
+  deco: TextDecoration,
+  nodeDeco: TextDecoration,
+  textLength: number
+): { runs: StyleRun[]; newDeco: TextDecoration } {
+  const allHave = selectionAllHasDecoration(runs, start, end, deco, nodeDeco)
+  const newRuns = allHave
+    ? removeStyleFromRange(runs, start, end, ['textDecoration'], textLength)
+    : applyStyleToRange(runs, start, end, { textDecoration: deco }, textLength)
+  return { runs: newRuns, newDeco: allHave ? 'NONE' : deco }
+}
+
+function selectionAllHasDecoration(
+  runs: StyleRun[],
+  start: number,
+  end: number,
+  deco: TextDecoration,
+  nodeDeco: TextDecoration
+): boolean {
+  for (let i = start; i < end; i++) {
+    const style = getStyleAt(runs, i)
+    if ((style.textDecoration ?? nodeDeco) !== deco) return false
+  }
+  return true
+}

package/src/svg-export/defs.ts

@@ -0,0 +1,255 @@
+import { colorToHex, colorToHex8 } from '../color'
+import { round } from './paths'
+
+import { svg } from '../svg-node'
+
+import type { SVGNode } from '../svg-node'
+import type { SceneGraph, SceneNode, Fill, Effect } from '../scene-graph'
+import type { Color } from '../types'
+
+export interface SVGExportContext {
+  defs: SVGNode[]
+  defIdCounter: number
+  graph: SceneGraph
+}
+
+export function nextDefId(ctx: SVGExportContext, prefix: string): string {
+  return `${prefix}${ctx.defIdCounter++}`
+}
+
+export function formatColor(color: Color, opacity = 1): string {
+  return colorToHex8(color, opacity)
+}
+
+function createGradientDef(
+  fill: Fill,
+  node: SceneNode,
+  ctx: SVGExportContext
+): { id: string; node: SVGNode } | null {
+  const stops = fill.gradientStops
+  const t = fill.gradientTransform
+  if (!stops || !t) return null
+
+  const stopNodes = stops.map((s) =>
+    svg('stop', {
+      offset: `${round(s.position * 100)}%`,
+      'stop-color': colorToHex(s.color),
+      'stop-opacity': s.color.a < 1 ? round(s.color.a) : undefined
+    })
+  )
+
+  const id = nextDefId(ctx, 'grad')
+
+  if (fill.type === 'GRADIENT_LINEAR') {
+    const startX = round(t.m02 * 100)
+    const startY = round(t.m12 * 100)
+    const endX = round((t.m00 + t.m02) * 100)
+    const endY = round((t.m10 + t.m12) * 100)
+    return {
+      id,
+      node: svg(
+        'linearGradient',
+        {
+          id,
+          x1: `${startX}%`,
+          y1: `${startY}%`,
+          x2: `${endX}%`,
+          y2: `${endY}%`,
+          gradientUnits: 'objectBoundingBox'
+        },
+        ...stopNodes
+      )
+    }
+  }
+
+  if (fill.type === 'GRADIENT_RADIAL' || fill.type === 'GRADIENT_DIAMOND') {
+    const cx = round(t.m02 * 100)
+    const cy = round(t.m12 * 100)
+    const r = round(Math.sqrt(t.m00 * t.m00 + t.m10 * t.m10) * 100)
+    return {
+      id,
+      node: svg(
+        'radialGradient',
+        { id, cx: `${cx}%`, cy: `${cy}%`, r: `${r}%`, gradientUnits: 'objectBoundingBox' },
+        ...stopNodes
+      )
+    }
+  }
+
+  if (fill.type === 'GRADIENT_ANGULAR') {
+    const cx = round(t.m02 * node.width)
+    const cy = round(t.m12 * node.height)
+    const r = Math.max(node.width, node.height)
+    return {
+      id,
+      node: svg(
+        'radialGradient',
+        { id, cx, cy, r, gradientUnits: 'userSpaceOnUse' },
+        ...stopNodes
+      )
+    }
+  }
+
+  return null
+}
+
+function createImagePattern(
+  fill: Fill,
+  node: SceneNode,
+  ctx: SVGExportContext
+): { id: string; node: SVGNode } | null {
+  if (!fill.imageHash) return null
+  const data = ctx.graph.images.get(fill.imageHash)
+  if (!data) return null
+
+  const id = nextDefId(ctx, 'img')
+  const base64 = btoa(String.fromCharCode(...data))
+  const mime = detectImageMime(data)
+
+  return {
+    id,
+    node: svg(
+      'pattern',
+      {
+        id,
+        patternUnits: 'objectBoundingBox',
+        width: 1,
+        height: 1
+      },
+      svg('image', {
+        href: `data:${mime};base64,${base64}`,
+        width: node.width,
+        height: node.height,
+        preserveAspectRatio: fill.imageScaleMode === 'FIT' ? 'xMidYMid meet' : 'xMidYMid slice'
+      })
+    )
+  }
+}
+
+function detectImageMime(data: Uint8Array): string {
+  if (data[0] === 0x89 && data[1] === 0x50) return 'image/png'
+  if (data[0] === 0xff && data[1] === 0xd8) return 'image/jpeg'
+  if (data[0] === 0x52 && data[1] === 0x49) return 'image/webp'
+  return 'image/png'
+}
+
+export function createFilterDef(effects: Effect[], ctx: SVGExportContext): { id: string; node: SVGNode } | null {
+  const visible = effects.filter((e) => e.visible)
+  if (visible.length === 0) return null
+
+  const id = nextDefId(ctx, 'fx')
+  const primitives: SVGNode[] = []
+
+  for (const effect of visible) {
+    if (effect.type === 'DROP_SHADOW') {
+      const stdDev = round(effect.radius / 2)
+      primitives.push(
+        svg('feDropShadow', {
+          dx: round(effect.offset.x),
+          dy: round(effect.offset.y),
+          stdDeviation: stdDev,
+          'flood-color': colorToHex(effect.color),
+          'flood-opacity': round(effect.color.a)
+        })
+      )
+    } else if (effect.type === 'INNER_SHADOW') {
+      const sid = `${id}_is`
+      const stdDev = round(effect.radius / 2)
+      primitives.push(
+        svg('feGaussianBlur', { in: 'SourceAlpha', stdDeviation: stdDev, result: `${sid}_blur` }),
+        svg('feOffset', {
+          dx: round(effect.offset.x),
+          dy: round(effect.offset.y),
+          result: `${sid}_off`
+        }),
+        svg('feComposite', {
+          in: 'SourceAlpha',
+          in2: `${sid}_off`,
+          operator: 'out',
+          result: `${sid}_inv`
+        }),
+        svg('feFlood', {
+          'flood-color': colorToHex(effect.color),
+          'flood-opacity': round(effect.color.a)
+        }),
+        svg('feComposite', { in2: `${sid}_inv`, operator: 'in', result: `${sid}_shadow` }),
+        svg('feComposite', {
+          in: `${sid}_shadow`,
+          in2: 'SourceGraphic',
+          operator: 'over'
+        })
+      )
+    } else {
+      const stdDev = round(effect.radius / 2)
+      primitives.push(svg('feGaussianBlur', { stdDeviation: stdDev }))
+    }
+  }
+
+  if (primitives.length === 0) return null
+
+  return {
+    id,
+    node: svg('filter', { id }, ...primitives)
+  }
+}
+
+export function resolveFill(
+  fill: Fill,
+  node: SceneNode,
+  ctx: SVGExportContext
+): string | null {
+  if (!fill.visible) return null
+
+  if (fill.type === 'SOLID') {
+    return formatColor(fill.color, fill.opacity)
+  }
+
+  if (fill.type.startsWith('GRADIENT')) {
+    const grad = createGradientDef(fill, node, ctx)
+    if (grad) {
+      ctx.defs.push(grad.node)
+      return `url(#${grad.id})`
+    }
+  }
+
+  if (fill.type === 'IMAGE') {
+    const pattern = createImagePattern(fill, node, ctx)
+    if (pattern) {
+      ctx.defs.push(pattern.node)
+      return `url(#${pattern.id})`
+    }
+  }
+
+  return null
+}
+
+export const SVG_STROKE_CAP: Record<string, string> = {
+  NONE: 'butt',
+  ROUND: 'round',
+  SQUARE: 'square'
+}
+
+export const SVG_STROKE_JOIN: Record<string, string> = {
+  MITER: 'miter',
+  ROUND: 'round',
+  BEVEL: 'bevel'
+}
+
+export const SVG_BLEND_MODE: Record<string, string> = {
+  NORMAL: 'normal',
+  DARKEN: 'darken',
+  MULTIPLY: 'multiply',
+  COLOR_BURN: 'color-burn',
+  LIGHTEN: 'lighten',
+  SCREEN: 'screen',
+  COLOR_DODGE: 'color-dodge',
+  OVERLAY: 'overlay',
+  SOFT_LIGHT: 'soft-light',
+  HARD_LIGHT: 'hard-light',
+  DIFFERENCE: 'difference',
+  EXCLUSION: 'exclusion',
+  HUE: 'hue',
+  SATURATION: 'saturation',
+  COLOR: 'color',
+  LUMINOSITY: 'luminosity'
+}