@uigraph/sdk 1.2.4 → 1.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{__headless.BLqB7VsJ.d.mts → __headless.CnrU6aAA.d.mts} +1 -0
- package/dist/{__headless.DfSqiw4X.d.cts → __headless.D9VUj46t.d.cts} +1 -0
- package/dist/{__headless.DGmyg-me.cjs → __headless.DbTnxFi3.cjs} +1 -0
- package/dist/{__headless.DpdtlCFx.mjs → __headless.bq_YVz7q.mjs} +1 -0
- package/dist/{__index.Bvdu5Kox.d.mts → __index.BQQp_uAt.d.mts} +119 -1
- package/dist/{__index.YhKZQgFP.d.cts → __index.BVDt3Nmx.d.cts} +119 -1
- package/dist/browser.d.cts +1 -1
- package/dist/browser.d.mts +1 -1
- package/dist/headless.cjs +1 -1
- package/dist/headless.d.cts +1 -1
- package/dist/headless.d.mts +1 -1
- package/dist/headless.mjs +1 -1
- package/dist/index.cjs +863 -87
- package/dist/index.d.cts +97 -5
- package/dist/index.d.mts +97 -5
- package/dist/index.mjs +856 -86
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
const require_component_type = require("./__component-type.69UkUMKl.cjs");
|
|
2
|
-
const require_headless = require("./__headless.
|
|
2
|
+
const require_headless = require("./__headless.DbTnxFi3.cjs");
|
|
3
3
|
let daily_code = require("daily-code");
|
|
4
4
|
daily_code = require_component_type.__toESM(daily_code);
|
|
5
5
|
let zod = require("zod");
|
|
6
6
|
zod = require_component_type.__toESM(zod);
|
|
7
7
|
let __xyflow_react = require("@xyflow/react");
|
|
8
8
|
__xyflow_react = require_component_type.__toESM(__xyflow_react);
|
|
9
|
+
let markdown_to_quill_delta = require("markdown-to-quill-delta");
|
|
10
|
+
markdown_to_quill_delta = require_component_type.__toESM(markdown_to_quill_delta);
|
|
9
11
|
let dagre = require("dagre");
|
|
10
12
|
dagre = require_component_type.__toESM(dagre);
|
|
11
13
|
let mermaid = require("mermaid");
|
|
12
14
|
mermaid = require_component_type.__toESM(mermaid);
|
|
13
|
-
let markdown_to_quill_delta = require("markdown-to-quill-delta");
|
|
14
|
-
markdown_to_quill_delta = require_component_type.__toESM(markdown_to_quill_delta);
|
|
15
15
|
function mapDynamoTypeToAstType(dynamoType) {
|
|
16
16
|
switch (dynamoType) {
|
|
17
17
|
case "S": return "string";
|
|
@@ -1779,77 +1779,433 @@ function syncBaseData(prev, next, options) {
|
|
|
1779
1779
|
}
|
|
1780
1780
|
return updated;
|
|
1781
1781
|
}
|
|
1782
|
-
const
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
SUBGRAPH_CONTENT_TOP_MARGIN: 10,
|
|
1786
|
-
NODE_SEPARATION_HORIZONTAL: 80,
|
|
1787
|
-
NODE_SEPARATION_VERTICAL: 100,
|
|
1788
|
-
CONTAINER_SEPARATION_HORIZONTAL: 120,
|
|
1789
|
-
CONTAINER_SEPARATION_VERTICAL: 160,
|
|
1790
|
-
NESTED_SUBGRAPH_SEPARATION_HORIZONTAL: 120,
|
|
1791
|
-
NESTED_SUBGRAPH_SEPARATION_VERTICAL: 140,
|
|
1792
|
-
META_GRAPH_MARGIN: 100,
|
|
1793
|
-
NESTED_CONTENT_MARGIN: 40,
|
|
1794
|
-
MIXED_CONTENT_VERTICAL_SPACING: 100,
|
|
1795
|
-
MIXED_CONTENT_HORIZONTAL_SPACING: 120
|
|
1782
|
+
const DEFAULT_C4_LAYOUT = {
|
|
1783
|
+
c4ShapeInRow: 4,
|
|
1784
|
+
c4BoundaryInRow: 2
|
|
1796
1785
|
};
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
|
|
1786
|
+
function buildStereotype(keyword) {
|
|
1787
|
+
const suffix = keyword.shape === "db" ? "_db" : keyword.shape === "queue" ? "_queue" : "";
|
|
1788
|
+
return `${keyword.isExternal ? "external_" : ""}${keyword.kind}${suffix}`;
|
|
1789
|
+
}
|
|
1790
|
+
const C4_DIAGRAM_TYPES = [
|
|
1791
|
+
"C4Context",
|
|
1792
|
+
"C4Container",
|
|
1793
|
+
"C4Component",
|
|
1794
|
+
"C4Dynamic",
|
|
1795
|
+
"C4Deployment"
|
|
1796
|
+
];
|
|
1797
|
+
const ELEMENT_KINDS = {
|
|
1798
|
+
Person: "person",
|
|
1799
|
+
System: "system",
|
|
1800
|
+
Container: "container",
|
|
1801
|
+
Component: "component"
|
|
1801
1802
|
};
|
|
1802
|
-
const
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1803
|
+
const BOUNDARY_KEYWORDS = {
|
|
1804
|
+
Boundary: { kind: "generic" },
|
|
1805
|
+
Enterprise_Boundary: {
|
|
1806
|
+
kind: "enterprise",
|
|
1807
|
+
fixedType: "ENTERPRISE"
|
|
1808
|
+
},
|
|
1809
|
+
System_Boundary: {
|
|
1810
|
+
kind: "system",
|
|
1811
|
+
fixedType: "SYSTEM"
|
|
1812
|
+
},
|
|
1813
|
+
Container_Boundary: {
|
|
1814
|
+
kind: "container",
|
|
1815
|
+
fixedType: "CONTAINER"
|
|
1816
|
+
},
|
|
1817
|
+
Deployment_Node: {
|
|
1818
|
+
kind: "node",
|
|
1819
|
+
nodeType: "node"
|
|
1820
|
+
},
|
|
1821
|
+
Node: {
|
|
1822
|
+
kind: "node",
|
|
1823
|
+
nodeType: "node"
|
|
1824
|
+
},
|
|
1825
|
+
Node_L: {
|
|
1826
|
+
kind: "node",
|
|
1827
|
+
nodeType: "nodeL"
|
|
1828
|
+
},
|
|
1829
|
+
Node_R: {
|
|
1830
|
+
kind: "node",
|
|
1831
|
+
nodeType: "nodeR"
|
|
1832
|
+
}
|
|
1828
1833
|
};
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1834
|
+
const REL_DIRECTIONS = {
|
|
1835
|
+
Rel: "default",
|
|
1836
|
+
RelIndex: "default",
|
|
1837
|
+
BiRel: "bi",
|
|
1838
|
+
Rel_Back: "back",
|
|
1839
|
+
Rel_U: "up",
|
|
1840
|
+
Rel_Up: "up",
|
|
1841
|
+
Rel_D: "down",
|
|
1842
|
+
Rel_Down: "down",
|
|
1843
|
+
Rel_L: "left",
|
|
1844
|
+
Rel_Left: "left",
|
|
1845
|
+
Rel_R: "right",
|
|
1846
|
+
Rel_Right: "right",
|
|
1847
|
+
Rel_Neighbor: "default",
|
|
1848
|
+
BiRel_Neighbor: "bi"
|
|
1849
|
+
};
|
|
1850
|
+
const DIRECTIONS = [
|
|
1851
|
+
"TB",
|
|
1852
|
+
"BT",
|
|
1853
|
+
"LR",
|
|
1854
|
+
"RL"
|
|
1855
|
+
];
|
|
1856
|
+
function parseElementKeyword(keyword) {
|
|
1857
|
+
let rest = keyword;
|
|
1858
|
+
let isExternal = false;
|
|
1859
|
+
if (rest.endsWith("_Ext")) {
|
|
1860
|
+
isExternal = true;
|
|
1861
|
+
rest = rest.slice(0, -4);
|
|
1862
|
+
}
|
|
1863
|
+
let shape = "default";
|
|
1864
|
+
if (rest.endsWith("Db")) {
|
|
1865
|
+
shape = "db";
|
|
1866
|
+
rest = rest.slice(0, -2);
|
|
1867
|
+
} else if (rest.endsWith("Queue")) {
|
|
1868
|
+
shape = "queue";
|
|
1869
|
+
rest = rest.slice(0, -5);
|
|
1870
|
+
}
|
|
1871
|
+
const kind = ELEMENT_KINDS[rest];
|
|
1872
|
+
if (!kind) return null;
|
|
1873
|
+
return {
|
|
1874
|
+
kind,
|
|
1875
|
+
shape,
|
|
1876
|
+
isExternal
|
|
1877
|
+
};
|
|
1878
|
+
}
|
|
1879
|
+
function splitArguments(raw) {
|
|
1880
|
+
if (!raw.trim()) return [];
|
|
1881
|
+
const args = [];
|
|
1882
|
+
let current = "";
|
|
1883
|
+
let inQuotes = false;
|
|
1884
|
+
let depth = 0;
|
|
1885
|
+
for (let i = 0; i < raw.length; i++) {
|
|
1886
|
+
const char = raw[i];
|
|
1887
|
+
if (char === "\"" && raw[i - 1] !== "\\") {
|
|
1888
|
+
inQuotes = !inQuotes;
|
|
1889
|
+
current += char;
|
|
1890
|
+
continue;
|
|
1891
|
+
}
|
|
1892
|
+
if (!inQuotes && (char === "(" || char === "[")) depth++;
|
|
1893
|
+
if (!inQuotes && (char === ")" || char === "]")) depth--;
|
|
1894
|
+
if (char === "," && !inQuotes && depth === 0) {
|
|
1895
|
+
args.push(current.trim());
|
|
1896
|
+
current = "";
|
|
1897
|
+
continue;
|
|
1898
|
+
}
|
|
1899
|
+
current += char;
|
|
1848
1900
|
}
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1901
|
+
args.push(current.trim());
|
|
1902
|
+
return args;
|
|
1903
|
+
}
|
|
1904
|
+
function unquote(value) {
|
|
1905
|
+
const trimmed = value.trim();
|
|
1906
|
+
if (trimmed.startsWith("\"") && trimmed.endsWith("\"") && trimmed.length >= 2) return trimmed.slice(1, -1).replace(/\\"/g, "\"").replace(/<br\s*\/?>/gi, "\n").trim();
|
|
1907
|
+
return trimmed.replace(/<br\s*\/?>/gi, "\n");
|
|
1908
|
+
}
|
|
1909
|
+
function partitionArguments(args) {
|
|
1910
|
+
const positional = [];
|
|
1911
|
+
const named = {};
|
|
1912
|
+
for (const arg of args) {
|
|
1913
|
+
const match = arg.match(/^\$([A-Za-z0-9_]+)\s*=\s*([\s\S]*)$/);
|
|
1914
|
+
if (match) {
|
|
1915
|
+
named[match[1]] = unquote(match[2]);
|
|
1916
|
+
continue;
|
|
1917
|
+
}
|
|
1918
|
+
positional.push(unquote(arg));
|
|
1919
|
+
}
|
|
1920
|
+
return {
|
|
1921
|
+
positional,
|
|
1922
|
+
named
|
|
1923
|
+
};
|
|
1924
|
+
}
|
|
1925
|
+
function slot(positional, index) {
|
|
1926
|
+
const value = positional[index];
|
|
1927
|
+
if (value === void 0) return void 0;
|
|
1928
|
+
if (value === "") return void 0;
|
|
1929
|
+
return value;
|
|
1930
|
+
}
|
|
1931
|
+
function isC4Diagram(code) {
|
|
1932
|
+
for (const line of code.split("\n")) {
|
|
1933
|
+
const trimmed = line.trim();
|
|
1934
|
+
if (!trimmed || trimmed.startsWith("%%")) continue;
|
|
1935
|
+
return C4_DIAGRAM_TYPES.some((type) => trimmed.toLowerCase().startsWith(type.toLowerCase()));
|
|
1936
|
+
}
|
|
1937
|
+
return false;
|
|
1938
|
+
}
|
|
1939
|
+
function toStatements(code) {
|
|
1940
|
+
const statements = [];
|
|
1941
|
+
let buffer = "";
|
|
1942
|
+
let depth = 0;
|
|
1943
|
+
for (const rawLine of code.split("\n")) {
|
|
1944
|
+
const line = rawLine.replace(/%%.*$/, "").trim();
|
|
1945
|
+
if (!line) continue;
|
|
1946
|
+
buffer = buffer ? `${buffer} ${line}` : line;
|
|
1947
|
+
let inQuotes = false;
|
|
1948
|
+
for (let i = 0; i < line.length; i++) {
|
|
1949
|
+
const char = line[i];
|
|
1950
|
+
if (char === "\"" && line[i - 1] !== "\\") inQuotes = !inQuotes;
|
|
1951
|
+
if (inQuotes) continue;
|
|
1952
|
+
if (char === "(") depth++;
|
|
1953
|
+
if (char === ")") depth--;
|
|
1954
|
+
}
|
|
1955
|
+
if (depth > 0) continue;
|
|
1956
|
+
depth = 0;
|
|
1957
|
+
statements.push(...splitOnBraces(buffer));
|
|
1958
|
+
buffer = "";
|
|
1959
|
+
}
|
|
1960
|
+
if (buffer) statements.push(...splitOnBraces(buffer));
|
|
1961
|
+
return statements;
|
|
1962
|
+
}
|
|
1963
|
+
function splitOnBraces(buffer) {
|
|
1964
|
+
const statements = [];
|
|
1965
|
+
let current = "";
|
|
1966
|
+
let inQuotes = false;
|
|
1967
|
+
let depth = 0;
|
|
1968
|
+
function flush() {
|
|
1969
|
+
if (current.trim()) statements.push(current.trim());
|
|
1970
|
+
current = "";
|
|
1971
|
+
}
|
|
1972
|
+
for (let i = 0; i < buffer.length; i++) {
|
|
1973
|
+
const char = buffer[i];
|
|
1974
|
+
if (char === "\"" && buffer[i - 1] !== "\\") inQuotes = !inQuotes;
|
|
1975
|
+
if (!inQuotes && char === "(") depth++;
|
|
1976
|
+
if (!inQuotes && char === ")") depth--;
|
|
1977
|
+
if (!inQuotes && depth === 0 && char === "{") {
|
|
1978
|
+
current += char;
|
|
1979
|
+
flush();
|
|
1980
|
+
continue;
|
|
1981
|
+
}
|
|
1982
|
+
if (!inQuotes && depth === 0 && char === "}") {
|
|
1983
|
+
flush();
|
|
1984
|
+
statements.push("}");
|
|
1985
|
+
continue;
|
|
1986
|
+
}
|
|
1987
|
+
current += char;
|
|
1988
|
+
}
|
|
1989
|
+
flush();
|
|
1990
|
+
return statements;
|
|
1991
|
+
}
|
|
1992
|
+
function parseC4Diagram(code) {
|
|
1993
|
+
const elements = [];
|
|
1994
|
+
const boundaries = [];
|
|
1995
|
+
const relationships = [];
|
|
1996
|
+
const elementStyles = {};
|
|
1997
|
+
const boundaryStyles = {};
|
|
1998
|
+
const relStyles = {};
|
|
1999
|
+
const layout = _objectSpread2({}, DEFAULT_C4_LAYOUT);
|
|
2000
|
+
let type = "C4Context";
|
|
2001
|
+
let title;
|
|
2002
|
+
let accTitle;
|
|
2003
|
+
let accDescription;
|
|
2004
|
+
let direction;
|
|
2005
|
+
const boundaryStack = [];
|
|
2006
|
+
let anonymousBoundaryCount = 0;
|
|
2007
|
+
let accDescrLines;
|
|
2008
|
+
function currentParentId() {
|
|
2009
|
+
return boundaryStack[boundaryStack.length - 1];
|
|
2010
|
+
}
|
|
2011
|
+
function registerChild(childId) {
|
|
2012
|
+
const parentId = currentParentId();
|
|
2013
|
+
if (!parentId) return;
|
|
2014
|
+
const parent = boundaries.find((boundary) => boundary.id === parentId);
|
|
2015
|
+
if (!parent) return;
|
|
2016
|
+
if (parent.childIds.includes(childId)) return;
|
|
2017
|
+
parent.childIds.push(childId);
|
|
2018
|
+
}
|
|
2019
|
+
for (const statement of toStatements(code)) {
|
|
2020
|
+
if (accDescrLines) {
|
|
2021
|
+
if (statement === "}") {
|
|
2022
|
+
accDescription = accDescrLines.join("\n").trim();
|
|
2023
|
+
accDescrLines = void 0;
|
|
2024
|
+
continue;
|
|
2025
|
+
}
|
|
2026
|
+
accDescrLines.push(statement);
|
|
2027
|
+
continue;
|
|
2028
|
+
}
|
|
2029
|
+
const detectedType = C4_DIAGRAM_TYPES.find((candidate) => statement.toLowerCase().startsWith(candidate.toLowerCase()));
|
|
2030
|
+
if (detectedType) {
|
|
2031
|
+
type = detectedType;
|
|
2032
|
+
continue;
|
|
2033
|
+
}
|
|
2034
|
+
if (statement === "}") {
|
|
2035
|
+
boundaryStack.pop();
|
|
2036
|
+
continue;
|
|
2037
|
+
}
|
|
2038
|
+
const directionMatch = statement.match(/^direction\s+(TB|BT|LR|RL)$/i);
|
|
2039
|
+
if (directionMatch) {
|
|
2040
|
+
direction = DIRECTIONS.find((candidate) => candidate === directionMatch[1].toUpperCase());
|
|
2041
|
+
continue;
|
|
2042
|
+
}
|
|
2043
|
+
const accTitleMatch = statement.match(/^accTitle\s*:\s*(.*)$/i);
|
|
2044
|
+
if (accTitleMatch) {
|
|
2045
|
+
accTitle = unquote(accTitleMatch[1]);
|
|
2046
|
+
continue;
|
|
2047
|
+
}
|
|
2048
|
+
if (/^accDescr\s*\{$/i.test(statement)) {
|
|
2049
|
+
accDescrLines = [];
|
|
2050
|
+
continue;
|
|
2051
|
+
}
|
|
2052
|
+
const accDescrMatch = statement.match(/^accDescr\s*:\s*(.*)$/i);
|
|
2053
|
+
if (accDescrMatch) {
|
|
2054
|
+
accDescription = unquote(accDescrMatch[1]);
|
|
2055
|
+
continue;
|
|
2056
|
+
}
|
|
2057
|
+
const titleMatch = statement.match(/^title\s+(.*)$/i);
|
|
2058
|
+
if (titleMatch) {
|
|
2059
|
+
title = unquote(titleMatch[1]);
|
|
2060
|
+
continue;
|
|
2061
|
+
}
|
|
2062
|
+
const callMatch = statement.match(/^([A-Za-z_][A-Za-z0-9_]*)\s*\(([\s\S]*)\)\s*(\{)?\s*$/);
|
|
2063
|
+
if (!callMatch) continue;
|
|
2064
|
+
const [, keyword, rawArgs, openBrace] = callMatch;
|
|
2065
|
+
const { positional, named } = partitionArguments(splitArguments(rawArgs));
|
|
2066
|
+
if (keyword === "UpdateLayoutConfig") {
|
|
2067
|
+
var _named$c4ShapeInRow, _named$c4BoundaryInRo;
|
|
2068
|
+
const inRow = (_named$c4ShapeInRow = named.c4ShapeInRow) !== null && _named$c4ShapeInRow !== void 0 ? _named$c4ShapeInRow : slot(positional, 0);
|
|
2069
|
+
const boundaryInRow = (_named$c4BoundaryInRo = named.c4BoundaryInRow) !== null && _named$c4BoundaryInRo !== void 0 ? _named$c4BoundaryInRo : slot(positional, 1);
|
|
2070
|
+
if (inRow) layout.c4ShapeInRow = Number(inRow) || layout.c4ShapeInRow;
|
|
2071
|
+
if (boundaryInRow) layout.c4BoundaryInRow = Number(boundaryInRow) || layout.c4BoundaryInRow;
|
|
2072
|
+
continue;
|
|
2073
|
+
}
|
|
2074
|
+
if (keyword === "UpdateElementStyle" || keyword === "UpdateBoundaryStyle") {
|
|
2075
|
+
var _named$shadowing, _named$bgColor, _named$fontColor, _named$borderColor, _named$shape, _named$sprite, _named$techn, _named$legendText, _named$legendSprite;
|
|
2076
|
+
const target = slot(positional, 0);
|
|
2077
|
+
if (!target) continue;
|
|
2078
|
+
const shadowing = (_named$shadowing = named.shadowing) !== null && _named$shadowing !== void 0 ? _named$shadowing : slot(positional, 4);
|
|
2079
|
+
const style = {
|
|
2080
|
+
bgColor: (_named$bgColor = named.bgColor) !== null && _named$bgColor !== void 0 ? _named$bgColor : slot(positional, 1),
|
|
2081
|
+
fontColor: (_named$fontColor = named.fontColor) !== null && _named$fontColor !== void 0 ? _named$fontColor : slot(positional, 2),
|
|
2082
|
+
borderColor: (_named$borderColor = named.borderColor) !== null && _named$borderColor !== void 0 ? _named$borderColor : slot(positional, 3),
|
|
2083
|
+
shadowing: shadowing === void 0 ? void 0 : shadowing === "true",
|
|
2084
|
+
shape: (_named$shape = named.shape) !== null && _named$shape !== void 0 ? _named$shape : slot(positional, 5),
|
|
2085
|
+
sprite: (_named$sprite = named.sprite) !== null && _named$sprite !== void 0 ? _named$sprite : slot(positional, 6),
|
|
2086
|
+
techn: (_named$techn = named.techn) !== null && _named$techn !== void 0 ? _named$techn : slot(positional, 7),
|
|
2087
|
+
legendText: (_named$legendText = named.legendText) !== null && _named$legendText !== void 0 ? _named$legendText : slot(positional, 8),
|
|
2088
|
+
legendSprite: (_named$legendSprite = named.legendSprite) !== null && _named$legendSprite !== void 0 ? _named$legendSprite : slot(positional, 9)
|
|
2089
|
+
};
|
|
2090
|
+
if (keyword === "UpdateBoundaryStyle") boundaryStyles[target] = style;
|
|
2091
|
+
else elementStyles[target] = style;
|
|
2092
|
+
continue;
|
|
2093
|
+
}
|
|
2094
|
+
if (keyword === "UpdateRelStyle") {
|
|
2095
|
+
var _named$offsetX, _named$offsetY, _named$textColor, _named$lineColor;
|
|
2096
|
+
const from = slot(positional, 0);
|
|
2097
|
+
const to = slot(positional, 1);
|
|
2098
|
+
if (!from || !to) continue;
|
|
2099
|
+
const offsetX = (_named$offsetX = named.offsetX) !== null && _named$offsetX !== void 0 ? _named$offsetX : slot(positional, 4);
|
|
2100
|
+
const offsetY = (_named$offsetY = named.offsetY) !== null && _named$offsetY !== void 0 ? _named$offsetY : slot(positional, 5);
|
|
2101
|
+
const lineWidth = named.lineWidth;
|
|
2102
|
+
relStyles[`${from}->${to}`] = {
|
|
2103
|
+
textColor: (_named$textColor = named.textColor) !== null && _named$textColor !== void 0 ? _named$textColor : slot(positional, 2),
|
|
2104
|
+
lineColor: (_named$lineColor = named.lineColor) !== null && _named$lineColor !== void 0 ? _named$lineColor : slot(positional, 3),
|
|
2105
|
+
offsetX: offsetX === void 0 ? void 0 : Number(offsetX),
|
|
2106
|
+
offsetY: offsetY === void 0 ? void 0 : Number(offsetY),
|
|
2107
|
+
lineWidth: lineWidth === void 0 ? void 0 : Number(lineWidth),
|
|
2108
|
+
lineStyle: named.lineStyle
|
|
2109
|
+
};
|
|
2110
|
+
continue;
|
|
2111
|
+
}
|
|
2112
|
+
if (/^(SHOW_|HIDE_)/.test(keyword)) continue;
|
|
2113
|
+
const boundaryKeyword = BOUNDARY_KEYWORDS[keyword];
|
|
2114
|
+
if (boundaryKeyword) {
|
|
2115
|
+
var _slot, _ref, _ref2, _boundaryKeyword$fixe, _slot2, _named$descr, _named$sprite2, _named$tags;
|
|
2116
|
+
const id = (_slot = slot(positional, 0)) !== null && _slot !== void 0 ? _slot : `boundary-${++anonymousBoundaryCount}`;
|
|
2117
|
+
const isNode = boundaryKeyword.nodeType !== void 0;
|
|
2118
|
+
const defaultType = isNode ? "node" : "system";
|
|
2119
|
+
const boundaryType = (_ref = (_ref2 = (_boundaryKeyword$fixe = boundaryKeyword.fixedType) !== null && _boundaryKeyword$fixe !== void 0 ? _boundaryKeyword$fixe : named.type) !== null && _ref2 !== void 0 ? _ref2 : slot(positional, 2)) !== null && _ref !== void 0 ? _ref : defaultType;
|
|
2120
|
+
const tagsIndex = boundaryKeyword.fixedType ? 2 : isNode ? 5 : 3;
|
|
2121
|
+
const boundary = {
|
|
2122
|
+
id,
|
|
2123
|
+
label: (_slot2 = slot(positional, 1)) !== null && _slot2 !== void 0 ? _slot2 : id,
|
|
2124
|
+
kind: boundaryKeyword.kind,
|
|
2125
|
+
type: boundaryType,
|
|
2126
|
+
description: isNode ? (_named$descr = named.descr) !== null && _named$descr !== void 0 ? _named$descr : slot(positional, 3) : named.descr,
|
|
2127
|
+
nodeType: boundaryKeyword.nodeType,
|
|
2128
|
+
parentId: currentParentId(),
|
|
2129
|
+
childIds: [],
|
|
2130
|
+
sprite: (_named$sprite2 = named.sprite) !== null && _named$sprite2 !== void 0 ? _named$sprite2 : isNode ? slot(positional, 4) : void 0,
|
|
2131
|
+
tags: (_named$tags = named.tags) !== null && _named$tags !== void 0 ? _named$tags : slot(positional, tagsIndex),
|
|
2132
|
+
link: named.link
|
|
2133
|
+
};
|
|
2134
|
+
registerChild(id);
|
|
2135
|
+
const existing = boundaries.findIndex((entry) => entry.id === id);
|
|
2136
|
+
if (existing === -1) boundaries.push(boundary);
|
|
2137
|
+
else boundaries[existing] = _objectSpread2(_objectSpread2({}, boundary), {}, { childIds: boundaries[existing].childIds });
|
|
2138
|
+
if (openBrace) boundaryStack.push(id);
|
|
2139
|
+
continue;
|
|
2140
|
+
}
|
|
2141
|
+
const relDirection = REL_DIRECTIONS[keyword];
|
|
2142
|
+
if (relDirection) {
|
|
2143
|
+
var _slot3, _named$techn2, _named$descr2, _named$sprite3, _named$tags2;
|
|
2144
|
+
const args = keyword === "RelIndex" ? positional.slice(1) : positional;
|
|
2145
|
+
const from = slot(args, 0);
|
|
2146
|
+
const to = slot(args, 1);
|
|
2147
|
+
if (!from || !to) continue;
|
|
2148
|
+
const relationship = {
|
|
2149
|
+
from,
|
|
2150
|
+
to,
|
|
2151
|
+
label: (_slot3 = slot(args, 2)) !== null && _slot3 !== void 0 ? _slot3 : "",
|
|
2152
|
+
technology: (_named$techn2 = named.techn) !== null && _named$techn2 !== void 0 ? _named$techn2 : slot(args, 3),
|
|
2153
|
+
description: (_named$descr2 = named.descr) !== null && _named$descr2 !== void 0 ? _named$descr2 : slot(args, 4),
|
|
2154
|
+
direction: relDirection,
|
|
2155
|
+
index: relationships.length,
|
|
2156
|
+
sprite: (_named$sprite3 = named.sprite) !== null && _named$sprite3 !== void 0 ? _named$sprite3 : slot(args, 5),
|
|
2157
|
+
tags: (_named$tags2 = named.tags) !== null && _named$tags2 !== void 0 ? _named$tags2 : slot(args, 6),
|
|
2158
|
+
link: named.link
|
|
2159
|
+
};
|
|
2160
|
+
const existing = relationships.findIndex((entry) => entry.from === from && entry.to === to);
|
|
2161
|
+
if (existing === -1) relationships.push(relationship);
|
|
2162
|
+
else relationships[existing] = _objectSpread2(_objectSpread2({}, relationship), {}, { index: relationships[existing].index });
|
|
2163
|
+
continue;
|
|
2164
|
+
}
|
|
2165
|
+
const elementKeyword = parseElementKeyword(keyword);
|
|
2166
|
+
if (elementKeyword) {
|
|
2167
|
+
var _slot4, _named$techn3, _named$descr3, _named$sprite4, _named$tags3;
|
|
2168
|
+
const id = slot(positional, 0);
|
|
2169
|
+
if (!id) continue;
|
|
2170
|
+
const hasTechnologySlot = elementKeyword.kind === "container" || elementKeyword.kind === "component";
|
|
2171
|
+
const descrIndex = hasTechnologySlot ? 3 : 2;
|
|
2172
|
+
const link = named.link;
|
|
2173
|
+
const element = {
|
|
2174
|
+
id,
|
|
2175
|
+
label: (_slot4 = slot(positional, 1)) !== null && _slot4 !== void 0 ? _slot4 : id,
|
|
2176
|
+
technology: (_named$techn3 = named.techn) !== null && _named$techn3 !== void 0 ? _named$techn3 : hasTechnologySlot ? slot(positional, 2) : void 0,
|
|
2177
|
+
description: (_named$descr3 = named.descr) !== null && _named$descr3 !== void 0 ? _named$descr3 : slot(positional, descrIndex),
|
|
2178
|
+
kind: elementKeyword.kind,
|
|
2179
|
+
shape: elementKeyword.shape,
|
|
2180
|
+
isExternal: elementKeyword.isExternal,
|
|
2181
|
+
stereotype: buildStereotype(elementKeyword),
|
|
2182
|
+
parentId: currentParentId(),
|
|
2183
|
+
sprite: (_named$sprite4 = named.sprite) !== null && _named$sprite4 !== void 0 ? _named$sprite4 : slot(positional, descrIndex + 1),
|
|
2184
|
+
tags: (_named$tags3 = named.tags) !== null && _named$tags3 !== void 0 ? _named$tags3 : slot(positional, descrIndex + 2),
|
|
2185
|
+
link,
|
|
2186
|
+
subDiagramId: (link === null || link === void 0 ? void 0 : link.startsWith("uig:")) ? link.slice(4) : void 0
|
|
2187
|
+
};
|
|
2188
|
+
registerChild(id);
|
|
2189
|
+
const existing = elements.findIndex((entry) => entry.id === id);
|
|
2190
|
+
if (existing === -1) elements.push(element);
|
|
2191
|
+
else elements[existing] = element;
|
|
2192
|
+
continue;
|
|
2193
|
+
}
|
|
2194
|
+
}
|
|
2195
|
+
return {
|
|
2196
|
+
type,
|
|
2197
|
+
title,
|
|
2198
|
+
accTitle,
|
|
2199
|
+
accDescription,
|
|
2200
|
+
direction,
|
|
2201
|
+
elements,
|
|
2202
|
+
boundaries,
|
|
2203
|
+
relationships,
|
|
2204
|
+
elementStyles,
|
|
2205
|
+
boundaryStyles,
|
|
2206
|
+
relStyles,
|
|
2207
|
+
layout
|
|
2208
|
+
};
|
|
1853
2209
|
}
|
|
1854
2210
|
function flattenMetaData(fields, fieldsValues) {
|
|
1855
2211
|
const output = {};
|
|
@@ -1987,6 +2343,423 @@ function getComponentFieldByLabel(fields, label) {
|
|
|
1987
2343
|
return ((_field$label = field.label) === null || _field$label === void 0 ? void 0 : _field$label.toLowerCase()) === label.toLowerCase();
|
|
1988
2344
|
});
|
|
1989
2345
|
}
|
|
2346
|
+
const C4_LAYOUT = {
|
|
2347
|
+
WIDTH: 240,
|
|
2348
|
+
MIN_HEIGHT: 80,
|
|
2349
|
+
SHAPE_MARGIN: 90,
|
|
2350
|
+
ROW_MARGIN: 80,
|
|
2351
|
+
SHAPE_PADDING: 24,
|
|
2352
|
+
BOUNDARY_HEADER: 72,
|
|
2353
|
+
BOUNDARY_PADDING: 48,
|
|
2354
|
+
BOUNDARY_MARGIN: 60,
|
|
2355
|
+
DIAGRAM_MARGIN_X: 60,
|
|
2356
|
+
DIAGRAM_MARGIN_Y: 40
|
|
2357
|
+
};
|
|
2358
|
+
const C4_COLORS = {
|
|
2359
|
+
person: {
|
|
2360
|
+
fill: "#08427B",
|
|
2361
|
+
stroke: "#052E56"
|
|
2362
|
+
},
|
|
2363
|
+
personExternal: {
|
|
2364
|
+
fill: "#686868",
|
|
2365
|
+
stroke: "#4D4D4D"
|
|
2366
|
+
},
|
|
2367
|
+
system: {
|
|
2368
|
+
fill: "#1168BD",
|
|
2369
|
+
stroke: "#0B4884"
|
|
2370
|
+
},
|
|
2371
|
+
systemExternal: {
|
|
2372
|
+
fill: "#999999",
|
|
2373
|
+
stroke: "#6B6B6B"
|
|
2374
|
+
},
|
|
2375
|
+
container: {
|
|
2376
|
+
fill: "#438DD5",
|
|
2377
|
+
stroke: "#2E6295"
|
|
2378
|
+
},
|
|
2379
|
+
containerExternal: {
|
|
2380
|
+
fill: "#B3B3B3",
|
|
2381
|
+
stroke: "#8A8A8A"
|
|
2382
|
+
},
|
|
2383
|
+
component: {
|
|
2384
|
+
fill: "#85BBF0",
|
|
2385
|
+
stroke: "#5D82A8"
|
|
2386
|
+
},
|
|
2387
|
+
componentExternal: {
|
|
2388
|
+
fill: "#CCCCCC",
|
|
2389
|
+
stroke: "#A6A6A6"
|
|
2390
|
+
},
|
|
2391
|
+
node: {
|
|
2392
|
+
fill: "#1F2937",
|
|
2393
|
+
stroke: "#4B5563"
|
|
2394
|
+
},
|
|
2395
|
+
nodeExternal: {
|
|
2396
|
+
fill: "#374151",
|
|
2397
|
+
stroke: "#6B7280"
|
|
2398
|
+
}
|
|
2399
|
+
};
|
|
2400
|
+
const BOUNDARY_BORDER = "#828DA3";
|
|
2401
|
+
function getC4ElementColors(element) {
|
|
2402
|
+
var _C4_COLORS$key;
|
|
2403
|
+
return (_C4_COLORS$key = C4_COLORS[element.isExternal ? `${element.kind}External` : element.kind]) !== null && _C4_COLORS$key !== void 0 ? _C4_COLORS$key : C4_COLORS.system;
|
|
2404
|
+
}
|
|
2405
|
+
const NAME_LINE_HEIGHT = 22;
|
|
2406
|
+
const SMALL_LINE_HEIGHT = 18;
|
|
2407
|
+
const PERSON_GLYPH = 30;
|
|
2408
|
+
const CYLINDER_LIPS = 34;
|
|
2409
|
+
const QUEUE_CAPS = 68;
|
|
2410
|
+
function wrappedLines(text, usableWidth, charWidth) {
|
|
2411
|
+
if (!text) return 0;
|
|
2412
|
+
const charsPerLine = Math.max(6, Math.floor(usableWidth / charWidth));
|
|
2413
|
+
return text.split("\n").reduce((total, line) => total + Math.max(1, Math.ceil(line.length / charsPerLine)), 0);
|
|
2414
|
+
}
|
|
2415
|
+
function measureElement(element) {
|
|
2416
|
+
let usableWidth = C4_LAYOUT.WIDTH - C4_LAYOUT.SHAPE_PADDING * 2;
|
|
2417
|
+
if (element.shape === "queue") usableWidth -= QUEUE_CAPS;
|
|
2418
|
+
let height = C4_LAYOUT.SHAPE_PADDING * 2;
|
|
2419
|
+
height += SMALL_LINE_HEIGHT;
|
|
2420
|
+
if (element.kind === "person") height += PERSON_GLYPH;
|
|
2421
|
+
height += wrappedLines(element.label, usableWidth, 8.6) * NAME_LINE_HEIGHT;
|
|
2422
|
+
if (element.technology) height += SMALL_LINE_HEIGHT;
|
|
2423
|
+
height += wrappedLines(element.description, usableWidth, 5.9) * SMALL_LINE_HEIGHT;
|
|
2424
|
+
if (element.shape === "db") height += CYLINDER_LIPS;
|
|
2425
|
+
return {
|
|
2426
|
+
width: C4_LAYOUT.WIDTH,
|
|
2427
|
+
height: Math.max(C4_LAYOUT.MIN_HEIGHT, height)
|
|
2428
|
+
};
|
|
2429
|
+
}
|
|
2430
|
+
function layoutContainer(containerId, data, childrenOf, elementById, placements) {
|
|
2431
|
+
var _childrenOf$get;
|
|
2432
|
+
const childIds = (_childrenOf$get = childrenOf.get(containerId)) !== null && _childrenOf$get !== void 0 ? _childrenOf$get : [];
|
|
2433
|
+
const shapeIds = childIds.filter((id) => elementById.has(id));
|
|
2434
|
+
const boundaryIds = childIds.filter((id) => !elementById.has(id));
|
|
2435
|
+
const originX = containerId ? C4_LAYOUT.BOUNDARY_PADDING : C4_LAYOUT.DIAGRAM_MARGIN_X;
|
|
2436
|
+
const originY = containerId ? C4_LAYOUT.BOUNDARY_HEADER : C4_LAYOUT.DIAGRAM_MARGIN_Y;
|
|
2437
|
+
let cursorY = originY;
|
|
2438
|
+
let maxX = originX;
|
|
2439
|
+
let lastMargin = 0;
|
|
2440
|
+
const perRow = Math.max(1, data.layout.c4ShapeInRow);
|
|
2441
|
+
for (let index = 0; index < shapeIds.length; index += perRow) {
|
|
2442
|
+
const row = shapeIds.slice(index, index + perRow);
|
|
2443
|
+
let rowHeight = 0;
|
|
2444
|
+
row.forEach((id, column) => {
|
|
2445
|
+
const size = measureElement(elementById.get(id));
|
|
2446
|
+
const x = originX + column * (C4_LAYOUT.WIDTH + C4_LAYOUT.SHAPE_MARGIN);
|
|
2447
|
+
placements.set(id, {
|
|
2448
|
+
x,
|
|
2449
|
+
y: cursorY,
|
|
2450
|
+
width: size.width,
|
|
2451
|
+
height: size.height
|
|
2452
|
+
});
|
|
2453
|
+
rowHeight = Math.max(rowHeight, size.height);
|
|
2454
|
+
maxX = Math.max(maxX, x + size.width);
|
|
2455
|
+
});
|
|
2456
|
+
cursorY += rowHeight + C4_LAYOUT.ROW_MARGIN;
|
|
2457
|
+
lastMargin = C4_LAYOUT.ROW_MARGIN;
|
|
2458
|
+
}
|
|
2459
|
+
const boundarySizes = /* @__PURE__ */ new Map();
|
|
2460
|
+
for (const id of boundaryIds) boundarySizes.set(id, layoutContainer(id, data, childrenOf, elementById, placements));
|
|
2461
|
+
const boundariesPerRow = Math.max(1, data.layout.c4BoundaryInRow);
|
|
2462
|
+
for (let index = 0; index < boundaryIds.length; index += boundariesPerRow) {
|
|
2463
|
+
const row = boundaryIds.slice(index, index + boundariesPerRow);
|
|
2464
|
+
let rowHeight = 0;
|
|
2465
|
+
let cursorX = originX;
|
|
2466
|
+
for (const id of row) {
|
|
2467
|
+
const size = boundarySizes.get(id);
|
|
2468
|
+
placements.set(id, {
|
|
2469
|
+
x: cursorX,
|
|
2470
|
+
y: cursorY,
|
|
2471
|
+
width: size.width,
|
|
2472
|
+
height: size.height
|
|
2473
|
+
});
|
|
2474
|
+
cursorX += size.width + C4_LAYOUT.BOUNDARY_MARGIN;
|
|
2475
|
+
rowHeight = Math.max(rowHeight, size.height);
|
|
2476
|
+
maxX = Math.max(maxX, cursorX - C4_LAYOUT.BOUNDARY_MARGIN);
|
|
2477
|
+
}
|
|
2478
|
+
cursorY += rowHeight + C4_LAYOUT.BOUNDARY_MARGIN;
|
|
2479
|
+
lastMargin = C4_LAYOUT.BOUNDARY_MARGIN;
|
|
2480
|
+
}
|
|
2481
|
+
const hasChildren = shapeIds.length > 0 || boundaryIds.length > 0;
|
|
2482
|
+
const trailing = containerId ? C4_LAYOUT.BOUNDARY_PADDING : C4_LAYOUT.DIAGRAM_MARGIN_Y;
|
|
2483
|
+
if (!hasChildren) return {
|
|
2484
|
+
width: C4_LAYOUT.WIDTH + originX + trailing,
|
|
2485
|
+
height: C4_LAYOUT.MIN_HEIGHT + originY + trailing
|
|
2486
|
+
};
|
|
2487
|
+
return {
|
|
2488
|
+
width: maxX + originX,
|
|
2489
|
+
height: cursorY - lastMargin + trailing
|
|
2490
|
+
};
|
|
2491
|
+
}
|
|
2492
|
+
function resolveSide(direction, from, to) {
|
|
2493
|
+
if (direction === "up") return {
|
|
2494
|
+
source: "top",
|
|
2495
|
+
target: "bottom"
|
|
2496
|
+
};
|
|
2497
|
+
if (direction === "down") return {
|
|
2498
|
+
source: "bottom",
|
|
2499
|
+
target: "top"
|
|
2500
|
+
};
|
|
2501
|
+
if (direction === "left") return {
|
|
2502
|
+
source: "left",
|
|
2503
|
+
target: "right"
|
|
2504
|
+
};
|
|
2505
|
+
if (direction === "right") return {
|
|
2506
|
+
source: "right",
|
|
2507
|
+
target: "left"
|
|
2508
|
+
};
|
|
2509
|
+
const dx = to.x - from.x;
|
|
2510
|
+
const dy = to.y - from.y;
|
|
2511
|
+
if (Math.abs(dx) > Math.abs(dy)) {
|
|
2512
|
+
if (dx >= 0) return {
|
|
2513
|
+
source: "right",
|
|
2514
|
+
target: "left"
|
|
2515
|
+
};
|
|
2516
|
+
return {
|
|
2517
|
+
source: "left",
|
|
2518
|
+
target: "right"
|
|
2519
|
+
};
|
|
2520
|
+
}
|
|
2521
|
+
if (dy >= 0) return {
|
|
2522
|
+
source: "bottom",
|
|
2523
|
+
target: "top"
|
|
2524
|
+
};
|
|
2525
|
+
return {
|
|
2526
|
+
source: "top",
|
|
2527
|
+
target: "bottom"
|
|
2528
|
+
};
|
|
2529
|
+
}
|
|
2530
|
+
function applyElementStyle(base, style) {
|
|
2531
|
+
var _style$bgColor, _style$borderColor;
|
|
2532
|
+
return {
|
|
2533
|
+
fill: (_style$bgColor = style === null || style === void 0 ? void 0 : style.bgColor) !== null && _style$bgColor !== void 0 ? _style$bgColor : base.fill,
|
|
2534
|
+
stroke: (_style$borderColor = style === null || style === void 0 ? void 0 : style.borderColor) !== null && _style$borderColor !== void 0 ? _style$borderColor : base.stroke,
|
|
2535
|
+
fontColor: style === null || style === void 0 ? void 0 : style.fontColor
|
|
2536
|
+
};
|
|
2537
|
+
}
|
|
2538
|
+
function convertC4ToReactFlow(data) {
|
|
2539
|
+
const elementById = new Map(data.elements.map((el) => [el.id, el]));
|
|
2540
|
+
const boundaryById = new Map(data.boundaries.map((b) => [b.id, b]));
|
|
2541
|
+
const childrenOf = /* @__PURE__ */ new Map();
|
|
2542
|
+
function attach(id, parentId) {
|
|
2543
|
+
var _childrenOf$get2;
|
|
2544
|
+
const siblings = (_childrenOf$get2 = childrenOf.get(parentId)) !== null && _childrenOf$get2 !== void 0 ? _childrenOf$get2 : [];
|
|
2545
|
+
siblings.push(id);
|
|
2546
|
+
childrenOf.set(parentId, siblings);
|
|
2547
|
+
}
|
|
2548
|
+
for (const boundary of data.boundaries) attach(boundary.id, boundary.parentId);
|
|
2549
|
+
for (const element of data.elements) attach(element.id, element.parentId);
|
|
2550
|
+
const placements = /* @__PURE__ */ new Map();
|
|
2551
|
+
layoutContainer(void 0, data, childrenOf, elementById, placements);
|
|
2552
|
+
const nodes = [];
|
|
2553
|
+
for (const boundary of data.boundaries) {
|
|
2554
|
+
var _data$boundaryStyles$, _style$bgColor2, _style$borderColor2;
|
|
2555
|
+
const placement = placements.get(boundary.id);
|
|
2556
|
+
if (!placement) continue;
|
|
2557
|
+
const style = (_data$boundaryStyles$ = data.boundaryStyles[boundary.id]) !== null && _data$boundaryStyles$ !== void 0 ? _data$boundaryStyles$ : data.elementStyles[boundary.id];
|
|
2558
|
+
nodes.push({
|
|
2559
|
+
id: boundary.id,
|
|
2560
|
+
type: "c4Boundary",
|
|
2561
|
+
position: {
|
|
2562
|
+
x: placement.x,
|
|
2563
|
+
y: placement.y
|
|
2564
|
+
},
|
|
2565
|
+
data: {
|
|
2566
|
+
source: "mermaid",
|
|
2567
|
+
c4BoundaryKind: boundary.kind,
|
|
2568
|
+
boundaryType: boundary.type,
|
|
2569
|
+
description: boundary.description,
|
|
2570
|
+
c4NodeType: boundary.nodeType,
|
|
2571
|
+
link: boundary.link,
|
|
2572
|
+
backgroundColor: (_style$bgColor2 = style === null || style === void 0 ? void 0 : style.bgColor) !== null && _style$bgColor2 !== void 0 ? _style$bgColor2 : "transparent",
|
|
2573
|
+
borderColor: (_style$borderColor2 = style === null || style === void 0 ? void 0 : style.borderColor) !== null && _style$borderColor2 !== void 0 ? _style$borderColor2 : BOUNDARY_BORDER,
|
|
2574
|
+
fontColor: style === null || style === void 0 ? void 0 : style.fontColor,
|
|
2575
|
+
componentFields: [generateComponentFieldNameInput(boundary.label)]
|
|
2576
|
+
},
|
|
2577
|
+
style: {
|
|
2578
|
+
width: placement.width,
|
|
2579
|
+
height: placement.height
|
|
2580
|
+
},
|
|
2581
|
+
width: placement.width,
|
|
2582
|
+
height: placement.height,
|
|
2583
|
+
parentId: boundary.parentId,
|
|
2584
|
+
extent: boundary.parentId ? "parent" : void 0,
|
|
2585
|
+
selectable: true,
|
|
2586
|
+
draggable: true
|
|
2587
|
+
});
|
|
2588
|
+
}
|
|
2589
|
+
for (const element of data.elements) {
|
|
2590
|
+
const placement = placements.get(element.id);
|
|
2591
|
+
if (!placement) continue;
|
|
2592
|
+
const colors = applyElementStyle(getC4ElementColors(element), data.elementStyles[element.id]);
|
|
2593
|
+
nodes.push({
|
|
2594
|
+
id: element.id,
|
|
2595
|
+
type: element.subDiagramId ? "subDiagram" : "c4",
|
|
2596
|
+
position: {
|
|
2597
|
+
x: placement.x,
|
|
2598
|
+
y: placement.y
|
|
2599
|
+
},
|
|
2600
|
+
width: placement.width,
|
|
2601
|
+
height: placement.height,
|
|
2602
|
+
data: {
|
|
2603
|
+
source: "mermaid",
|
|
2604
|
+
diagramId: element.subDiagramId,
|
|
2605
|
+
diagramName: element.label,
|
|
2606
|
+
c4Kind: element.kind,
|
|
2607
|
+
c4Shape: element.shape,
|
|
2608
|
+
isExternal: element.isExternal,
|
|
2609
|
+
technology: element.technology,
|
|
2610
|
+
description: element.description,
|
|
2611
|
+
link: element.link,
|
|
2612
|
+
fill: colors.fill,
|
|
2613
|
+
stroke: colors.stroke,
|
|
2614
|
+
fontColor: colors.fontColor,
|
|
2615
|
+
componentFields: [generateComponentFieldNameInput(element.label)]
|
|
2616
|
+
},
|
|
2617
|
+
style: {
|
|
2618
|
+
width: placement.width,
|
|
2619
|
+
height: placement.height
|
|
2620
|
+
},
|
|
2621
|
+
parentId: element.parentId,
|
|
2622
|
+
extent: element.parentId ? "parent" : void 0
|
|
2623
|
+
});
|
|
2624
|
+
}
|
|
2625
|
+
const parentOf = /* @__PURE__ */ new Map();
|
|
2626
|
+
for (const boundary of data.boundaries) parentOf.set(boundary.id, boundary.parentId);
|
|
2627
|
+
for (const element of data.elements) parentOf.set(element.id, element.parentId);
|
|
2628
|
+
function absoluteCenter(id) {
|
|
2629
|
+
const placement = placements.get(id);
|
|
2630
|
+
let x = placement.x + placement.width / 2;
|
|
2631
|
+
let y = placement.y + placement.height / 2;
|
|
2632
|
+
let parentId = parentOf.get(id);
|
|
2633
|
+
while (parentId) {
|
|
2634
|
+
const parent = placements.get(parentId);
|
|
2635
|
+
x += parent.x;
|
|
2636
|
+
y += parent.y;
|
|
2637
|
+
parentId = parentOf.get(parentId);
|
|
2638
|
+
}
|
|
2639
|
+
return {
|
|
2640
|
+
x,
|
|
2641
|
+
y
|
|
2642
|
+
};
|
|
2643
|
+
}
|
|
2644
|
+
return {
|
|
2645
|
+
nodes,
|
|
2646
|
+
edges: data.relationships.filter((rel) => (elementById.has(rel.from) || boundaryById.has(rel.from)) && (elementById.has(rel.to) || boundaryById.has(rel.to))).map((rel) => {
|
|
2647
|
+
var _style$lineColor, _style$lineWidth;
|
|
2648
|
+
const isBack = rel.direction === "back";
|
|
2649
|
+
const source = isBack ? rel.to : rel.from;
|
|
2650
|
+
const target = isBack ? rel.from : rel.to;
|
|
2651
|
+
const style = data.relStyles[`${rel.from}->${rel.to}`];
|
|
2652
|
+
const lineColor = (_style$lineColor = style === null || style === void 0 ? void 0 : style.lineColor) !== null && _style$lineColor !== void 0 ? _style$lineColor : BOUNDARY_BORDER;
|
|
2653
|
+
const label = [rel.label, rel.technology ? `[${rel.technology}]` : ""].filter(Boolean).join(" ");
|
|
2654
|
+
const side = resolveSide(rel.direction, absoluteCenter(source), absoluteCenter(target));
|
|
2655
|
+
return {
|
|
2656
|
+
id: `c4-rel-${rel.from}-${rel.to}-${rel.index}`,
|
|
2657
|
+
source,
|
|
2658
|
+
target,
|
|
2659
|
+
sourceHandle: `source-${side.source}`,
|
|
2660
|
+
targetHandle: `target-${side.target}`,
|
|
2661
|
+
label,
|
|
2662
|
+
type: "simplebezier",
|
|
2663
|
+
style: {
|
|
2664
|
+
stroke: lineColor,
|
|
2665
|
+
strokeWidth: (_style$lineWidth = style === null || style === void 0 ? void 0 : style.lineWidth) !== null && _style$lineWidth !== void 0 ? _style$lineWidth : 1.5
|
|
2666
|
+
},
|
|
2667
|
+
data: {
|
|
2668
|
+
source: "mermaid",
|
|
2669
|
+
labelColor: style === null || style === void 0 ? void 0 : style.textColor,
|
|
2670
|
+
labelOffsetX: style === null || style === void 0 ? void 0 : style.offsetX,
|
|
2671
|
+
labelOffsetY: style === null || style === void 0 ? void 0 : style.offsetY
|
|
2672
|
+
},
|
|
2673
|
+
markerEnd: {
|
|
2674
|
+
type: __xyflow_react.MarkerType.ArrowClosed,
|
|
2675
|
+
width: 14,
|
|
2676
|
+
height: 14,
|
|
2677
|
+
color: lineColor
|
|
2678
|
+
},
|
|
2679
|
+
markerStart: rel.direction === "bi" ? {
|
|
2680
|
+
type: __xyflow_react.MarkerType.ArrowClosed,
|
|
2681
|
+
width: 14,
|
|
2682
|
+
height: 14,
|
|
2683
|
+
color: lineColor
|
|
2684
|
+
} : void 0
|
|
2685
|
+
};
|
|
2686
|
+
})
|
|
2687
|
+
};
|
|
2688
|
+
}
|
|
2689
|
+
function convertC4MermaidToReactFlow(code) {
|
|
2690
|
+
return convertC4ToReactFlow(parseC4Diagram(code));
|
|
2691
|
+
}
|
|
2692
|
+
const LAYOUT_SPACING = {
|
|
2693
|
+
SUBGRAPH_HEADER_HEIGHT: 35,
|
|
2694
|
+
SUBGRAPH_PADDING: 8,
|
|
2695
|
+
SUBGRAPH_CONTENT_TOP_MARGIN: 10,
|
|
2696
|
+
NODE_SEPARATION_HORIZONTAL: 80,
|
|
2697
|
+
NODE_SEPARATION_VERTICAL: 100,
|
|
2698
|
+
CONTAINER_SEPARATION_HORIZONTAL: 120,
|
|
2699
|
+
CONTAINER_SEPARATION_VERTICAL: 160,
|
|
2700
|
+
NESTED_SUBGRAPH_SEPARATION_HORIZONTAL: 120,
|
|
2701
|
+
NESTED_SUBGRAPH_SEPARATION_VERTICAL: 140,
|
|
2702
|
+
META_GRAPH_MARGIN: 100,
|
|
2703
|
+
NESTED_CONTENT_MARGIN: 40,
|
|
2704
|
+
MIXED_CONTENT_VERTICAL_SPACING: 100,
|
|
2705
|
+
MIXED_CONTENT_HORIZONTAL_SPACING: 120
|
|
2706
|
+
};
|
|
2707
|
+
const LAYOUT_RANKERS = {
|
|
2708
|
+
NETWORK_SIMPLEX: "network-simplex",
|
|
2709
|
+
TIGHT_TREE: "tight-tree",
|
|
2710
|
+
LONGEST_PATH: "longest-path"
|
|
2711
|
+
};
|
|
2712
|
+
const DEFAULT_LAYOUT_RANKER = LAYOUT_RANKERS.TIGHT_TREE;
|
|
2713
|
+
const SEQUENCE_LAYOUT = {
|
|
2714
|
+
COLUMN_WIDTH: 360,
|
|
2715
|
+
ROW_HEIGHT: 60,
|
|
2716
|
+
HEADER_HEIGHT: 40,
|
|
2717
|
+
MESSAGE_NODE_WIDTH: 140,
|
|
2718
|
+
MESSAGE_NODE_HEIGHT: 32,
|
|
2719
|
+
SELF_LOOP_OFFSET: 48,
|
|
2720
|
+
PARTICIPANT_NODE_WIDTH: 10,
|
|
2721
|
+
MESSAGE_MAX_WIDTH: 240,
|
|
2722
|
+
MESSAGE_TARGET_WRAP_LINES: 2,
|
|
2723
|
+
MESSAGE_CHAR_WIDTH: 7,
|
|
2724
|
+
MESSAGE_LINE_HEIGHT: 20,
|
|
2725
|
+
MESSAGE_HORIZONTAL_PADDING: 24,
|
|
2726
|
+
MESSAGE_VERTICAL_PADDING: 8,
|
|
2727
|
+
ROW_VERTICAL_PADDING: 16,
|
|
2728
|
+
NOTE_OFFSET: 24,
|
|
2729
|
+
BLOCK_TOP_PADDING: 36,
|
|
2730
|
+
BLOCK_BOTTOM_PADDING: 16,
|
|
2731
|
+
BLOCK_SIDE_PADDING: 44,
|
|
2732
|
+
BLOCK_SECTION_PADDING: 22,
|
|
2733
|
+
BLOCK_CONTENT_INSET: 12,
|
|
2734
|
+
BLOCK_FRAME_GAP: 12,
|
|
2735
|
+
BOX_TOP_INSET: 26,
|
|
2736
|
+
BOX_BOTTOM_PADDING: 24
|
|
2737
|
+
};
|
|
2738
|
+
function sanitizeMermaidLabels(src) {
|
|
2739
|
+
if (!src) return src;
|
|
2740
|
+
const subgraphFixed = src.replace(/([A-Za-z0-9_]+)\[((?:(?![\"']).)*?)\]/g, (m, id, label) => {
|
|
2741
|
+
if (/^[\"']/.test(label)) return m;
|
|
2742
|
+
if (/[()\"\[\],:;]/.test(label)) return `${id}[\"${String(label).replace(/\\/g, "\\\\").replace(/\"/g, "\\\"")}\"]`;
|
|
2743
|
+
return m;
|
|
2744
|
+
}).replace(/^([ \t]*subgraph\s+)([^\n\r]+)(\|[^\n\r]*)?$/gim, (m, pre, title, rest) => {
|
|
2745
|
+
const t = String(title).trim();
|
|
2746
|
+
if (/^[\"']/.test(t)) return m;
|
|
2747
|
+
if (/[()\"\[\],:;]/.test(t)) return `${pre}\"${t.replace(/\\/g, "\\\\").replace(/\"/g, "\\\"")}\"${rest || ""}`;
|
|
2748
|
+
return m;
|
|
2749
|
+
});
|
|
2750
|
+
const diagRegex = /\b(graph|flowchart|sequenceDiagram|stateDiagram|classDiagram|gantt|journey|erDiagram|gitGraph|pie|timeline|infoDiagram)\b/i;
|
|
2751
|
+
const allStarts = [];
|
|
2752
|
+
let mm;
|
|
2753
|
+
const globalRegex = new RegExp(diagRegex.source, "gim");
|
|
2754
|
+
while ((mm = globalRegex.exec(subgraphFixed)) !== null) {
|
|
2755
|
+
allStarts.push(mm.index);
|
|
2756
|
+
if (globalRegex.lastIndex === mm.index) globalRegex.lastIndex++;
|
|
2757
|
+
}
|
|
2758
|
+
if (allStarts.length <= 1) return subgraphFixed;
|
|
2759
|
+
const first = allStarts[0];
|
|
2760
|
+
const second = allStarts[1];
|
|
2761
|
+
return subgraphFixed.slice(first, second).trim();
|
|
2762
|
+
}
|
|
1990
2763
|
const LABEL_TYPE_PREFIX = /^\s*type:(\w+)\s*[:|-]\s*/i;
|
|
1991
2764
|
const TAG_TO_NODE_TYPE = {
|
|
1992
2765
|
builder: "builder",
|
|
@@ -2997,12 +3770,7 @@ function convertSequenceDiagramToReactFlow(mermaidCode) {
|
|
|
2997
3770
|
lifelineHeight: grid.contentHeight,
|
|
2998
3771
|
activations,
|
|
2999
3772
|
links: participant.links
|
|
3000
|
-
}, participant.createdAtRow === void 0 ? {} : { lifelineStartRow: grid.toLayoutRow(participant.createdAtRow) }), participant.destroyedAtRow === void 0 ? {} : { lifelineEndRow: grid.toLastLayoutRow(participant.destroyedAtRow) }), {}, { componentFields: [generateComponentFieldNameInput(participant.name)
|
|
3001
|
-
componentFieldId: "color",
|
|
3002
|
-
label: "Color",
|
|
3003
|
-
data: SEQUENCE_PARTICIPANT_COLOR,
|
|
3004
|
-
type: require_component_type.ComponentInputType.ColorPicker
|
|
3005
|
-
})] })
|
|
3773
|
+
}, participant.createdAtRow === void 0 ? {} : { lifelineStartRow: grid.toLayoutRow(participant.createdAtRow) }), participant.destroyedAtRow === void 0 ? {} : { lifelineEndRow: grid.toLastLayoutRow(participant.destroyedAtRow) }), {}, { componentFields: [generateComponentFieldNameInput(participant.name)] })
|
|
3006
3774
|
});
|
|
3007
3775
|
}
|
|
3008
3776
|
for (const note of data.notes) {
|
|
@@ -3134,6 +3902,7 @@ function detectDiagramType(code) {
|
|
|
3134
3902
|
for (const line of lines) {
|
|
3135
3903
|
const trimmed = line.trim().toLowerCase();
|
|
3136
3904
|
if (trimmed.startsWith("sequencediagram")) return "sequence";
|
|
3905
|
+
if (trimmed.startsWith("c4")) return "c4";
|
|
3137
3906
|
if (trimmed.startsWith("flowchart") || trimmed.startsWith("graph")) return "flowchart";
|
|
3138
3907
|
}
|
|
3139
3908
|
return "flowchart";
|
|
@@ -4361,7 +5130,6 @@ function createReactFlowElements(nodes, edges, subgraphs, subgraphLayouts, subgr
|
|
|
4361
5130
|
edges: edges.map((edge, index) => {
|
|
4362
5131
|
const edgeStyle = { strokeWidth: 2.5 };
|
|
4363
5132
|
const edgeType = "default";
|
|
4364
|
-
const animated = true;
|
|
4365
5133
|
switch (edge.type) {
|
|
4366
5134
|
case "-->":
|
|
4367
5135
|
case "->": break;
|
|
@@ -4384,7 +5152,6 @@ function createReactFlowElements(nodes, edges, subgraphs, subgraphLayouts, subgr
|
|
|
4384
5152
|
target: targetId,
|
|
4385
5153
|
label: edge.label,
|
|
4386
5154
|
type: edgeType,
|
|
4387
|
-
animated,
|
|
4388
5155
|
style: edgeStyle,
|
|
4389
5156
|
labelStyle: {
|
|
4390
5157
|
fontSize: "12px",
|
|
@@ -4443,7 +5210,9 @@ function convertMermaidToReactFlow(_x3) {
|
|
|
4443
5210
|
function _convertMermaidToReactFlow() {
|
|
4444
5211
|
_convertMermaidToReactFlow = _asyncToGenerator(function* (mermaidCode) {
|
|
4445
5212
|
try {
|
|
4446
|
-
|
|
5213
|
+
const diagramType = detectDiagramType(mermaidCode);
|
|
5214
|
+
if (diagramType === "sequence") return convertSequenceDiagramToReactFlow(mermaidCode);
|
|
5215
|
+
if (diagramType === "c4") return convertC4MermaidToReactFlow(mermaidCode);
|
|
4447
5216
|
return convertFlowchartToReactFlow(mermaidCode);
|
|
4448
5217
|
} catch (error) {
|
|
4449
5218
|
console.error("Error converting Mermaid to React Flow:", error);
|
|
@@ -5066,6 +5835,7 @@ function _convertMermaidToReactFlowWithContext() {
|
|
|
5066
5835
|
if ((_ctx$style = ctx.style) === null || _ctx$style === void 0 ? void 0 : _ctx$style.height) clonedNode.height = ctx.style.height;
|
|
5067
5836
|
if ((_ctx$style2 = ctx.style) === null || _ctx$style2 === void 0 ? void 0 : _ctx$style2.width) clonedNode.width = ctx.style.width;
|
|
5068
5837
|
clonedNode.data = _objectSpread2(_objectSpread2(_objectSpread2({}, clonedNode.data), (0, daily_code.objectPick)((_ctx$style3 = ctx.style) !== null && _ctx$style3 !== void 0 ? _ctx$style3 : {}, [
|
|
5838
|
+
"color",
|
|
5069
5839
|
"fill",
|
|
5070
5840
|
"stroke",
|
|
5071
5841
|
"strokeWidth",
|
|
@@ -5122,6 +5892,10 @@ function _convertMermaidToReactFlowWithContext() {
|
|
|
5122
5892
|
if (nodeParent) return _objectSpread2(_objectSpread2({}, node), {}, { parentId: nodeParent.id });
|
|
5123
5893
|
return node;
|
|
5124
5894
|
})];
|
|
5895
|
+
if (isSequenceDiagram(combinedNodes)) return {
|
|
5896
|
+
edges: resolvedEdges,
|
|
5897
|
+
nodes: combinedNodes
|
|
5898
|
+
};
|
|
5125
5899
|
return {
|
|
5126
5900
|
edges: resolvedEdges,
|
|
5127
5901
|
nodes: (options === null || options === void 0 ? void 0 : options.repositionNodes) ? resizeNodesLayouts(combinedNodes) : combinedNodes
|
|
@@ -5735,20 +6509,16 @@ function resolveMermaidDetailedNodeLabel(node) {
|
|
|
5735
6509
|
]);
|
|
5736
6510
|
}
|
|
5737
6511
|
if (nodeType === "sequenceParticipant") {
|
|
5738
|
-
var _getFieldString4
|
|
6512
|
+
var _getFieldString4;
|
|
5739
6513
|
const label = (_getFieldString4 = getFieldString(componentFields, "Label")) !== null && _getFieldString4 !== void 0 ? _getFieldString4 : pickString(nodeData === null || nodeData === void 0 ? void 0 : nodeData.label);
|
|
5740
6514
|
const participantName = name !== null && name !== void 0 ? name : label;
|
|
5741
6515
|
const rowCount = typeof (nodeData === null || nodeData === void 0 ? void 0 : nodeData.rowCount) === "number" ? nodeData.rowCount : void 0;
|
|
5742
|
-
const color =
|
|
6516
|
+
const color = pickString(nodeData === null || nodeData === void 0 ? void 0 : nodeData.color);
|
|
5743
6517
|
return buildDetailedLabel([
|
|
5744
6518
|
participantName ? `SequenceParticipant: ${participantName}` : "SequenceParticipant",
|
|
5745
6519
|
...typeof rowCount === "number" ? [`rows: ${rowCount}`] : [],
|
|
5746
6520
|
...color ? [`color: ${color}`] : [],
|
|
5747
|
-
...buildFieldLines(componentFields, new Set([
|
|
5748
|
-
"name",
|
|
5749
|
-
"label",
|
|
5750
|
-
"color"
|
|
5751
|
-
]))
|
|
6521
|
+
...buildFieldLines(componentFields, new Set(["name", "label"]))
|
|
5752
6522
|
]);
|
|
5753
6523
|
}
|
|
5754
6524
|
if (nodeType === "comment") return buildDetailedLabel([`Comment: ${(typeof (nodeData === null || nodeData === void 0 ? void 0 : nodeData.isResolved) === "boolean" ? nodeData.isResolved : void 0) ? "Resolved" : "Open"}`, ...buildFieldLines(componentFields, new Set(["name"]))]);
|
|
@@ -5831,6 +6601,8 @@ function convertUiGraphToMermaid(input, options) {
|
|
|
5831
6601
|
exports.AstToSqlGenerator = AstToSqlGenerator;
|
|
5832
6602
|
exports.AstToUiConverter = AstToUiConverter;
|
|
5833
6603
|
exports.BasicDetailsSchema = BasicDetailsSchema;
|
|
6604
|
+
exports.C4_COLORS = C4_COLORS;
|
|
6605
|
+
exports.C4_LAYOUT = C4_LAYOUT;
|
|
5834
6606
|
exports.ComponentInputType = require_component_type.ComponentInputType;
|
|
5835
6607
|
exports.DialectIdSchema = DialectIdSchema;
|
|
5836
6608
|
exports.DocumentCollectionSchema = DocumentCollectionSchema;
|
|
@@ -5848,10 +6620,11 @@ exports.MongoNestedFieldSchema = MongoNestedFieldSchema;
|
|
|
5848
6620
|
exports.NestedFieldSchema = NestedFieldSchema;
|
|
5849
6621
|
exports.NoSqlFieldSchema = NoSqlFieldSchema;
|
|
5850
6622
|
exports.SEQUENCE_LAYOUT = SEQUENCE_LAYOUT;
|
|
5851
|
-
exports.SEQUENCE_PARTICIPANT_COLOR = SEQUENCE_PARTICIPANT_COLOR;
|
|
5852
6623
|
exports.SqlToAstParser = SqlToAstParser;
|
|
5853
6624
|
exports.buildMetaData = buildMetaData;
|
|
5854
6625
|
exports.contextSchema = require_headless.contextSchema;
|
|
6626
|
+
exports.convertC4MermaidToReactFlow = convertC4MermaidToReactFlow;
|
|
6627
|
+
exports.convertC4ToReactFlow = convertC4ToReactFlow;
|
|
5855
6628
|
exports.convertDynamoSchemaToAst = convertDynamoSchemaToAst;
|
|
5856
6629
|
exports.convertJsonSchemaToAst = convertJsonSchemaToAst;
|
|
5857
6630
|
exports.convertMermaidToReactFlow = convertMermaidToReactFlow;
|
|
@@ -5864,6 +6637,9 @@ exports.estimateSequenceMessageBoxSize = estimateSequenceMessageBoxSize;
|
|
|
5864
6637
|
exports.flattenMetaData = flattenMetaData;
|
|
5865
6638
|
exports.generateTableNodeId = generateTableNodeId;
|
|
5866
6639
|
exports.generateUUID = generateUUID;
|
|
6640
|
+
exports.getC4ElementColors = getC4ElementColors;
|
|
6641
|
+
exports.isC4Diagram = isC4Diagram;
|
|
5867
6642
|
exports.isSequenceDiagram = isSequenceDiagram;
|
|
6643
|
+
exports.parseC4Diagram = parseC4Diagram;
|
|
5868
6644
|
exports.sanitizeMermaidLabels = sanitizeMermaidLabels;
|
|
5869
6645
|
exports.syncBaseData = syncBaseData;
|