mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-28 20:56:48 +02:00
chore: Organize shape handling
This commit is contained in:
Sidharth Vinod
@@ -1,305 +1,5 @@
|
|||||||
import { log } from '../../logger.js';
|
import { log } from '../../logger.js';
|
||||||
import { state } from './shapes/state.ts';
|
import { shapes } from './shapes.js';
|
||||||
import { roundedRect } from './shapes/roundedRect.ts';
|
|
||||||
import { squareRect } from './shapes/squareRect.ts';
|
|
||||||
import { stateStart } from './shapes/stateStart.ts';
|
|
||||||
import { stateEnd } from './shapes/stateEnd.ts';
|
|
||||||
import { forkJoin } from './shapes/forkJoin.ts';
|
|
||||||
import { choice } from './shapes/choice.ts';
|
|
||||||
import { note } from './shapes/note.ts';
|
|
||||||
import { stadium } from './shapes/stadium.js';
|
|
||||||
import { rectWithTitle } from './shapes/rectWithTitle.js';
|
|
||||||
import { subroutine } from './shapes/subroutine.js';
|
|
||||||
import { cylinder } from './shapes/cylinder.js';
|
|
||||||
import { circle } from './shapes/circle.js';
|
|
||||||
import { doublecircle } from './shapes/doubleCircle.js';
|
|
||||||
import { rect_left_inv_arrow } from './shapes/rectLeftInvArrow.js';
|
|
||||||
import { question } from './shapes/question.js';
|
|
||||||
import { hexagon } from './shapes/hexagon.js';
|
|
||||||
import { text } from './shapes/text.js';
|
|
||||||
import { card } from './shapes/card.js';
|
|
||||||
import { shadedProcess } from './shapes/shadedProcess.js';
|
|
||||||
import { anchor } from './shapes/anchor.js';
|
|
||||||
import { lean_right } from './shapes/leanRight.js';
|
|
||||||
import { lean_left } from './shapes/leanLeft.js';
|
|
||||||
import { trapezoid } from './shapes/trapezoid.js';
|
|
||||||
import { inv_trapezoid } from './shapes/invertedTrapezoid.js';
|
|
||||||
import { labelRect } from './shapes/labelRect.js';
|
|
||||||
import { triangle } from './shapes/triangle.js';
|
|
||||||
import { halfRoundedRectangle } from './shapes/halfRoundedRectangle.js';
|
|
||||||
import { curvedTrapezoid } from './shapes/curvedTrapezoid.js';
|
|
||||||
import { slopedRect } from './shapes/slopedRect.js';
|
|
||||||
import { bowTieRect } from './shapes/bowTieRect.js';
|
|
||||||
import { dividedRectangle } from './shapes/dividedRect.js';
|
|
||||||
import { crossedCircle } from './shapes/crossedCircle.js';
|
|
||||||
import { waveRectangle } from './shapes/waveRectangle.js';
|
|
||||||
import { tiltedCylinder } from './shapes/tiltedCylinder.js';
|
|
||||||
import { trapezoidalPentagon } from './shapes/trapezoidalPentagon.js';
|
|
||||||
import { flippedTriangle } from './shapes/flippedTriangle.js';
|
|
||||||
import { hourglass } from './shapes/hourglass.js';
|
|
||||||
import { taggedRect } from './shapes/taggedRect.js';
|
|
||||||
import { multiRect } from './shapes/multiRect.js';
|
|
||||||
import { linedCylinder } from './shapes/linedCylinder.js';
|
|
||||||
import { waveEdgedRectangle } from './shapes/waveEdgedRectangle.js';
|
|
||||||
import { lightningBolt } from './shapes/lightningBolt.js';
|
|
||||||
import { filledCircle } from './shapes/filledCircle.js';
|
|
||||||
import { multiWaveEdgedRectangle } from './shapes/multiWaveEdgedRectangle.js';
|
|
||||||
import { windowPane } from './shapes/windowPane.js';
|
|
||||||
import { linedWaveEdgedRect } from './shapes/linedWaveEdgedRect.js';
|
|
||||||
import { taggedWaveEdgedRectangle } from './shapes/taggedWaveEdgedRectangle.js';
|
|
||||||
import { curlyBraceLeft } from './shapes/curlyBraceLeft.js';
|
|
||||||
import { curlyBraceRight } from './shapes/curlyBraceRight.js';
|
|
||||||
import { curlyBraces } from './shapes/curlyBraces.js';
|
|
||||||
import { iconSquare } from './shapes/iconSquare.js';
|
|
||||||
import { iconCircle } from './shapes/iconCircle.js';
|
|
||||||
import { icon } from './shapes/icon.js';
|
|
||||||
import { imageSquare } from './shapes/imageSquare.js';
|
|
||||||
import { iconRounded } from './shapes/iconRounded.js';
|
|
||||||
|
|
||||||
//Use these names as the left side to render shapes.
|
|
||||||
export const shapes = {
|
|
||||||
// States
|
|
||||||
state,
|
|
||||||
stateStart,
|
|
||||||
stateEnd,
|
|
||||||
forkJoin,
|
|
||||||
choice,
|
|
||||||
note,
|
|
||||||
|
|
||||||
// Rectangles
|
|
||||||
rectWithTitle,
|
|
||||||
roundedRect,
|
|
||||||
squareRect,
|
|
||||||
|
|
||||||
// Rectangle with alias: 'process', 'rect', 'proc', 'rectangle'
|
|
||||||
rectangle: squareRect,
|
|
||||||
rect: squareRect,
|
|
||||||
process: squareRect,
|
|
||||||
proc: squareRect,
|
|
||||||
|
|
||||||
// Rounded Rectangle with alias: 'event', 'rounded'
|
|
||||||
rounded: roundedRect,
|
|
||||||
event: roundedRect,
|
|
||||||
|
|
||||||
// Stadium with alias: 'terminal','pill', 'stadium'
|
|
||||||
stadium,
|
|
||||||
pill: stadium,
|
|
||||||
terminal: stadium,
|
|
||||||
|
|
||||||
// Subprocess with alias: 'fr-rect', 'subproc', 'subprocess', 'framed-rectangle', 'subroutine'
|
|
||||||
subroutine,
|
|
||||||
'framed-rectangle': subroutine,
|
|
||||||
'fr-rect': subroutine,
|
|
||||||
subprocess: subroutine,
|
|
||||||
subproc: subroutine,
|
|
||||||
|
|
||||||
// Cylinder with alias: 'db', 'database', 'cylinder', 'cyl'
|
|
||||||
cylinder,
|
|
||||||
db: cylinder,
|
|
||||||
cyl: cylinder,
|
|
||||||
database: cylinder,
|
|
||||||
|
|
||||||
// Diamond with alias: 'diam', 'decision', 'diamond'
|
|
||||||
question,
|
|
||||||
diam: question,
|
|
||||||
diamond: question,
|
|
||||||
decision: question,
|
|
||||||
|
|
||||||
// Hexagon with alias: 'hex', 'hexagon', 'prepare'
|
|
||||||
hexagon,
|
|
||||||
hex: hexagon,
|
|
||||||
prepare: hexagon,
|
|
||||||
|
|
||||||
// Lean Right with alias: 'lean-r', 'lean-right', 'in-out'
|
|
||||||
lean_right, // used in old syntax for flowchart
|
|
||||||
'lean-r': lean_right,
|
|
||||||
'lean-right': lean_right,
|
|
||||||
'in-out': lean_right,
|
|
||||||
|
|
||||||
// Lean Left with alias: 'lean-l', 'lean-left', 'out-in'
|
|
||||||
lean_left, // used in old syntax for flowchart
|
|
||||||
'lean-l': lean_left,
|
|
||||||
'lean-left': lean_left,
|
|
||||||
'out-in': lean_left,
|
|
||||||
|
|
||||||
// Trapezoid with alias: 'trap-b', 'trapezoid-bottom', 'priority'
|
|
||||||
trapezoid, // used in old syntax for flowchart
|
|
||||||
'trap-b': trapezoid,
|
|
||||||
'trapezoid-bottom': trapezoid,
|
|
||||||
priority: trapezoid,
|
|
||||||
|
|
||||||
// Inverted Trapezoid with alias: 'inv-trapezoid', 'trapezoid-top', 'trap-t', 'manual'
|
|
||||||
inv_trapezoid, // used in old syntax for flowchart
|
|
||||||
'inv-trapezoid': inv_trapezoid,
|
|
||||||
'trapezoid-top': inv_trapezoid,
|
|
||||||
'trap-t': inv_trapezoid,
|
|
||||||
manual: inv_trapezoid,
|
|
||||||
|
|
||||||
// Double Circle with alias: 'dbl-circ', 'double-circle'
|
|
||||||
doublecircle, // used in old syntax for flowchart
|
|
||||||
'dbl-circ': doublecircle,
|
|
||||||
'double-circle': doublecircle,
|
|
||||||
|
|
||||||
// circle with alias: 'circ', 'circle'
|
|
||||||
circle,
|
|
||||||
circ: circle,
|
|
||||||
|
|
||||||
// Rect Left Inv Arrow with alias: 'odd', 'rect-left-inv-arrow'
|
|
||||||
rect_left_inv_arrow,
|
|
||||||
odd: rect_left_inv_arrow,
|
|
||||||
|
|
||||||
// Notched Rectangle with alias: 'notched-rectangle', 'notch-rect', 'card'
|
|
||||||
card,
|
|
||||||
'notched-rectangle': card,
|
|
||||||
'notch-rect': card,
|
|
||||||
|
|
||||||
// Lined rectangle with alias: 'lin-rect', 'lined-rectangle', 'lin-proc', lined-process', 'shaded-process'
|
|
||||||
'lined-rectangle': shadedProcess,
|
|
||||||
'lin-rect': shadedProcess,
|
|
||||||
'lin-proc': shadedProcess,
|
|
||||||
'lined-process': shadedProcess,
|
|
||||||
'shaded-process': shadedProcess,
|
|
||||||
|
|
||||||
// Small circle with alias: 'sm-circ', 'small-circle', 'start'
|
|
||||||
'small-circle': stateStart,
|
|
||||||
'sm-circ': stateStart,
|
|
||||||
start: stateStart,
|
|
||||||
|
|
||||||
// framed circle with alias: 'stop', 'framed-circle', 'fr-circ'
|
|
||||||
stop: stateEnd,
|
|
||||||
'framed-circle': stateEnd,
|
|
||||||
'fr-circ': stateEnd,
|
|
||||||
|
|
||||||
// fork with alias: 'join', 'fork'
|
|
||||||
join: forkJoin,
|
|
||||||
fork: forkJoin,
|
|
||||||
|
|
||||||
// comment with alias: 'comment', 'brace-l'
|
|
||||||
comment: curlyBraceLeft,
|
|
||||||
'brace-l': curlyBraceLeft,
|
|
||||||
|
|
||||||
// lightening bolt with alias: 'bolt', 'com-link', 'lightning-bolt'
|
|
||||||
bolt: lightningBolt,
|
|
||||||
'com-link': lightningBolt,
|
|
||||||
'lightning-bolt': lightningBolt,
|
|
||||||
|
|
||||||
// document with alias: 'doc', 'document'
|
|
||||||
doc: waveEdgedRectangle,
|
|
||||||
document: waveEdgedRectangle,
|
|
||||||
|
|
||||||
// delay with alias: 'delay', 'half-rounded-rectangle'
|
|
||||||
delay: halfRoundedRectangle,
|
|
||||||
'half-rounded-rectangle': halfRoundedRectangle,
|
|
||||||
|
|
||||||
// horizontal cylinder with alias: 'h-cyl', 'das', 'horizontal-cylinder'
|
|
||||||
'horizontal-cylinder': tiltedCylinder,
|
|
||||||
'h-cyl': tiltedCylinder,
|
|
||||||
das: tiltedCylinder,
|
|
||||||
|
|
||||||
// lined cylinder with alias: 'lin-cyl', 'lined-cylinder', 'disk'
|
|
||||||
'lined-cylinder': linedCylinder,
|
|
||||||
'lin-cyl': linedCylinder,
|
|
||||||
disk: linedCylinder,
|
|
||||||
|
|
||||||
// curved trapezoid with alias: 'curv-trap', 'curved-trapezoid', 'display'
|
|
||||||
'curved-trapezoid': curvedTrapezoid,
|
|
||||||
'curv-trap': curvedTrapezoid,
|
|
||||||
display: curvedTrapezoid,
|
|
||||||
|
|
||||||
// divided rectangle with alias: 'div-rect', 'divided-rectangle', 'div-proc', 'divided-process'
|
|
||||||
'divided-rectangle': dividedRectangle,
|
|
||||||
'div-rect': dividedRectangle,
|
|
||||||
'div-proc': dividedRectangle,
|
|
||||||
'divided-process': dividedRectangle,
|
|
||||||
|
|
||||||
// triangle with alias: 'tri', 'triangle', 'extract'
|
|
||||||
triangle,
|
|
||||||
tri: triangle,
|
|
||||||
extract: triangle,
|
|
||||||
|
|
||||||
// window pane with alias: 'window-pane', 'win-pane', 'internal-storage'
|
|
||||||
'window-pane': windowPane,
|
|
||||||
'win-pane': windowPane,
|
|
||||||
'internal-storage': windowPane,
|
|
||||||
|
|
||||||
// filled circle with alias: 'f-circ', 'filled-circle', 'junction'
|
|
||||||
'f-circ': filledCircle,
|
|
||||||
junction: filledCircle,
|
|
||||||
'filled-circle': filledCircle,
|
|
||||||
|
|
||||||
// lined document with alias: 'lin-doc', 'lined-document'
|
|
||||||
'lin-doc': linedWaveEdgedRect,
|
|
||||||
'lined-document': linedWaveEdgedRect,
|
|
||||||
|
|
||||||
// notched pentagon with alias: 'notch-pent', 'notched-pentagon', 'loop-limit'
|
|
||||||
'notched-pentagon': trapezoidalPentagon,
|
|
||||||
'notch-pent': trapezoidalPentagon,
|
|
||||||
'loop-limit': trapezoidalPentagon,
|
|
||||||
|
|
||||||
// flipped triangle with alias: 'flip-tri', 'flipped-triangle', 'manual-file'
|
|
||||||
'flipped-triangle': flippedTriangle,
|
|
||||||
'flip-tri': flippedTriangle,
|
|
||||||
'manual-file': flippedTriangle,
|
|
||||||
|
|
||||||
// sloped rectangle with alias: 'sl-rect', 'sloped-rectangle', 'manual-input'
|
|
||||||
'sloped-rectangle': slopedRect,
|
|
||||||
'sl-rect': slopedRect,
|
|
||||||
'manual-input': slopedRect,
|
|
||||||
|
|
||||||
// documents with alias: 'docs', 'documents', 'st-doc', 'stacked-document'
|
|
||||||
docs: multiWaveEdgedRectangle,
|
|
||||||
documents: multiWaveEdgedRectangle,
|
|
||||||
'st-doc': multiWaveEdgedRectangle,
|
|
||||||
'stacked-document': multiWaveEdgedRectangle,
|
|
||||||
|
|
||||||
// 'processes' with alias: 'procs', 'processes', 'st-rect', 'stacked-rectangle'
|
|
||||||
processes: multiRect,
|
|
||||||
procs: multiRect,
|
|
||||||
'stacked-rectangle': multiRect,
|
|
||||||
'st-rect': multiRect,
|
|
||||||
|
|
||||||
// flag with alias: 'flag', 'paper-tape'
|
|
||||||
flag: waveRectangle,
|
|
||||||
'paper-tape': waveRectangle,
|
|
||||||
|
|
||||||
// bow tie rectangle with alias: 'bow-rect', 'bow-tie-rectangle', 'stored-data'
|
|
||||||
'bow-tie-rectangle': bowTieRect,
|
|
||||||
'bow-rect': bowTieRect,
|
|
||||||
'stored-data': bowTieRect,
|
|
||||||
|
|
||||||
// crossed circle with alias: 'cross-circ', 'crossed-circle', 'summary'
|
|
||||||
'crossed-circle': crossedCircle,
|
|
||||||
'cross-circ': crossedCircle,
|
|
||||||
summary: crossedCircle,
|
|
||||||
|
|
||||||
// tagged document with alias: 'tag-doc', 'tagged-document'
|
|
||||||
'tag-doc': taggedWaveEdgedRectangle,
|
|
||||||
'tagged-document': taggedWaveEdgedRectangle,
|
|
||||||
|
|
||||||
// tagged rectangle with alias: 'tag-rect', 'tagged-rectangle', 'tag-proc', 'tagged-process'
|
|
||||||
'tag-rect': taggedRect,
|
|
||||||
'tagged-rectangle': taggedRect,
|
|
||||||
'tag-proc': taggedRect,
|
|
||||||
'tagged-process': taggedRect,
|
|
||||||
|
|
||||||
// hourglass with alias: 'hourglass', 'collate'
|
|
||||||
hourglass,
|
|
||||||
collate: hourglass,
|
|
||||||
|
|
||||||
text,
|
|
||||||
anchor,
|
|
||||||
|
|
||||||
brace: curlyBraceLeft,
|
|
||||||
|
|
||||||
labelRect,
|
|
||||||
'brace-r': curlyBraceRight,
|
|
||||||
braces: curlyBraces,
|
|
||||||
iconSquare,
|
|
||||||
iconCircle,
|
|
||||||
icon,
|
|
||||||
iconRounded,
|
|
||||||
imageSquare,
|
|
||||||
};
|
|
||||||
|
|
||||||
const nodeElems = new Map();
|
const nodeElems = new Map();
|
||||||
|
|
||||||
@@ -307,8 +7,6 @@ export const insertNode = async (elem, node, renderOptions) => {
|
|||||||
let newEl;
|
let newEl;
|
||||||
let el;
|
let el;
|
||||||
|
|
||||||
// console.log("node is ", node.icon, node.shape)
|
|
||||||
|
|
||||||
//special check for rect shape (with or without rounded corners)
|
//special check for rect shape (with or without rounded corners)
|
||||||
if (node.shape === 'rect') {
|
if (node.shape === 'rect') {
|
||||||
if (node.rx && node.ry) {
|
if (node.rx && node.ry) {
|
||||||
@@ -318,7 +16,9 @@ export const insertNode = async (elem, node, renderOptions) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!shapes[node.shape]) {
|
const shapeHandler = shapes.get(node.shape);
|
||||||
|
|
||||||
|
if (!shapeHandler) {
|
||||||
throw new Error(`No such shape: ${node.shape}. Please check your syntax.`);
|
throw new Error(`No such shape: ${node.shape}. Please check your syntax.`);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -331,9 +31,9 @@ export const insertNode = async (elem, node, renderOptions) => {
|
|||||||
target = node.linkTarget || '_blank';
|
target = node.linkTarget || '_blank';
|
||||||
}
|
}
|
||||||
newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', target);
|
newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', target);
|
||||||
el = await shapes[node.shape](newEl, node, renderOptions);
|
el = await shapeHandler(newEl, node, renderOptions);
|
||||||
} else {
|
} else {
|
||||||
el = await shapes[node.shape](elem, node, renderOptions);
|
el = await shapeHandler(elem, node, renderOptions);
|
||||||
newEl = el;
|
newEl = el;
|
||||||
}
|
}
|
||||||
if (node.tooltip) {
|
if (node.tooltip) {
|
||||||
@@ -347,9 +47,11 @@ export const insertNode = async (elem, node, renderOptions) => {
|
|||||||
}
|
}
|
||||||
return newEl;
|
return newEl;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const setNodeElem = (elem, node) => {
|
export const setNodeElem = (elem, node) => {
|
||||||
nodeElems.set(node.id, elem);
|
nodeElems.set(node.id, elem);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const clear = () => {
|
export const clear = () => {
|
||||||
nodeElems.clear();
|
nodeElems.clear();
|
||||||
};
|
};
|
||||||
|
|||||||
477
packages/mermaid/src/rendering-util/rendering-elements/shapes.ts
Normal file
477
packages/mermaid/src/rendering-util/rendering-elements/shapes.ts
Normal file
@@ -0,0 +1,477 @@
|
|||||||
|
import type { Node, ShapeRenderOptions } from '../types.js';
|
||||||
|
import { anchor } from './shapes/anchor.js';
|
||||||
|
import { bowTieRect } from './shapes/bowTieRect.js';
|
||||||
|
import { card } from './shapes/card.js';
|
||||||
|
import { choice } from './shapes/choice.js';
|
||||||
|
import { circle } from './shapes/circle.js';
|
||||||
|
import { crossedCircle } from './shapes/crossedCircle.js';
|
||||||
|
import { curlyBraceLeft } from './shapes/curlyBraceLeft.js';
|
||||||
|
import { curlyBraceRight } from './shapes/curlyBraceRight.js';
|
||||||
|
import { curlyBraces } from './shapes/curlyBraces.js';
|
||||||
|
import { curvedTrapezoid } from './shapes/curvedTrapezoid.js';
|
||||||
|
import { cylinder } from './shapes/cylinder.js';
|
||||||
|
import { dividedRectangle } from './shapes/dividedRect.js';
|
||||||
|
import { doublecircle } from './shapes/doubleCircle.js';
|
||||||
|
import { filledCircle } from './shapes/filledCircle.js';
|
||||||
|
import { flippedTriangle } from './shapes/flippedTriangle.js';
|
||||||
|
import { forkJoin } from './shapes/forkJoin.js';
|
||||||
|
import { halfRoundedRectangle } from './shapes/halfRoundedRectangle.js';
|
||||||
|
import { hexagon } from './shapes/hexagon.js';
|
||||||
|
import { hourglass } from './shapes/hourglass.js';
|
||||||
|
import { icon } from './shapes/icon.js';
|
||||||
|
import { iconCircle } from './shapes/iconCircle.js';
|
||||||
|
import { iconRounded } from './shapes/iconRounded.js';
|
||||||
|
import { iconSquare } from './shapes/iconSquare.js';
|
||||||
|
import { imageSquare } from './shapes/imageSquare.js';
|
||||||
|
import { inv_trapezoid } from './shapes/invertedTrapezoid.js';
|
||||||
|
import { labelRect } from './shapes/labelRect.js';
|
||||||
|
import { lean_left } from './shapes/leanLeft.js';
|
||||||
|
import { lean_right } from './shapes/leanRight.js';
|
||||||
|
import { lightningBolt } from './shapes/lightningBolt.js';
|
||||||
|
import { linedCylinder } from './shapes/linedCylinder.js';
|
||||||
|
import { linedWaveEdgedRect } from './shapes/linedWaveEdgedRect.js';
|
||||||
|
import { multiRect } from './shapes/multiRect.js';
|
||||||
|
import { multiWaveEdgedRectangle } from './shapes/multiWaveEdgedRectangle.js';
|
||||||
|
import { note } from './shapes/note.js';
|
||||||
|
import { question } from './shapes/question.js';
|
||||||
|
import { rect_left_inv_arrow } from './shapes/rectLeftInvArrow.js';
|
||||||
|
import { rectWithTitle } from './shapes/rectWithTitle.js';
|
||||||
|
import { roundedRect } from './shapes/roundedRect.js';
|
||||||
|
import { shadedProcess } from './shapes/shadedProcess.js';
|
||||||
|
import { slopedRect } from './shapes/slopedRect.js';
|
||||||
|
import { squareRect } from './shapes/squareRect.js';
|
||||||
|
import { stadium } from './shapes/stadium.js';
|
||||||
|
import { state } from './shapes/state.js';
|
||||||
|
import { stateEnd } from './shapes/stateEnd.js';
|
||||||
|
import { stateStart } from './shapes/stateStart.js';
|
||||||
|
import { subroutine } from './shapes/subroutine.js';
|
||||||
|
import { taggedRect } from './shapes/taggedRect.js';
|
||||||
|
import { taggedWaveEdgedRectangle } from './shapes/taggedWaveEdgedRectangle.js';
|
||||||
|
import { text } from './shapes/text.js';
|
||||||
|
import { tiltedCylinder } from './shapes/tiltedCylinder.js';
|
||||||
|
import { trapezoid } from './shapes/trapezoid.js';
|
||||||
|
import { trapezoidalPentagon } from './shapes/trapezoidalPentagon.js';
|
||||||
|
import { triangle } from './shapes/triangle.js';
|
||||||
|
import { waveEdgedRectangle } from './shapes/waveEdgedRectangle.js';
|
||||||
|
import { waveRectangle } from './shapes/waveRectangle.js';
|
||||||
|
import { windowPane } from './shapes/windowPane.js';
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
type ShapeHandler = (parent: any, node: Node, options: ShapeRenderOptions) => unknown;
|
||||||
|
|
||||||
|
export interface ShapeDefinition {
|
||||||
|
semanticName: string;
|
||||||
|
name: string;
|
||||||
|
shortName: string;
|
||||||
|
description: string;
|
||||||
|
aliases?: string[];
|
||||||
|
legacyAliases?: string[];
|
||||||
|
handler: ShapeHandler;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const shapesDefs: ShapeDefinition[] = [
|
||||||
|
{
|
||||||
|
semanticName: 'Process',
|
||||||
|
name: 'Rectangle',
|
||||||
|
shortName: 'rect',
|
||||||
|
description: 'Standard process shape',
|
||||||
|
aliases: ['proc', 'process', 'rectangle'],
|
||||||
|
handler: squareRect,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Event',
|
||||||
|
name: 'Rounded Rectangle',
|
||||||
|
shortName: 'rounded',
|
||||||
|
description: 'Represents an event',
|
||||||
|
aliases: ['event'],
|
||||||
|
handler: roundedRect,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Terminal Point',
|
||||||
|
name: 'Stadium',
|
||||||
|
shortName: 'stadium',
|
||||||
|
description: 'Terminal point',
|
||||||
|
aliases: ['terminal', 'pill'],
|
||||||
|
handler: stadium,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Subprocess',
|
||||||
|
name: 'Framed Rectangle',
|
||||||
|
shortName: 'fr-rect',
|
||||||
|
description: 'Subprocess',
|
||||||
|
aliases: ['subprocess', 'subproc', 'framed-rectangle', 'subroutine'],
|
||||||
|
handler: subroutine,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Database',
|
||||||
|
name: 'Cylinder',
|
||||||
|
shortName: 'cyl',
|
||||||
|
description: 'Database storage',
|
||||||
|
aliases: ['db', 'database', 'cylinder'],
|
||||||
|
handler: cylinder,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Start',
|
||||||
|
name: 'Circle',
|
||||||
|
shortName: 'circle',
|
||||||
|
description: 'Starting point',
|
||||||
|
aliases: ['circ'],
|
||||||
|
handler: circle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Decision',
|
||||||
|
name: 'Diamond',
|
||||||
|
shortName: 'diam',
|
||||||
|
description: 'Decision-making step',
|
||||||
|
aliases: ['decision', 'diamond', 'question'],
|
||||||
|
handler: question,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Prepare Conditional',
|
||||||
|
name: 'Hexagon',
|
||||||
|
shortName: 'hex',
|
||||||
|
description: 'Preparation or condition step',
|
||||||
|
aliases: ['hexagon', 'prepare'],
|
||||||
|
handler: hexagon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Data Input/Output',
|
||||||
|
name: 'Lean Right',
|
||||||
|
shortName: 'lean-r',
|
||||||
|
description: 'Represents input or output',
|
||||||
|
aliases: ['lean-right', 'in-out'],
|
||||||
|
legacyAliases: ['lean_right'],
|
||||||
|
handler: lean_right,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Data Input/Output',
|
||||||
|
name: 'Lean Left',
|
||||||
|
shortName: 'lean-l',
|
||||||
|
description: 'Represents output or input',
|
||||||
|
aliases: ['lean-left', 'out-in'],
|
||||||
|
legacyAliases: ['lean_left'],
|
||||||
|
handler: lean_left,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Priority Action',
|
||||||
|
name: 'Trapezoid Base Bottom',
|
||||||
|
shortName: 'trap-b',
|
||||||
|
description: 'Priority action',
|
||||||
|
aliases: ['priority', 'trapezoid-bottom', 'trapezoid'],
|
||||||
|
handler: trapezoid,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Manual Operation',
|
||||||
|
name: 'Trapezoid Base Top',
|
||||||
|
shortName: 'trap-t',
|
||||||
|
description: 'Represents a manual task',
|
||||||
|
aliases: ['manual', 'trapezoid-top', 'inv-trapezoid'],
|
||||||
|
legacyAliases: ['inv_trapezoid'],
|
||||||
|
handler: inv_trapezoid,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Stop',
|
||||||
|
name: 'Double Circle',
|
||||||
|
shortName: 'dbl-circ',
|
||||||
|
description: 'Represents a stop point',
|
||||||
|
aliases: ['double-circle'],
|
||||||
|
legacyAliases: ['doublecircle'],
|
||||||
|
handler: doublecircle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Text Block',
|
||||||
|
name: 'Text Block',
|
||||||
|
shortName: 'text',
|
||||||
|
description: 'Text block',
|
||||||
|
handler: text,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Card',
|
||||||
|
name: 'Notched Rectangle',
|
||||||
|
shortName: 'notch-rect',
|
||||||
|
description: 'Represents a card',
|
||||||
|
aliases: ['card', 'notched-rectangle'],
|
||||||
|
handler: card,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Lined/Shaded Process',
|
||||||
|
name: 'Lined Rectangle',
|
||||||
|
shortName: 'lin-rect',
|
||||||
|
description: 'Lined process shape',
|
||||||
|
aliases: ['lined-rectangle', 'lined-process', 'lin-proc', 'shaded-process'],
|
||||||
|
handler: shadedProcess,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Start',
|
||||||
|
name: 'Small Circle',
|
||||||
|
shortName: 'sm-circ',
|
||||||
|
description: 'Small starting point',
|
||||||
|
aliases: ['start', 'small-circle'],
|
||||||
|
handler: stateStart,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Stop',
|
||||||
|
name: 'Framed Circle',
|
||||||
|
shortName: 'fr-circ',
|
||||||
|
description: 'Stop point',
|
||||||
|
aliases: ['stop', 'framed-circle'],
|
||||||
|
handler: stateEnd,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Fork/Join',
|
||||||
|
name: 'Filled Rectangle',
|
||||||
|
shortName: 'fork',
|
||||||
|
description: 'Fork or join in process flow',
|
||||||
|
aliases: ['join'],
|
||||||
|
handler: forkJoin,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Collate',
|
||||||
|
name: 'Hourglass',
|
||||||
|
shortName: 'hourglass',
|
||||||
|
description: 'Represents a collate operation',
|
||||||
|
aliases: ['hourglass', 'collate'],
|
||||||
|
handler: hourglass,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Comment',
|
||||||
|
name: 'Curly Brace',
|
||||||
|
shortName: 'brace',
|
||||||
|
description: 'Adds a comment',
|
||||||
|
aliases: ['comment', 'brace-l'],
|
||||||
|
handler: curlyBraceLeft,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Comment Right',
|
||||||
|
name: 'Curly Brace',
|
||||||
|
shortName: 'brace-r',
|
||||||
|
description: 'Adds a comment',
|
||||||
|
handler: curlyBraceRight,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Comment with braces on both sides',
|
||||||
|
name: 'Curly Braces',
|
||||||
|
shortName: 'braces',
|
||||||
|
description: 'Adds a comment',
|
||||||
|
handler: curlyBraces,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Com Link',
|
||||||
|
name: 'Lightning Bolt',
|
||||||
|
shortName: 'bolt',
|
||||||
|
description: 'Communication link',
|
||||||
|
aliases: ['com-link', 'lightning-bolt'],
|
||||||
|
handler: lightningBolt,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Document',
|
||||||
|
name: 'Document',
|
||||||
|
shortName: 'doc',
|
||||||
|
description: 'Represents a document',
|
||||||
|
aliases: ['doc', 'document'],
|
||||||
|
handler: waveEdgedRectangle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Delay',
|
||||||
|
name: 'Half-Rounded Rectangle',
|
||||||
|
shortName: 'delay',
|
||||||
|
description: 'Represents a delay',
|
||||||
|
aliases: ['half-rounded-rectangle'],
|
||||||
|
handler: halfRoundedRectangle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Direct Access Storage',
|
||||||
|
name: 'Horizontal Cylinder',
|
||||||
|
shortName: 'h-cyl',
|
||||||
|
description: 'Direct access storage',
|
||||||
|
aliases: ['das', 'horizontal-cylinder'],
|
||||||
|
handler: tiltedCylinder,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Disk Storage',
|
||||||
|
name: 'Lined Cylinder',
|
||||||
|
shortName: 'lin-cyl',
|
||||||
|
description: 'Disk storage',
|
||||||
|
aliases: ['disk', 'lined-cylinder'],
|
||||||
|
handler: linedCylinder,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Display',
|
||||||
|
name: 'Curved Trapezoid',
|
||||||
|
shortName: 'curv-trap',
|
||||||
|
description: 'Represents a display',
|
||||||
|
aliases: ['curved-trapezoid', 'display'],
|
||||||
|
handler: curvedTrapezoid,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Divided Process',
|
||||||
|
name: 'Divided Rectangle',
|
||||||
|
shortName: 'div-rect',
|
||||||
|
description: 'Divided process shape',
|
||||||
|
aliases: ['div-proc', 'divided-rectangle', 'divided-process'],
|
||||||
|
handler: dividedRectangle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Extract',
|
||||||
|
name: 'Triangle',
|
||||||
|
shortName: 'tri',
|
||||||
|
description: 'Extraction process',
|
||||||
|
aliases: ['extract', 'triangle'],
|
||||||
|
handler: triangle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Internal Storage',
|
||||||
|
name: 'Window Pane',
|
||||||
|
shortName: 'win-pane',
|
||||||
|
description: 'Internal storage',
|
||||||
|
aliases: ['internal-storage', 'window-pane'],
|
||||||
|
handler: windowPane,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Junction',
|
||||||
|
name: 'Filled Circle',
|
||||||
|
shortName: 'f-circ',
|
||||||
|
description: 'Junction point',
|
||||||
|
aliases: ['junction', 'filled-circle'],
|
||||||
|
handler: filledCircle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Loop Limit',
|
||||||
|
name: 'Trapezoidal Pentagon',
|
||||||
|
shortName: 'notch-pent',
|
||||||
|
description: 'Loop limit step',
|
||||||
|
aliases: ['loop-limit', 'notched-pentagon'],
|
||||||
|
handler: trapezoidalPentagon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Manual File',
|
||||||
|
name: 'Flipped Triangle',
|
||||||
|
shortName: 'flip-tri',
|
||||||
|
description: 'Manual file operation',
|
||||||
|
aliases: ['manual-file', 'flipped-triangle'],
|
||||||
|
handler: flippedTriangle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Manual Input',
|
||||||
|
name: 'Sloped Rectangle',
|
||||||
|
shortName: 'sl-rect',
|
||||||
|
description: 'Manual input step',
|
||||||
|
aliases: ['manual-input', 'sloped-rectangle'],
|
||||||
|
handler: slopedRect,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Multi-Document',
|
||||||
|
name: 'Stacked Document',
|
||||||
|
shortName: 'docs',
|
||||||
|
description: 'Multiple documents',
|
||||||
|
aliases: ['documents', 'st-doc', 'stacked-document'],
|
||||||
|
handler: multiWaveEdgedRectangle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Multi-Process',
|
||||||
|
name: 'Stacked Rectangle',
|
||||||
|
shortName: 'st-rect',
|
||||||
|
description: 'Multiple processes',
|
||||||
|
aliases: ['procs', 'processes', 'stacked-rectangle'],
|
||||||
|
handler: multiRect,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Stored Data',
|
||||||
|
name: 'Bow Tie Rectangle',
|
||||||
|
shortName: 'bow-rect',
|
||||||
|
description: 'Stored data',
|
||||||
|
aliases: ['stored-data', 'bow-tie-rectangle'],
|
||||||
|
handler: bowTieRect,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Summary',
|
||||||
|
name: 'Crossed Circle',
|
||||||
|
shortName: 'cross-circ',
|
||||||
|
description: 'Summary',
|
||||||
|
aliases: ['summary', 'crossed-circle'],
|
||||||
|
handler: crossedCircle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Tagged Document',
|
||||||
|
name: 'Tagged Document',
|
||||||
|
shortName: 'tag-doc',
|
||||||
|
description: 'Tagged document',
|
||||||
|
aliases: ['tag-doc', 'tagged-document'],
|
||||||
|
handler: taggedWaveEdgedRectangle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Tagged Process',
|
||||||
|
name: 'Tagged Rectangle',
|
||||||
|
shortName: 'tag-rect',
|
||||||
|
description: 'Tagged process',
|
||||||
|
aliases: ['tagged-rectangle', 'tag-proc', 'tagged-process'],
|
||||||
|
handler: taggedRect,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Paper Tape',
|
||||||
|
name: 'Flag',
|
||||||
|
shortName: 'flag',
|
||||||
|
description: 'Paper tape',
|
||||||
|
aliases: ['paper-tape'],
|
||||||
|
handler: waveRectangle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Odd',
|
||||||
|
name: 'Odd',
|
||||||
|
shortName: 'odd',
|
||||||
|
description: 'Odd shape',
|
||||||
|
legacyAliases: ['rect_left_inv_arrow'],
|
||||||
|
handler: rect_left_inv_arrow,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Lined Document',
|
||||||
|
name: 'Lined Document',
|
||||||
|
shortName: 'lin-doc',
|
||||||
|
description: 'Lined document',
|
||||||
|
aliases: ['lined-document'],
|
||||||
|
handler: linedWaveEdgedRect,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const generateShapeMap = () => {
|
||||||
|
const shapeMap = new Map<string, ShapeHandler>(
|
||||||
|
// These are the shapes that didn't have documentation present.
|
||||||
|
Object.entries({
|
||||||
|
// States
|
||||||
|
state,
|
||||||
|
stateStart,
|
||||||
|
stateEnd,
|
||||||
|
forkJoin,
|
||||||
|
choice,
|
||||||
|
note,
|
||||||
|
|
||||||
|
// Rectangles
|
||||||
|
rectWithTitle,
|
||||||
|
roundedRect,
|
||||||
|
squareRect,
|
||||||
|
labelRect,
|
||||||
|
|
||||||
|
// Icons
|
||||||
|
iconSquare,
|
||||||
|
iconCircle,
|
||||||
|
icon,
|
||||||
|
iconRounded,
|
||||||
|
imageSquare,
|
||||||
|
|
||||||
|
anchor,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
for (const shape of shapesDefs) {
|
||||||
|
for (const alias of [
|
||||||
|
shape.shortName,
|
||||||
|
...(shape.aliases ?? []),
|
||||||
|
...(shape.legacyAliases ?? []),
|
||||||
|
]) {
|
||||||
|
shapeMap.set(alias, shape.handler);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return shapeMap;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const shapes = generateShapeMap();
|
||||||
Reference in New Issue
Block a user