Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const render = (state) =>
svg('g', [
svg('rect', {
x: state.graph.bounds.minX,
y: state.graph.bounds.minY,
width: state.graph.bounds.maxX - state.graph.bounds.minX,
height: state.graph.bounds.maxY - state.graph.bounds.minY,
fill: 'none',
attributes: {
'data-background': state.mode,
'data-transient-edge':
state.transientEdge === null ? void 0 : 'true',
},
}),
state.graph.nodes.map((node, nodeIndex) =>
renderNode(state, node, nodeIndex)
).toArray(),
]),
svg('g', {
transform: `translate(50, ${60 + deltaNetworkHeight})`,
}, [
svg('rect', {
attributes: {
x: 0,
y: 0,
width: 100,
height: 30,
class: 'fsm-block-clock',
},
}),
svg('text', {
class: 'fsm-block-label',
transform: 'translate(50, 15)',
x: 0,
y: 0,
'text-anchor': 'middle',
'dominant-baseline': 'central',
fill: 'white',
}, 'Taktglied'),
IF(!editable, () =>
svg('g', {
class: 'fsm-button-tick',
'data-fsm-action': 'tick',
}, [
svg('rect', {
attributes: {
}),
svg('path', {
class: 'graph-edge-line-background',
d: bezierString(edge.path),
stroke: 'none',
'stroke-width': 100,
fill: 'none',
key: 'background-line',
}),
svg('polygon', {
class: 'graph-edge-head',
points: arrowHeadString(edge.path, 40),
fill: 'black',
key: 'head',
}),
svg('path', {
class: 'graph-edge-line',
d: bezierString(edge.path),
stroke: 'black',
'stroke-width': 5,
fill: 'none',
key: 'line',
}),
pathLabel(edge.path, edge.label, state.nodeRadius * 0.5),
])
;
export default (size) => svg('svg', {
attributes: {
preserveAspectRatio: 'xMidYMid meet',
'aria-hidden': true,
class: 'svg-icon',
viewBox: '0 0 128 128',
width: size,
height: size,
},
}, [
svg('path', {
class: 'icon-shape',
d: `M46,89.201L117.692,17.509L127.591,27.409L55.899,
99.101L55.903,99.104L46.003,109.003L46,109L45.997,
109.003L36.097,99.104L36.1,99.101L0.627,63.627L10.526,
53.727L46,89.201Z`,
}),
]);
IF(selected !== null, () => {
const dot = dots[selected];
const zeroDot = dots[dot.baseIndex];
const angle = dot.angle;
const zeroAngle = zeroDot.angle;
const x = Math.sin(angle) * radius;
const y = -Math.cos(angle) * radius;
const zeroX = Math.sin(zeroAngle) * (radius - 0.1);
const zeroY = -Math.cos(zeroAngle) * (radius - 0.1);
const mid = Math.abs(angle - zeroAngle) >= Math.PI;
const largeArc = mid && !dot.negative;
const sweep = !negativeClockwise && dot.negative;
return svg('path', {
key: 'arc',
class: 'selection-arc',
d: `M ${~~zeroX} ${~~zeroY}
A ${~~radius - 0.05} ${~~radius - 0.05} 0
${largeArc ? 1 : 0} ${sweep ? 0 : 1}
${x} ${y}`,
fill: 'none',
'stroke-width': 10,
'marker-end': 'url(#markerArrow)',
});
})
;
export function renderGraph(graph: dagre.graphlib.Graph, zaps: Array, id: string): VNode {
const g = typeof graph['graph'] === 'function' ? graph['graph']() : {};
const attrs = {
width: g.width + 2 * DIAGRAM_PADDING_H + 100,
height: g.height + 2 * DIAGRAM_PADDING_V,
};
return svg({ attrs, key: id }, [
...graph.edges().map(edge => renderEdge(edge, graph)),
...graph.nodes().map(identifier => renderNode(identifier, graph, zaps)),
]);
}
export default (size) => svg('svg', {
attributes: {
preserveAspectRatio: 'xMidYMid meet',
'aria-hidden': true,
class: 'svg-icon',
viewBox: '0 0 128 128',
width: size,
height: size,
},
}, [
svg('path', {
class: 'icon-shape',
d: `M31.13,58.053C34.27,54.27 37.615,50.648 41.133,
47.199C46.308,42.126 51.854,37.43 57.72,33.173C63.513,
28.969 69.618,25.193 75.971,21.894C76.422,21.66 76.874,
21.428 77.328,21.199L69.194,3.24L127.088,8.393L92.775,
55.307L83.936,35.789C80.895,37.348 77.917,39.029 75.011,
markerHeight: 4,
refX: 1,
refY: 2,
orient: 'auto',
class: 'arrow-head',
}, [
svg('path', {
d: 'M0,0 L0,4 L3,2 L0,0',
}),
]),
]),
svg('g', {
transform: 'translate(50, 50)',
}, [
svg('rect', {
attributes: {
x: 0,
y: 0,
width: 100,
height: deltaNetworkHeight,
class: 'fsm-block-delta',
},
}),
svg('text', {
class: 'fsm-block-label',
transform: 'translate(50, 15)',
x: 0,
y: deltaNetworkHeight - 25,
'text-anchor': 'middle',
'dominant-baseline': 'auto',
const renderEdge = (state, edge) =>
svg('line', {
x1: edge.fromX * state.scaleX,
y1: edge.fromY * state.scaleY,
x2: edge.toX * state.scaleX,
y2: edge.toY * state.scaleY,
'stroke-width': '3',
class: 'tree-edge' + (edge.faded ? ' tree-faded' : ''),
stroke: 'black',
style: {
stroke: attrBool(edge.color),
},
})
;
const renderEdge = (state, edge, index, transient = false) => svg('g', {
class: 'graph-edge' +
(isEdgeSelected(edge, state) ? ' state-selected' : '') +
(transient ? ' state-transient' : '') +
(edge.toIndex !== null ? ' state-valid' : ' state-invalid'),
attributes: transient ? void 0 : {
'data-action': edgeAction(state),
'data-edge': `${edge.fromIndex},${edge.toIndex}`,
},
key: `edge-${index}-${edge.fromIndex}-${transient ? '?' : edge.toIndex}`,
},[
//debugBezier(edge.path),
svg('polygon', {
class: 'graph-edge-line-background',
points: arrowHeadString(edge.path, 40),
fill: 'none',
key: 'background-head',