@cardenelabs/cdl 0.28.0 → 0.29.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 +31 -1
- package/dist/index.cjs +23 -18
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +6 -2
- package/dist/index.d.ts +6 -2
- package/dist/index.js +23 -18
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +3 -0
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +1 -1
- package/dist/react.d.ts +1 -1
- package/dist/react.js +3 -0
- package/dist/react.js.map +1 -1
- package/dist/{render-ViWKnlu1.d.cts → render-CabTMeao.d.cts} +13 -0
- package/dist/{render-ViWKnlu1.d.ts → render-CabTMeao.d.ts} +13 -0
- package/package.json +1 -1
- package/src/builder.ts +6 -0
- package/src/layout.ts +2 -0
- package/src/presets.ts +18 -18
- package/src/render/stage.tsx +1 -0
- package/src/types.ts +13 -0
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-
|
|
2
|
-
export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as EDGE_HEADS, w as EDGE_HEAD_DEFAULT, x as EDGE_HEAD_FILLS, y as EDGE_HEAD_FILL_DEFAULT, z as EDGE_REVEALS, A as EDGE_REVEAL_DEFAULT, D as EDGE_STYLES, F as EdgeReveal, I as InteractiveHandlerMap, G as InteractiveSignalsAccessor, H as LaidLane, K as NODE_KINDS, M as ScrollProgressHandle, O as TONES, P as computeEventBindingKey, U as computeFormulaKey, V as computeInputSignalKey, W as computeScrollTriggerKey, X as computed, Y as createInteractiveSignalsAccessor, Z as createScrollProgressHandle, _ as createScrollProgressSignals, $ as hasInteractivePrimitives, a0 as sequenceBoardMetrics, a1 as sequenceStepId, a2 as signal } from './render-
|
|
1
|
+
import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-CabTMeao.cjs';
|
|
2
|
+
export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as EDGE_HEADS, w as EDGE_HEAD_DEFAULT, x as EDGE_HEAD_FILLS, y as EDGE_HEAD_FILL_DEFAULT, z as EDGE_REVEALS, A as EDGE_REVEAL_DEFAULT, D as EDGE_STYLES, F as EdgeReveal, I as InteractiveHandlerMap, G as InteractiveSignalsAccessor, H as LaidLane, K as NODE_KINDS, M as ScrollProgressHandle, O as TONES, P as computeEventBindingKey, U as computeFormulaKey, V as computeInputSignalKey, W as computeScrollTriggerKey, X as computed, Y as createInteractiveSignalsAccessor, Z as createScrollProgressHandle, _ as createScrollProgressSignals, $ as hasInteractivePrimitives, a0 as sequenceBoardMetrics, a1 as sequenceStepId, a2 as signal } from './render-CabTMeao.cjs';
|
|
3
3
|
import { JSX } from 'react';
|
|
4
4
|
|
|
5
5
|
declare function effect(fn: () => void | (() => void)): () => void;
|
|
@@ -1210,6 +1210,10 @@ declare function diagram(id: string, options: {
|
|
|
1210
1210
|
* この図をどの配色で描くか (#1553)。 詳細は `CdlDiagram.palette` の doc 参照。
|
|
1211
1211
|
*/
|
|
1212
1212
|
palette?: string;
|
|
1213
|
+
/**
|
|
1214
|
+
* この図がどの種類か (#645)。 詳しくは `CdlDiagram.type` の説明を参照。
|
|
1215
|
+
*/
|
|
1216
|
+
type?: string;
|
|
1213
1217
|
}): DiagramBuilder;
|
|
1214
1218
|
|
|
1215
1219
|
/**
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-
|
|
2
|
-
export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as EDGE_HEADS, w as EDGE_HEAD_DEFAULT, x as EDGE_HEAD_FILLS, y as EDGE_HEAD_FILL_DEFAULT, z as EDGE_REVEALS, A as EDGE_REVEAL_DEFAULT, D as EDGE_STYLES, F as EdgeReveal, I as InteractiveHandlerMap, G as InteractiveSignalsAccessor, H as LaidLane, K as NODE_KINDS, M as ScrollProgressHandle, O as TONES, P as computeEventBindingKey, U as computeFormulaKey, V as computeInputSignalKey, W as computeScrollTriggerKey, X as computed, Y as createInteractiveSignalsAccessor, Z as createScrollProgressHandle, _ as createScrollProgressSignals, $ as hasInteractivePrimitives, a0 as sequenceBoardMetrics, a1 as sequenceStepId, a2 as signal } from './render-
|
|
1
|
+
import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-CabTMeao.js';
|
|
2
|
+
export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as EDGE_HEADS, w as EDGE_HEAD_DEFAULT, x as EDGE_HEAD_FILLS, y as EDGE_HEAD_FILL_DEFAULT, z as EDGE_REVEALS, A as EDGE_REVEAL_DEFAULT, D as EDGE_STYLES, F as EdgeReveal, I as InteractiveHandlerMap, G as InteractiveSignalsAccessor, H as LaidLane, K as NODE_KINDS, M as ScrollProgressHandle, O as TONES, P as computeEventBindingKey, U as computeFormulaKey, V as computeInputSignalKey, W as computeScrollTriggerKey, X as computed, Y as createInteractiveSignalsAccessor, Z as createScrollProgressHandle, _ as createScrollProgressSignals, $ as hasInteractivePrimitives, a0 as sequenceBoardMetrics, a1 as sequenceStepId, a2 as signal } from './render-CabTMeao.js';
|
|
3
3
|
import { JSX } from 'react';
|
|
4
4
|
|
|
5
5
|
declare function effect(fn: () => void | (() => void)): () => void;
|
|
@@ -1210,6 +1210,10 @@ declare function diagram(id: string, options: {
|
|
|
1210
1210
|
* この図をどの配色で描くか (#1553)。 詳細は `CdlDiagram.palette` の doc 参照。
|
|
1211
1211
|
*/
|
|
1212
1212
|
palette?: string;
|
|
1213
|
+
/**
|
|
1214
|
+
* この図がどの種類か (#645)。 詳しくは `CdlDiagram.type` の説明を参照。
|
|
1215
|
+
*/
|
|
1216
|
+
type?: string;
|
|
1213
1217
|
}): DiagramBuilder;
|
|
1214
1218
|
|
|
1215
1219
|
/**
|
package/dist/index.js
CHANGED
|
@@ -11484,6 +11484,8 @@ function diagram(id, options) {
|
|
|
11484
11484
|
...options.structuredData === "exclude" ? { structuredData: "exclude" } : {},
|
|
11485
11485
|
// 配色の名前は素通しする。 空文字の遮断は `layout` が持つ (後段が必ず通るため)
|
|
11486
11486
|
...options.palette !== void 0 ? { palette: options.palette } : {},
|
|
11487
|
+
// 種類の名前も同じ経路で渡し、空文字の扱いを `layout` の 1 箇所に揃える
|
|
11488
|
+
...options.type !== void 0 ? { type: options.type } : {},
|
|
11487
11489
|
// inputs / formulas / scrollTriggers / eventBindings は空なら省略 (static diagram の JSON 形状維持)
|
|
11488
11490
|
...inputs.length > 0 ? { inputs: [...inputs] } : {},
|
|
11489
11491
|
...formulas.length > 0 ? { formulas: [...formulas] } : {},
|
|
@@ -20280,6 +20282,8 @@ function layout(diag) {
|
|
|
20280
20282
|
// **遮断はここだけに置く**。 描画は必ず組み立てを通り、組み立て API も `er` も
|
|
20281
20283
|
// 素通しにしてある。 上流にも置くと、どの入力でも通らない分岐が残る
|
|
20282
20284
|
...diag.palette ? { palette: diag.palette } : {},
|
|
20285
|
+
// 種類も配色と同じく空の目印を出さない。 遮断をここに揃えると手書きの図にも効く
|
|
20286
|
+
...diag.type ? { type: diag.type } : {},
|
|
20283
20287
|
bboxes,
|
|
20284
20288
|
collisions,
|
|
20285
20289
|
nearCollisions,
|
|
@@ -29699,6 +29703,7 @@ function CdlStage({
|
|
|
29699
29703
|
"data-cdl-stage": "",
|
|
29700
29704
|
"data-cdl-scale": diagramScale === 1 ? void 0 : diagramScale,
|
|
29701
29705
|
"data-cdl-palette": laid.palette,
|
|
29706
|
+
"data-cdl-type": laid.type,
|
|
29702
29707
|
children: [
|
|
29703
29708
|
/* @__PURE__ */ jsxs("defs", { children: [
|
|
29704
29709
|
Object.entries(TONE).flatMap(
|
|
@@ -30368,7 +30373,7 @@ function fitRowsWidth(boxW, rows) {
|
|
|
30368
30373
|
}
|
|
30369
30374
|
function swimlane(preset) {
|
|
30370
30375
|
const w = preset.laneWidth ?? 400;
|
|
30371
|
-
const b = diagram(preset.id, { topic: preset.topic });
|
|
30376
|
+
const b = diagram(preset.id, { topic: preset.topic, type: "swimlane" });
|
|
30372
30377
|
const labelToId = /* @__PURE__ */ new Map();
|
|
30373
30378
|
const idsInOrder = [];
|
|
30374
30379
|
for (const label of preset.lanes) {
|
|
@@ -30388,7 +30393,7 @@ function swimlane(preset) {
|
|
|
30388
30393
|
}
|
|
30389
30394
|
function flow(preset) {
|
|
30390
30395
|
const w = preset.laneWidth ?? 400;
|
|
30391
|
-
const b = diagram(preset.id, { topic: preset.topic });
|
|
30396
|
+
const b = diagram(preset.id, { topic: preset.topic, type: "flow" });
|
|
30392
30397
|
b.lane("flow", { width: w, ...preset.laneLabel ? { label: preset.laneLabel } : {} });
|
|
30393
30398
|
const tone = preset.defaultTone ?? "accent";
|
|
30394
30399
|
const style = preset.defaultStyle ?? "dotted-flow";
|
|
@@ -30449,7 +30454,7 @@ var SEQUENCE_MESSAGE_LOOK = {
|
|
|
30449
30454
|
};
|
|
30450
30455
|
function sequence(preset) {
|
|
30451
30456
|
const tone = preset.defaultTone ?? "accent";
|
|
30452
|
-
const b = diagram(preset.id, { topic: preset.topic });
|
|
30457
|
+
const b = diagram(preset.id, { topic: preset.topic, type: "sequence" });
|
|
30453
30458
|
const \u9762\u3005 = preset.actors.map(
|
|
30454
30459
|
(a) => typeof a === "string" ? { name: a } : { name: a.name, ...a.subtitle ? { subtitle: a.subtitle } : {} }
|
|
30455
30460
|
);
|
|
@@ -30504,7 +30509,7 @@ function topology(preset) {
|
|
|
30504
30509
|
const groupW = preset.groupWidth ?? 460;
|
|
30505
30510
|
const tone = preset.defaultTone ?? "accent";
|
|
30506
30511
|
const style = preset.defaultStyle ?? "solid";
|
|
30507
|
-
const b = diagram(preset.id, { topic: preset.topic });
|
|
30512
|
+
const b = diagram(preset.id, { topic: preset.topic, type: "topology" });
|
|
30508
30513
|
const groupOrder = [];
|
|
30509
30514
|
const groupStackCount = /* @__PURE__ */ new Map();
|
|
30510
30515
|
const phaseActivate = [];
|
|
@@ -30573,7 +30578,7 @@ function er(preset) {
|
|
|
30573
30578
|
const entityW = resolveStorageBoxW(preset.entityWidth, "er", "entityWidth");
|
|
30574
30579
|
const tone = preset.defaultTone ?? "info";
|
|
30575
30580
|
const \u7E1E\u3092\u6577\u304F = preset.rowStripe ?? true;
|
|
30576
|
-
const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette });
|
|
30581
|
+
const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette, type: "er" });
|
|
30577
30582
|
const entities = [];
|
|
30578
30583
|
const phaseActivate = [];
|
|
30579
30584
|
let relIdx = 0;
|
|
@@ -30659,7 +30664,7 @@ var FSM_ACTION_MARK = {
|
|
|
30659
30664
|
function stateMachine(preset) {
|
|
30660
30665
|
const stateW = resolveStateW(preset.stateWidth, "stateMachine");
|
|
30661
30666
|
const tone = preset.defaultTone ?? "accent";
|
|
30662
|
-
const b = diagram(preset.id, { topic: preset.topic });
|
|
30667
|
+
const b = diagram(preset.id, { topic: preset.topic, type: "state" });
|
|
30663
30668
|
const phaseActivate = [];
|
|
30664
30669
|
const stateOrder = /* @__PURE__ */ new Map();
|
|
30665
30670
|
const \u72B6\u614B = [];
|
|
@@ -30771,7 +30776,7 @@ function infrastructure(preset) {
|
|
|
30771
30776
|
const laneW = preset.laneWidth ?? 380;
|
|
30772
30777
|
const tone = preset.defaultTone ?? "accent";
|
|
30773
30778
|
const style = preset.defaultStyle ?? "solid";
|
|
30774
|
-
const b = diagram(preset.id, { topic: preset.topic });
|
|
30779
|
+
const b = diagram(preset.id, { topic: preset.topic, type: "infrastructure" });
|
|
30775
30780
|
const colLaneIds = /* @__PURE__ */ new Map();
|
|
30776
30781
|
const phaseActivate = [];
|
|
30777
30782
|
let connIdx = 0;
|
|
@@ -30852,7 +30857,7 @@ function classDiagram(preset) {
|
|
|
30852
30857
|
const classW = resolveStorageBoxW(preset.classWidth, "classDiagram", "classWidth");
|
|
30853
30858
|
const \u56F3\u306E\u65E2\u5B9A = preset.defaultTone;
|
|
30854
30859
|
const \u7E1E\u3092\u6577\u304F = preset.rowStripe ?? true;
|
|
30855
|
-
const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette });
|
|
30860
|
+
const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette, type: "class" });
|
|
30856
30861
|
const classes = [];
|
|
30857
30862
|
const phaseActivate = [];
|
|
30858
30863
|
const \u7BB1 = [];
|
|
@@ -30939,7 +30944,7 @@ function classDiagram(preset) {
|
|
|
30939
30944
|
function tree(preset) {
|
|
30940
30945
|
const canvasW = preset.nodeWidth ? preset.nodeWidth * 2 : 720;
|
|
30941
30946
|
const canvasH = 480;
|
|
30942
|
-
const b = diagram(preset.id, { topic: preset.topic });
|
|
30947
|
+
const b = diagram(preset.id, { topic: preset.topic, type: "tree" });
|
|
30943
30948
|
const treeNodes = [];
|
|
30944
30949
|
const api = {
|
|
30945
30950
|
node(n) {
|
|
@@ -30977,7 +30982,7 @@ function tree(preset) {
|
|
|
30977
30982
|
function userJourney(preset) {
|
|
30978
30983
|
const canvasW = preset.stepWidth ? preset.stepWidth * 2 : 720;
|
|
30979
30984
|
const canvasH = 480;
|
|
30980
|
-
const b = diagram(preset.id, { topic: preset.topic });
|
|
30985
|
+
const b = diagram(preset.id, { topic: preset.topic, type: "journey" });
|
|
30981
30986
|
const steps = [];
|
|
30982
30987
|
const api = {
|
|
30983
30988
|
step(s) {
|
|
@@ -31016,7 +31021,7 @@ function userJourney(preset) {
|
|
|
31016
31021
|
function mindMap(preset) {
|
|
31017
31022
|
const canvasW = preset.branchWidth ? preset.branchWidth * 2 : 720;
|
|
31018
31023
|
const canvasH = 480;
|
|
31019
|
-
const b = diagram(preset.id, { topic: preset.topic });
|
|
31024
|
+
const b = diagram(preset.id, { topic: preset.topic, type: "mindmap" });
|
|
31020
31025
|
const branches = [];
|
|
31021
31026
|
const api = {
|
|
31022
31027
|
branch(br) {
|
|
@@ -31060,7 +31065,7 @@ function mindMap(preset) {
|
|
|
31060
31065
|
function funnel(preset) {
|
|
31061
31066
|
const canvasW = toGridSize(preset.stageWidth ?? 560);
|
|
31062
31067
|
const canvasH = 480;
|
|
31063
|
-
const b = diagram(preset.id, { topic: preset.topic });
|
|
31068
|
+
const b = diagram(preset.id, { topic: preset.topic, type: "funnel" });
|
|
31064
31069
|
const stages = [];
|
|
31065
31070
|
const api = {
|
|
31066
31071
|
stage(s) {
|
|
@@ -31098,7 +31103,7 @@ function funnel(preset) {
|
|
|
31098
31103
|
function quadrant(preset) {
|
|
31099
31104
|
const canvasW = 640;
|
|
31100
31105
|
const canvasH = 480;
|
|
31101
|
-
const b = diagram(preset.id, { topic: preset.topic });
|
|
31106
|
+
const b = diagram(preset.id, { topic: preset.topic, type: "quadrant" });
|
|
31102
31107
|
const items = [];
|
|
31103
31108
|
const api = {
|
|
31104
31109
|
item(it) {
|
|
@@ -31149,7 +31154,7 @@ function chart(preset) {
|
|
|
31149
31154
|
const canvasH = toGridSize(
|
|
31150
31155
|
preset.type === "pie" || preset.type === "gauge" || preset.type === "radial" || preset.type === "stat" || preset.type === "waffle" || preset.type === "stacked-bar" ? 320 : 360
|
|
31151
31156
|
);
|
|
31152
|
-
const b = diagram(preset.id, { topic: preset.topic });
|
|
31157
|
+
const b = diagram(preset.id, { topic: preset.topic, type: "chart" });
|
|
31153
31158
|
const data = [];
|
|
31154
31159
|
const kindMap = {
|
|
31155
31160
|
line: "chart-line",
|
|
@@ -31198,7 +31203,7 @@ function gantt(preset) {
|
|
|
31198
31203
|
const canvasW = preset.laneWidth ? preset.laneWidth * 2 : 720;
|
|
31199
31204
|
const canvasH = 360;
|
|
31200
31205
|
const tone = preset.defaultTone ?? "teal";
|
|
31201
|
-
const b = diagram(preset.id, { topic: preset.topic });
|
|
31206
|
+
const b = diagram(preset.id, { topic: preset.topic, type: "gantt" });
|
|
31202
31207
|
const tasks = [];
|
|
31203
31208
|
const api = {
|
|
31204
31209
|
task(t) {
|
|
@@ -31264,7 +31269,7 @@ var SHAPE_EYEBROW = {
|
|
|
31264
31269
|
function flowchart(preset) {
|
|
31265
31270
|
const laneW = preset.laneWidth ?? 380;
|
|
31266
31271
|
const tone = preset.defaultTone ?? "accent";
|
|
31267
|
-
const b = diagram(preset.id, { topic: preset.topic });
|
|
31272
|
+
const b = diagram(preset.id, { topic: preset.topic, type: "flowchart" });
|
|
31268
31273
|
const laneToId = /* @__PURE__ */ new Map();
|
|
31269
31274
|
const laneStackCount = /* @__PURE__ */ new Map();
|
|
31270
31275
|
for (const label of preset.lanes) {
|
|
@@ -31325,7 +31330,7 @@ var NET_KIND_MAP = {
|
|
|
31325
31330
|
function network(preset) {
|
|
31326
31331
|
const laneW = preset.laneWidth ?? 320;
|
|
31327
31332
|
const tone = preset.defaultTone ?? "info";
|
|
31328
|
-
const b = diagram(preset.id, { topic: preset.topic });
|
|
31333
|
+
const b = diagram(preset.id, { topic: preset.topic, type: "network" });
|
|
31329
31334
|
const colLaneIds = /* @__PURE__ */ new Map();
|
|
31330
31335
|
const phaseActivate = [];
|
|
31331
31336
|
let edgeIdx = 0;
|
|
@@ -31375,7 +31380,7 @@ function stateMachine2(preset) {
|
|
|
31375
31380
|
const stateW = resolveStateW(preset.stateWidth, "stateMachine2");
|
|
31376
31381
|
const laneW = boxLaneW(stateW);
|
|
31377
31382
|
const tone = preset.defaultTone ?? "accent";
|
|
31378
|
-
const b = diagram(preset.id, { topic: preset.topic });
|
|
31383
|
+
const b = diagram(preset.id, { topic: preset.topic, type: "state" });
|
|
31379
31384
|
const stateOrder = /* @__PURE__ */ new Map();
|
|
31380
31385
|
const phaseActivate = [];
|
|
31381
31386
|
let transIdx = 0;
|