@diagrammo/dgmo 0.46.0 → 0.47.0
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/advanced.d.cts +3 -855
- package/dist/advanced.d.ts +3 -855
- package/dist/advanced.js +541 -70107
- package/dist/analyzer-UYKBXAKR.js +15 -0
- package/dist/auto.cjs +1 -1
- package/dist/auto.js +1 -1
- package/dist/auto.mjs +1 -1
- package/dist/block.js +83 -69417
- package/dist/calculator-LDYQCDDY.js +11 -0
- package/dist/charts-d3-QOZHKTCT.js +25 -0
- package/dist/chunk-2DXMZRWJ.js +800 -0
- package/dist/chunk-2LACINWN.js +786 -0
- package/dist/chunk-33LCUH4H.js +893 -0
- package/dist/chunk-3CIOJ5YJ.js +35 -0
- package/dist/chunk-3HDBAXF5.js +86 -0
- package/dist/chunk-3JLKYGBQ.js +290 -0
- package/dist/chunk-3MQQNXPD.js +415 -0
- package/dist/chunk-3R5POCTZ.js +967 -0
- package/dist/chunk-3SMGIJDD.js +112 -0
- package/dist/chunk-44CM72SQ.js +409 -0
- package/dist/chunk-4GRI7MEB.js +1604 -0
- package/dist/chunk-4OHACBGX.js +606 -0
- package/dist/chunk-5DH3KYFH.js +21 -0
- package/dist/chunk-5MLYVTYM.js +76 -0
- package/dist/chunk-5QXL4NYS.js +553 -0
- package/dist/chunk-5WRI5ZAA.js +31 -0
- package/dist/chunk-6EK55ART.js +117 -0
- package/dist/chunk-6FZYCKXB.js +2065 -0
- package/dist/chunk-6HO5ZTXK.js +277 -0
- package/dist/chunk-6KFWC4CO.js +7 -0
- package/dist/chunk-6MTWIQVO.js +121 -0
- package/dist/chunk-6NYWYNBI.js +329 -0
- package/dist/chunk-6SM5NJQH.js +620 -0
- package/dist/chunk-725LDASD.js +422 -0
- package/dist/chunk-76OWZ3BA.js +130 -0
- package/dist/chunk-7JEGTRLD.js +338 -0
- package/dist/chunk-A44USUV7.js +923 -0
- package/dist/chunk-A4GOY3PE.js +25 -0
- package/dist/chunk-A4VFQH5G.js +251 -0
- package/dist/chunk-AELOBFW5.js +375 -0
- package/dist/chunk-AN2MOO5T.js +522 -0
- package/dist/chunk-BMR4CIEO.js +41 -0
- package/dist/chunk-BS7SV7C3.js +51 -0
- package/dist/chunk-BUPDIHML.js +613 -0
- package/dist/chunk-BUVJFRPY.js +887 -0
- package/dist/chunk-C3Z4DX3V.js +112 -0
- package/dist/chunk-CI2G3OEB.js +1818 -0
- package/dist/chunk-CKNVO24D.js +54 -0
- package/dist/chunk-CUVHQHZ7.js +391 -0
- package/dist/chunk-CXK4DZH3.js +114 -0
- package/dist/chunk-DKEPS5LH.js +315 -0
- package/dist/chunk-DU7W62N5.js +487 -0
- package/dist/chunk-DZAQBW35.js +751 -0
- package/dist/chunk-EB6FPQUP.js +316 -0
- package/dist/chunk-EMS2SK26.js +376 -0
- package/dist/chunk-ERLBPDGU.js +510 -0
- package/dist/chunk-EVCVDTXE.js +732 -0
- package/dist/chunk-FCIIHT24.js +384 -0
- package/dist/chunk-FFUN5D66.js +97 -0
- package/dist/chunk-FITOLXSX.js +714 -0
- package/dist/chunk-FMDSF3OV.js +68 -0
- package/dist/chunk-FNB3PNGF.js +410 -0
- package/dist/chunk-G2H74XJZ.js +2104 -0
- package/dist/chunk-GMR5MFHJ.js +339 -0
- package/dist/chunk-H6PI3KJT.js +305 -0
- package/dist/chunk-I46X5VUA.js +59 -0
- package/dist/chunk-I5IGB56C.js +255 -0
- package/dist/chunk-IH6ZMVQ5.js +3950 -0
- package/dist/chunk-IJZFN3HM.js +463 -0
- package/dist/chunk-IPWPWM6R.js +3079 -0
- package/dist/chunk-IYULMRBE.js +23 -0
- package/dist/chunk-IZMRON6C.js +167 -0
- package/dist/chunk-J5FIXQRT.js +813 -0
- package/dist/chunk-JED6ZDEE.js +73 -0
- package/dist/chunk-JEUJOX5X.js +136 -0
- package/dist/chunk-JM4LEPY3.js +436 -0
- package/dist/chunk-L3UHP6TD.js +101 -0
- package/dist/chunk-L66GEFB6.js +524 -0
- package/dist/chunk-LIOHW36Z.js +469 -0
- package/dist/chunk-LP7EC4MI.js +16 -0
- package/dist/chunk-MITI6NOL.js +548 -0
- package/dist/chunk-MO5YHHMQ.js +168 -0
- package/dist/chunk-MZSBFAPJ.js +885 -0
- package/dist/chunk-NNAAJVBU.js +9 -0
- package/dist/chunk-NOTA6TEI.js +47 -0
- package/dist/chunk-NURGB5Z4.js +335 -0
- package/dist/chunk-NX4EQS3U.js +1062 -0
- package/dist/chunk-NXMESY4J.js +1 -0
- package/dist/chunk-OJR3MQYV.js +1458 -0
- package/dist/chunk-OURHMODR.js +454 -0
- package/dist/chunk-P235SVAH.js +1057 -0
- package/dist/chunk-P4RH4OSP.js +1038 -0
- package/dist/chunk-P6T66CCZ.js +226 -0
- package/dist/chunk-PBAHEPLQ.js +223 -0
- package/dist/chunk-PBHE5UG6.js +1530 -0
- package/dist/chunk-PDKUANDZ.js +35 -0
- package/dist/chunk-PWIHZ6NJ.js +296 -0
- package/dist/chunk-QEBUY5NY.js +1685 -0
- package/dist/chunk-QLCCJEJI.js +253 -0
- package/dist/chunk-QOOUC2J5.js +52 -0
- package/dist/chunk-QYTPPDAO.js +402 -0
- package/dist/chunk-R3XI2VC7.js +801 -0
- package/dist/chunk-RCERWOJR.js +154 -0
- package/dist/chunk-RJE5JTVK.js +362 -0
- package/dist/chunk-RTLBSQ3G.js +1155 -0
- package/dist/chunk-RUNNI6VE.js +448 -0
- package/dist/chunk-RVMRZAPB.js +354 -0
- package/dist/chunk-RYEGFMUO.js +955 -0
- package/dist/chunk-RZCF2VVM.js +528 -0
- package/dist/chunk-SML67VPV.js +1025 -0
- package/dist/chunk-SQ7IY53Q.js +44 -0
- package/dist/chunk-SQAG3UXH.js +161 -0
- package/dist/chunk-SRTU6HMQ.js +1851 -0
- package/dist/chunk-T2OE3YQB.js +550 -0
- package/dist/chunk-T3UBLACL.js +299 -0
- package/dist/chunk-TLVIHFRO.js +296 -0
- package/dist/chunk-TYS6CSS5.js +52 -0
- package/dist/chunk-U6EQI3U6.js +130 -0
- package/dist/chunk-UJ4FJLBF.js +86 -0
- package/dist/chunk-ULOEATBZ.js +347 -0
- package/dist/chunk-UNCCZ3NU.js +127 -0
- package/dist/chunk-USZW2HHU.js +197 -0
- package/dist/chunk-UWN33VNX.js +1610 -0
- package/dist/chunk-UZ7EZW3B.js +40 -0
- package/dist/chunk-VOKGH627.js +37 -0
- package/dist/chunk-WBRZJOEC.js +204 -0
- package/dist/chunk-WCSOJFU3.js +380 -0
- package/dist/chunk-WCT3NYCV.js +160 -0
- package/dist/chunk-WVAJFAIA.js +529 -0
- package/dist/chunk-X5LCYCL5.js +394 -0
- package/dist/chunk-XAKEUMEJ.js +1256 -0
- package/dist/chunk-Y2ZE3MSG.js +590 -0
- package/dist/chunk-Y3J7VR52.js +646 -0
- package/dist/chunk-Y5QGVTVC.js +33 -0
- package/dist/chunk-YAA6IID3.js +548 -0
- package/dist/chunk-YGJTDXVR.js +692 -0
- package/dist/chunk-YRYKTYMQ.js +186 -0
- package/dist/chunk-YYVTBZZC.js +61 -0
- package/dist/chunk-Z5CGSFJB.js +647 -0
- package/dist/chunk-Z72XRXD4.js +787 -0
- package/dist/chunk-ZGR7ULFJ.js +978 -0
- package/dist/chunk-ZJEL4H2R.js +851 -0
- package/dist/chunk-ZO27FGJS.js +554 -0
- package/dist/collapse-CLPJD2RL.js +11 -0
- package/dist/collapse-SLINJQW6.js +9 -0
- package/dist/collapse-ZWUFFCK2.js +9 -0
- package/dist/compute-G55RG53N.js +8 -0
- package/dist/dgmo-router-DZCIDUO5.js +73 -0
- package/dist/dimensions-J3FHIMJ6.js +22 -0
- package/dist/element.cjs +1 -1
- package/dist/element.js +1 -1
- package/dist/element.mjs +1 -1
- package/dist/flowchart-parser-ZNSKIBVR.js +21 -0
- package/dist/flowchart-renderer-ZAEOL4DX.js +35 -0
- package/dist/index.cjs +3 -3
- package/dist/index.d.cts +3 -469
- package/dist/index.d.ts +3 -469
- package/dist/index.js +137 -69685
- package/dist/layout-46N4JJYK.js +17 -0
- package/dist/layout-5RA6QWR6.js +26 -0
- package/dist/layout-5T6RH5M6.js +14 -0
- package/dist/layout-7QXCNOVS.js +13 -0
- package/dist/layout-EE6GE46Y.js +17 -0
- package/dist/layout-G23F7LDH.js +9 -0
- package/dist/layout-HRBZPFCN.js +23 -0
- package/dist/layout-HWDSRX5E.js +20 -0
- package/dist/layout-HYZPWAK5.js +18 -0
- package/dist/layout-N76NR4ZO.js +19 -0
- package/dist/layout-OB3RI63S.js +14 -0
- package/dist/layout-S2QBYSK2.js +15 -0
- package/dist/layout-UM5F4DJB.js +15 -0
- package/dist/layout-search-OYV77HHS.js +1655 -0
- package/dist/load-data-EHDDZ5ZS.js +8 -0
- package/dist/palettes-PRJ2RI6D.js +56 -0
- package/dist/parser-2MFP2H2E.js +11 -0
- package/dist/parser-3STE62GB.js +21 -0
- package/dist/parser-4FL2CMDG.js +18 -0
- package/dist/parser-4OGOBJJ4.js +13 -0
- package/dist/parser-6BTRLKRZ.js +15 -0
- package/dist/parser-AQETEVRW.js +21 -0
- package/dist/parser-CFZD5IBL.js +12 -0
- package/dist/parser-FUSKFGZN.js +16 -0
- package/dist/parser-I6KXEYFK.js +13 -0
- package/dist/parser-IXSZZQHY.js +18 -0
- package/dist/parser-JAL2HD4I.js +13 -0
- package/dist/parser-KNSQSKQO.js +20 -0
- package/dist/parser-N5O4IHUN.js +13 -0
- package/dist/parser-NGU3ETO6.js +16 -0
- package/dist/parser-NRAI6O25.js +19 -0
- package/dist/parser-O5J4VBII.js +11 -0
- package/dist/parser-OV7NOBW6.js +21 -0
- package/dist/parser-PQ3POX45.js +23 -0
- package/dist/parser-TFZFBVWN.js +11 -0
- package/dist/parser-TRTHDFPP.js +18 -0
- package/dist/parser-VQP2UJ6W.js +11 -0
- package/dist/parser-XDVELHRK.js +13 -0
- package/dist/parser-XKRP7QKP.js +11 -0
- package/dist/parser-Y6WTBU76.js +14 -0
- package/dist/parser-ZSDPZYQP.js +12 -0
- package/dist/renderer-2XQQQ6QR.js +28 -0
- package/dist/renderer-5NDVNDAZ.js +26 -0
- package/dist/renderer-6EEZHMH4.js +26 -0
- package/dist/renderer-6W5462RB.js +43 -0
- package/dist/renderer-7MVLWWQD.js +22 -0
- package/dist/renderer-AWWAF6XD.js +33 -0
- package/dist/renderer-BYCNMBF7.js +34 -0
- package/dist/renderer-CLJHQPBJ.js +29 -0
- package/dist/renderer-GHPZMFU2.js +15 -0
- package/dist/renderer-JGBKUCZD.js +16 -0
- package/dist/renderer-KQB7UGDS.js +19 -0
- package/dist/renderer-PGX2TKVS.js +24 -0
- package/dist/renderer-QIWVHWZO.js +15 -0
- package/dist/renderer-RPOA5YPZ.js +35 -0
- package/dist/renderer-SMIBCRVB.js +24 -0
- package/dist/renderer-T7YKC5VP.js +28 -0
- package/dist/renderer-TOCOVLHS.js +37 -0
- package/dist/renderer-UWA5XS74.js +39 -0
- package/dist/renderer-VACVQYML.js +25 -0
- package/dist/renderer-W4M6QLIJ.js +37 -0
- package/dist/renderer-WZRREQ2P.js +23 -0
- package/dist/renderer-YY2OSF6E.js +27 -0
- package/dist/renderer-Z7I3W2PP.js +24 -0
- package/dist/renderer-ZGNTUWC4.js +22 -0
- package/dist/renderer-ZTR3DER3.js +19 -0
- package/dist/renderer-radial-C32GPJQ7.js +21 -0
- package/dist/resolver-NOAA7ID7.js +13 -0
- package/dist/state-collapse-HCGD6IVJ.js +8 -0
- package/dist/state-parser-Z2V23ATR.js +18 -0
- package/dist/state-renderer-RFYHSP4K.js +34 -0
- package/dist/themes-1-CuKpeH.d.cts +908 -0
- package/dist/themes-1-CuKpeH.d.ts +908 -0
- package/package.json +1 -1
|
@@ -0,0 +1,885 @@
|
|
|
1
|
+
import {
|
|
2
|
+
renderInlineText
|
|
3
|
+
} from "./chunk-3HDBAXF5.js";
|
|
4
|
+
import {
|
|
5
|
+
CARD_RADIUS
|
|
6
|
+
} from "./chunk-3CIOJ5YJ.js";
|
|
7
|
+
import {
|
|
8
|
+
renderIntegratedLegend
|
|
9
|
+
} from "./chunk-PWIHZ6NJ.js";
|
|
10
|
+
import {
|
|
11
|
+
ScaleContext
|
|
12
|
+
} from "./chunk-YYVTBZZC.js";
|
|
13
|
+
import {
|
|
14
|
+
getMaxLegendReservedHeight
|
|
15
|
+
} from "./chunk-YAA6IID3.js";
|
|
16
|
+
import {
|
|
17
|
+
TITLE_FONT_SIZE,
|
|
18
|
+
TITLE_FONT_WEIGHT
|
|
19
|
+
} from "./chunk-A4GOY3PE.js";
|
|
20
|
+
import {
|
|
21
|
+
FONT_FAMILY
|
|
22
|
+
} from "./chunk-6KFWC4CO.js";
|
|
23
|
+
import {
|
|
24
|
+
LEGEND_HEIGHT,
|
|
25
|
+
measureLegendText
|
|
26
|
+
} from "./chunk-QOOUC2J5.js";
|
|
27
|
+
import {
|
|
28
|
+
measureText
|
|
29
|
+
} from "./chunk-WCT3NYCV.js";
|
|
30
|
+
import {
|
|
31
|
+
parseKanban
|
|
32
|
+
} from "./chunk-AELOBFW5.js";
|
|
33
|
+
import {
|
|
34
|
+
contrastText,
|
|
35
|
+
mix,
|
|
36
|
+
shapeFill
|
|
37
|
+
} from "./chunk-P6T66CCZ.js";
|
|
38
|
+
import {
|
|
39
|
+
tagAttrKey
|
|
40
|
+
} from "./chunk-QLCCJEJI.js";
|
|
41
|
+
|
|
42
|
+
// src/kanban/renderer.ts
|
|
43
|
+
import * as d3Selection from "d3-selection";
|
|
44
|
+
|
|
45
|
+
// src/kanban/mutations.ts
|
|
46
|
+
var ARCHIVE_COLUMN_NAME = "archive";
|
|
47
|
+
function computeCardMove(content, parsed, cardId, targetColumnId, targetIndex) {
|
|
48
|
+
let sourceCard = null;
|
|
49
|
+
let sourceColumn = null;
|
|
50
|
+
for (const col of parsed.columns) {
|
|
51
|
+
for (const card of col.cards) {
|
|
52
|
+
if (card.id === cardId) {
|
|
53
|
+
sourceCard = card;
|
|
54
|
+
sourceColumn = col;
|
|
55
|
+
break;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
if (sourceCard) break;
|
|
59
|
+
}
|
|
60
|
+
if (!sourceCard || !sourceColumn) return null;
|
|
61
|
+
const targetColumn = parsed.columns.find((c) => c.id === targetColumnId);
|
|
62
|
+
if (!targetColumn) return null;
|
|
63
|
+
const lines = content.split("\n");
|
|
64
|
+
const startIdx = sourceCard.lineNumber - 1;
|
|
65
|
+
const endIdx = sourceCard.endLineNumber - 1;
|
|
66
|
+
const cardLines = lines.slice(startIdx, endIdx + 1);
|
|
67
|
+
const withoutCard = [...lines.slice(0, startIdx), ...lines.slice(endIdx + 1)];
|
|
68
|
+
let insertIdx;
|
|
69
|
+
const removedCount = endIdx - startIdx + 1;
|
|
70
|
+
const adjustLine = (ln) => {
|
|
71
|
+
if (ln > endIdx + 1) return ln - removedCount;
|
|
72
|
+
return ln;
|
|
73
|
+
};
|
|
74
|
+
if (targetIndex === 0) {
|
|
75
|
+
const adjColLine = adjustLine(targetColumn.lineNumber);
|
|
76
|
+
insertIdx = adjColLine;
|
|
77
|
+
} else {
|
|
78
|
+
const targetCards = targetColumn.cards.filter((c) => c.id !== cardId);
|
|
79
|
+
const clampedIdx = Math.min(targetIndex, targetCards.length);
|
|
80
|
+
const precedingCard = targetCards[clampedIdx - 1];
|
|
81
|
+
if (!precedingCard) {
|
|
82
|
+
const adjColLine = adjustLine(targetColumn.lineNumber);
|
|
83
|
+
insertIdx = adjColLine;
|
|
84
|
+
} else {
|
|
85
|
+
const adjEndLine = adjustLine(precedingCard.endLineNumber);
|
|
86
|
+
insertIdx = adjEndLine;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
const result = [
|
|
90
|
+
...withoutCard.slice(0, insertIdx),
|
|
91
|
+
...cardLines,
|
|
92
|
+
...withoutCard.slice(insertIdx)
|
|
93
|
+
];
|
|
94
|
+
return result.join("\n");
|
|
95
|
+
}
|
|
96
|
+
function computeCardArchive(content, parsed, cardId) {
|
|
97
|
+
let sourceCard = null;
|
|
98
|
+
for (const col of parsed.columns) {
|
|
99
|
+
for (const card of col.cards) {
|
|
100
|
+
if (card.id === cardId) {
|
|
101
|
+
sourceCard = card;
|
|
102
|
+
break;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
if (sourceCard) break;
|
|
106
|
+
}
|
|
107
|
+
if (!sourceCard) return null;
|
|
108
|
+
const lines = content.split("\n");
|
|
109
|
+
const startIdx = sourceCard.lineNumber - 1;
|
|
110
|
+
const endIdx = sourceCard.endLineNumber - 1;
|
|
111
|
+
const cardLines = lines.slice(startIdx, endIdx + 1);
|
|
112
|
+
const withoutCard = [...lines.slice(0, startIdx), ...lines.slice(endIdx + 1)];
|
|
113
|
+
const archiveCol = parsed.columns.find(
|
|
114
|
+
(c) => c.name.toLowerCase() === ARCHIVE_COLUMN_NAME
|
|
115
|
+
);
|
|
116
|
+
if (archiveCol) {
|
|
117
|
+
const removedCount = endIdx - startIdx + 1;
|
|
118
|
+
let archiveEndLine = archiveCol.lineNumber;
|
|
119
|
+
if (archiveCol.cards.length > 0) {
|
|
120
|
+
const lastCard = archiveCol.cards[archiveCol.cards.length - 1];
|
|
121
|
+
archiveEndLine = lastCard.endLineNumber;
|
|
122
|
+
}
|
|
123
|
+
if (archiveEndLine > endIdx + 1) {
|
|
124
|
+
archiveEndLine -= removedCount;
|
|
125
|
+
}
|
|
126
|
+
const insertIdx = archiveEndLine;
|
|
127
|
+
return [
|
|
128
|
+
...withoutCard.slice(0, insertIdx),
|
|
129
|
+
...cardLines,
|
|
130
|
+
...withoutCard.slice(insertIdx)
|
|
131
|
+
].join("\n");
|
|
132
|
+
} else {
|
|
133
|
+
const trimmedEnd = withoutCard.length > 0 && withoutCard[withoutCard.length - 1].trim() === "" ? withoutCard : [...withoutCard, ""];
|
|
134
|
+
return [...trimmedEnd, "[Archive]", ...cardLines].join("\n");
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
function isArchiveColumn(name) {
|
|
138
|
+
return name.toLowerCase() === ARCHIVE_COLUMN_NAME;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
// src/kanban/renderer.ts
|
|
142
|
+
var DIAGRAM_PADDING = 20;
|
|
143
|
+
var COLUMN_GAP = 16;
|
|
144
|
+
var COLUMN_HEADER_HEIGHT = 36;
|
|
145
|
+
var COLUMN_PADDING = 12;
|
|
146
|
+
var COLUMN_MIN_WIDTH = 200;
|
|
147
|
+
var CARD_HEADER_HEIGHT = 24;
|
|
148
|
+
var CARD_META_LINE_HEIGHT = 14;
|
|
149
|
+
var CARD_SEPARATOR_GAP = 4;
|
|
150
|
+
var CARD_GAP = 8;
|
|
151
|
+
var CARD_PADDING_X = 10;
|
|
152
|
+
var CARD_PADDING_Y = 6;
|
|
153
|
+
var CARD_STROKE_WIDTH = 1.5;
|
|
154
|
+
var TITLE_HEIGHT = 30;
|
|
155
|
+
var COLUMN_HEADER_FONT_SIZE = 13;
|
|
156
|
+
var CARD_TITLE_FONT_SIZE = 12;
|
|
157
|
+
var CARD_META_FONT_SIZE = 10;
|
|
158
|
+
var WIP_FONT_SIZE = 10;
|
|
159
|
+
var COLUMN_RADIUS = 8;
|
|
160
|
+
var COLUMN_HEADER_RADIUS = 8;
|
|
161
|
+
var COLLAPSED_COLUMN_WIDTH = 40;
|
|
162
|
+
var COLLAPSED_LANE_HEIGHT = 26;
|
|
163
|
+
function resolveCardTagMeta(card, tagGroups, hiddenMetaGroups) {
|
|
164
|
+
const meta = [];
|
|
165
|
+
for (const group of tagGroups) {
|
|
166
|
+
if (hiddenMetaGroups?.includes(group.name.toLowerCase())) continue;
|
|
167
|
+
const tagValue = card.tags[tagAttrKey(group.name)];
|
|
168
|
+
const value = tagValue ?? group.defaultValue;
|
|
169
|
+
if (!value) continue;
|
|
170
|
+
const entry = group.entries.find(
|
|
171
|
+
(e) => e.value.toLowerCase() === value.toLowerCase()
|
|
172
|
+
);
|
|
173
|
+
meta.push({
|
|
174
|
+
label: group.name,
|
|
175
|
+
value,
|
|
176
|
+
...entry?.color !== void 0 && { color: entry.color }
|
|
177
|
+
});
|
|
178
|
+
}
|
|
179
|
+
return meta;
|
|
180
|
+
}
|
|
181
|
+
function resolveCardTagColor(card, tagGroups, activeTagGroup) {
|
|
182
|
+
if (!activeTagGroup) return card.color;
|
|
183
|
+
const group = tagGroups.find(
|
|
184
|
+
(g) => g.name.toLowerCase() === activeTagGroup.toLowerCase()
|
|
185
|
+
);
|
|
186
|
+
if (!group) return card.color;
|
|
187
|
+
const tagValue = card.tags[tagAttrKey(group.name)];
|
|
188
|
+
const value = tagValue ?? group.defaultValue;
|
|
189
|
+
if (!value) return void 0;
|
|
190
|
+
const entry = group.entries.find(
|
|
191
|
+
(e) => e.value.toLowerCase() === value.toLowerCase()
|
|
192
|
+
);
|
|
193
|
+
return entry?.color;
|
|
194
|
+
}
|
|
195
|
+
function computeLayout(parsed, _palette, collapsedColumns, hiddenMetaGroups, sDiagramPadding = DIAGRAM_PADDING, sTitleHeight = TITLE_HEIGHT, sCardTitleFontSize = CARD_TITLE_FONT_SIZE, sColumnHeaderFontSize = COLUMN_HEADER_FONT_SIZE, sColumnHeaderHeight = COLUMN_HEADER_HEIGHT, sColumnPadding = COLUMN_PADDING, sCardPaddingX = CARD_PADDING_X, sCardPaddingY = CARD_PADDING_Y, sCardSeparatorGap = CARD_SEPARATOR_GAP, sCardMetaLineHeight = CARD_META_LINE_HEIGHT, sCardHeaderHeight = CARD_HEADER_HEIGHT, sCardMetaFontSize = CARD_META_FONT_SIZE, sCardGap = CARD_GAP, sColumnMinWidth = COLUMN_MIN_WIDTH, sColumnGap = COLUMN_GAP, sCollapsedColumnWidth = COLLAPSED_COLUMN_WIDTH) {
|
|
196
|
+
const showTitle = !!parsed.title && parsed.options["no-title"] !== "on";
|
|
197
|
+
const headerHeight = showTitle ? sTitleHeight + 8 : 0;
|
|
198
|
+
const startY = sDiagramPadding + headerHeight;
|
|
199
|
+
const columnLayouts = [];
|
|
200
|
+
let maxColumnHeight = 0;
|
|
201
|
+
const visibleColumns = parsed.columns.filter((c) => !isArchiveColumn(c.name));
|
|
202
|
+
for (const col of visibleColumns) {
|
|
203
|
+
const isCollapsed = collapsedColumns?.has(col.id) ?? false;
|
|
204
|
+
if (isCollapsed) {
|
|
205
|
+
columnLayouts.push({
|
|
206
|
+
x: 0,
|
|
207
|
+
y: startY,
|
|
208
|
+
width: sCollapsedColumnWidth,
|
|
209
|
+
height: 0,
|
|
210
|
+
column: col,
|
|
211
|
+
cardLayouts: []
|
|
212
|
+
});
|
|
213
|
+
continue;
|
|
214
|
+
}
|
|
215
|
+
let maxCardTextWidth = measureText(col.name, sColumnHeaderFontSize);
|
|
216
|
+
const cardLayouts = [];
|
|
217
|
+
let cardY = sColumnHeaderHeight + sColumnPadding;
|
|
218
|
+
for (const card of col.cards) {
|
|
219
|
+
const titleWidth = measureText(card.title, sCardTitleFontSize);
|
|
220
|
+
maxCardTextWidth = Math.max(
|
|
221
|
+
maxCardTextWidth,
|
|
222
|
+
titleWidth + sCardPaddingX * 2
|
|
223
|
+
);
|
|
224
|
+
const tagMeta = resolveCardTagMeta(
|
|
225
|
+
card,
|
|
226
|
+
parsed.tagGroups,
|
|
227
|
+
hiddenMetaGroups
|
|
228
|
+
);
|
|
229
|
+
const metaCount = tagMeta.length + card.details.length;
|
|
230
|
+
const metaHeight = metaCount > 0 ? sCardSeparatorGap + 1 + sCardPaddingY + metaCount * sCardMetaLineHeight : 0;
|
|
231
|
+
const cardHeight = sCardHeaderHeight + sCardPaddingY + metaHeight;
|
|
232
|
+
for (const m of tagMeta) {
|
|
233
|
+
const metaW = measureText(`${m.label}: ${m.value}`, sCardMetaFontSize) + sCardPaddingX * 2;
|
|
234
|
+
maxCardTextWidth = Math.max(maxCardTextWidth, metaW);
|
|
235
|
+
}
|
|
236
|
+
cardLayouts.push({
|
|
237
|
+
x: sColumnPadding,
|
|
238
|
+
y: cardY,
|
|
239
|
+
width: 0,
|
|
240
|
+
height: cardHeight,
|
|
241
|
+
card
|
|
242
|
+
});
|
|
243
|
+
cardY += cardHeight + sCardGap;
|
|
244
|
+
}
|
|
245
|
+
const colWidth = Math.max(
|
|
246
|
+
sColumnMinWidth,
|
|
247
|
+
maxCardTextWidth + sColumnPadding * 2
|
|
248
|
+
);
|
|
249
|
+
for (const cl of cardLayouts) {
|
|
250
|
+
cl.width = colWidth - sColumnPadding * 2;
|
|
251
|
+
}
|
|
252
|
+
const colHeight = cardY + sColumnPadding;
|
|
253
|
+
maxColumnHeight = Math.max(maxColumnHeight, colHeight);
|
|
254
|
+
columnLayouts.push({
|
|
255
|
+
x: 0,
|
|
256
|
+
y: startY,
|
|
257
|
+
width: colWidth,
|
|
258
|
+
height: colHeight,
|
|
259
|
+
column: col,
|
|
260
|
+
cardLayouts
|
|
261
|
+
});
|
|
262
|
+
}
|
|
263
|
+
let currentX = sDiagramPadding;
|
|
264
|
+
for (const cl of columnLayouts) {
|
|
265
|
+
cl.x = currentX;
|
|
266
|
+
cl.height = maxColumnHeight;
|
|
267
|
+
currentX += cl.width + sColumnGap;
|
|
268
|
+
}
|
|
269
|
+
const totalWidth = currentX - sColumnGap + sDiagramPadding;
|
|
270
|
+
const totalHeight = startY + maxColumnHeight + sDiagramPadding;
|
|
271
|
+
return { columns: columnLayouts, totalWidth, totalHeight };
|
|
272
|
+
}
|
|
273
|
+
function renderKanban(container, parsed, palette, isDark, options) {
|
|
274
|
+
const exportDims = options?.exportDims;
|
|
275
|
+
const activeTagGroup = options?.activeTagGroup ?? null;
|
|
276
|
+
const onSwimlaneChange = options?.onSwimlaneChange;
|
|
277
|
+
const collapsedLanes = options?.collapsedLanes;
|
|
278
|
+
const collapsedColumns = options?.collapsedColumns ?? new Set(parsed.columns.filter((c) => c.collapsed).map((c) => c.id));
|
|
279
|
+
const compactMeta = options?.compactMeta ?? false;
|
|
280
|
+
const solid = parsed.options["solid-fill"] === "on";
|
|
281
|
+
const requestedSwimlane = options?.currentSwimlaneGroup ?? null;
|
|
282
|
+
const swimlaneGroup = requestedSwimlane ? parsed.tagGroups.find(
|
|
283
|
+
(g) => g.name.toLowerCase() === requestedSwimlane.toLowerCase()
|
|
284
|
+
) ?? null : null;
|
|
285
|
+
const hiddenMetaGroups = [];
|
|
286
|
+
if (compactMeta) {
|
|
287
|
+
if (activeTagGroup) hiddenMetaGroups.push(activeTagGroup.toLowerCase());
|
|
288
|
+
if (requestedSwimlane)
|
|
289
|
+
hiddenMetaGroups.push(requestedSwimlane.toLowerCase());
|
|
290
|
+
}
|
|
291
|
+
const visibleColumns = parsed.columns.filter((c) => !isArchiveColumn(c.name));
|
|
292
|
+
const colCount = Math.max(1, visibleColumns.length);
|
|
293
|
+
const idealWidth = colCount * COLUMN_MIN_WIDTH + (colCount - 1) * COLUMN_GAP + 2 * DIAGRAM_PADDING;
|
|
294
|
+
const containerWidth = exportDims?.width ?? container.getBoundingClientRect().width;
|
|
295
|
+
const ctx = exportDims || containerWidth <= 0 ? ScaleContext.identity() : ScaleContext.from(containerWidth, idealWidth);
|
|
296
|
+
const sDiagramPadding = ctx.aesthetic(DIAGRAM_PADDING);
|
|
297
|
+
const sColumnGap = ctx.aesthetic(COLUMN_GAP);
|
|
298
|
+
const sColumnHeaderHeight = ctx.structural(COLUMN_HEADER_HEIGHT);
|
|
299
|
+
const sColumnPadding = ctx.aesthetic(COLUMN_PADDING);
|
|
300
|
+
const sColumnMinWidth = ctx.structural(COLUMN_MIN_WIDTH);
|
|
301
|
+
const sCardHeaderHeight = ctx.structural(CARD_HEADER_HEIGHT);
|
|
302
|
+
const sCardMetaLineHeight = ctx.structural(CARD_META_LINE_HEIGHT);
|
|
303
|
+
const sCardSeparatorGap = ctx.structural(CARD_SEPARATOR_GAP);
|
|
304
|
+
const sCardGap = ctx.aesthetic(CARD_GAP);
|
|
305
|
+
const sCardRadius = ctx.structural(CARD_RADIUS);
|
|
306
|
+
const sCardPaddingX = ctx.aesthetic(CARD_PADDING_X);
|
|
307
|
+
const sCardPaddingY = ctx.aesthetic(CARD_PADDING_Y);
|
|
308
|
+
const sCardStrokeWidth = ctx.structural(CARD_STROKE_WIDTH);
|
|
309
|
+
const sTitleHeight = ctx.structural(TITLE_HEIGHT);
|
|
310
|
+
const sColumnHeaderFontSize = ctx.text(COLUMN_HEADER_FONT_SIZE);
|
|
311
|
+
const sCardTitleFontSize = ctx.text(CARD_TITLE_FONT_SIZE);
|
|
312
|
+
const sCardMetaFontSize = ctx.text(CARD_META_FONT_SIZE);
|
|
313
|
+
const sWipFontSize = ctx.text(WIP_FONT_SIZE);
|
|
314
|
+
const sColumnRadius = ctx.structural(COLUMN_RADIUS);
|
|
315
|
+
const sColumnHeaderRadius = ctx.structural(COLUMN_HEADER_RADIUS);
|
|
316
|
+
const sCollapsedColumnWidth = ctx.structural(COLLAPSED_COLUMN_WIDTH);
|
|
317
|
+
const sCollapsedLaneHeight = ctx.structural(COLLAPSED_LANE_HEIGHT);
|
|
318
|
+
const sTitleFontSize = ctx.text(TITLE_FONT_SIZE);
|
|
319
|
+
const sLaneHeaderWidth = ctx.structural(LANE_HEADER_WIDTH);
|
|
320
|
+
const sLaneGap = ctx.aesthetic(LANE_GAP);
|
|
321
|
+
const layout = computeLayout(
|
|
322
|
+
parsed,
|
|
323
|
+
palette,
|
|
324
|
+
collapsedColumns,
|
|
325
|
+
hiddenMetaGroups,
|
|
326
|
+
sDiagramPadding,
|
|
327
|
+
sTitleHeight,
|
|
328
|
+
sCardTitleFontSize,
|
|
329
|
+
sColumnHeaderFontSize,
|
|
330
|
+
sColumnHeaderHeight,
|
|
331
|
+
sColumnPadding,
|
|
332
|
+
sCardPaddingX,
|
|
333
|
+
sCardPaddingY,
|
|
334
|
+
sCardSeparatorGap,
|
|
335
|
+
sCardMetaLineHeight,
|
|
336
|
+
sCardHeaderHeight,
|
|
337
|
+
sCardMetaFontSize,
|
|
338
|
+
sCardGap,
|
|
339
|
+
sColumnMinWidth,
|
|
340
|
+
sColumnGap,
|
|
341
|
+
sCollapsedColumnWidth
|
|
342
|
+
);
|
|
343
|
+
const width = exportDims?.width ?? layout.totalWidth;
|
|
344
|
+
const height = exportDims?.height ?? layout.totalHeight;
|
|
345
|
+
container.innerHTML = "";
|
|
346
|
+
const svg = d3Selection.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").attr("font-family", FONT_FAMILY).style("background", palette.bg);
|
|
347
|
+
if (ctx.isBelowFloor) {
|
|
348
|
+
svg.attr("width", "100%");
|
|
349
|
+
}
|
|
350
|
+
const showTopTitle = !!parsed.title && parsed.options["no-title"] !== "on";
|
|
351
|
+
if (showTopTitle) {
|
|
352
|
+
svg.append("text").attr("class", "chart-title").attr("data-line-number", parsed.titleLineNumber ?? 0).attr("x", sDiagramPadding).attr("y", sDiagramPadding + sTitleFontSize).attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).text(parsed.title);
|
|
353
|
+
}
|
|
354
|
+
if (parsed.tagGroups.length > 0) {
|
|
355
|
+
const titleTextWidth = showTopTitle ? measureLegendText(parsed.title, sTitleFontSize) + 16 : 0;
|
|
356
|
+
const legendX = sDiagramPadding + titleTextWidth;
|
|
357
|
+
const legendConfig = {
|
|
358
|
+
groups: parsed.tagGroups,
|
|
359
|
+
position: { placement: "top-center", titleRelation: "inline-with-title" },
|
|
360
|
+
mode: options?.exportMode ? "export" : "preview"
|
|
361
|
+
};
|
|
362
|
+
const legendH = getMaxLegendReservedHeight(
|
|
363
|
+
legendConfig,
|
|
364
|
+
width - legendX - sDiagramPadding
|
|
365
|
+
);
|
|
366
|
+
const legendY = sDiagramPadding + (sTitleFontSize - legendH) / 2;
|
|
367
|
+
const legendG = svg.append("g").attr("class", "kanban-legend").attr("transform", `translate(${legendX},${legendY})`);
|
|
368
|
+
const showSwimlaneIcon = !!onSwimlaneChange && !exportDims;
|
|
369
|
+
const legendCallbacks = showSwimlaneIcon ? {
|
|
370
|
+
onGroupRendered: (groupName, groupEl, isActive) => {
|
|
371
|
+
const isCurrent = swimlaneGroup?.name.toLowerCase() === groupName.toLowerCase();
|
|
372
|
+
const textW = measureLegendText(groupName, 11);
|
|
373
|
+
const iconX = isActive ? 4 + 6 + textW + 6 : 8 + textW + 4;
|
|
374
|
+
const iconY = (LEGEND_HEIGHT - 7) / 2;
|
|
375
|
+
const iconEl = drawSwimlaneIcon(
|
|
376
|
+
groupEl,
|
|
377
|
+
iconX,
|
|
378
|
+
iconY,
|
|
379
|
+
isCurrent,
|
|
380
|
+
palette
|
|
381
|
+
);
|
|
382
|
+
iconEl.append("title").text(`Group by ${groupName}`);
|
|
383
|
+
iconEl.style("cursor", "pointer").on("click", (event) => {
|
|
384
|
+
event.stopPropagation();
|
|
385
|
+
onSwimlaneChange?.(isCurrent ? null : groupName);
|
|
386
|
+
});
|
|
387
|
+
}
|
|
388
|
+
} : void 0;
|
|
389
|
+
renderIntegratedLegend(legendG, {
|
|
390
|
+
...legendConfig,
|
|
391
|
+
palette,
|
|
392
|
+
isDark,
|
|
393
|
+
width: width - legendX - sDiagramPadding,
|
|
394
|
+
activeGroup: activeTagGroup ?? null,
|
|
395
|
+
...legendCallbacks !== void 0 && { callbacks: legendCallbacks }
|
|
396
|
+
});
|
|
397
|
+
}
|
|
398
|
+
if (swimlaneGroup) {
|
|
399
|
+
renderSwimlaneBoard(
|
|
400
|
+
svg,
|
|
401
|
+
parsed,
|
|
402
|
+
layout,
|
|
403
|
+
swimlaneGroup,
|
|
404
|
+
palette,
|
|
405
|
+
isDark,
|
|
406
|
+
activeTagGroup,
|
|
407
|
+
collapsedLanes,
|
|
408
|
+
collapsedColumns,
|
|
409
|
+
hiddenMetaGroups,
|
|
410
|
+
sDiagramPadding,
|
|
411
|
+
sTitleHeight,
|
|
412
|
+
sLaneHeaderWidth,
|
|
413
|
+
sColumnGap,
|
|
414
|
+
sCollapsedColumnWidth,
|
|
415
|
+
sColumnHeaderHeight,
|
|
416
|
+
sColumnPadding,
|
|
417
|
+
sCardHeaderHeight,
|
|
418
|
+
sCardPaddingY,
|
|
419
|
+
sCardGap,
|
|
420
|
+
sCollapsedLaneHeight,
|
|
421
|
+
sLaneGap,
|
|
422
|
+
sCardSeparatorGap,
|
|
423
|
+
sCardMetaLineHeight,
|
|
424
|
+
sColumnHeaderFontSize,
|
|
425
|
+
sColumnRadius,
|
|
426
|
+
sColumnHeaderRadius,
|
|
427
|
+
sWipFontSize,
|
|
428
|
+
sCardRadius,
|
|
429
|
+
sCardPaddingX,
|
|
430
|
+
sCardStrokeWidth,
|
|
431
|
+
sCardTitleFontSize,
|
|
432
|
+
sCardMetaFontSize
|
|
433
|
+
);
|
|
434
|
+
return;
|
|
435
|
+
}
|
|
436
|
+
const defaultColBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
|
|
437
|
+
const defaultColHeaderBg = isDark ? mix(palette.surface, palette.bg, 70) : mix(palette.surface, palette.bg, 50);
|
|
438
|
+
for (const colLayout of layout.columns) {
|
|
439
|
+
const col = colLayout.column;
|
|
440
|
+
const isColCollapsed = collapsedColumns?.has(col.id) ?? false;
|
|
441
|
+
const g = svg.append("g").attr("class", "kanban-column").attr("data-column-id", col.id).attr("data-line-number", col.lineNumber);
|
|
442
|
+
const thisColBg = defaultColBg;
|
|
443
|
+
const thisColHeaderBg = col.color ? shapeFill(palette, col.color, isDark, { solid }) : defaultColHeaderBg;
|
|
444
|
+
const onHeaderText = col.color ? contrastText(
|
|
445
|
+
thisColHeaderBg,
|
|
446
|
+
palette.textOnFillLight,
|
|
447
|
+
palette.textOnFillDark
|
|
448
|
+
) : palette.text;
|
|
449
|
+
if (isColCollapsed) {
|
|
450
|
+
g.append("rect").attr("x", colLayout.x).attr("y", colLayout.y).attr("width", sCollapsedColumnWidth).attr("height", colLayout.height).attr("rx", sColumnRadius).attr("fill", thisColBg);
|
|
451
|
+
g.append("rect").attr("x", colLayout.x).attr("y", colLayout.y).attr("width", sCollapsedColumnWidth).attr("height", sColumnHeaderHeight).attr("rx", sColumnHeaderRadius).attr("fill", thisColHeaderBg);
|
|
452
|
+
g.append("text").attr("x", colLayout.x + sCollapsedColumnWidth / 2).attr("y", colLayout.y + sColumnHeaderHeight / 2 + sWipFontSize / 2 - 1).attr("font-size", sWipFontSize).attr("font-weight", "bold").attr("fill", col.color ? onHeaderText : palette.textMuted).attr("text-anchor", "middle").text(String(col.cards.length));
|
|
453
|
+
g.append("text").attr("x", colLayout.x + sCollapsedColumnWidth / 2).attr("y", colLayout.y + sColumnHeaderHeight + sColumnPadding).attr("font-size", sCardTitleFontSize).attr("font-weight", "bold").attr("fill", palette.text).attr("text-anchor", "middle").attr("writing-mode", "tb").text(col.name);
|
|
454
|
+
continue;
|
|
455
|
+
}
|
|
456
|
+
g.append("rect").attr("x", colLayout.x).attr("y", colLayout.y).attr("width", colLayout.width).attr("height", colLayout.height).attr("rx", sColumnRadius).attr("fill", thisColBg);
|
|
457
|
+
g.append("rect").attr("x", colLayout.x).attr("y", colLayout.y).attr("width", colLayout.width).attr("height", sColumnHeaderHeight).attr("rx", sColumnHeaderRadius).attr("fill", thisColHeaderBg);
|
|
458
|
+
g.append("text").attr("x", colLayout.x + sColumnPadding).attr(
|
|
459
|
+
"y",
|
|
460
|
+
colLayout.y + sColumnHeaderHeight / 2 + sColumnHeaderFontSize / 2 - 2
|
|
461
|
+
).attr("font-size", sColumnHeaderFontSize).attr("font-weight", "bold").attr("fill", onHeaderText).text(col.name);
|
|
462
|
+
{
|
|
463
|
+
const wipExceeded = col.wipLimit != null && col.cards.length > col.wipLimit;
|
|
464
|
+
const badgeText = col.wipLimit != null ? `${col.cards.length}/${col.wipLimit}` : String(col.cards.length);
|
|
465
|
+
g.append("text").attr("x", colLayout.x + colLayout.width - sColumnPadding).attr("y", colLayout.y + sColumnHeaderHeight / 2 + sWipFontSize / 2 - 1).attr("text-anchor", "end").attr("font-size", sWipFontSize).attr(
|
|
466
|
+
"fill",
|
|
467
|
+
wipExceeded ? palette.colors.red : col.color ? onHeaderText : palette.textMuted
|
|
468
|
+
).attr("font-weight", wipExceeded ? "bold" : "normal").text(badgeText);
|
|
469
|
+
}
|
|
470
|
+
for (const cardLayout of colLayout.cardLayouts) {
|
|
471
|
+
const card = cardLayout.card;
|
|
472
|
+
const resolvedColor = resolveCardTagColor(
|
|
473
|
+
card,
|
|
474
|
+
parsed.tagGroups,
|
|
475
|
+
activeTagGroup ?? null
|
|
476
|
+
);
|
|
477
|
+
const tagMeta = resolveCardTagMeta(
|
|
478
|
+
card,
|
|
479
|
+
parsed.tagGroups,
|
|
480
|
+
hiddenMetaGroups
|
|
481
|
+
);
|
|
482
|
+
const hasMeta = tagMeta.length > 0 || card.details.length > 0;
|
|
483
|
+
const cardFill = shapeFill(
|
|
484
|
+
palette,
|
|
485
|
+
resolvedColor ?? palette.primary,
|
|
486
|
+
isDark,
|
|
487
|
+
{ solid }
|
|
488
|
+
);
|
|
489
|
+
const cardStroke = resolvedColor ?? palette.textMuted;
|
|
490
|
+
const onCardText = contrastText(
|
|
491
|
+
cardFill,
|
|
492
|
+
palette.textOnFillLight,
|
|
493
|
+
palette.textOnFillDark
|
|
494
|
+
);
|
|
495
|
+
const cg = g.append("g").attr("class", "kanban-card").attr("data-card-id", card.id).attr("data-line-number", card.lineNumber);
|
|
496
|
+
if (activeTagGroup) {
|
|
497
|
+
const tagKey = tagAttrKey(activeTagGroup);
|
|
498
|
+
const tagValue = card.tags[tagKey];
|
|
499
|
+
const group = parsed.tagGroups.find(
|
|
500
|
+
(tg) => tg.name.toLowerCase() === tagKey
|
|
501
|
+
);
|
|
502
|
+
const value = tagValue ?? group?.defaultValue;
|
|
503
|
+
if (value) {
|
|
504
|
+
cg.attr(`data-tag-${tagKey}`, value.toLowerCase());
|
|
505
|
+
}
|
|
506
|
+
}
|
|
507
|
+
const cx = colLayout.x + cardLayout.x;
|
|
508
|
+
const cy = colLayout.y + cardLayout.y;
|
|
509
|
+
cg.append("rect").attr("x", cx).attr("y", cy).attr("width", cardLayout.width).attr("height", cardLayout.height).attr("rx", sCardRadius).attr("fill", cardFill).attr("stroke", cardStroke).attr("stroke-width", sCardStrokeWidth);
|
|
510
|
+
const titleEl = cg.append("text").attr("x", cx + sCardPaddingX).attr("y", cy + sCardPaddingY + sCardTitleFontSize).attr("font-size", sCardTitleFontSize).attr("font-weight", "500").attr("fill", onCardText);
|
|
511
|
+
renderInlineText(titleEl, card.title, palette, sCardTitleFontSize);
|
|
512
|
+
if (hasMeta) {
|
|
513
|
+
const separatorY = cy + sCardHeaderHeight;
|
|
514
|
+
cg.append("line").attr("x1", cx).attr("y1", separatorY).attr("x2", cx + cardLayout.width).attr("y2", separatorY).attr("stroke", solid ? onCardText : cardStroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
|
|
515
|
+
let metaY = separatorY + sCardSeparatorGap + sCardMetaFontSize;
|
|
516
|
+
for (const meta of tagMeta) {
|
|
517
|
+
cg.append("text").attr("x", cx + sCardPaddingX).attr("y", metaY).attr("font-size", sCardMetaFontSize).attr("fill", onCardText).text(`${meta.label}: `);
|
|
518
|
+
const labelWidth = measureText(`${meta.label}: `, sCardMetaFontSize);
|
|
519
|
+
cg.append("text").attr("x", cx + sCardPaddingX + labelWidth).attr("y", metaY).attr("font-size", sCardMetaFontSize).attr("fill", onCardText).text(meta.value);
|
|
520
|
+
metaY += sCardMetaLineHeight;
|
|
521
|
+
}
|
|
522
|
+
for (const detail of card.details) {
|
|
523
|
+
const detailEl = cg.append("text").attr("x", cx + sCardPaddingX).attr("y", metaY).attr("font-size", sCardMetaFontSize).attr("fill", onCardText);
|
|
524
|
+
renderInlineText(detailEl, detail, palette, sCardMetaFontSize);
|
|
525
|
+
metaY += sCardMetaLineHeight;
|
|
526
|
+
}
|
|
527
|
+
}
|
|
528
|
+
}
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
function renderKanbanForExport(content, theme, palette) {
|
|
532
|
+
const parsed = parseKanban(content, palette);
|
|
533
|
+
if (parsed.error || parsed.columns.length === 0) return "";
|
|
534
|
+
const isDark = theme === "dark";
|
|
535
|
+
const layout = computeLayout(parsed, palette);
|
|
536
|
+
const container = document.createElement("div");
|
|
537
|
+
renderKanban(container, parsed, palette, isDark, {
|
|
538
|
+
exportDims: { width: layout.totalWidth, height: layout.totalHeight },
|
|
539
|
+
exportMode: true
|
|
540
|
+
});
|
|
541
|
+
const svgEl = container.querySelector("svg");
|
|
542
|
+
return svgEl?.outerHTML ?? "";
|
|
543
|
+
}
|
|
544
|
+
var LANE_HEADER_WIDTH = 140;
|
|
545
|
+
var LANE_GAP = 14;
|
|
546
|
+
function drawSwimlaneIcon(parent, x, y, isActive, palette) {
|
|
547
|
+
const iconG = parent.append("g").attr("class", "kanban-swimlane-icon").attr("transform", `translate(${x}, ${y})`);
|
|
548
|
+
iconG.append("rect").attr("x", -5).attr("y", -5).attr("width", 22).attr("height", 18).attr("fill", "transparent");
|
|
549
|
+
const color = isActive ? palette.primary : palette.textMuted;
|
|
550
|
+
const opacity = isActive ? 1 : 0.35;
|
|
551
|
+
const barWidths = [8, 12, 6];
|
|
552
|
+
const barH = 2;
|
|
553
|
+
const gap = 3;
|
|
554
|
+
for (let i = 0; i < barWidths.length; i++) {
|
|
555
|
+
iconG.append("rect").attr("x", 0).attr("y", i * gap).attr("width", barWidths[i]).attr("height", barH).attr("rx", 1).attr("fill", color).attr("opacity", opacity);
|
|
556
|
+
}
|
|
557
|
+
return iconG;
|
|
558
|
+
}
|
|
559
|
+
function bucketCardsBySwimlane(columns, swimlaneGroup) {
|
|
560
|
+
const tagKey = tagAttrKey(swimlaneGroup.name);
|
|
561
|
+
const buckets = /* @__PURE__ */ new Map();
|
|
562
|
+
for (const entry of swimlaneGroup.entries) {
|
|
563
|
+
buckets.set(entry.value.toLowerCase(), {
|
|
564
|
+
laneName: entry.value,
|
|
565
|
+
laneColor: entry.color,
|
|
566
|
+
isFallback: false,
|
|
567
|
+
cellsByColumn: {}
|
|
568
|
+
});
|
|
569
|
+
}
|
|
570
|
+
const fallbackKey = `__no_${tagKey}__`;
|
|
571
|
+
for (const col of columns) {
|
|
572
|
+
for (const card of col.cards) {
|
|
573
|
+
const raw = card.tags[tagKey] ?? swimlaneGroup.defaultValue;
|
|
574
|
+
let bucketKey;
|
|
575
|
+
if (raw && buckets.has(raw.toLowerCase())) {
|
|
576
|
+
bucketKey = raw.toLowerCase();
|
|
577
|
+
} else {
|
|
578
|
+
if (!buckets.has(fallbackKey)) {
|
|
579
|
+
buckets.set(fallbackKey, {
|
|
580
|
+
laneName: `No ${swimlaneGroup.name}`,
|
|
581
|
+
isFallback: true,
|
|
582
|
+
cellsByColumn: {}
|
|
583
|
+
});
|
|
584
|
+
}
|
|
585
|
+
bucketKey = fallbackKey;
|
|
586
|
+
}
|
|
587
|
+
const bucket = buckets.get(bucketKey);
|
|
588
|
+
(bucket.cellsByColumn[col.id] ??= []).push(card);
|
|
589
|
+
}
|
|
590
|
+
}
|
|
591
|
+
return Array.from(buckets.values());
|
|
592
|
+
}
|
|
593
|
+
function computeCardHeight(card, tagGroups, hiddenMetaGroups, sCardSeparatorGap = CARD_SEPARATOR_GAP, sCardPaddingY = CARD_PADDING_Y, sCardMetaLineHeight = CARD_META_LINE_HEIGHT, sCardHeaderHeight = CARD_HEADER_HEIGHT) {
|
|
594
|
+
const tagMeta = resolveCardTagMeta(card, tagGroups, hiddenMetaGroups);
|
|
595
|
+
const metaCount = tagMeta.length + card.details.length;
|
|
596
|
+
const metaHeight = metaCount > 0 ? sCardSeparatorGap + 1 + sCardPaddingY + metaCount * sCardMetaLineHeight : 0;
|
|
597
|
+
return sCardHeaderHeight + sCardPaddingY + metaHeight;
|
|
598
|
+
}
|
|
599
|
+
function computeSwimlaneLayout(parsed, buckets, baseLayout, collapsedLanes, collapsedColumns, hiddenMetaGroups, sDiagramPadding = DIAGRAM_PADDING, sTitleHeight = TITLE_HEIGHT, sLaneHeaderWidth = LANE_HEADER_WIDTH, sColumnGap = COLUMN_GAP, sCollapsedColumnWidth = COLLAPSED_COLUMN_WIDTH, sColumnHeaderHeight = COLUMN_HEADER_HEIGHT, sColumnPadding = COLUMN_PADDING, sCardHeaderHeight = CARD_HEADER_HEIGHT, sCardPaddingY = CARD_PADDING_Y, sCardGap = CARD_GAP, sCollapsedLaneHeight = COLLAPSED_LANE_HEIGHT, sLaneGap = LANE_GAP, sCardSeparatorGap = CARD_SEPARATOR_GAP, sCardMetaLineHeight = CARD_META_LINE_HEIGHT) {
|
|
600
|
+
const headerHeight = parsed.title && parsed.options["no-title"] !== "on" ? sTitleHeight + 8 : 0;
|
|
601
|
+
const startY = sDiagramPadding + headerHeight;
|
|
602
|
+
const columnXs = [];
|
|
603
|
+
let currentX = sDiagramPadding + sLaneHeaderWidth;
|
|
604
|
+
for (const col of baseLayout.columns) {
|
|
605
|
+
const isColCollapsed = collapsedColumns?.has(col.column.id) ?? false;
|
|
606
|
+
const w = isColCollapsed ? sCollapsedColumnWidth : col.width;
|
|
607
|
+
columnXs.push({ column: col.column, x: currentX, width: w });
|
|
608
|
+
currentX += w + sColumnGap;
|
|
609
|
+
}
|
|
610
|
+
const totalWidth = currentX - sColumnGap + sDiagramPadding;
|
|
611
|
+
const lanes = [];
|
|
612
|
+
let laneY = startY + sColumnHeaderHeight + sColumnPadding;
|
|
613
|
+
const minCellH = sCardHeaderHeight + sCardPaddingY + sCardGap;
|
|
614
|
+
for (const bucket of buckets) {
|
|
615
|
+
const isLaneCollapsed = collapsedLanes?.has(bucket.laneName) ?? false;
|
|
616
|
+
if (isLaneCollapsed) {
|
|
617
|
+
const cells2 = columnXs.map((colInfo) => ({
|
|
618
|
+
column: colInfo.column,
|
|
619
|
+
cards: bucket.cellsByColumn[colInfo.column.id] ?? [],
|
|
620
|
+
cardLayouts: []
|
|
621
|
+
}));
|
|
622
|
+
lanes.push({ bucket, y: laneY, height: sCollapsedLaneHeight, cells: cells2 });
|
|
623
|
+
laneY += sCollapsedLaneHeight + sLaneGap;
|
|
624
|
+
continue;
|
|
625
|
+
}
|
|
626
|
+
let maxCellH = minCellH;
|
|
627
|
+
const cellsTmp = [];
|
|
628
|
+
for (const colInfo of columnXs) {
|
|
629
|
+
const isColCollapsed = collapsedColumns?.has(colInfo.column.id) ?? false;
|
|
630
|
+
const cards = bucket.cellsByColumn[colInfo.column.id] ?? [];
|
|
631
|
+
if (isColCollapsed) {
|
|
632
|
+
cellsTmp.push({ column: colInfo.column, cards, h: 0 });
|
|
633
|
+
continue;
|
|
634
|
+
}
|
|
635
|
+
let h = 0;
|
|
636
|
+
for (const c of cards) {
|
|
637
|
+
h += computeCardHeight(
|
|
638
|
+
c,
|
|
639
|
+
parsed.tagGroups,
|
|
640
|
+
hiddenMetaGroups,
|
|
641
|
+
sCardSeparatorGap,
|
|
642
|
+
sCardPaddingY,
|
|
643
|
+
sCardMetaLineHeight,
|
|
644
|
+
sCardHeaderHeight
|
|
645
|
+
) + sCardGap;
|
|
646
|
+
}
|
|
647
|
+
h = Math.max(h - (cards.length > 0 ? sCardGap : 0), 0);
|
|
648
|
+
cellsTmp.push({ column: colInfo.column, cards, h });
|
|
649
|
+
if (h > maxCellH) maxCellH = h;
|
|
650
|
+
}
|
|
651
|
+
const laneHeight = Math.max(maxCellH, minCellH);
|
|
652
|
+
const cells = cellsTmp.map((tmp, i) => {
|
|
653
|
+
const colInfo = columnXs[i];
|
|
654
|
+
const isColCollapsed = collapsedColumns?.has(colInfo.column.id) ?? false;
|
|
655
|
+
if (isColCollapsed) {
|
|
656
|
+
return { column: tmp.column, cards: tmp.cards, cardLayouts: [] };
|
|
657
|
+
}
|
|
658
|
+
const cardLayouts = [];
|
|
659
|
+
let cy = 0;
|
|
660
|
+
for (const card of tmp.cards) {
|
|
661
|
+
const ch = computeCardHeight(
|
|
662
|
+
card,
|
|
663
|
+
parsed.tagGroups,
|
|
664
|
+
hiddenMetaGroups,
|
|
665
|
+
sCardSeparatorGap,
|
|
666
|
+
sCardPaddingY,
|
|
667
|
+
sCardMetaLineHeight,
|
|
668
|
+
sCardHeaderHeight
|
|
669
|
+
);
|
|
670
|
+
cardLayouts.push({
|
|
671
|
+
x: colInfo.x + sColumnPadding,
|
|
672
|
+
y: laneY + cy,
|
|
673
|
+
width: colInfo.width - sColumnPadding * 2,
|
|
674
|
+
height: ch,
|
|
675
|
+
card
|
|
676
|
+
});
|
|
677
|
+
cy += ch + sCardGap;
|
|
678
|
+
}
|
|
679
|
+
return { column: tmp.column, cards: tmp.cards, cardLayouts };
|
|
680
|
+
});
|
|
681
|
+
lanes.push({ bucket, y: laneY, height: laneHeight, cells });
|
|
682
|
+
laneY += laneHeight + sLaneGap;
|
|
683
|
+
}
|
|
684
|
+
const totalHeight = laneY - sLaneGap + sColumnPadding + sDiagramPadding;
|
|
685
|
+
return { columnXs, lanes, totalWidth, totalHeight, startY };
|
|
686
|
+
}
|
|
687
|
+
function renderSwimlaneBoard(svg, parsed, baseLayout, swimlaneGroup, palette, isDark, activeTagGroup, collapsedLanes, collapsedColumns, hiddenMetaGroups, sDiagramPadding = DIAGRAM_PADDING, sTitleHeight = TITLE_HEIGHT, sLaneHeaderWidth = LANE_HEADER_WIDTH, sColumnGap = COLUMN_GAP, sCollapsedColumnWidth = COLLAPSED_COLUMN_WIDTH, sColumnHeaderHeight = COLUMN_HEADER_HEIGHT, sColumnPadding = COLUMN_PADDING, sCardHeaderHeight = CARD_HEADER_HEIGHT, sCardPaddingY = CARD_PADDING_Y, sCardGap = CARD_GAP, sCollapsedLaneHeight = COLLAPSED_LANE_HEIGHT, sLaneGap = LANE_GAP, sCardSeparatorGap = CARD_SEPARATOR_GAP, sCardMetaLineHeight = CARD_META_LINE_HEIGHT, sColumnHeaderFontSize = COLUMN_HEADER_FONT_SIZE, sColumnRadius = COLUMN_RADIUS, sColumnHeaderRadius = COLUMN_HEADER_RADIUS, sWipFontSize = WIP_FONT_SIZE, sCardRadius = CARD_RADIUS, sCardPaddingX = CARD_PADDING_X, sCardStrokeWidth = CARD_STROKE_WIDTH, sCardTitleFontSize = CARD_TITLE_FONT_SIZE, sCardMetaFontSize = CARD_META_FONT_SIZE) {
|
|
688
|
+
const visibleColumns = parsed.columns.filter((c) => !isArchiveColumn(c.name));
|
|
689
|
+
const buckets = bucketCardsBySwimlane(visibleColumns, swimlaneGroup);
|
|
690
|
+
const grid = computeSwimlaneLayout(
|
|
691
|
+
parsed,
|
|
692
|
+
buckets,
|
|
693
|
+
baseLayout,
|
|
694
|
+
collapsedLanes,
|
|
695
|
+
collapsedColumns,
|
|
696
|
+
hiddenMetaGroups,
|
|
697
|
+
sDiagramPadding,
|
|
698
|
+
sTitleHeight,
|
|
699
|
+
sLaneHeaderWidth,
|
|
700
|
+
sColumnGap,
|
|
701
|
+
sCollapsedColumnWidth,
|
|
702
|
+
sColumnHeaderHeight,
|
|
703
|
+
sColumnPadding,
|
|
704
|
+
sCardHeaderHeight,
|
|
705
|
+
sCardPaddingY,
|
|
706
|
+
sCardGap,
|
|
707
|
+
sCollapsedLaneHeight,
|
|
708
|
+
sLaneGap,
|
|
709
|
+
sCardSeparatorGap,
|
|
710
|
+
sCardMetaLineHeight
|
|
711
|
+
);
|
|
712
|
+
const currentW = parseFloat(svg.attr("width") || "0");
|
|
713
|
+
const currentH = parseFloat(svg.attr("height") || "0");
|
|
714
|
+
if (grid.totalWidth > currentW) {
|
|
715
|
+
svg.attr("width", grid.totalWidth);
|
|
716
|
+
svg.attr(
|
|
717
|
+
"viewBox",
|
|
718
|
+
`0 0 ${grid.totalWidth} ${Math.max(currentH, grid.totalHeight)}`
|
|
719
|
+
);
|
|
720
|
+
}
|
|
721
|
+
if (grid.totalHeight > currentH) {
|
|
722
|
+
svg.attr("height", grid.totalHeight);
|
|
723
|
+
svg.attr(
|
|
724
|
+
"viewBox",
|
|
725
|
+
`0 0 ${Math.max(currentW, grid.totalWidth)} ${grid.totalHeight}`
|
|
726
|
+
);
|
|
727
|
+
}
|
|
728
|
+
const defaultColBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
|
|
729
|
+
const defaultColHeaderBg = isDark ? mix(palette.surface, palette.bg, 70) : mix(palette.surface, palette.bg, 50);
|
|
730
|
+
for (const colInfo of grid.columnXs) {
|
|
731
|
+
const col = colInfo.column;
|
|
732
|
+
const isColCollapsed = collapsedColumns?.has(col.id) ?? false;
|
|
733
|
+
const headerG = svg.append("g").attr("class", "kanban-column kanban-column-header").attr("data-column-id", col.id).attr("data-line-number", col.lineNumber);
|
|
734
|
+
const colHeaderBg = col.color ? shapeFill(palette, col.color, isDark, {
|
|
735
|
+
solid: parsed.options["solid-fill"] === "on"
|
|
736
|
+
}) : defaultColHeaderBg;
|
|
737
|
+
headerG.append("rect").attr("x", colInfo.x).attr("y", grid.startY).attr("width", colInfo.width).attr("height", sColumnHeaderHeight).attr("rx", sColumnHeaderRadius).attr("fill", colHeaderBg);
|
|
738
|
+
if (isColCollapsed) {
|
|
739
|
+
headerG.append("text").attr("x", colInfo.x + colInfo.width / 2).attr("y", grid.startY + sColumnHeaderHeight / 2 + sWipFontSize / 2 - 1).attr("font-size", sWipFontSize).attr("font-weight", "bold").attr("fill", palette.textMuted).attr("text-anchor", "middle").text(String(col.cards.length));
|
|
740
|
+
} else {
|
|
741
|
+
headerG.append("text").attr("x", colInfo.x + sColumnPadding).attr(
|
|
742
|
+
"y",
|
|
743
|
+
grid.startY + sColumnHeaderHeight / 2 + sColumnHeaderFontSize / 2 - 2
|
|
744
|
+
).attr("font-size", sColumnHeaderFontSize).attr("font-weight", "bold").attr("fill", palette.text).text(col.name);
|
|
745
|
+
const wipExceeded = col.wipLimit != null && col.cards.length > col.wipLimit;
|
|
746
|
+
const badgeText = col.wipLimit != null ? `${col.cards.length}/${col.wipLimit}` : String(col.cards.length);
|
|
747
|
+
headerG.append("text").attr("x", colInfo.x + colInfo.width - sColumnPadding).attr("y", grid.startY + sColumnHeaderHeight / 2 + sWipFontSize / 2 - 1).attr("text-anchor", "end").attr("font-size", sWipFontSize).attr("fill", wipExceeded ? palette.colors.red : palette.textMuted).attr("font-weight", wipExceeded ? "bold" : "normal").text(badgeText);
|
|
748
|
+
}
|
|
749
|
+
}
|
|
750
|
+
for (const lane of grid.lanes) {
|
|
751
|
+
const isLaneCollapsed = collapsedLanes?.has(lane.bucket.laneName) ?? false;
|
|
752
|
+
const laneG = svg.append("g").attr("class", "kanban-lane").attr("data-lane-name", lane.bucket.laneName);
|
|
753
|
+
const headerG = laneG.append("g").attr("class", "kanban-lane-header").attr(
|
|
754
|
+
"transform",
|
|
755
|
+
`translate(${sDiagramPadding}, ${lane.y - sColumnPadding})`
|
|
756
|
+
);
|
|
757
|
+
headerG.append("rect").attr("x", 0).attr("y", 0).attr("width", sLaneHeaderWidth - 8).attr("height", lane.height + sColumnPadding * 2).attr("rx", sColumnRadius).attr("fill", defaultColBg);
|
|
758
|
+
let labelX = 10;
|
|
759
|
+
const totalCards = lane.cells.reduce((s, c) => s + c.cards.length, 0);
|
|
760
|
+
if (lane.bucket.laneColor) {
|
|
761
|
+
headerG.append("circle").attr("cx", labelX + 4).attr("cy", 16).attr("r", 4).attr("fill", lane.bucket.laneColor);
|
|
762
|
+
labelX += 14;
|
|
763
|
+
}
|
|
764
|
+
if (isLaneCollapsed) {
|
|
765
|
+
headerG.append("text").attr("x", labelX).attr("y", 20).attr("font-size", 10).attr("fill", palette.textMuted).text(`${lane.bucket.laneName} (${totalCards})`);
|
|
766
|
+
} else {
|
|
767
|
+
headerG.append("text").attr("x", labelX).attr("y", 20).attr("font-size", 12).attr("font-weight", "bold").attr("fill", lane.bucket.isFallback ? palette.textMuted : palette.text).text(lane.bucket.laneName);
|
|
768
|
+
}
|
|
769
|
+
if (isLaneCollapsed) {
|
|
770
|
+
for (const cell of lane.cells) {
|
|
771
|
+
const isColCollapsed = collapsedColumns?.has(cell.column.id) ?? false;
|
|
772
|
+
if (cell.cards.length > 0) {
|
|
773
|
+
const colInfo = grid.columnXs.find(
|
|
774
|
+
(c) => c.column.id === cell.column.id
|
|
775
|
+
);
|
|
776
|
+
if (!colInfo) continue;
|
|
777
|
+
const placeholderBg = lane.bucket.laneColor ? mix(lane.bucket.laneColor, palette.bg, isDark ? 40 : 28) : mix(palette.textMuted, palette.bg, isDark ? 28 : 22);
|
|
778
|
+
const pw = isColCollapsed ? sCollapsedColumnWidth - 8 : colInfo.width - sColumnPadding * 2;
|
|
779
|
+
laneG.append("rect").attr("x", colInfo.x + (isColCollapsed ? 4 : sColumnPadding)).attr("y", lane.y).attr("width", pw).attr("height", 18).attr("rx", 4).attr("fill", placeholderBg);
|
|
780
|
+
laneG.append("text").attr(
|
|
781
|
+
"x",
|
|
782
|
+
colInfo.x + (isColCollapsed ? 4 : sColumnPadding) + pw / 2
|
|
783
|
+
).attr("y", lane.y + 13).attr("font-size", sWipFontSize).attr("font-weight", "bold").attr("fill", palette.textMuted).attr("text-anchor", "middle").text(String(cell.cards.length));
|
|
784
|
+
}
|
|
785
|
+
}
|
|
786
|
+
}
|
|
787
|
+
laneG.append("line").attr("x1", sDiagramPadding + sLaneHeaderWidth).attr("x2", grid.totalWidth - sDiagramPadding).attr("y1", lane.y + lane.height + sColumnPadding).attr("y2", lane.y + lane.height + sColumnPadding).attr("stroke", palette.border ?? palette.textMuted).attr("stroke-opacity", 0.4).attr("stroke-width", 1);
|
|
788
|
+
if (!isLaneCollapsed) {
|
|
789
|
+
for (const cell of lane.cells) {
|
|
790
|
+
const isColCollapsed = collapsedColumns?.has(cell.column.id) ?? false;
|
|
791
|
+
if (isColCollapsed && cell.cards.length > 0) {
|
|
792
|
+
const colInfo = grid.columnXs.find(
|
|
793
|
+
(c) => c.column.id === cell.column.id
|
|
794
|
+
);
|
|
795
|
+
if (colInfo) {
|
|
796
|
+
const placeholderBg = lane.bucket.laneColor ? mix(lane.bucket.laneColor, palette.bg, isDark ? 40 : 28) : mix(palette.textMuted, palette.bg, isDark ? 28 : 22);
|
|
797
|
+
laneG.append("rect").attr("x", colInfo.x + 4).attr("y", lane.y).attr("width", sCollapsedColumnWidth - 8).attr("height", 22).attr("rx", 4).attr("fill", placeholderBg);
|
|
798
|
+
laneG.append("text").attr("x", colInfo.x + sCollapsedColumnWidth / 2).attr("y", lane.y + 16).attr("font-size", sWipFontSize).attr("font-weight", "bold").attr("fill", palette.textMuted).attr("text-anchor", "middle").text(String(cell.cards.length));
|
|
799
|
+
}
|
|
800
|
+
continue;
|
|
801
|
+
}
|
|
802
|
+
for (const cardLayout of cell.cardLayouts) {
|
|
803
|
+
renderSwimlaneCard(
|
|
804
|
+
laneG,
|
|
805
|
+
cardLayout,
|
|
806
|
+
parsed.tagGroups,
|
|
807
|
+
activeTagGroup,
|
|
808
|
+
palette,
|
|
809
|
+
isDark,
|
|
810
|
+
hiddenMetaGroups,
|
|
811
|
+
parsed.options["solid-fill"] === "on",
|
|
812
|
+
sCardRadius,
|
|
813
|
+
sCardPaddingX,
|
|
814
|
+
sCardPaddingY,
|
|
815
|
+
sCardStrokeWidth,
|
|
816
|
+
sCardTitleFontSize,
|
|
817
|
+
sCardMetaFontSize,
|
|
818
|
+
sCardHeaderHeight,
|
|
819
|
+
sCardSeparatorGap,
|
|
820
|
+
sCardMetaLineHeight
|
|
821
|
+
);
|
|
822
|
+
}
|
|
823
|
+
}
|
|
824
|
+
}
|
|
825
|
+
}
|
|
826
|
+
}
|
|
827
|
+
function renderSwimlaneCard(parent, cardLayout, tagGroups, activeTagGroup, palette, isDark, hiddenMetaGroups, solid, sCardRadius = CARD_RADIUS, sCardPaddingX = CARD_PADDING_X, sCardPaddingY = CARD_PADDING_Y, sCardStrokeWidth = CARD_STROKE_WIDTH, sCardTitleFontSize = CARD_TITLE_FONT_SIZE, sCardMetaFontSize = CARD_META_FONT_SIZE, sCardHeaderHeight = CARD_HEADER_HEIGHT, sCardSeparatorGap = CARD_SEPARATOR_GAP, sCardMetaLineHeight = CARD_META_LINE_HEIGHT) {
|
|
828
|
+
const card = cardLayout.card;
|
|
829
|
+
const resolvedColor = resolveCardTagColor(card, tagGroups, activeTagGroup);
|
|
830
|
+
const tagMeta = resolveCardTagMeta(card, tagGroups, hiddenMetaGroups);
|
|
831
|
+
const hasMeta = tagMeta.length > 0 || card.details.length > 0;
|
|
832
|
+
const cardFill = shapeFill(
|
|
833
|
+
palette,
|
|
834
|
+
resolvedColor ?? palette.primary,
|
|
835
|
+
isDark,
|
|
836
|
+
{
|
|
837
|
+
...solid !== void 0 && { solid }
|
|
838
|
+
}
|
|
839
|
+
);
|
|
840
|
+
const cardStroke = resolvedColor ?? palette.textMuted;
|
|
841
|
+
const onCardText = contrastText(
|
|
842
|
+
cardFill,
|
|
843
|
+
palette.textOnFillLight,
|
|
844
|
+
palette.textOnFillDark
|
|
845
|
+
);
|
|
846
|
+
const cg = parent.append("g").attr("class", "kanban-card").attr("data-card-id", card.id).attr("data-line-number", card.lineNumber);
|
|
847
|
+
if (activeTagGroup) {
|
|
848
|
+
const tagKey = tagAttrKey(activeTagGroup);
|
|
849
|
+
const group = tagGroups.find((tg) => tg.name.toLowerCase() === tagKey);
|
|
850
|
+
const value = card.tags[tagKey] ?? group?.defaultValue;
|
|
851
|
+
if (value) {
|
|
852
|
+
cg.attr(`data-tag-${tagKey}`, value.toLowerCase());
|
|
853
|
+
}
|
|
854
|
+
}
|
|
855
|
+
const cx = cardLayout.x;
|
|
856
|
+
const cy = cardLayout.y;
|
|
857
|
+
cg.append("rect").attr("x", cx).attr("y", cy).attr("width", cardLayout.width).attr("height", cardLayout.height).attr("rx", sCardRadius).attr("fill", cardFill).attr("stroke", cardStroke).attr("stroke-width", sCardStrokeWidth);
|
|
858
|
+
const titleEl = cg.append("text").attr("x", cx + sCardPaddingX).attr("y", cy + sCardPaddingY + sCardTitleFontSize).attr("font-size", sCardTitleFontSize).attr("font-weight", "500").attr("fill", onCardText);
|
|
859
|
+
renderInlineText(titleEl, card.title, palette, sCardTitleFontSize);
|
|
860
|
+
if (hasMeta) {
|
|
861
|
+
const separatorY = cy + sCardHeaderHeight;
|
|
862
|
+
cg.append("line").attr("x1", cx).attr("y1", separatorY).attr("x2", cx + cardLayout.width).attr("y2", separatorY).attr("stroke", cardStroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
|
|
863
|
+
let metaY = separatorY + sCardSeparatorGap + sCardMetaFontSize;
|
|
864
|
+
for (const meta of tagMeta) {
|
|
865
|
+
cg.append("text").attr("x", cx + sCardPaddingX).attr("y", metaY).attr("font-size", sCardMetaFontSize).attr("fill", palette.textMuted).text(`${meta.label}: `);
|
|
866
|
+
const labelWidth = measureText(`${meta.label}: `, sCardMetaFontSize);
|
|
867
|
+
cg.append("text").attr("x", cx + sCardPaddingX + labelWidth).attr("y", metaY).attr("font-size", sCardMetaFontSize).attr("fill", onCardText).text(meta.value);
|
|
868
|
+
metaY += sCardMetaLineHeight;
|
|
869
|
+
}
|
|
870
|
+
for (const detail of card.details) {
|
|
871
|
+
const detailEl = cg.append("text").attr("x", cx + sCardPaddingX).attr("y", metaY).attr("font-size", sCardMetaFontSize).attr("fill", palette.textMuted);
|
|
872
|
+
renderInlineText(detailEl, detail, palette, sCardMetaFontSize);
|
|
873
|
+
metaY += sCardMetaLineHeight;
|
|
874
|
+
}
|
|
875
|
+
}
|
|
876
|
+
}
|
|
877
|
+
|
|
878
|
+
export {
|
|
879
|
+
computeCardMove,
|
|
880
|
+
computeCardArchive,
|
|
881
|
+
isArchiveColumn,
|
|
882
|
+
renderKanban,
|
|
883
|
+
renderKanbanForExport
|
|
884
|
+
};
|
|
885
|
+
//# sourceMappingURL=chunk-MZSBFAPJ.js.map
|