@cardenelabs/cdl 0.113.0 → 0.115.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/CHANGELOG.md +71 -1
- package/dist/index.cjs +67 -30
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +67 -30
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +67 -30
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +67 -30
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/kinds/mind-map.tsx +113 -63
- package/src/kinds/tree.tsx +49 -2
package/dist/index.js
CHANGED
|
@@ -15929,6 +15929,28 @@ function computeTreeLayout(treeNodes, canvasW, canvasH) {
|
|
|
15929
15929
|
const \u8981\u308B = measureTextWidth(\u540D\u524D.text, { fontSize: \u540D\u524D.fontSize}) + (nodeW - \u4F7F\u3048\u308B\u5E45(nodeW));
|
|
15930
15930
|
return Math.min(Math.max(\u8981\u308B, nodeW), slotW * 0.92);
|
|
15931
15931
|
};
|
|
15932
|
+
const \u8449\u306E\u4E26\u3073 = [];
|
|
15933
|
+
const \u6BB5\u306E\u8868 = /* @__PURE__ */ new Map();
|
|
15934
|
+
const \u5E45\u306E\u8868 = /* @__PURE__ */ new Map();
|
|
15935
|
+
{
|
|
15936
|
+
const \u898B\u305F = /* @__PURE__ */ new Set();
|
|
15937
|
+
const \u4E0B\u898B = (n, depth) => {
|
|
15938
|
+
\u898B\u305F.add(n.id);
|
|
15939
|
+
\u6BB5\u306E\u8868.set(n.id, depth);
|
|
15940
|
+
\u5E45\u306E\u8868.set(n.id, \u7BB1\u306E\u5E45(n, depth));
|
|
15941
|
+
const kids = (childrenOf.get(n.id) ?? []).filter((k) => !\u898B\u305F.has(k.id));
|
|
15942
|
+
if (kids.length === 0) {
|
|
15943
|
+
\u8449\u306E\u4E26\u3073.push(n.id);
|
|
15944
|
+
return;
|
|
15945
|
+
}
|
|
15946
|
+
for (const k of kids) \u4E0B\u898B(k, depth + 1);
|
|
15947
|
+
};
|
|
15948
|
+
for (const r of roots) if (!\u898B\u305F.has(r.id)) \u4E0B\u898B(r, 0);
|
|
15949
|
+
}
|
|
15950
|
+
const \u8449\u306E\u6570 = Math.max(\u8449\u306E\u4E26\u3073.length, 1);
|
|
15951
|
+
const \u6BB5\u306E\u9699\u9593 = depthGap - nodeH;
|
|
15952
|
+
const \u8449\u306E\u9593\u9694 = Math.min(slotW, nodeW + \u6BB5\u306E\u9699\u9593);
|
|
15953
|
+
const \u8449\u306Ex = (i) => canvasW / 2 - (\u8449\u306E\u6570 - 1) * \u8449\u306E\u9593\u9694 / 2 + i * \u8449\u306E\u9593\u9694;
|
|
15932
15954
|
const posOf = /* @__PURE__ */ new Map();
|
|
15933
15955
|
const nodes = [];
|
|
15934
15956
|
const placed = /* @__PURE__ */ new Set();
|
|
@@ -15938,7 +15960,7 @@ function computeTreeLayout(treeNodes, canvasW, canvasH) {
|
|
|
15938
15960
|
const kids = (childrenOf.get(n.id) ?? []).filter((k) => !placed.has(k.id));
|
|
15939
15961
|
let x;
|
|
15940
15962
|
if (kids.length === 0) {
|
|
15941
|
-
x = leafCursor
|
|
15963
|
+
x = \u8449\u306Ex(leafCursor);
|
|
15942
15964
|
leafCursor += 1;
|
|
15943
15965
|
} else {
|
|
15944
15966
|
const xs = kids.map((k) => place(k, depth + 1));
|
|
@@ -15952,7 +15974,7 @@ function computeTreeLayout(treeNodes, canvasW, canvasH) {
|
|
|
15952
15974
|
...n.subtitle !== void 0 ? { subtitle: n.subtitle } : {},
|
|
15953
15975
|
x,
|
|
15954
15976
|
y,
|
|
15955
|
-
w: \u7BB1\u306E\u5E45(n, depth),
|
|
15977
|
+
w: \u5E45\u306E\u8868.get(n.id) ?? \u7BB1\u306E\u5E45(n, depth),
|
|
15956
15978
|
h: nodeH,
|
|
15957
15979
|
depth,
|
|
15958
15980
|
...n.unresolved ? { unresolved: true } : {}
|
|
@@ -16139,7 +16161,7 @@ function \u63CF\u304F\u6A2A\u306E\u7AEF(n) {
|
|
|
16139
16161
|
if (n.isRoot || !n.isLeaf) return [n.x - n.w / 2, n.x + n.w / 2];
|
|
16140
16162
|
const \u8D77\u70B9 = n.x + (n.side === "right" ? -n.w / 2 : n.w / 2);
|
|
16141
16163
|
const \u540D\u524D = \u653E\u5C04\u306E\u884C(n)[0];
|
|
16142
|
-
const \u5E45 =
|
|
16164
|
+
const \u5E45 = textWidth(\u540D\u524D.text, \u540D\u524D.fontSize);
|
|
16143
16165
|
return n.side === "right" ? [\u8D77\u70B9, \u8D77\u70B9 + \u5E45] : [\u8D77\u70B9 - \u5E45, \u8D77\u70B9];
|
|
16144
16166
|
}
|
|
16145
16167
|
function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
|
|
@@ -16212,38 +16234,52 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
|
|
|
16212
16234
|
if (kids.length === 0) return 1;
|
|
16213
16235
|
return kids.reduce((sum, k) => sum + leafCountOf(k.id, seen), 0);
|
|
16214
16236
|
};
|
|
16215
|
-
const
|
|
16237
|
+
const leftBranches = firstLevel.slice(0, leftCount);
|
|
16238
|
+
const rightBranches = firstLevel.slice(leftCount);
|
|
16216
16239
|
const minLayer1XOffset = rootW / 2 + branchW / 2 + MIND_BOX_GAP;
|
|
16217
16240
|
const preferredSubDx = subBranchW + 20;
|
|
16218
|
-
const reserve = maxSubDepth > 0 ? branchW / 2 + maxSubDepth * preferredSubDx : 0;
|
|
16219
|
-
const maxLayer1XOffset = Math.max(minLayer1XOffset, canvasW / 2 - reserve);
|
|
16220
|
-
const \u8449\u306E\u540D\u524D\u306E\u6700\u5927\u5E45 = Math.max(
|
|
16221
|
-
0,
|
|
16222
|
-
...firstLevel.filter((br) => (childrenOf.get(br.id) ?? []).length === 0).map((br) => {
|
|
16223
|
-
const \u540D\u524D = \u653E\u5C04\u306E\u884C({ title: br.title, isRoot: false })[0];
|
|
16224
|
-
return measureTextWidth(\u540D\u524D.text, { fontSize: \u540D\u524D.fontSize});
|
|
16225
|
-
})
|
|
16226
|
-
);
|
|
16227
|
-
const \u540D\u524D\u3067\u6C7A\u307E\u308B\u4E0A\u9650 = canvasW / 2 + branchW / 2 - \u8449\u306E\u540D\u524D\u306E\u6700\u5927\u5E45;
|
|
16228
|
-
const layer1XOffset = Math.max(minLayer1XOffset, Math.min(\u540D\u524D\u3067\u6C7A\u307E\u308B\u4E0A\u9650, maxLayer1XOffset));
|
|
16229
|
-
const room = canvasW / 2 - layer1XOffset;
|
|
16230
16241
|
const MIN_SUB_W = 56;
|
|
16231
16242
|
const PREFERRED_GAP = MIND_BOX_GAP;
|
|
16232
|
-
const
|
|
16233
|
-
|
|
16234
|
-
|
|
16235
|
-
|
|
16236
|
-
const
|
|
16237
|
-
|
|
16238
|
-
|
|
16239
|
-
|
|
16243
|
+
const \u679D\u306E\u540D\u524D\u306E\u5E45 = (title) => {
|
|
16244
|
+
const \u540D\u524D = \u653E\u5C04\u306E\u884C({ title, isRoot: false })[0];
|
|
16245
|
+
return textWidth(\u540D\u524D.text, \u540D\u524D.fontSize);
|
|
16246
|
+
};
|
|
16247
|
+
const \u679D\u306E\u6A2A\u3092\u6C7A\u3081\u308B = (br) => {
|
|
16248
|
+
const maxSubDepth = subDepthOf(br.id, /* @__PURE__ */ new Set());
|
|
16249
|
+
const \u4E0A\u9650 = maxSubDepth > 0 ? canvasW / 2 - (branchW / 2 + maxSubDepth * preferredSubDx) : canvasW / 2 + branchW / 2 - \u679D\u306E\u540D\u524D\u306E\u5E45(br.title);
|
|
16250
|
+
const layer1XOffset = Math.floor(Math.max(minLayer1XOffset, \u4E0A\u9650));
|
|
16251
|
+
const room = canvasW / 2 - layer1XOffset;
|
|
16252
|
+
const gapRoom = maxSubDepth > 0 ? (room - branchW / 2 - maxSubDepth * MIN_SUB_W) / maxSubDepth : 0;
|
|
16253
|
+
const gap = Math.floor(Math.max(8, Math.min(PREFERRED_GAP, gapRoom)));
|
|
16254
|
+
const effSubW = maxSubDepth > 0 ? Math.floor(
|
|
16255
|
+
Math.max(1, Math.min(subBranchW, (room - branchW / 2 - maxSubDepth * gap) / maxSubDepth))
|
|
16256
|
+
) : subBranchW;
|
|
16257
|
+
const step1 = (branchW + effSubW) / 2 + gap;
|
|
16258
|
+
const stepN = effSubW + gap;
|
|
16259
|
+
return {
|
|
16260
|
+
layer1XOffset,
|
|
16261
|
+
effSubW,
|
|
16262
|
+
subOffset: (subDepth) => subDepth <= 0 ? 0 : step1 + (subDepth - 1) * stepN
|
|
16263
|
+
};
|
|
16264
|
+
};
|
|
16265
|
+
const \u6A2A\u306E\u5272\u4ED8\u8868 = new Map(
|
|
16266
|
+
firstLevel.map((br) => [br.id, \u679D\u306E\u6A2A\u3092\u6C7A\u3081\u308B(br)])
|
|
16267
|
+
);
|
|
16268
|
+
const \u4E00\u756A\u5185\u5074\u306E\u96E2\u308C = Math.min(
|
|
16269
|
+
...firstLevel.length > 0 ? firstLevel.map((br) => \u6A2A\u306E\u5272\u4ED8\u8868.get(br.id).layer1XOffset) : [minLayer1XOffset]
|
|
16270
|
+
);
|
|
16240
16271
|
const leavesOfSide = (brs) => Math.max(
|
|
16241
16272
|
1,
|
|
16242
16273
|
brs.reduce((sum, br) => sum + leafCountOf(br.id, /* @__PURE__ */ new Set()), 0)
|
|
16243
16274
|
);
|
|
16244
16275
|
const sideLaneCount = Math.max(leavesOfSide(leftBranches), leavesOfSide(rightBranches));
|
|
16245
16276
|
const laneBandH = Math.max(0, canvasH - BRANCH_BOX_H_MAX);
|
|
16246
|
-
const rowGap = sideLaneCount > 1 ? Math.min(
|
|
16277
|
+
const rowGap = sideLaneCount > 1 ? Math.min(
|
|
16278
|
+
laneBandH / (sideLaneCount - 1),
|
|
16279
|
+
// 帯は図で 1 つなので、**一番内側の枝** から上限を取る (#966)。
|
|
16280
|
+
// 外へ出た枝に合わせると、内側に残った枝の傾きが 45 度を超える
|
|
16281
|
+
\u7E26\u306E\u9593\u9694\u306E\u4E0A\u9650(\u4E00\u756A\u5185\u5074\u306E\u96E2\u308C)
|
|
16282
|
+
) : subBranchH + 14;
|
|
16247
16283
|
const effSubH = Math.min(SUB_BOX_H_MAX, rowGap * 0.7);
|
|
16248
16284
|
const effBranchH = Math.min(BRANCH_BOX_H_MAX, rowGap * 0.7);
|
|
16249
16285
|
const \u7AEF\u306E\u4F59\u308A = Math.max(effSubH, effBranchH) / 2;
|
|
@@ -16259,11 +16295,11 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
|
|
|
16259
16295
|
const half = nodeHalfW.get(mindData.rootId) ?? rootW / 2;
|
|
16260
16296
|
return \u4E2D\u5FC3\u306Ex + (isLeft ? -half : half);
|
|
16261
16297
|
};
|
|
16262
|
-
const placeSubtree = (node, subDepth, isLeft, tone, placed, laneRef) => {
|
|
16298
|
+
const placeSubtree = (node, subDepth, isLeft, tone, placed, laneRef, \u6A2A) => {
|
|
16263
16299
|
placed.add(node.id);
|
|
16264
16300
|
const dirX = isLeft ? -1 : 1;
|
|
16265
|
-
const x = cx + dirX * (layer1XOffset + subOffset(subDepth));
|
|
16266
|
-
const w = subDepth === 0 ? branchW : effSubW;
|
|
16301
|
+
const x = cx + dirX * (\u6A2A.layer1XOffset + \u6A2A.subOffset(subDepth));
|
|
16302
|
+
const w = subDepth === 0 ? branchW : \u6A2A.effSubW;
|
|
16267
16303
|
const h = subDepth === 0 ? effBranchH : effSubH;
|
|
16268
16304
|
const myTone = node.tone ?? tone;
|
|
16269
16305
|
const kids = (childrenOf.get(node.id) ?? []).filter((k) => !placed.has(k.id));
|
|
@@ -16279,7 +16315,8 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
|
|
|
16279
16315
|
isLeft,
|
|
16280
16316
|
myTone ?? MIND_TONES[i % MIND_TONES.length],
|
|
16281
16317
|
placed,
|
|
16282
|
-
laneRef
|
|
16318
|
+
laneRef,
|
|
16319
|
+
\u6A2A
|
|
16283
16320
|
)
|
|
16284
16321
|
);
|
|
16285
16322
|
y = (ys[0] + ys[ys.length - 1]) / 2;
|
|
@@ -16312,7 +16349,7 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
|
|
|
16312
16349
|
const placed = /* @__PURE__ */ new Set();
|
|
16313
16350
|
brs.forEach((br, i) => {
|
|
16314
16351
|
const tone = br.tone ?? MIND_TONES[(toneBase + i) % MIND_TONES.length];
|
|
16315
|
-
placeSubtree(br, 0, isLeft, tone, placed, laneRef);
|
|
16352
|
+
placeSubtree(br, 0, isLeft, tone, placed, laneRef, \u6A2A\u306E\u5272\u4ED8\u8868.get(br.id) ?? \u679D\u306E\u6A2A\u3092\u6C7A\u3081\u308B(br));
|
|
16316
16353
|
});
|
|
16317
16354
|
};
|
|
16318
16355
|
placeSide(leftBranches, true, 0);
|