@rafaelaugusto/jolt 0.1.0-beta.9 → 0.1.0-rc.2

package/src/shapes/android.ts

@@ -0,0 +1,63 @@
+import type { ShapeFactory } from './native.js'
+const floats = (values: readonly number[]) => {
+  const a = Array.create('float', values.length)
+  values.forEach((v, i) => (a[i] = v))
+  return a
+}
+export const androidShape: ShapeFactory = (view, style, initial) => {
+  if (
+    typeof org === 'undefined' ||
+    typeof org.rafaelaugusto.jolt.ShapeLayer !== 'function'
+  )
+    throw new Error('Rebuild the Android app to install native shapes.')
+  const native = view.nativeViewProtected as android.view.View
+  const layer = new org.rafaelaugusto.jolt.ShapeLayer(JSON.stringify(style))
+  native.getOverlay().add(layer)
+  let path = initial.path
+  const paint = (frame: typeof initial) => {
+    path = frame.path
+    layer.paint(path.commands, floats(path.points), frame.start, frame.end)
+  }
+  const resize = () => layer.setBounds(0, 0, native.getWidth(), native.getHeight())
+  resize()
+  paint(initial)
+  return {
+    paint,
+    resize,
+    read() {
+      const v = layer.values()
+      return {
+        path: {
+          ...path,
+          points: Array.from({ length: v.length - 2 }, (_, i) => v[i + 2]!),
+        },
+        start: v[0]!,
+        end: v[1]!,
+      }
+    },
+    play(from, to, track) {
+      path = from.path
+      layer.play(
+        path.commands,
+        floats([from.start, from.end, ...from.path.points]),
+        floats([to.start, to.end, ...to.path.points]),
+        floats(track.times),
+        floats(track.values),
+        track.duration,
+        track.delay,
+        track.repeat === Infinity ? -1 : track.repeat,
+        track.reverse,
+      )
+    },
+    control: (time, paused) => layer.control(time, paused),
+    animations: () => (layer.isPlaying() ? 1 : 0),
+    bounds() {
+      const b = layer.geometryBounds()
+      return Array.from({ length: b.length }, (_, i) => b[i]!)
+    },
+    dispose() {
+      layer.dispose()
+      native.getOverlay().remove(layer)
+    },
+  }
+}

package/src/shapes/index.ts

@@ -0,0 +1,267 @@
+import { Application, type View } from '@nativescript/core'
+import { toView } from '../animate.js'
+import { parseColor } from '../color.js'
+import { onReducedMotion, reducedMotion } from '../config.js'
+import { TimedAnimation } from '../timed-animation.js'
+import { createTrack, instantTrack, type Track } from '../track.js'
+import {
+  resolveTransition,
+  springs,
+  type Transition,
+  type SpringName,
+} from '../transition.js'
+import type { Target } from '../types.js'
+import { compatible, pathString, shapePath } from './path.js'
+import { createShape, type ShapePainter } from './native.js'
+import {
+  mixFrame,
+  type Shape,
+  type ShapeValues,
+  type ShapeOptions,
+  type ShapeFrame,
+  type ShapeStyle,
+} from './types.js'
+export type { Shape, ShapeValues, ShapeOptions } from './types.js'
+const owners = new WeakMap<View, ShapeOwner>()
+function number(n: number, name: string, min: number, max: number) {
+  if (!Number.isFinite(n) || n < min || n > max)
+    throw new RangeError(`${name} must be within ${min}..${max}.`)
+  return n
+}
+function resolve(base: ShapeFrame, values: ShapeValues): ShapeFrame {
+  if (
+    !values ||
+    typeof values !== 'object' ||
+    Object.keys(values).some((k) => !['d', 'strokeStart', 'strokeEnd'].includes(k))
+  )
+    throw new TypeError('Shape values accept d, strokeStart and strokeEnd.')
+  const path = values.d === undefined ? base.path : shapePath(values.d)
+  const start = number(values.strokeStart ?? base.start, 'strokeStart', 0, 1),
+    end = number(values.strokeEnd ?? base.end, 'strokeEnd', 0, 1)
+  if (path.contours > 1 && (start !== 0 || end !== 1))
+    throw new RangeError(
+      'Partial stroke drawing requires one continuous subpath. Compound paths can morph or draw their complete stroke.',
+    )
+  return { path, start, end }
+}
+/** Draw an owned native vector surface over a view. Create after native layout. */
+export function shape(target: Target, options: ShapeOptions): Shape {
+  if (!options || typeof options !== 'object')
+    throw new TypeError('Shape options are required.')
+  const frame = resolve(
+    { path: shapePath(options.d), start: 0, end: 1 },
+    { strokeStart: options.strokeStart, strokeEnd: options.strokeEnd },
+  )
+  const box = options.viewBox
+  if (!Array.isArray(box) || box.length !== 4)
+    throw new TypeError('viewBox needs [minX, minY, width, height].')
+  const viewBox: [number, number, number, number] = [
+    number(box[0]!, 'viewBox x', -1000000, 1000000),
+    number(box[1]!, 'viewBox y', -1000000, 1000000),
+    number(box[2]!, 'viewBox width', 0.001, 1000000),
+    number(box[3]!, 'viewBox height', 0.001, 1000000),
+  ]
+  const style: ShapeStyle = {
+    viewBox,
+    stroke: parseColor(options.stroke ?? '#202630'),
+    fill: parseColor(options.fill ?? '#00000000'),
+    width: number(options.strokeWidth ?? 2, 'strokeWidth', 0, 1000),
+    cap: options.lineCap ?? 'round',
+    join: options.lineJoin ?? 'round',
+    rule: options.fillRule ?? 'nonzero',
+  }
+  if (
+    !['butt', 'round', 'square'].includes(style.cap) ||
+    !['miter', 'round', 'bevel'].includes(style.join) ||
+    !['nonzero', 'evenodd'].includes(style.rule)
+  )
+    throw new TypeError('Invalid shape cap, join or fill rule.')
+  const view = toView(target)
+  if (!view.isLoaded || !view.nativeViewProtected)
+    throw new Error('Create shapes after native layout.')
+  if (owners.has(view))
+    throw new Error('This view already owns a shape. Dispose it first.')
+  return new ShapeOwner(view, style, frame)
+}
+class ShapeOwner implements Shape {
+  disposed = false
+  private painter?: ShapePainter
+  private native?: object
+  private active?: {
+    animation: TimedAnimation
+    track: Track
+    from: ShapeFrame
+    to: ShapeFrame
+  }
+  private suspended = false
+  private backgrounded = false
+  private offReduced: () => void
+  constructor(
+    private readonly view: View,
+    private readonly style: ShapeStyle,
+    private frame: ShapeFrame,
+  ) {
+    this.attach()
+    owners.set(view, this)
+    view.on('loaded', this.layout)
+    view.on('layoutChanged', this.layout)
+    view.on('unloaded', this.unload)
+    Application.on(Application.suspendEvent, this.background)
+    Application.on(Application.resumeEvent, this.foreground)
+    this.offReduced = onReducedMotion((value) => {
+      if (!value || !this.active) return
+      const destination = this.active.to
+      this.stop()
+      this.frame = destination
+      this.painter?.paint(destination)
+    })
+  }
+  private alive() {
+    if (this.disposed) throw new Error('Shape has been disposed.')
+  }
+  private attach() {
+    this.native = this.view.nativeViewProtected
+    this.painter = createShape(this.view, this.style, this.frame)
+  }
+  private layout = () => {
+    if (this.disposed || !this.view.isLoaded || !this.view.nativeViewProtected) return
+    if (this.native && this.native !== this.view.nativeViewProtected) this.unload()
+    if (!this.painter) {
+      this.attach()
+      if (this.active) {
+        const { from, to, track, animation } = this.active
+        this.painter!.play(from, to, track)
+        this.painter!.control(animation.time, true)
+      }
+    }
+    this.painter!.resize()
+    if (!this.backgrounded && this.suspended) {
+      this.active?.animation.play()
+      this.suspended = false
+    }
+  }
+  private unload = () => {
+    if (this.backgrounded && this.active) this.frame = this.painter?.read() ?? this.frame
+    else this.stop()
+    this.painter?.dispose()
+    this.painter = undefined
+    this.native = undefined
+  }
+  private background = () => {
+    if (this.backgrounded) return
+    this.backgrounded = true
+    this.suspended = !!this.active && !this.active.animation.paused
+    if (this.suspended) this.active!.animation.pause()
+  }
+  private foreground = () => {
+    this.backgrounded = false
+    if (this.painter) {
+      if (this.suspended) this.active?.animation.play()
+      this.suspended = false
+    }
+  }
+  snapshot() {
+    this.frame = this.painter?.read() ?? this.frame
+    return {
+      d: pathString(this.frame.path),
+      strokeStart: this.frame.start,
+      strokeEnd: this.frame.end,
+      attached: !!this.painter,
+      nativeAnimations: this.painter?.animations() ?? 0,
+      bounds: this.painter?.bounds() ?? null,
+    }
+  }
+  set(values: ShapeValues) {
+    this.alive()
+    const frame = resolve(this.painter?.read() ?? this.frame, values)
+    this.stop()
+    this.frame = frame
+    this.painter?.paint(frame)
+  }
+  animate(values: ShapeValues, options: Transition | SpringName = {}) {
+    this.alive()
+    if (!this.painter || !this.view.isLoaded)
+      throw new Error('Load the shape before animating.')
+    const from = this.painter.read(),
+      to = resolve(from, values)
+    compatible(from.path, to.path)
+    if (typeof options === 'string' && !Object.hasOwn(springs, options))
+      throw new TypeError('Unknown shape spring.')
+    const settings = typeof options === 'string' ? springs[options] : options
+    if ('layer' in settings)
+      throw new TypeError(
+        'Shapes own one geometry/trim animation; named layers are not supported.',
+      )
+    const transition = resolveTransition(settings, 'opacity', 2)
+    const vector = (f: ShapeFrame) => [f.start, f.end, ...f.path.points]
+    const a = vector(from),
+      b = vector(to),
+      delta = b.map((p, i) => p - a[i]!),
+      squared = delta.reduce((s, v) => s + v * v, 0)
+    let velocity = 0
+    if (this.active && !this.active.animation.paused && squared) {
+      const old = this.active,
+        speed = old.track.velocityAt(old.animation.time),
+        x = vector(old.from),
+        y = vector(old.to)
+      velocity =
+        delta.reduce((s, v, i) => s + v * ((y[i] ?? 0) - (x[i] ?? 0)) * speed, 0) /
+        squared
+    }
+    const track = reducedMotion()
+      ? instantTrack('opacity', 1)
+      : createTrack('opacity', [0, 1], transition, velocity)
+    if (track.times.length * (a.length + 1) > 262144)
+      throw new RangeError(
+        'Shape animation exceeds the sampled geometry budget. Simplify the path or curve.',
+      )
+    this.stop()
+    let animation: TimedAnimation
+    animation = new TimedAnimation(
+      track.end,
+      track.arrival,
+      (time, paused) => this.painter?.control(time, paused),
+      (completed) => {
+        this.frame = completed
+          ? mixFrame(from, to, track.to)
+          : (this.painter?.read() ?? this.frame)
+        this.painter?.paint(this.frame)
+        if (this.active?.animation === animation) this.active = undefined
+      },
+    )
+    this.active = { animation, track, from, to }
+    try {
+      if (track.end > 0) this.painter.play(from, to, track)
+      else {
+        this.frame = to
+        this.painter.paint(to)
+      }
+      animation.start()
+      if (this.backgrounded && this.active) {
+        this.suspended = true
+        animation.pause()
+      }
+    } catch (e) {
+      animation.stop()
+      throw e
+    }
+    return animation
+  }
+  stop() {
+    this.active?.animation.stop()
+    this.suspended = false
+  }
+  dispose() {
+    if (this.disposed) return
+    this.stop()
+    this.unload()
+    this.disposed = true
+    this.offReduced()
+    this.view.off('loaded', this.layout)
+    this.view.off('layoutChanged', this.layout)
+    this.view.off('unloaded', this.unload)
+    Application.off(Application.suspendEvent, this.background)
+    Application.off(Application.resumeEvent, this.foreground)
+    owners.delete(this.view)
+  }
+}

package/src/shapes/ios.ts

@@ -0,0 +1,194 @@
+import { Color, type View } from '@nativescript/core'
+import { getDriver } from '../driver/index.js'
+import type { Track } from '../track.js'
+import type { ShapeFactory } from './native.js'
+import { mixFrame, type ShapeFrame } from './types.js'
+
+export const iosShape: ShapeFactory = (view: View, style, initial) => {
+  const native = view.nativeViewProtected as UIView
+  const root = CALayer.new(),
+    layer = CAShapeLayer.new()
+  let marker = CALayer.new()
+  root.name = 'jolt:shape'
+  root.masksToBounds = true
+  layer.name = 'jolt:shape:path'
+  marker.name = 'jolt:shape:progress'
+  layer.fillColor = new Color(style.fill).ios.CGColor
+  layer.strokeColor = new Color(style.stroke).ios.CGColor
+  layer.lineWidth = style.width
+  layer.lineCap = style.cap
+  layer.lineJoin = style.join
+  layer.fillRule = style.rule === 'evenodd' ? kCAFillRuleEvenOdd : kCAFillRuleNonZero
+  layer.contentsScale = UIScreen.mainScreen.scale
+  root.addSublayer(layer)
+  root.addSublayer(marker)
+  native.layer.addSublayer(root)
+  let current = initial,
+    program:
+      | {
+          from: ShapeFrame
+          to: ShapeFrame
+          track: Track
+          start: number
+          offset: number
+          paused: boolean
+        }
+      | undefined
+  const transaction = (fn: () => void) => {
+    CATransaction.begin()
+    CATransaction.setDisableActions(true)
+    try {
+      fn()
+    } finally {
+      CATransaction.commit()
+    }
+  }
+  const path = (frame: ShapeFrame) => {
+    const p = UIBezierPath.bezierPath(),
+      v = frame.path.points
+    let i = 0
+    for (const op of frame.path.commands) {
+      if (op === 'M') {
+        p.moveToPoint(CGPointMake(v[i]!, v[i + 1]!))
+        i += 2
+      }
+      if (op === 'L') {
+        p.addLineToPoint(CGPointMake(v[i]!, v[i + 1]!))
+        i += 2
+      }
+      if (op === 'C') {
+        p.addCurveToPointControlPoint1ControlPoint2(
+          CGPointMake(v[i + 4]!, v[i + 5]!),
+          CGPointMake(v[i]!, v[i + 1]!),
+          CGPointMake(v[i + 2]!, v[i + 3]!),
+        )
+        i += 6
+      }
+      if (op === 'Q') {
+        p.addQuadCurveToPointControlPoint(
+          CGPointMake(v[i + 2]!, v[i + 3]!),
+          CGPointMake(v[i]!, v[i + 1]!),
+        )
+        i += 4
+      }
+      if (op === 'Z') p.closePath()
+    }
+    return p.CGPath
+  }
+  const resize = () =>
+    transaction(() => {
+      const { width, height } = view.getActualSize(),
+        [x, y, w, h] = style.viewBox
+      root.frame = CGRectMake(0, 0, Math.max(0, width), Math.max(0, height))
+      layer.bounds = CGRectMake(x, y, w, h)
+      layer.position = CGPointMake(width / 2, height / 2)
+      const scale = Math.max(0, Math.min(width / w, height / h))
+      layer.transform = CATransform3DMakeScale(scale, scale, 1)
+    })
+  const paint = (frame: ShapeFrame) =>
+    transaction(() => {
+      program = undefined
+      current = frame
+      root.speed = 1
+      root.beginTime = 0
+      root.timeOffset = 0
+      layer.removeAllAnimations()
+      marker.removeAllAnimations()
+      layer.path = path(frame)
+      layer.strokeStart = frame.start
+      layer.strokeEnd = frame.end
+    })
+  resize()
+  paint(initial)
+  return {
+    paint,
+    resize,
+    read() {
+      if (!program) return current
+      const { from, to, track, paused, offset, start } = program
+      const presented = marker.presentationLayer()
+      const progress =
+        !paused && presented
+          ? Number(presented.valueForKeyPath('transform.translation.x'))
+          : track.valueAt(offset + (paused ? 0 : getDriver().now() - start))
+      const frame = mixFrame(from, to, progress)
+      // Trim diagnostics read the actual shape layer, except before a pending pause transaction is drawn.
+      const shown = layer.presentationLayer() as CAShapeLayer | null
+      if (shown && !paused) {
+        frame.start = shown.strokeStart
+        frame.end = shown.strokeEnd
+      }
+      return frame
+    },
+    play(from, to, track) {
+      paint(mixFrame(from, to, track.to))
+      // A new marker cannot expose the previous program's cached presentation
+      // when several retargets happen before the next render transaction.
+      marker.removeFromSuperlayer()
+      marker = CALayer.new()
+      marker.name = 'jolt:shape:progress'
+      root.addSublayer(marker)
+      program = { from, to, track, paused: false, offset: 0, start: getDriver().now() }
+      transaction(() => {
+        root.beginTime = native.layer.convertTimeFromLayer(CACurrentMediaTime(), null)
+        const frames = track.values.map((t) => mixFrame(from, to, t))
+        const add = (target: CALayer, key: string, values: unknown[]) => {
+          const a = CAKeyframeAnimation.animationWithKeyPath(key)
+          a.values = NSArray.arrayWithArray(values)
+          a.keyTimes = NSArray.arrayWithArray([...track.times])
+          a.duration = track.duration / 1000
+          a.beginTime = Math.max(0.000001, track.delay / 1000)
+          a.fillMode = kCAFillModeBoth
+          a.removedOnCompletion = false
+          a.autoreverses = track.reverse
+          a.repeatCount =
+            track.repeat === Infinity
+              ? Infinity
+              : track.reverse
+                ? (track.repeat + 1) / 2
+                : track.repeat + 1
+          target.addAnimationForKey(a, 'jolt:shape:' + key)
+        }
+        marker.setValueForKeyPath(track.to, 'transform.translation.x')
+        add(layer, 'path', frames.map(path))
+        add(
+          layer,
+          'strokeStart',
+          frames.map((f) => f.start),
+        )
+        add(
+          layer,
+          'strokeEnd',
+          frames.map((f) => f.end),
+        )
+        add(marker, 'transform.translation.x', [...track.values])
+      })
+    },
+    control(time, paused) {
+      if (!program) return
+      program.offset = time
+      program.start = getDriver().now()
+      program.paused = paused
+      transaction(() => {
+        root.speed = paused ? 0 : 1
+        root.timeOffset = paused ? time / 1000 : 0
+        root.beginTime = paused
+          ? 0
+          : native.layer.convertTimeFromLayer(CACurrentMediaTime(), null) - time / 1000
+      })
+    },
+    animations: () =>
+      (layer.animationKeys()?.count ?? 0) + (marker.animationKeys()?.count ?? 0),
+    bounds() {
+      const shown = (layer.presentationLayer() as CAShapeLayer | null) ?? layer
+      const b = CGPathGetBoundingBox(shown.path)
+      return [b.origin.x, b.origin.y, b.size.width, b.size.height]
+    },
+    dispose() {
+      program = undefined
+      layer.removeAllAnimations()
+      marker.removeAllAnimations()
+      root.removeFromSuperlayer()
+    },
+  }
+}

package/src/shapes/native.ts

@@ -0,0 +1,27 @@
+import { isAndroid, type View } from '@nativescript/core'
+import type { Track } from '../track.js'
+import type { ShapeFrame, ShapeStyle } from './types.js'
+import { iosShape } from './ios.js'
+import { androidShape } from './android.js'
+export interface ShapePainter {
+  paint(frame: ShapeFrame): void
+  read(): ShapeFrame
+  play(from: ShapeFrame, to: ShapeFrame, track: Track): void
+  control(time: number, paused: boolean): void
+  resize(): void
+  animations(): number
+  bounds(): number[]
+  dispose(): void
+}
+export type ShapeFactory = (
+  view: View,
+  style: ShapeStyle,
+  frame: ShapeFrame,
+) => ShapePainter
+let override: ShapeFactory | undefined
+/** Internal injection for lifecycle tests. */
+export function setShapeFactory(value: ShapeFactory | undefined) {
+  override = value
+}
+export const createShape: ShapeFactory = (view, style, frame) =>
+  (override ?? (isAndroid ? androidShape : iosShape))(view, style, frame)

package/src/shapes/path.ts

@@ -0,0 +1,127 @@
+import { Scanner, arc, type PathPoint } from '../svg-path.js'
+
+/** Absolute M/L/C/Q/Z commands, shared by both native renderers. */
+export interface ShapePath {
+  commands: string
+  points: number[]
+  contours: number
+}
+export function shapePath(d: string): ShapePath {
+  if (typeof d !== 'string' || !d.trim())
+    throw new TypeError('Shape d must be a nonempty SVG path.')
+  if (d.length > 20000) throw new RangeError('Shape path exceeds 20000 characters.')
+  const scanner = new Scanner(d),
+    result: ShapePath = { commands: '', points: [], contours: 0 }
+  let current = { x: 0, y: 0 },
+    first: PathPoint | undefined,
+    control = current
+  let command = '',
+    previous = ''
+  const add = (op: string, ...points: PathPoint[]) => {
+    if (result.commands.length >= 256)
+      throw new RangeError('Shapes support at most 256 normalized commands.')
+    result.commands += op
+    for (const p of points) {
+      if (![p.x, p.y].every((n) => Number.isFinite(n) && Math.abs(n) <= 1000000))
+        throw new RangeError('Shape coordinates must stay within ±1000000.')
+      result.points.push(p.x, p.y)
+    }
+    if (points.length) current = points.at(-1)!
+  }
+  while (scanner.peek() !== undefined) {
+    if (/[a-z]/i.test(scanner.peek()!)) command = scanner.command()
+    else if (!command) scanner.error()
+    const upper = command.toUpperCase(),
+      relative = command !== upper,
+      origin = current
+    const point = () => ({
+      x: scanner.number() + (relative ? origin.x : 0),
+      y: scanner.number() + (relative ? origin.y : 0),
+    })
+    if (!first && upper !== 'M')
+      throw new SyntaxError('Shape path must start with M or m.')
+    if (upper === 'M') {
+      first = point()
+      add('M', first)
+      result.contours++
+      command = relative ? 'l' : 'L'
+    } else if (upper === 'L') add('L', point())
+    else if (upper === 'H' || upper === 'V') {
+      const n = scanner.number()
+      add(
+        'L',
+        upper === 'H'
+          ? { x: n + (relative ? origin.x : 0), y: current.y }
+          : { x: current.x, y: n + (relative ? origin.y : 0) },
+      )
+    } else if (upper === 'C' || upper === 'S') {
+      const c1 =
+        upper === 'C'
+          ? point()
+          : /[CS]/.test(previous)
+            ? { x: 2 * current.x - control.x, y: 2 * current.y - control.y }
+            : current
+      const c2 = point(),
+        end = point()
+      add('C', c1, c2, end)
+      control = c2
+    } else if (upper === 'Q' || upper === 'T') {
+      const c =
+        upper === 'Q'
+          ? point()
+          : /[QT]/.test(previous)
+            ? { x: 2 * current.x - control.x, y: 2 * current.y - control.y }
+            : current
+      add('Q', c, point())
+      control = c
+    } else if (upper === 'A') {
+      const rx = scanner.number(),
+        ry = scanner.number(),
+        rotation = scanner.number(),
+        large = scanner.number(true),
+        sweep = scanner.number(true),
+        end = point()
+      const segment = arc(current, end, rx, ry, rotation, !!large, !!sweep)
+      if (!segment.angle) add('L', end)
+      else {
+        const count = Math.ceil(Math.abs(segment.angle) / (Math.PI / 2)),
+          factor = ((4 / 3) * Math.tan(segment.angle / count / 4)) / segment.angle
+        for (let i = 0; i < count; i++) {
+          const a = segment.point(i / count),
+            b = segment.point((i + 1) / count),
+            da = segment.tangent(i / count),
+            db = segment.tangent((i + 1) / count)
+          add(
+            'C',
+            { x: a.x + da.x * factor, y: a.y + da.y * factor },
+            { x: b.x - db.x * factor, y: b.y - db.y * factor },
+            b,
+          )
+        }
+      }
+    } else if (upper === 'Z') {
+      add('Z')
+      current = first!
+      command = ''
+    } else scanner.error()
+    previous = upper
+  }
+  if (!/[LCQ]/.test(result.commands))
+    throw new SyntaxError('Shape needs at least one drawing segment.')
+  return result
+}
+export function compatible(a: ShapePath, b: ShapePath) {
+  if (a.commands !== b.commands)
+    throw new TypeError(
+      'Morph paths need matching normalized commands and subpaths. Use set() for a topology change.',
+    )
+}
+export function pathString(path: ShapePath) {
+  let i = 0
+  return [...path.commands]
+    .map((op) => {
+      const count = op === 'C' ? 6 : op === 'Q' ? 4 : op === 'Z' ? 0 : 2
+      return op + path.points.slice(i, (i += count)).join(' ')
+    })
+    .join(' ')
+}