@tldraw/mermaid 4.6.0-next.d8328a2dcc3d → 4.6.0-next.e390fde97eab
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-cjs/colors.js +18 -3
- package/dist-cjs/colors.js.map +2 -2
- package/dist-cjs/index.js +1 -1
- package/dist-esm/colors.mjs +17 -2
- package/dist-esm/colors.mjs.map +2 -2
- package/dist-esm/index.mjs +1 -1
- package/package.json +4 -4
- package/src/colors.ts +18 -3
- package/src/createMermaidDiagram.test.ts +16 -12
package/dist-cjs/colors.js
CHANGED
|
@@ -24,7 +24,7 @@ __export(colors_exports, {
|
|
|
24
24
|
parseRgbToTldrawColor: () => parseRgbToTldrawColor
|
|
25
25
|
});
|
|
26
26
|
module.exports = __toCommonJS(colors_exports);
|
|
27
|
-
var
|
|
27
|
+
var import_tldraw = require("tldraw");
|
|
28
28
|
function buildClassDefColorMap(classDefs, items) {
|
|
29
29
|
const result = /* @__PURE__ */ new Map();
|
|
30
30
|
if (classDefs.size === 0) return result;
|
|
@@ -115,9 +115,24 @@ function parseHexToRgb(hex) {
|
|
|
115
115
|
}
|
|
116
116
|
return null;
|
|
117
117
|
}
|
|
118
|
-
const
|
|
118
|
+
const defaultColorNames = [
|
|
119
|
+
"black",
|
|
120
|
+
"grey",
|
|
121
|
+
"light-violet",
|
|
122
|
+
"violet",
|
|
123
|
+
"blue",
|
|
124
|
+
"light-blue",
|
|
125
|
+
"yellow",
|
|
126
|
+
"orange",
|
|
127
|
+
"green",
|
|
128
|
+
"light-green",
|
|
129
|
+
"light-red",
|
|
130
|
+
"red",
|
|
131
|
+
"white"
|
|
132
|
+
];
|
|
133
|
+
const TLDRAW_PALETTE = defaultColorNames.map(
|
|
119
134
|
(name) => {
|
|
120
|
-
const { solid } =
|
|
135
|
+
const { solid } = import_tldraw.DEFAULT_THEME.colors.light[name];
|
|
121
136
|
const rgb = parseHexToRgb(solid);
|
|
122
137
|
return [name, rgb[0], rgb[1], rgb[2]];
|
|
123
138
|
}
|
package/dist-cjs/colors.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/colors.ts"],
|
|
4
|
-
"sourcesContent": ["import {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { DEFAULT_THEME, TLDefaultColorStyle, TLDefaultDashStyle, TLDefaultSizeStyle } from 'tldraw'\n\ntype Color = [number, number, number, number]\n\nexport interface ParsedNodeColors {\n\tfillColor?: TLDefaultColorStyle\n\tstrokeColor?: TLDefaultColorStyle\n}\n\n/**\n * Build a map of node id \u2192 parsed fill/stroke colors from Mermaid's classDef definitions.\n *\n * Uses the structured data from `db.getClasses()` and each node's `classes`\n * array. For each node, looks up its applied classDef styles and maps fill and\n * stroke independently to the nearest tldraw palette color.\n */\nexport function buildClassDefColorMap(\n\tclassDefs: Map<string, { styles: string[] }>,\n\titems: Iterable<[string, { classes?: string[] }]>\n): Map<string, ParsedNodeColors> {\n\tconst result = new Map<string, ParsedNodeColors>()\n\tif (classDefs.size === 0) return result\n\n\tfor (const [nodeId, item] of items) {\n\t\tif (!item.classes || item.classes.length === 0) continue\n\n\t\tfor (const className of item.classes) {\n\t\t\tconst classDef = classDefs.get(className)\n\t\t\tif (!classDef || classDef.styles.length === 0) continue\n\n\t\t\tconst props = parseCssProps(classDef.styles)\n\t\t\tconst fill = toColor(props.get('fill'))\n\t\t\tconst stroke = toColor(props.get('stroke'))\n\n\t\t\tif (!fill && !stroke) continue\n\n\t\t\tconst colors: ParsedNodeColors = {}\n\t\t\tif (fill) colors.fillColor = nearestTldrawColor(fill)\n\t\t\tif (stroke) colors.strokeColor = nearestTldrawColor(stroke)\n\t\t\tresult.set(nodeId, colors)\n\t\t\tbreak\n\t\t}\n\t}\n\n\treturn result\n}\n\nexport function parseRgbToTldrawColor(\n\ttext: string\n): { color: TLDefaultColorStyle; hasAlpha: boolean } | null {\n\tconst color = toColor(text)\n\tif (!color) return null\n\treturn { color: nearestTldrawColor(color), hasAlpha: color[3] < 255 }\n}\n\ninterface ParsedCssOverrides {\n\tcolor?: TLDefaultColorStyle\n\tdashOverride?: TLDefaultDashStyle\n\tsizeOverride?: TLDefaultSizeStyle\n}\n\nfunction parseCssProps(styles: string[]): Map<string, string> {\n\tconst props = new Map<string, string>()\n\tfor (const entry of styles) {\n\t\tfor (const part of entry.split(';')) {\n\t\t\tconst colon = part.indexOf(':')\n\t\t\tif (colon < 0) continue\n\t\t\tconst key = part.slice(0, colon).trim().toLowerCase()\n\t\t\tconst value = part.slice(colon + 1).trim()\n\t\t\tif (key && value) props.set(key, value)\n\t\t}\n\t}\n\treturn props\n}\n\n/**\n * Parse a Mermaid CSS style array from an edge (FlowEdge.style / linkStyle)\n * and return tldraw-compatible overrides.\n */\nexport function parseCssStyles(styles: string[] | undefined): ParsedCssOverrides {\n\tif (!styles || styles.length === 0) return {}\n\n\tconst props = parseCssProps(styles)\n\tconst result: ParsedCssOverrides = {}\n\n\tconst stroke = toColor(props.get('stroke'))\n\tif (stroke) {\n\t\tresult.color = nearestTldrawColor(stroke)\n\t}\n\n\tif (props.has('stroke-dasharray')) {\n\t\tresult.dashOverride = 'dashed'\n\t}\n\n\tconst strokeWidth = props.get('stroke-width')\n\tif (strokeWidth) {\n\t\tconst pixels = parseFloat(strokeWidth)\n\t\tif (Number.isFinite(pixels)) {\n\t\t\tif (pixels <= 1) result.sizeOverride = 's'\n\t\t\telse if (pixels <= 2) result.sizeOverride = 'm'\n\t\t\telse result.sizeOverride = 'l'\n\t\t}\n\t}\n\n\treturn result\n}\n\n/**\n * Parse inline `style nodeId fill:\u2026,stroke:\u2026` directives from a FlowVertex.styles\n * array and return fill and stroke as independent tldraw colors.\n */\nexport function parseNodeInlineColor(styles: string[] | undefined): ParsedNodeColors | undefined {\n\tif (!styles || styles.length === 0) return undefined\n\n\tconst props = parseCssProps(styles)\n\tconst fill = toColor(props.get('fill'))\n\tconst stroke = toColor(props.get('stroke'))\n\n\tif (!fill && !stroke) return undefined\n\n\tconst colors: ParsedNodeColors = {}\n\tif (fill) colors.fillColor = nearestTldrawColor(fill)\n\tif (stroke) colors.strokeColor = nearestTldrawColor(stroke)\n\treturn colors\n}\n\nfunction parseHexToRgb(hex: string): [number, number, number] | null {\n\tconst stripped = hex.replace(/^#/, '')\n\tif (stripped.length === 3 || stripped.length === 4) {\n\t\treturn [\n\t\t\tparseInt(stripped[0] + stripped[0], 16),\n\t\t\tparseInt(stripped[1] + stripped[1], 16),\n\t\t\tparseInt(stripped[2] + stripped[2], 16),\n\t\t]\n\t}\n\tif (stripped.length === 6 || stripped.length === 8) {\n\t\treturn [\n\t\t\tparseInt(stripped.slice(0, 2), 16),\n\t\t\tparseInt(stripped.slice(2, 4), 16),\n\t\t\tparseInt(stripped.slice(4, 6), 16),\n\t\t]\n\t}\n\treturn null\n}\n\nconst defaultColorNames: TLDefaultColorStyle[] = [\n\t'black',\n\t'grey',\n\t'light-violet',\n\t'violet',\n\t'blue',\n\t'light-blue',\n\t'yellow',\n\t'orange',\n\t'green',\n\t'light-green',\n\t'light-red',\n\t'red',\n\t'white',\n]\n\nconst TLDRAW_PALETTE: [TLDefaultColorStyle, number, number, number][] = defaultColorNames.map(\n\t(name) => {\n\t\tconst { solid } = DEFAULT_THEME.colors.light[name]!\n\t\tconst rgb = parseHexToRgb(solid)!\n\t\treturn [name, rgb[0], rgb[1], rgb[2]]\n\t}\n)\n\n/** Map an arbitrary Color tuple to the nearest tldraw named color (best-effort). */\nfunction nearestTldrawColor(rgb: Color): TLDefaultColorStyle {\n\tlet [r, g, b] = rgb\n\n\tconst max = Math.max(r, g, b)\n\tconst min = Math.min(r, g, b)\n\tconst lightness = (max + min) / 2 / 255\n\tconst chroma = max - min\n\n\t// For very light pastels, strip the white base and amplify the\n\t// chromatic signal so the distance metric can see the hue.\n\tif (lightness > 0.75 && chroma > 5) {\n\t\tconst target = 200\n\t\tr = Math.round(((r - min) / chroma) * target)\n\t\tg = Math.round(((g - min) / chroma) * target)\n\t\tb = Math.round(((b - min) / chroma) * target)\n\t}\n\n\tlet best: TLDefaultColorStyle = 'black'\n\tlet bestDistance = Infinity\n\tfor (const [name, red, green, blue] of TLDRAW_PALETTE) {\n\t\t// \"Redmean\" weighted Euclidean distance (Compuphase approximation).\n\t\t// Weights RGB channels by the average red value of the two colors to\n\t\t// approximate human perception, which is more sensitive to green and\n\t\t// varies in red/blue sensitivity depending on the color's warmth.\n\t\tconst rMean = (r + red) / 2\n\t\tconst dR = r - red\n\t\tconst dG = g - green\n\t\tconst dB = b - blue\n\t\tconst distance = (2 + rMean / 256) * dR * dR + 4 * dG * dG + (2 + (255 - rMean) / 256) * dB * dB\n\t\tif (distance < bestDistance) {\n\t\t\tbestDistance = distance\n\t\t\tbest = name\n\t\t}\n\t}\n\treturn best\n}\n\nfunction toColor(value: string | undefined): Color | undefined {\n\tif (!value) return undefined\n\n\tconst trimmed = value.trim()\n\tif (!trimmed || trimmed === 'none' || trimmed === 'transparent') return undefined\n\n\tif (trimmed.startsWith('rgb')) {\n\t\tconst match = trimmed.match(/rgba?\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*(?:,\\s*([\\d.]+)\\s*)?\\)/)\n\t\tif (!match) return undefined\n\t\treturn [\n\t\t\tparseInt(match[1], 10),\n\t\t\tparseInt(match[2], 10),\n\t\t\tparseInt(match[3], 10),\n\t\t\tmatch[4] !== undefined ? Math.round(parseFloat(match[4]) * 255) : 255,\n\t\t]\n\t}\n\tif (trimmed.startsWith('#')) {\n\t\tconst rgb = parseHexToRgb(trimmed)\n\t\tif (!rgb) return undefined\n\t\treturn [rgb[0], rgb[1], rgb[2], 255]\n\t}\n\treturn undefined\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist-cjs/index.js
CHANGED
|
@@ -35,7 +35,7 @@ var import_mermaidNodeCreateShape = require("./mermaidNodeCreateShape");
|
|
|
35
35
|
var import_renderBlueprint = require("./renderBlueprint");
|
|
36
36
|
(0, import_utils.registerTldrawLibraryVersion)(
|
|
37
37
|
"@tldraw/mermaid",
|
|
38
|
-
"4.6.0-next.
|
|
38
|
+
"4.6.0-next.e390fde97eab",
|
|
39
39
|
"cjs"
|
|
40
40
|
);
|
|
41
41
|
//# sourceMappingURL=index.js.map
|
package/dist-esm/colors.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { DEFAULT_THEME } from "tldraw";
|
|
2
2
|
function buildClassDefColorMap(classDefs, items) {
|
|
3
3
|
const result = /* @__PURE__ */ new Map();
|
|
4
4
|
if (classDefs.size === 0) return result;
|
|
@@ -89,9 +89,24 @@ function parseHexToRgb(hex) {
|
|
|
89
89
|
}
|
|
90
90
|
return null;
|
|
91
91
|
}
|
|
92
|
+
const defaultColorNames = [
|
|
93
|
+
"black",
|
|
94
|
+
"grey",
|
|
95
|
+
"light-violet",
|
|
96
|
+
"violet",
|
|
97
|
+
"blue",
|
|
98
|
+
"light-blue",
|
|
99
|
+
"yellow",
|
|
100
|
+
"orange",
|
|
101
|
+
"green",
|
|
102
|
+
"light-green",
|
|
103
|
+
"light-red",
|
|
104
|
+
"red",
|
|
105
|
+
"white"
|
|
106
|
+
];
|
|
92
107
|
const TLDRAW_PALETTE = defaultColorNames.map(
|
|
93
108
|
(name) => {
|
|
94
|
-
const { solid } =
|
|
109
|
+
const { solid } = DEFAULT_THEME.colors.light[name];
|
|
95
110
|
const rgb = parseHexToRgb(solid);
|
|
96
111
|
return [name, rgb[0], rgb[1], rgb[2]];
|
|
97
112
|
}
|
package/dist-esm/colors.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/colors.ts"],
|
|
4
|
-
"sourcesContent": ["import {
|
|
5
|
-
"mappings": "AAAA,SAAS,
|
|
4
|
+
"sourcesContent": ["import { DEFAULT_THEME, TLDefaultColorStyle, TLDefaultDashStyle, TLDefaultSizeStyle } from 'tldraw'\n\ntype Color = [number, number, number, number]\n\nexport interface ParsedNodeColors {\n\tfillColor?: TLDefaultColorStyle\n\tstrokeColor?: TLDefaultColorStyle\n}\n\n/**\n * Build a map of node id \u2192 parsed fill/stroke colors from Mermaid's classDef definitions.\n *\n * Uses the structured data from `db.getClasses()` and each node's `classes`\n * array. For each node, looks up its applied classDef styles and maps fill and\n * stroke independently to the nearest tldraw palette color.\n */\nexport function buildClassDefColorMap(\n\tclassDefs: Map<string, { styles: string[] }>,\n\titems: Iterable<[string, { classes?: string[] }]>\n): Map<string, ParsedNodeColors> {\n\tconst result = new Map<string, ParsedNodeColors>()\n\tif (classDefs.size === 0) return result\n\n\tfor (const [nodeId, item] of items) {\n\t\tif (!item.classes || item.classes.length === 0) continue\n\n\t\tfor (const className of item.classes) {\n\t\t\tconst classDef = classDefs.get(className)\n\t\t\tif (!classDef || classDef.styles.length === 0) continue\n\n\t\t\tconst props = parseCssProps(classDef.styles)\n\t\t\tconst fill = toColor(props.get('fill'))\n\t\t\tconst stroke = toColor(props.get('stroke'))\n\n\t\t\tif (!fill && !stroke) continue\n\n\t\t\tconst colors: ParsedNodeColors = {}\n\t\t\tif (fill) colors.fillColor = nearestTldrawColor(fill)\n\t\t\tif (stroke) colors.strokeColor = nearestTldrawColor(stroke)\n\t\t\tresult.set(nodeId, colors)\n\t\t\tbreak\n\t\t}\n\t}\n\n\treturn result\n}\n\nexport function parseRgbToTldrawColor(\n\ttext: string\n): { color: TLDefaultColorStyle; hasAlpha: boolean } | null {\n\tconst color = toColor(text)\n\tif (!color) return null\n\treturn { color: nearestTldrawColor(color), hasAlpha: color[3] < 255 }\n}\n\ninterface ParsedCssOverrides {\n\tcolor?: TLDefaultColorStyle\n\tdashOverride?: TLDefaultDashStyle\n\tsizeOverride?: TLDefaultSizeStyle\n}\n\nfunction parseCssProps(styles: string[]): Map<string, string> {\n\tconst props = new Map<string, string>()\n\tfor (const entry of styles) {\n\t\tfor (const part of entry.split(';')) {\n\t\t\tconst colon = part.indexOf(':')\n\t\t\tif (colon < 0) continue\n\t\t\tconst key = part.slice(0, colon).trim().toLowerCase()\n\t\t\tconst value = part.slice(colon + 1).trim()\n\t\t\tif (key && value) props.set(key, value)\n\t\t}\n\t}\n\treturn props\n}\n\n/**\n * Parse a Mermaid CSS style array from an edge (FlowEdge.style / linkStyle)\n * and return tldraw-compatible overrides.\n */\nexport function parseCssStyles(styles: string[] | undefined): ParsedCssOverrides {\n\tif (!styles || styles.length === 0) return {}\n\n\tconst props = parseCssProps(styles)\n\tconst result: ParsedCssOverrides = {}\n\n\tconst stroke = toColor(props.get('stroke'))\n\tif (stroke) {\n\t\tresult.color = nearestTldrawColor(stroke)\n\t}\n\n\tif (props.has('stroke-dasharray')) {\n\t\tresult.dashOverride = 'dashed'\n\t}\n\n\tconst strokeWidth = props.get('stroke-width')\n\tif (strokeWidth) {\n\t\tconst pixels = parseFloat(strokeWidth)\n\t\tif (Number.isFinite(pixels)) {\n\t\t\tif (pixels <= 1) result.sizeOverride = 's'\n\t\t\telse if (pixels <= 2) result.sizeOverride = 'm'\n\t\t\telse result.sizeOverride = 'l'\n\t\t}\n\t}\n\n\treturn result\n}\n\n/**\n * Parse inline `style nodeId fill:\u2026,stroke:\u2026` directives from a FlowVertex.styles\n * array and return fill and stroke as independent tldraw colors.\n */\nexport function parseNodeInlineColor(styles: string[] | undefined): ParsedNodeColors | undefined {\n\tif (!styles || styles.length === 0) return undefined\n\n\tconst props = parseCssProps(styles)\n\tconst fill = toColor(props.get('fill'))\n\tconst stroke = toColor(props.get('stroke'))\n\n\tif (!fill && !stroke) return undefined\n\n\tconst colors: ParsedNodeColors = {}\n\tif (fill) colors.fillColor = nearestTldrawColor(fill)\n\tif (stroke) colors.strokeColor = nearestTldrawColor(stroke)\n\treturn colors\n}\n\nfunction parseHexToRgb(hex: string): [number, number, number] | null {\n\tconst stripped = hex.replace(/^#/, '')\n\tif (stripped.length === 3 || stripped.length === 4) {\n\t\treturn [\n\t\t\tparseInt(stripped[0] + stripped[0], 16),\n\t\t\tparseInt(stripped[1] + stripped[1], 16),\n\t\t\tparseInt(stripped[2] + stripped[2], 16),\n\t\t]\n\t}\n\tif (stripped.length === 6 || stripped.length === 8) {\n\t\treturn [\n\t\t\tparseInt(stripped.slice(0, 2), 16),\n\t\t\tparseInt(stripped.slice(2, 4), 16),\n\t\t\tparseInt(stripped.slice(4, 6), 16),\n\t\t]\n\t}\n\treturn null\n}\n\nconst defaultColorNames: TLDefaultColorStyle[] = [\n\t'black',\n\t'grey',\n\t'light-violet',\n\t'violet',\n\t'blue',\n\t'light-blue',\n\t'yellow',\n\t'orange',\n\t'green',\n\t'light-green',\n\t'light-red',\n\t'red',\n\t'white',\n]\n\nconst TLDRAW_PALETTE: [TLDefaultColorStyle, number, number, number][] = defaultColorNames.map(\n\t(name) => {\n\t\tconst { solid } = DEFAULT_THEME.colors.light[name]!\n\t\tconst rgb = parseHexToRgb(solid)!\n\t\treturn [name, rgb[0], rgb[1], rgb[2]]\n\t}\n)\n\n/** Map an arbitrary Color tuple to the nearest tldraw named color (best-effort). */\nfunction nearestTldrawColor(rgb: Color): TLDefaultColorStyle {\n\tlet [r, g, b] = rgb\n\n\tconst max = Math.max(r, g, b)\n\tconst min = Math.min(r, g, b)\n\tconst lightness = (max + min) / 2 / 255\n\tconst chroma = max - min\n\n\t// For very light pastels, strip the white base and amplify the\n\t// chromatic signal so the distance metric can see the hue.\n\tif (lightness > 0.75 && chroma > 5) {\n\t\tconst target = 200\n\t\tr = Math.round(((r - min) / chroma) * target)\n\t\tg = Math.round(((g - min) / chroma) * target)\n\t\tb = Math.round(((b - min) / chroma) * target)\n\t}\n\n\tlet best: TLDefaultColorStyle = 'black'\n\tlet bestDistance = Infinity\n\tfor (const [name, red, green, blue] of TLDRAW_PALETTE) {\n\t\t// \"Redmean\" weighted Euclidean distance (Compuphase approximation).\n\t\t// Weights RGB channels by the average red value of the two colors to\n\t\t// approximate human perception, which is more sensitive to green and\n\t\t// varies in red/blue sensitivity depending on the color's warmth.\n\t\tconst rMean = (r + red) / 2\n\t\tconst dR = r - red\n\t\tconst dG = g - green\n\t\tconst dB = b - blue\n\t\tconst distance = (2 + rMean / 256) * dR * dR + 4 * dG * dG + (2 + (255 - rMean) / 256) * dB * dB\n\t\tif (distance < bestDistance) {\n\t\t\tbestDistance = distance\n\t\t\tbest = name\n\t\t}\n\t}\n\treturn best\n}\n\nfunction toColor(value: string | undefined): Color | undefined {\n\tif (!value) return undefined\n\n\tconst trimmed = value.trim()\n\tif (!trimmed || trimmed === 'none' || trimmed === 'transparent') return undefined\n\n\tif (trimmed.startsWith('rgb')) {\n\t\tconst match = trimmed.match(/rgba?\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*(?:,\\s*([\\d.]+)\\s*)?\\)/)\n\t\tif (!match) return undefined\n\t\treturn [\n\t\t\tparseInt(match[1], 10),\n\t\t\tparseInt(match[2], 10),\n\t\t\tparseInt(match[3], 10),\n\t\t\tmatch[4] !== undefined ? Math.round(parseFloat(match[4]) * 255) : 255,\n\t\t]\n\t}\n\tif (trimmed.startsWith('#')) {\n\t\tconst rgb = parseHexToRgb(trimmed)\n\t\tif (!rgb) return undefined\n\t\treturn [rgb[0], rgb[1], rgb[2], 255]\n\t}\n\treturn undefined\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist-esm/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tldraw/mermaid",
|
|
3
3
|
"description": "Mermaid diagram to tldraw shape conversion.",
|
|
4
|
-
"version": "4.6.0-next.
|
|
4
|
+
"version": "4.6.0-next.e390fde97eab",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "tldraw Inc.",
|
|
7
7
|
"email": "hello@tldraw.com"
|
|
@@ -40,14 +40,14 @@
|
|
|
40
40
|
"lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@tldraw/tlschema": "4.6.0-next.
|
|
44
|
-
"@tldraw/utils": "4.6.0-next.
|
|
43
|
+
"@tldraw/tlschema": "4.6.0-next.e390fde97eab",
|
|
44
|
+
"@tldraw/utils": "4.6.0-next.e390fde97eab",
|
|
45
45
|
"mermaid": "11.12.2"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"react": "^18.2.0 || ^19.2.1",
|
|
49
49
|
"react-dom": "^18.2.0 || ^19.2.1",
|
|
50
|
-
"tldraw": "4.6.0-next.
|
|
50
|
+
"tldraw": "4.6.0-next.e390fde97eab"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"lazyrepo": "0.0.0-alpha.27",
|
package/src/colors.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { TLDefaultColorStyle, TLDefaultDashStyle, TLDefaultSizeStyle } from 'tldraw'
|
|
1
|
+
import { DEFAULT_THEME, TLDefaultColorStyle, TLDefaultDashStyle, TLDefaultSizeStyle } from 'tldraw'
|
|
3
2
|
|
|
4
3
|
type Color = [number, number, number, number]
|
|
5
4
|
|
|
@@ -144,9 +143,25 @@ function parseHexToRgb(hex: string): [number, number, number] | null {
|
|
|
144
143
|
return null
|
|
145
144
|
}
|
|
146
145
|
|
|
146
|
+
const defaultColorNames: TLDefaultColorStyle[] = [
|
|
147
|
+
'black',
|
|
148
|
+
'grey',
|
|
149
|
+
'light-violet',
|
|
150
|
+
'violet',
|
|
151
|
+
'blue',
|
|
152
|
+
'light-blue',
|
|
153
|
+
'yellow',
|
|
154
|
+
'orange',
|
|
155
|
+
'green',
|
|
156
|
+
'light-green',
|
|
157
|
+
'light-red',
|
|
158
|
+
'red',
|
|
159
|
+
'white',
|
|
160
|
+
]
|
|
161
|
+
|
|
147
162
|
const TLDRAW_PALETTE: [TLDefaultColorStyle, number, number, number][] = defaultColorNames.map(
|
|
148
163
|
(name) => {
|
|
149
|
-
const { solid } =
|
|
164
|
+
const { solid } = DEFAULT_THEME.colors.light[name]!
|
|
150
165
|
const rgb = parseHexToRgb(solid)!
|
|
151
166
|
return [name, rgb[0], rgb[1], rgb[2]]
|
|
152
167
|
}
|
|
@@ -1,16 +1,20 @@
|
|
|
1
|
-
vi.mock('tldraw', () =>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
x: Math.min(a.x, b.x),
|
|
10
|
-
y: Math.min(a.y, b.y),
|
|
1
|
+
vi.mock('tldraw', async (importOriginal) => {
|
|
2
|
+
const actual = await importOriginal<typeof import('tldraw')>()
|
|
3
|
+
return {
|
|
4
|
+
...actual,
|
|
5
|
+
createShapeId: () => `shape:mock-0` as any,
|
|
6
|
+
toRichText: (text: string) => ({
|
|
7
|
+
type: 'doc',
|
|
8
|
+
content: [{ type: 'paragraph', content: [{ type: 'text', text }] }],
|
|
11
9
|
}),
|
|
12
|
-
|
|
13
|
-
})
|
|
10
|
+
Vec: {
|
|
11
|
+
Min: (a: { x: number; y: number }, b: { x: number; y: number }) => ({
|
|
12
|
+
x: Math.min(a.x, b.x),
|
|
13
|
+
y: Math.min(a.y, b.y),
|
|
14
|
+
}),
|
|
15
|
+
},
|
|
16
|
+
}
|
|
17
|
+
})
|
|
14
18
|
|
|
15
19
|
import { createMermaidDiagram, MermaidDiagramError } from './createMermaidDiagram'
|
|
16
20
|
|