Arrow System

2 min read

PinePaper’s Arrow System creates configurable arrows with animated effects.

Creating Arrows

const arrow = app.arrowSystem.createArrow(
  [
    new paper.Point(100, 100),
    new paper.Point(200, 150),
    new paper.Point(300, 100)
  ],
  {
    lineColor: '#60a5fa',
    lineWidth: 3,
    style: 'smooth',
    headStyle: 'classic'
  }
);

Configuration Options

Option	Type	Default	Description
`lineColor`	string	`'#60a5fa'`	Path stroke color
`lineWidth`	number	3	Path stroke width
`style`	string	`'straight'`	Path style
`smoothness`	number	60	Smoothness for ‘smooth’ style
`headStyle`	string	`'classic'`	Arrowhead style
`headSize`	number	1.0	Head size multiplier
`boltEnabled`	boolean	true	Enable animated bolt
`boltColor`	string	`'#fbbf24'`	Bolt/sparkle color
`boltSpeed`	number	1.0	Bolt animation speed
`boltSize`	number	2	Bolt size

Path Styles

Style	Description
`'straight'`	Direct line between points
`'orthogonal'`	Right-angle segments
`'smooth'`	Bezier curve through points

Arrowhead Styles

Style	Description
`'classic'`	Filled triangle (default)
`'stealth'`	Diamond shape with notch
`'open'`	V-shape stroke only
`'none'`	No arrowhead

Updating Arrows

// Update global settings
app.arrowSystem.updateArrowSettings({
  headStyle: 'stealth',
  lineWidth: 5
});

Examples

Simple Arrow

app.arrowSystem.createArrow(
  [new paper.Point(100, 200), new paper.Point(400, 200)],
  { headStyle: 'classic' }
);

Curved Arrow with Bolt

app.arrowSystem.createArrow(
  [
    new paper.Point(100, 300),
    new paper.Point(250, 200),
    new paper.Point(400, 300)
  ],
  {
    style: 'smooth',
    smoothness: 80,
    boltEnabled: true,
    boltColor: '#22c55e',
    boltSpeed: 1.5
  }
);

Technical Diagram Arrow

app.arrowSystem.createArrow(
  [
    new paper.Point(100, 100),
    new paper.Point(100, 200),
    new paper.Point(300, 200)
  ],
  {
    style: 'orthogonal',
    headStyle: 'stealth',
    lineColor: '#374151'
  }
);