diff --git a/.cspell/misc-terms.txt b/.cspell/misc-terms.txt index 3ef8135f2..d0516532d 100644 --- a/.cspell/misc-terms.txt +++ b/.cspell/misc-terms.txt @@ -1,2 +1,4 @@ +circo handdrawnSeed +neato newbranch diff --git a/.prettierignore b/.prettierignore index 7da0646e3..c70080426 100644 --- a/.prettierignore +++ b/.prettierignore @@ -16,3 +16,5 @@ generated/ # Ignore the files creates in /demos/dev except for example.html demos/dev/** !/demos/dev/example.html +# TODO: Lots of errors to fix +cypress/platform/state-refactor.html diff --git a/cypress/platform/knsv-4442.html b/cypress/platform/knsv-4442.html index 4a8fa7246..fc15a1685 100644 --- a/cypress/platform/knsv-4442.html +++ b/cypress/platform/knsv-4442.html @@ -33,7 +33,9 @@ background-image: radial-gradient(#fff 51%, transparent 91%), radial-gradient(#fff 51%, transparent 91%); background-size: 20px 20px; - background-position: 0 0, 10px 10px; + background-position: + 0 0, + 10px 10px; background-repeat: repeat; } .malware { diff --git a/cypress/platform/knsv3.html b/cypress/platform/knsv3.html index 26368a62a..1d65c2ddf 100644 --- a/cypress/platform/knsv3.html +++ b/cypress/platform/knsv3.html @@ -1,4 +1,4 @@ - + diff --git a/docs/config/setup/modules/config.md b/docs/config/setup/modules/config.md index 48e687577..5b715c807 100644 --- a/docs/config/setup/modules/config.md +++ b/docs/config/setup/modules/config.md @@ -118,7 +118,7 @@ The siteConfig #### Defined in -[config.ts:218](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L218) +[config.ts:221](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L221) --- diff --git a/packages/mermaid/src/dagre-wrapper/index-refactored.js b/packages/mermaid/src/dagre-wrapper/index-refactored.js deleted file mode 100644 index 1411a8733..000000000 --- a/packages/mermaid/src/dagre-wrapper/index-refactored.js +++ /dev/null @@ -1,209 +0,0 @@ -import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js'; -import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js'; -import insertMarkers from './markers.js'; -import { updateNodeBounds } from './shapes/util.js'; -import { - clear as clearGraphlib, - clusterDb, - adjustClustersAndEdges, - findNonClusterChild, - sortNodesByHierarchy, -} from './mermaid-graphlib.js'; -import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; -import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes.js'; -import { insertCluster, clear as clearClusters } from './clusters.js'; -import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges.js'; -import { log } from '../logger.js'; -import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js'; -import { getConfig } from '../diagram-api/diagramAPI.js'; -// import type { LayoutData, LayoutMethod } from '../rendering-util/types.js'; -// import type { MermaidConfig } from '../config.type.js'; - -const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, siteConfig) => { - log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster); - const dir = graph.graph().rankdir; - log.trace('Dir in recursive render - dir:', dir); - - const elem = _elem.insert('g').attr('class', 'root'); - if (!graph.nodes()) { - log.info('No nodes found for', graph); - } else { - log.info('Recursive render XXX', graph.nodes()); - } - if (graph.edges().length > 0) { - log.trace('Recursive edges', graph.edge(graph.edges()[0])); - } - const clusters = elem.insert('g').attr('class', 'clusters'); - const edgePaths = elem.insert('g').attr('class', 'edgePaths'); - const edgeLabels = elem.insert('g').attr('class', 'edgeLabels'); - const nodes = elem.insert('g').attr('class', 'nodes'); - - // Insert nodes, this will insert them into the dom and each node will get a size. The size is updated - // to the abstract node and is later used by dagre for the layout - await Promise.all( - graph.nodes().map(async function (v) { - const node = graph.node(v); - if (parentCluster !== undefined) { - const data = JSON.parse(JSON.stringify(parentCluster.clusterData)); - // data.clusterPositioning = true; - log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster); - graph.setNode(parentCluster.id, data); - if (!graph.parent(v)) { - log.trace('Setting parent', v, parentCluster.id); - graph.setParent(v, parentCluster.id, data); - } - } - log.info('(Insert) Node XXX' + v + ': ' + JSON.stringify(graph.node(v))); - if (node && node.clusterNode) { - // const children = graph.children(v); - log.info('Cluster identified', v, node.width, graph.node(v)); - const o = await recursiveRender( - nodes, - node.graph, - diagramtype, - id, - graph.node(v), - siteConfig - ); - const newEl = o.elem; - updateNodeBounds(node, newEl); - node.diff = o.diff || 0; - log.info('Node bounds (abc123)', v, node, node.width, node.x, node.y); - setNodeElem(newEl, node); - - log.warn('Recursive render complete ', newEl, node); - } else { - if (graph.children(v).length > 0) { - // This is a cluster but not to be rendered recursively - // Render as before - log.info('Cluster - the non recursive path XXX', v, node.id, node, graph); - log.info(findNonClusterChild(node.id, graph)); - clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node }; - // insertCluster(clusters, graph.node(v)); - } else { - log.info('Node - the non recursive path', v, node.id, node); - await insertNode(nodes, graph.node(v), dir); - } - } - }) - ); - - // Insert labels, this will insert them into the dom so that the width can be calculated - // Also figure out which edges point to/from clusters and adjust them accordingly - // Edges from/to clusters really points to the first child in the cluster. - // TODO: pick optimal child in the cluster to us as link anchor - graph.edges().forEach(function (e) { - const edge = graph.edge(e.v, e.w, e.name); - log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e)); - log.info('Edge ' + e.v + ' -> ' + e.w + ': ', e, ' ', JSON.stringify(graph.edge(e))); - - // Check if link is either from or to a cluster - log.info('Fix', clusterDb, 'ids:', e.v, e.w, 'Translateing: ', clusterDb[e.v], clusterDb[e.w]); - insertEdgeLabel(edgeLabels, edge); - }); - - graph.edges().forEach(function (e) { - log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e)); - }); - log.info('#############################################'); - log.info('### Layout ###'); - log.info('#############################################'); - log.info(graph); - dagreLayout(graph); - log.info('Graph after layout:', graphlibJson.write(graph)); - // Move the nodes to the correct place - let diff = 0; - const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig); - sortNodesByHierarchy(graph).forEach(function (v) { - const node = graph.node(v); - log.info('Position ' + v + ': ' + JSON.stringify(graph.node(v))); - log.info( - 'Position ' + v + ': (' + node.x, - ',' + node.y, - ') width: ', - node.width, - ' height: ', - node.height - ); - if (node && node.clusterNode) { - // clusterDb[node.id].node = node; - node.y += subGraphTitleTotalMargin; - positionNode(node); - } else { - // Non cluster node - if (graph.children(v).length > 0) { - // A cluster in the non-recursive way - // positionCluster(node); - node.height += subGraphTitleTotalMargin; - insertCluster(clusters, node); - clusterDb[node.id].node = node; - } else { - node.y += subGraphTitleTotalMargin / 2; - positionNode(node); - } - } - }); - - // Move the edge labels to the correct place after layout - graph.edges().forEach(function (e) { - const edge = graph.edge(e); - log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge); - - edge.points.forEach((point) => (point.y += subGraphTitleTotalMargin / 2)); - const paths = insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph, id); - positionEdgeLabel(edge, paths); - }); - - graph.nodes().forEach(function (v) { - const n = graph.node(v); - log.info(v, n.type, n.diff); - if (n.type === 'group') { - diff = n.diff; - } - }); - return { elem, diff }; -}; - -export const render = async (data4Layout, svg, element) => { - // Create the input mermaid.graph - const graph = new graphlib.Graph({ - multigraph: true, - compound: true, - }) - .setGraph({ - rankdir: data4Layout.direction, - nodesep: data4Layout.nodeSpacing, - ranksep: data4Layout.rankSpacing, - marginx: 8, - marginy: 8, - }) - .setDefaultEdgeLabel(function () { - return {}; - }); - - // Org - - insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId); - clearNodes(); - clearEdges(); - clearClusters(); - clearGraphlib(); - - // Add the nodes and edges to the graph - data4Layout.nodes.forEach((node) => { - graph.setNode(node.id, { ...node }); - }); - - log.warn('Graph at first:', JSON.stringify(graphlibJson.write(graph))); - adjustClustersAndEdges(graph); - log.warn('Graph after:', JSON.stringify(graphlibJson.write(graph))); - const siteConfig = getConfig(); - await recursiveRender( - element, - graph, - data4Layout.type, - data4Layout.diagramId, - undefined, - siteConfig - ); -}; diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js index 12d1cec4b..234fe2a83 100644 --- a/packages/mermaid/src/dagre-wrapper/shapes/util.js +++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js @@ -15,7 +15,7 @@ export const labelHelper = async (parent, node, _classes, isNode) => { classes = _classes; } - console.log('parentY', parent.node()); + // console.log('parentY', parent.node()); // Add outer g element const shapeSvg = parent @@ -34,9 +34,8 @@ export const labelHelper = async (parent, node, _classes, isNode) => { labelText = typeof node.labelText === 'string' ? node.labelText : node.labelText[0]; } - const textNode = label.node(); - console.log('parentX', parent, 'node',node,'labelText',labelText, textNode, node.labelType, 'label', label.node()); + // console.log('parentX', parent, 'node',node,'labelText',labelText, textNode, node.labelType, 'label', label.node()); let text; if (node.labelType === 'markdown') { // text = textNode; diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js index cc9202a2b..badf9238c 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js @@ -29,7 +29,7 @@ export const setConf = function (cnf) { */ export const addVertices = async function (vert, g, svgId, root, doc, diagObj) { const svg = root.select(`[id="${svgId}"]`); - console.log('SVG:', svg, svg.node(), 'root:', root, root.node()); + // console.log('SVG:', svg, svg.node(), 'root:', root, root.node()); const keys = vert.keys(); diff --git a/packages/mermaid/src/diagrams/state/dataFetcher.js b/packages/mermaid/src/diagrams/state/dataFetcher.js index 0a6187903..d69c64d7a 100644 --- a/packages/mermaid/src/diagrams/state/dataFetcher.js +++ b/packages/mermaid/src/diagrams/state/dataFetcher.js @@ -1,41 +1,37 @@ +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { log } from '../../logger.js'; import common from '../common/common.js'; -import { getConfig } from '../../diagram-api/diagramAPI.js'; - import { - DEFAULT_DIAGRAM_DIRECTION, - STMT_STATE, - STMT_RELATION, - STMT_CLASSDEF, - STMT_APPLYCLASS, + CSS_DIAGRAM_CLUSTER, + CSS_DIAGRAM_CLUSTER_ALT, + CSS_DIAGRAM_NOTE, + CSS_DIAGRAM_STATE, + CSS_EDGE, + CSS_EDGE_NOTE_EDGE, + DEFAULT_NESTED_DOC_DIR, DEFAULT_STATE_TYPE, DIVIDER_TYPE, - G_EDGE_STYLE, + DOMID_STATE, + DOMID_TYPE_SPACER, G_EDGE_ARROWHEADSTYLE, G_EDGE_LABELPOS, G_EDGE_LABELTYPE, + G_EDGE_STYLE, G_EDGE_THICKNESS, - CSS_EDGE, - DEFAULT_NESTED_DOC_DIR, + NOTE, + NOTE_ID, + PARENT, + PARENT_ID, SHAPE_DIVIDER, - SHAPE_GROUP, - CSS_DIAGRAM_CLUSTER, - CSS_DIAGRAM_CLUSTER_ALT, - CSS_DIAGRAM_STATE, - SHAPE_STATE_WITH_DESC, - SHAPE_STATE, - SHAPE_START, SHAPE_END, + SHAPE_GROUP, SHAPE_NOTE, SHAPE_NOTEGROUP, - CSS_DIAGRAM_NOTE, - DOMID_TYPE_SPACER, - DOMID_STATE, - NOTE_ID, - PARENT_ID, - NOTE, - PARENT, - CSS_EDGE_NOTE_EDGE, + SHAPE_START, + SHAPE_STATE, + SHAPE_STATE_WITH_DESC, + STMT_RELATION, + STMT_STATE, } from './stateCommon.js'; // List of nodes created from the parsed diagram statement items diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified-step-by-step.ts b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified-step-by-step.ts deleted file mode 100644 index 936375f11..000000000 --- a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified-step-by-step.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { log } from '../../logger.js'; -import type { DiagramStyleClassDef } from '../../diagram-api/types.js'; -import type { LayoutData, LayoutMethod } from '../../rendering-util/types.js'; -import { getConfig } from '../../diagram-api/diagramAPI.js'; -import doLayout from '../../rendering-util/doLayout.js'; -import performRender from '../../rendering-util/performRender.js'; -import insertElementsForSize, { - getDiagramElements, -} from '../../rendering-util/inserElementsForSize.js'; - -// Configuration -const conf: Record = {}; - -export const setConf = function (cnf: Record) { - const keys = Object.keys(cnf); - for (const key of keys) { - conf[key] = cnf[key]; - } -}; - -export const getClasses = function ( - text: string, - diagramObj: any -): Record { - diagramObj.db.extract(diagramObj.db.getRootDocV2()); - return diagramObj.db.getClasses(); -}; - -export const draw = async function (text: string, id: string, _version: string, diag: any) { - log.info('Drawing state diagram (v2)', id); - const { securityLevel, state: conf } = getConfig(); - - // Extracting the data from the parsed structure into a more usable form - // Not related to the refactoring, but this is the first step in the rendering process - diag.db.extract(diag.db.getRootDocV2()); - - // The getData method provided in all supported diagrams is used to extract the data from the parsed structure - // into the Layout data format - const data4Layout = diag.db.getData() as LayoutData; - // Create the root SVG - const { svg, element } = getDiagramElements(id, securityLevel); - // For some diagrams this call is not needed, but in the state diagram it is - await insertElementsForSize(element, data4Layout); - - console.log('data4Layout:', data4Layout); - - // Now we have layout data with real sizes, we can perform the layout - const data4Rendering = doLayout(data4Layout, id, _version, 'dagre-wrapper'); - - // The performRender method provided in all supported diagrams is used to render the data - performRender(data4Rendering); -}; - -export default { - setConf, - getClasses, - draw, -}; diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts index 949e2d05f..4ab71e4e2 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts +++ b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts @@ -1,42 +1,20 @@ -import { log } from '../../logger.js'; -import type { DiagramStyleClassDef } from '../../diagram-api/types.js'; -import type { LayoutData, LayoutMethod } from '../../rendering-util/types.js'; import { getConfig } from '../../diagram-api/diagramAPI.js'; -import doLayout from '../../rendering-util/doLayout.js'; -import performRender from '../../rendering-util/performRender.js'; +import type { DiagramStyleClassDef } from '../../diagram-api/types.js'; +import { log } from '../../logger.js'; +import { getDiagramElements } from '../../rendering-util/insertElementsForSize.js'; import { render } from '../../rendering-util/render.js'; -import insertElementsForSize, { - getDiagramElements, -} from '../../rendering-util/inserElementsForSize.js'; import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js'; -import { - DEFAULT_DIAGRAM_DIRECTION, - DEFAULT_NESTED_DOC_DIR, - STMT_STATE, - STMT_RELATION, - DEFAULT_STATE_TYPE, - DIVIDER_TYPE, - CSS_DIAGRAM, -} from './stateCommon.js'; +import type { LayoutData } from '../../rendering-util/types.js'; import utils from '../../utils.js'; - -// Configuration -const conf: Record = {}; - -export const setConf = function (cnf: Record) { - const keys = Object.keys(cnf); - for (const key of keys) { - conf[key] = cnf[key]; - } -}; +import { CSS_DIAGRAM, DEFAULT_NESTED_DOC_DIR } from './stateCommon.js'; /** * Get the direction from the statement items. * Look through all of the documents (docs) in the parsedItems * Because is a _document_ direction, the default direction is not necessarily the same as the overall default _diagram_ direction. - * @param {object[]} parsedItem - the parsed statement item to look through - * @param [defaultDir] - the direction to use if none is found - * @returns {string} + * @param parsedItem - the parsed statement item to look through + * @param defaultDir - the direction to use if none is found + * @returns The direction to use */ const getDir = (parsedItem: any, defaultDir = DEFAULT_NESTED_DOC_DIR) => { let dir = defaultDir; @@ -54,7 +32,7 @@ const getDir = (parsedItem: any, defaultDir = DEFAULT_NESTED_DOC_DIR) => { export const getClasses = function ( text: string, diagramObj: any -): Record { +): Map { diagramObj.db.extract(diagramObj.db.getRootDocV2()); return diagramObj.db.getClasses(); }; @@ -87,28 +65,29 @@ export const draw = async function (text: string, id: string, _version: string, // performRender(data4Rendering); data4Layout.type = diag.type; - // data4Layout.layoutAlgorithm = 'dagre-wrapper'; - // data4Layout.layoutAlgorithm = 'elk'; data4Layout.layoutAlgorithm = layout; data4Layout.direction = DIR; - data4Layout.nodeSpacing = conf.nodeSpacing || 50; - data4Layout.rankSpacing = conf.rankSpacing || 50; + + // TODO: Should we move these two to baseConfig? These types are not there in StateConfig. + // @ts-expect-error TODO: Will be fixed after config refactor + data4Layout.nodeSpacing = conf?.nodeSpacing || 50; + // @ts-expect-error TODO: Will be fixed after config refactor + data4Layout.rankSpacing = conf?.rankSpacing || 50; data4Layout.markers = ['barb']; data4Layout.diagramId = id; - console.log('REF1:', data4Layout); + // console.log('REF1:', data4Layout); await render(data4Layout, svg, element); const padding = 8; utils.insertTitle( element, 'statediagramTitleText', - conf.titleTopMargin, + conf?.titleTopMargin ?? 25, diag.db.getDiagramTitle() ); - setupViewPortForSVG(svg, padding, CSS_DIAGRAM, conf.useMaxWidth); + setupViewPortForSVG(svg, padding, CSS_DIAGRAM, conf?.useMaxWidth ?? true); }; export default { - setConf, getClasses, draw, }; diff --git a/packages/mermaid/src/rendering-util/inserElementsForSize.js b/packages/mermaid/src/rendering-util/insertElementsForSize.js similarity index 97% rename from packages/mermaid/src/rendering-util/inserElementsForSize.js rename to packages/mermaid/src/rendering-util/insertElementsForSize.js index 617c789f6..b9b52949f 100644 --- a/packages/mermaid/src/rendering-util/inserElementsForSize.js +++ b/packages/mermaid/src/rendering-util/insertElementsForSize.js @@ -23,6 +23,11 @@ export const getDiagramElements = (id, securityLevel) => { }; // export function insertElementsForSize(el: SVGElement, data: LayoutData): void { +/** + * + * @param el + * @param data + */ export function insertElementsForSize(el, data) { const nodesElem = el.insert('g').attr('class', 'nodes'); const edgesElem = el.insert('g').attr('class', 'edges'); diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js index 3744254b2..f56cba285 100644 --- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js +++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js @@ -278,6 +278,7 @@ export const adjustClustersAndEdges = (graph, depth) => { clusterDb[e.w] ); if (clusterDb[e.v] && clusterDb[e.w] && clusterDb[e.v] === clusterDb[e.w]) { + // cspell:ignore trixing log.warn('Fixing and trixing link to self - removing XXX', e.v, e.w, e.name); log.warn('Fixing and trixing - removing XXX', e.v, e.w, e.name); v = getAnchorId(e.v); diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js index a10e4669d..dd71a2f7e 100644 --- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js +++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js @@ -6,7 +6,7 @@ import { extractDescendants, sortNodesByHierarchy, } from './mermaid-graphlib.js'; -import { setLogLevel, log } from '../logger.js'; +import { setLogLevel, log } from '$root/logger.js'; describe('Graphlib decorations', () => { let g; diff --git a/packages/mermaid/src/rendering-util/performRender.ts b/packages/mermaid/src/rendering-util/performRender.ts deleted file mode 100644 index a862c6efb..000000000 --- a/packages/mermaid/src/rendering-util/performRender.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { RenderData } from './types'; -const performRender = (data: RenderData) => { }; -export default performRender; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index c6fa43f72..ad1573596 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -1,25 +1,14 @@ -import { log } from '$root/logger.js'; -import createLabel from './createLabel.js'; -import { createText } from '$root/rendering-util/createText.ts'; -import { - line, - curveBasis, - curveLinear, - curveNatural, - curveCardinal, - curveStep, - select, - curveMonotoneX, - curveMonotoneY, - curveCatmullRom, -} from 'd3'; import { getConfig } from '$root/diagram-api/diagramAPI.js'; -import utils from '$root/utils.js'; import { evaluate } from '$root/diagrams/common/common.js'; +import { log } from '$root/logger.js'; +import { createText } from '$root/rendering-util/createText.ts'; +import utils from '$root/utils.js'; import { getLineFunctionsWithOffset } from '$root/utils/lineWithOffset.js'; import { getSubGraphTitleMargins } from '$root/utils/subGraphTitleMargins.js'; -import { addEdgeMarkers } from './edgeMarker.ts'; +import { curveBasis, line, select } from 'd3'; import rough from 'roughjs'; +import createLabel from './createLabel.js'; +import { addEdgeMarkers } from './edgeMarker.ts'; //import type { Edge } from '$root/rendering-util/types.d.ts'; let edgeLabels = {}; @@ -339,23 +328,23 @@ export const intersection = (node, outsidePoint, insidePoint) => { * and return an update path ending by the border of the node. * * @param {Array} _points - * @param {any} boundryNode + * @param {any} boundaryNode * @returns {Array} Points */ -const cutPathAtIntersect = (_points, boundryNode) => { - log.warn('abc88 cutPathAtIntersect', _points, boundryNode); +const cutPathAtIntersect = (_points, boundaryNode) => { + log.warn('abc88 cutPathAtIntersect', _points, boundaryNode); let points = []; let lastPointOutside = _points[0]; let isInside = false; _points.forEach((point) => { // const node = clusterDb[edge.toCluster].node; - log.info('abc88 checking point', point, boundryNode); + log.info('abc88 checking point', point, boundaryNode); // check if point is inside the boundary rect - if (!outsideNode(boundryNode, point) && !isInside) { + if (!outsideNode(boundaryNode, point) && !isInside) { // First point inside the rect found // Calc the intersection coord between the point anf the last point outside the rect - const inter = intersection(boundryNode, lastPointOutside, point); + const inter = intersection(boundaryNode, lastPointOutside, point); log.warn('abc88 inside', point, lastPointOutside, inter); log.warn('abc88 intersection', inter); @@ -386,26 +375,6 @@ const cutPathAtIntersect = (_points, boundryNode) => { return points; }; -const calcOffset = function (src, dest, parentLookupDb) { - const ancestor = findCommonAncestor(src, dest, parentLookupDb); - if (ancestor === undefined || ancestor === 'root') { - return { x: 0, y: 0 }; - } - - const ancestorOffset = nodeDb[ancestor].offset; - return { x: ancestorOffset.posX, y: ancestorOffset.posY }; -}; - -// Function to insert a midpoint -/** - * - * @param p1 - * @param p2 - */ -function insertMidpoint(p1, p2) { - return [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2]; -} - /** * Given an edge, this function will return the corner points of the edge. This is defined as: * one point that has a previous point and a next point such as the angle between the previous @@ -450,7 +419,7 @@ const findAdjacentPoint = function (pointA, pointB, distance) { }; /** - * Given an array of points, this function will return a new array of points where the cornershave been removed and replaced with + * Given an array of points, this function will return a new array of points where the corners have been removed and replaced with * adjacent points in each direction. SO a corder will be replaced with a point before and the point after the corner. */ diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts index c9e27cf8a..8248f3ddd 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts @@ -23,6 +23,7 @@ export const choice = (parent: SVG, node: Node) => { let choice; if (node.useRough) { + // @ts-ignore TODO: Fix rough typings const rc = rough.svg(shapeSvg); const pointArr = points.map(function (d) { return [d.x, d.y]; @@ -41,6 +42,7 @@ export const choice = (parent: SVG, node: Node) => { } // center the circle around its coordinate + // @ts-ignore TODO: Fix rough typings choice.attr('class', 'state-start').attr('r', 7).attr('width', 28).attr('height', 28); node.width = 28; node.height = 28; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts index 675ccee09..ac1b690c1 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts @@ -7,56 +7,49 @@ import { getConfig } from '$root/diagram-api/diagramAPI.js'; import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js'; import rough from 'roughjs'; -/** - * - * @param rect - * @param borders - * @param totalWidth - * @param totalHeight - */ -function applyNodePropertyBorders( - rect: d3.Selection, - borders: string | undefined, - totalWidth: number, - totalHeight: number -) { - if (!borders) { - return; - } - const strokeDashArray: number[] = []; - const addBorder = (length: number) => { - strokeDashArray.push(length, 0); - }; - const skipBorder = (length: number) => { - strokeDashArray.push(0, length); - }; - if (borders.includes('t')) { - log.debug('add top border'); - addBorder(totalWidth); - } else { - skipBorder(totalWidth); - } - if (borders.includes('r')) { - log.debug('add right border'); - addBorder(totalHeight); - } else { - skipBorder(totalHeight); - } - if (borders.includes('b')) { - log.debug('add bottom border'); - addBorder(totalWidth); - } else { - skipBorder(totalWidth); - } - if (borders.includes('l')) { - log.debug('add left border'); - addBorder(totalHeight); - } else { - skipBorder(totalHeight); - } +// function applyNodePropertyBorders( +// rect: d3.Selection, +// borders: string | undefined, +// totalWidth: number, +// totalHeight: number +// ) { +// if (!borders) { +// return; +// } +// const strokeDashArray: number[] = []; +// const addBorder = (length: number) => { +// strokeDashArray.push(length, 0); +// }; +// const skipBorder = (length: number) => { +// strokeDashArray.push(0, length); +// }; +// if (borders.includes('t')) { +// log.debug('add top border'); +// addBorder(totalWidth); +// } else { +// skipBorder(totalWidth); +// } +// if (borders.includes('r')) { +// log.debug('add right border'); +// addBorder(totalHeight); +// } else { +// skipBorder(totalHeight); +// } +// if (borders.includes('b')) { +// log.debug('add bottom border'); +// addBorder(totalWidth); +// } else { +// skipBorder(totalWidth); +// } +// if (borders.includes('l')) { +// log.debug('add left border'); +// addBorder(totalHeight); +// } else { +// skipBorder(totalHeight); +// } - rect.attr('stroke-dasharray', strokeDashArray.join(' ')); -} +// rect.attr('stroke-dasharray', strokeDashArray.join(' ')); +// } export const drawRect = async (parent: SVGAElement, node: Node, options: RectOptions) => { const { themeVariables, handdrawnSeed } = getConfig(); @@ -77,6 +70,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt let rect; const { rx, ry, cssStyles, useRough } = node; if (useRough) { + // @ts-ignore TODO: Fix rough typings const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, { roughness: 0.7, diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts index 687f18847..8ec8ab50c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts @@ -1,4 +1,3 @@ -import { log } from '$root/logger.js'; import { updateNodeBounds } from './util.js'; import intersect from '../intersect/index.js'; import type { Node } from '$root/rendering-util/types.d.ts'; @@ -27,6 +26,7 @@ export const forkJoin = (parent: SVG, node: Node, dir: string) => { let shape; if (node.useRough) { + // @ts-ignore TODO: Fix rough typings const rc = rough.svg(shapeSvg); const roughNode = rc.rectangle(x, y, width, height, solidStateFill(lineColor)); shape = shapeSvg.insert(() => roughNode); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts index 5ba4ba451..5843f558b 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts @@ -30,6 +30,7 @@ export const note = async (parent: SVGAElement, node: Node) => { if (useRough) { // add the rect + // @ts-ignore TODO: Fix rough typings const rc = rough.svg(shapeSvg); const roughNode = rc.rectangle(x, y, totalWidth, totalHeight, { roughness: 0.7, diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts index 47518a576..5f93d7a41 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts @@ -18,6 +18,7 @@ export const stateEnd = (parent: SVG, node: Node) => { let circle; let innerCircle; if (node.useRough) { + // @ts-ignore TODO: Fix rough typings const rc = rough.svg(shapeSvg); const roughNode = rc.circle(0, 0, 14, { ...solidStateFill(lineColor), roughness: 0.5 }); const roughInnerNode = rc.circle(0, 0, 5, { ...solidStateFill(lineColor), fillStyle: 'solid' }); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts index 9474902fa..c045266fd 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts @@ -18,6 +18,7 @@ export const stateStart = (parent: SVG, node: Node) => { let circle; if (node.useRough) { + // @ts-ignore TODO: Fix rough typings const rc = rough.svg(shapeSvg); const roughNode = rc.circle(0, 0, 14, solidStateFill(lineColor)); circle = shapeSvg.insert(() => roughNode); @@ -26,6 +27,7 @@ export const stateStart = (parent: SVG, node: Node) => { } // center the circle around its coordinate + // @ts-ignore TODO: Fix typings circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14); updateNodeBounds(node, circle);