@likec4/diagram 1.58.0 → 1.59.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/LikeC4Diagram.js +1 -1
- package/dist/LikeC4Diagram.props.d.ts +1 -1
- package/dist/LikeC4Styles.js +1 -1
- package/dist/LikeC4View.js +2 -2
- package/dist/ReactLikeC4.d.ts +1 -1
- package/dist/base/Base.d.ts +3 -2
- package/dist/base/Base.js +14 -26
- package/dist/base/BaseXYFlow.d.ts +2 -1
- package/dist/base/BaseXYFlow.js +63 -4
- package/dist/base/keyboardZoom.d.ts +3 -0
- package/dist/base/keyboardZoom.js +20 -0
- package/dist/base/updateEdges.js +7 -16
- package/dist/base/updateNodes.js +3 -9
- package/dist/base-primitives/compound/CompoundActionButton.d.ts +2 -1
- package/dist/base-primitives/compound/CompoundActionButton.js +5 -2
- package/dist/base-primitives/compound/CompoundDetailsButton.d.ts +2 -1
- package/dist/base-primitives/compound/CompoundDetailsButton.js +5 -2
- package/dist/base-primitives/compound/CompoundTitle.d.ts +7 -1
- package/dist/base-primitives/compound/CompoundTitle.js +2 -1
- package/dist/base-primitives/compound/actionbtns.css.d.ts +1 -1
- package/dist/base-primitives/edge/EdgeActionButton.d.ts +2 -1
- package/dist/base-primitives/edge/EdgeActionButton.js +2 -1
- package/dist/base-primitives/edge/EdgeContainer.d.ts +1 -1
- package/dist/base-primitives/edge/EdgeContainer.js +4 -2
- package/dist/base-primitives/edge/EdgeLabel.d.ts +2 -0
- package/dist/base-primitives/edge/EdgeLabel.js +2 -5
- package/dist/base-primitives/element/ElementActionButtons.d.ts +1 -0
- package/dist/base-primitives/element/ElementActionButtons.js +4 -1
- package/dist/base-primitives/element/ElementData.d.ts +3 -1
- package/dist/base-primitives/element/ElementData.js +2 -1
- package/dist/base-primitives/element/ElementDetailsButton.d.ts +2 -1
- package/dist/base-primitives/element/ElementDetailsButton.js +5 -2
- package/dist/base-primitives/element/ElementNodeContainer.js +1 -1
- package/dist/base-primitives/element/ElementShape.js +3 -0
- package/dist/components/ErrorFallback.js +3 -5
- package/dist/components/Link.js +6 -6
- package/dist/components/NavigationPanel.js +1 -1
- package/dist/components/SearchControl.css.js +11 -11
- package/dist/context/TagStylesContext.d.ts +3 -3
- package/dist/context/TagStylesContext.js +16 -16
- package/dist/custom/index.d.ts +1 -0
- package/dist/custom/index.js +3 -2
- package/dist/editor/actor/actions.js +1 -1
- package/dist/editor/actor/machine.d.ts +4 -6
- package/dist/editor/actor/setup.d.ts +16 -2
- package/dist/editor/actor/setup.js +5 -4
- package/dist/hooks/index.d.ts +1 -1
- package/dist/hooks/safeContext.d.ts +156 -3
- package/dist/hooks/safeContext.js +60 -12
- package/dist/hooks/useCurrentViewModel.js +1 -1
- package/dist/hooks/useDiagram.d.ts +8 -0
- package/dist/hooks/useDiagram.js +9 -2
- package/dist/hooks/useEditorActor.js +1 -1
- package/dist/hooks/useLikeC4ElementsTree.js +1 -1
- package/dist/hooks/useLikeC4Model.js +1 -1
- package/dist/hooks/useXYFlow.d.ts +1 -0
- package/dist/hooks/useXYFlow.js +5 -3
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/dist/likec4diagram/DiagramUI.js +19 -6
- package/dist/likec4diagram/DiagramXYFlow.js +39 -14
- package/dist/likec4diagram/convert-to-xyflow.d.ts +3 -5
- package/dist/likec4diagram/convert-to-xyflow.js +29 -10
- package/dist/likec4diagram/custom/edges/RelationshipEdge.js +13 -4
- package/dist/likec4diagram/custom/edges/SequenceStepEdge.js +11 -4
- package/dist/likec4diagram/custom/edges/edges.css.js +1 -1
- package/dist/likec4diagram/custom/index.d.ts +2 -1
- package/dist/likec4diagram/custom/index.js +5 -3
- package/dist/likec4diagram/custom/nodes/CompoundActions.js +1 -0
- package/dist/likec4diagram/custom/nodes/ElementActions.d.ts +2 -2
- package/dist/likec4diagram/custom/nodes/ElementActions.js +13 -3
- package/dist/likec4diagram/custom/nodes/NodeNotes.js +0 -4
- package/dist/likec4diagram/custom/nodes/SequenceActorNode.js +32 -19
- package/dist/likec4diagram/custom/nodes/SequenceSubFlow.d.ts +2 -0
- package/dist/likec4diagram/custom/nodes/SequenceSubFlow.js +234 -0
- package/dist/likec4diagram/custom/nodes/index.d.ts +1 -0
- package/dist/likec4diagram/custom/nodes/nodes.js +20 -5
- package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.js +1 -1
- package/dist/likec4diagram/custom/nodes/toolbar/_shared.js +1 -1
- package/dist/likec4diagram/relationship-popover/RelationshipPopover.js +15 -14
- package/dist/likec4diagram/relationship-popover/components.d.ts +1 -1
- package/dist/likec4diagram/state/DiagramActorProvider.js +11 -20
- package/dist/likec4diagram/state/aligners.js +1 -1
- package/dist/likec4diagram/state/assign.d.ts +1 -1
- package/dist/likec4diagram/state/assign.js +1 -1
- package/dist/likec4diagram/state/createViewChange.js +1 -1
- package/dist/likec4diagram/state/diagram-api.d.ts +18 -10
- package/dist/likec4diagram/state/diagram-api.js +333 -229
- package/dist/likec4diagram/state/machine.actions.d.ts +1026 -332
- package/dist/likec4diagram/state/machine.actions.js +115 -44
- package/dist/likec4diagram/state/machine.actions.layout.d.ts +123 -51
- package/dist/likec4diagram/state/machine.actions.layout.js +40 -33
- package/dist/likec4diagram/state/machine.d.ts +154 -16
- package/dist/likec4diagram/state/machine.js +5 -41
- package/dist/likec4diagram/state/machine.setup.d.ts +84 -19
- package/dist/likec4diagram/state/machine.setup.js +65 -12
- package/dist/likec4diagram/state/machine.state.initializing.d.ts +59 -33
- package/dist/likec4diagram/state/machine.state.navigating.js +7 -3
- package/dist/likec4diagram/state/machine.state.ready.d.ts +1540 -476
- package/dist/likec4diagram/state/machine.state.ready.focused.d.ts +294 -53
- package/dist/likec4diagram/state/machine.state.ready.focused.js +3 -3
- package/dist/likec4diagram/state/machine.state.ready.idle.d.ts +264 -73
- package/dist/likec4diagram/state/machine.state.ready.idle.js +31 -6
- package/dist/likec4diagram/state/machine.state.ready.js +22 -16
- package/dist/likec4diagram/state/machine.state.ready.printing.d.ts +23 -9
- package/dist/likec4diagram/state/machine.state.ready.walkthrough.d.ts +288 -84
- package/dist/likec4diagram/state/machine.state.ready.walkthrough.js +135 -66
- package/dist/likec4diagram/state/types.d.ts +4 -2
- package/dist/likec4diagram/state/utils.d.ts +7 -0
- package/dist/likec4diagram/state/utils.js +36 -34
- package/dist/likec4diagram/types.d.ts +47 -3
- package/dist/likec4diagram/ui/FloatingSequenceActors.d.ts +6 -0
- package/dist/likec4diagram/ui/FloatingSequenceActors.js +155 -0
- package/dist/likec4diagram/ui/LayoutDriftFrame.js +2 -2
- package/dist/likec4diagram/ui/index.d.ts +2 -0
- package/dist/likec4diagram/ui/notation/NotationPanel.css.js +5 -5
- package/dist/likec4diagram/ui/sequence-outline/SequenceOutlinePanel.d.ts +2 -0
- package/dist/likec4diagram/ui/sequence-outline/SequenceOutlinePanel.js +519 -0
- package/dist/likec4diagram/ui/sequence-outline/state.d.ts +36 -0
- package/dist/likec4diagram/ui/sequence-outline/state.js +55 -0
- package/dist/likec4diagram/xyflow-diagram/diagram-view.d.ts +1 -1
- package/dist/likec4diagram/xyflow-diagram/diagram-view.js +112 -60
- package/dist/likec4diagram/xyflow-sequence/_types.d.ts +55 -5
- package/dist/likec4diagram/xyflow-sequence/const.d.ts +5 -5
- package/dist/likec4diagram/xyflow-sequence/const.js +4 -4
- package/dist/likec4diagram/xyflow-sequence/layouter.d.ts +30 -6
- package/dist/likec4diagram/xyflow-sequence/layouter.js +561 -0
- package/dist/likec4diagram/xyflow-sequence/{sequence-layout.d.ts → sequence-view-to-xy.d.ts} +8 -2
- package/dist/likec4diagram/xyflow-sequence/{sequence-layout.js → sequence-view-to-xy.js} +111 -14
- package/dist/likec4diagram/xyflow-sequence/sequence-view.d.ts +2 -7
- package/dist/likec4diagram/xyflow-sequence/sequence-view.js +144 -0
- package/dist/likec4diagram/xyflow-sequence/utils.d.ts +9 -1
- package/dist/likec4diagram/xyflow-sequence/utils.js +96 -0
- package/dist/navigationpanel/NavigationPanel.d.ts +5 -2
- package/dist/navigationpanel/NavigationPanel.js +58 -59
- package/dist/navigationpanel/NavigationPanelDropdown.js +45 -38
- package/dist/navigationpanel/_common.js +2 -2
- package/dist/navigationpanel/actor.actions.d.ts +19 -0
- package/dist/navigationpanel/actor.actions.js +45 -0
- package/dist/navigationpanel/actor.d.ts +34 -96
- package/dist/navigationpanel/actor.js +21 -84
- package/dist/navigationpanel/actor.setup.d.ts +98 -0
- package/dist/navigationpanel/actor.setup.js +31 -0
- package/dist/navigationpanel/comparepanel/DriftsSummary.js +4 -5
- package/dist/navigationpanel/controls/DetailsControls.js +7 -8
- package/dist/navigationpanel/dropdown/ProjectsMenu.js +1 -1
- package/dist/navigationpanel/editorpanel/styles.js +8 -8
- package/dist/navigationpanel/hooks.d.ts +20 -5
- package/dist/navigationpanel/hooks.js +4 -18
- package/dist/navigationpanel/styles.css.d.ts +1 -1
- package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js +2 -2
- package/dist/navigationpanel/walkthrough/DynamicViewControls.d.ts +4 -4
- package/dist/navigationpanel/walkthrough/DynamicViewControls.js +23 -25
- package/dist/navigationpanel/walkthrough/WalkthroughPanel.js +5 -5
- package/dist/overlays/Overlays.d.ts +4 -2
- package/dist/overlays/Overlays.js +10 -10
- package/dist/overlays/element-details/ElementDetailsCard.css.js +17 -17
- package/dist/overlays/element-details/MetadataValue.js +15 -15
- package/dist/overlays/element-details/TabPanelDeployments.css.js +5 -5
- package/dist/overlays/element-details/TabPanelRelationships.css.js +11 -11
- package/dist/overlays/element-details/TabPanelRelationships.js +1 -1
- package/dist/overlays/element-details/TabPanelStructure.css.js +2 -2
- package/dist/overlays/element-details/TabPanelStructure.js +1 -1
- package/dist/overlays/element-details/actor.d.ts +2 -3
- package/dist/overlays/hooks.d.ts +28 -0
- package/dist/overlays/hooks.js +5 -0
- package/dist/overlays/overlay/Overlay.js +34 -25
- package/dist/overlays/overlaysActor.js +0 -1
- package/dist/overlays/relationship-details/custom/nodeTypes.js +1 -1
- package/dist/overlays/relationship-details/layout.js +1 -1
- package/dist/overlays/relationships-browser/SelectElement.css.js +2 -2
- package/dist/overlays/relationships-browser/actor.js +79 -78
- package/dist/overlays/relationships-browser/custom/nodeTypes.js +1 -1
- package/dist/overlays/relationships-browser/hooks.js +1 -1
- package/dist/overlays/relationships-browser/layout.js +2 -2
- package/dist/projects-overview/actor.js +4 -4
- package/dist/search/Search.js +1 -1
- package/dist/search/components/ElementsColumn.css.js +2 -2
- package/dist/search/components/ViewsColum.js +1 -1
- package/dist/search/components/_shared.css.d.ts +1 -1
- package/dist/search/components/_shared.css.js +23 -23
- package/dist/search/components/styles.css.js +4 -4
- package/dist/shadowroot/ShadowRoot.d.ts +1 -1
- package/dist/shadowroot/ShadowRoot.js +76 -28
- package/dist/styles2.js +1 -1
- package/dist/utils/defineActors.d.ts +21 -0
- package/dist/utils/defineActors.js +13 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.js +5 -4
- package/dist/utils/readableText.d.ts +11 -0
- package/dist/utils/readableText.js +18 -0
- package/package.json +18 -30
- package/panda.buildinfo.json +267 -288
- package/styles-min.css +1 -1
- package/styles.css +1 -1
- package/adhoc-editor/package.json +0 -4
- package/dist/adhoc-editor/EditorPanel.d.ts +0 -1
- package/dist/adhoc-editor/EditorPanel.js +0 -106
- package/dist/adhoc-editor/ElementsTree.d.ts +0 -2
- package/dist/adhoc-editor/ElementsTree.js +0 -112
- package/dist/adhoc-editor/LikeC4AdHocViewEditor.d.ts +0 -4
- package/dist/adhoc-editor/LikeC4AdHocViewEditor.js +0 -83
- package/dist/adhoc-editor/components/Tree.d.ts +0 -48
- package/dist/adhoc-editor/components/Tree.js +0 -213
- package/dist/adhoc-editor/hooks.d.ts +0 -14
- package/dist/adhoc-editor/hooks.js +0 -34
- package/dist/adhoc-editor/index.d.ts +0 -2
- package/dist/adhoc-editor/index.js +0 -2
- package/dist/adhoc-editor/state/ActorProvider.d.ts +0 -5
- package/dist/adhoc-editor/state/ActorProvider.js +0 -37
- package/dist/adhoc-editor/state/actor.d.ts +0 -13
- package/dist/adhoc-editor/state/actor.editor.d.ts +0 -56
- package/dist/adhoc-editor/state/actor.editor.js +0 -167
- package/dist/adhoc-editor/state/actor.js +0 -14
- package/dist/adhoc-editor/state/actor.layouter.d.ts +0 -51
- package/dist/adhoc-editor/state/actor.layouter.js +0 -54
- package/dist/adhoc-editor/state/actor.types.d.ts +0 -63
- package/dist/adhoc-editor/state/actor.types.js +0 -25
- package/dist/adhoc-editor/state/panel.d.ts +0 -95
- package/dist/adhoc-editor/state/panel.js +0 -124
- package/dist/adhoc-editor/state/utils.d.ts +0 -17
- package/dist/adhoc-editor/state/utils.js +0 -25
- package/dist/adhoc-editor/useElementsTree.d.ts +0 -18
- package/dist/adhoc-editor/useElementsTree.js +0 -98
- package/dist/adhoc-editor/viewrules/ViewRulesPanel.d.ts +0 -6
- package/dist/context/ShadowRootContext.d.ts +0 -3
- package/dist/context/ShadowRootContext.js +0 -5
- package/dist/shadowroot/styles.d.ts +0 -13
- package/dist/shadowroot/styles.js +0 -60
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { ActorRef, SnapshotFrom, StateMachine } from 'xstate';
|
|
2
|
-
import { editor } from './actor.editor';
|
|
3
|
-
import { layouter } from './actor.layouter';
|
|
4
|
-
import { Context, EmittedEvents, Events } from './actor.types';
|
|
5
|
-
export interface AdhocEditorLogic extends StateMachine<Context, Events, any, any, any, any, any, {
|
|
6
|
-
layouter: keyof typeof layouter['states'];
|
|
7
|
-
editor: keyof typeof editor['states'];
|
|
8
|
-
}, any, any, EmittedEvents, any, any, any> {
|
|
9
|
-
}
|
|
10
|
-
export declare const adhocEditorLogic: AdhocEditorLogic;
|
|
11
|
-
export type AdhocEditorSnapshot = SnapshotFrom<AdhocEditorLogic>;
|
|
12
|
-
export interface AdhocEditorActorRef extends ActorRef<AdhocEditorSnapshot, Events, EmittedEvents> {
|
|
13
|
-
}
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import { Context, Events, AdhocViewServiceActor, EmittedEvents } from './actor.types';
|
|
2
|
-
import { ActionFunction } from 'xstate';
|
|
3
|
-
export declare const editor: {
|
|
4
|
-
initial: string;
|
|
5
|
-
states: {
|
|
6
|
-
idle: {
|
|
7
|
-
id: string;
|
|
8
|
-
on: {
|
|
9
|
-
'select.open': {
|
|
10
|
-
target: "#selecting";
|
|
11
|
-
};
|
|
12
|
-
'toggle.rule': {
|
|
13
|
-
target: "#layouting";
|
|
14
|
-
actions: ActionFunction<Context, Events, Events, undefined, {
|
|
15
|
-
src: "service";
|
|
16
|
-
logic: AdhocViewServiceActor;
|
|
17
|
-
id: string | undefined;
|
|
18
|
-
}, never, never, never, never>;
|
|
19
|
-
};
|
|
20
|
-
'delete.rule': {
|
|
21
|
-
target: "#layouting";
|
|
22
|
-
actions: ActionFunction<Context, Events, Events, undefined, {
|
|
23
|
-
src: "service";
|
|
24
|
-
logic: AdhocViewServiceActor;
|
|
25
|
-
id: string | undefined;
|
|
26
|
-
}, never, never, never, never>;
|
|
27
|
-
};
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
selecting: {
|
|
31
|
-
id: string;
|
|
32
|
-
on: {
|
|
33
|
-
'toggle.element': {
|
|
34
|
-
actions: ActionFunction<Context, Events, Events, undefined, {
|
|
35
|
-
src: "service";
|
|
36
|
-
logic: AdhocViewServiceActor;
|
|
37
|
-
id: string | undefined;
|
|
38
|
-
}, never, {
|
|
39
|
-
type: "hasView";
|
|
40
|
-
params: unknown;
|
|
41
|
-
}, never, EmittedEvents>[];
|
|
42
|
-
};
|
|
43
|
-
'select.close': {
|
|
44
|
-
target: "#idle";
|
|
45
|
-
};
|
|
46
|
-
};
|
|
47
|
-
};
|
|
48
|
-
layouting: {
|
|
49
|
-
id: string;
|
|
50
|
-
always: {
|
|
51
|
-
target: "#idle";
|
|
52
|
-
actions: ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
|
|
53
|
-
};
|
|
54
|
-
};
|
|
55
|
-
};
|
|
56
|
-
};
|
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
import "../../_virtual/_rolldown/runtime.js";
|
|
2
|
-
import { machine } from "./actor.types.js";
|
|
3
|
-
import { emitViewUpdate } from "./actor.layouter.js";
|
|
4
|
-
import { last } from "remeda";
|
|
5
|
-
import { ModelFqnExpr } from "@likec4/core";
|
|
6
|
-
import { invariant as invariant$1, nonexhaustive as nonexhaustive$1, stringHash } from "@likec4/core/utils";
|
|
7
|
-
import { assertEvent } from "xstate";
|
|
8
|
-
//#region src/adhoc-editor/state/actor.editor.ts
|
|
9
|
-
var to = {
|
|
10
|
-
idle: { target: "#idle" },
|
|
11
|
-
selecting: { target: "#selecting" },
|
|
12
|
-
layouting: { target: "#layouting" }
|
|
13
|
-
};
|
|
14
|
-
function nextId({ rules }, salt = "") {
|
|
15
|
-
return stringHash((rules.at(-1)?.id ?? (/* @__PURE__ */ new Date()).toISOString()) + salt);
|
|
16
|
-
}
|
|
17
|
-
var isRuleOf = (fqn) => (rule) => {
|
|
18
|
-
return ModelFqnExpr.isModelRef(rule.expr) && rule.expr.ref.model === fqn;
|
|
19
|
-
};
|
|
20
|
-
var isIncludeOf = (fqn) => (rule) => {
|
|
21
|
-
return rule.type === "include" && ModelFqnExpr.isModelRef(rule.expr) && rule.expr.ref.model === fqn;
|
|
22
|
-
};
|
|
23
|
-
var isExcludeOf = (fqn) => (rule) => {
|
|
24
|
-
return rule.type === "exclude" && ModelFqnExpr.isModelRef(rule.expr) && rule.expr.ref.model === fqn;
|
|
25
|
-
};
|
|
26
|
-
function deriveElementState(id, { rules, view }) {
|
|
27
|
-
const ruleOf = rules.find(isRuleOf(id));
|
|
28
|
-
if (ruleOf && !ruleOf.enabled) return {
|
|
29
|
-
state: "disabled",
|
|
30
|
-
ruleId: ruleOf.id
|
|
31
|
-
};
|
|
32
|
-
const isIncludedInView = view ? view.nodes.some((node) => node.modelRef === id) : false;
|
|
33
|
-
const includeRule = rules.find(isIncludeOf(id));
|
|
34
|
-
const excludeRule = rules.find(isExcludeOf(id));
|
|
35
|
-
switch (true) {
|
|
36
|
-
case includeRule && isIncludedInView: return {
|
|
37
|
-
state: "include-explicit",
|
|
38
|
-
ruleId: includeRule.id
|
|
39
|
-
};
|
|
40
|
-
case !includeRule && isIncludedInView: return {
|
|
41
|
-
state: "include-implicit",
|
|
42
|
-
ruleId: void 0
|
|
43
|
-
};
|
|
44
|
-
case includeRule && !isIncludedInView: return {
|
|
45
|
-
state: "not-present",
|
|
46
|
-
ruleId: includeRule.id
|
|
47
|
-
};
|
|
48
|
-
case !!excludeRule: return {
|
|
49
|
-
state: "exclude",
|
|
50
|
-
ruleId: excludeRule.id
|
|
51
|
-
};
|
|
52
|
-
default:
|
|
53
|
-
invariant$1(isIncludedInView === false, "Element not in view should not be included or excluded by any rule");
|
|
54
|
-
return {
|
|
55
|
-
state: "not-present",
|
|
56
|
-
ruleId: void 0
|
|
57
|
-
};
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
var enableRule = (ruleId) => machine.assign(({ context }) => {
|
|
61
|
-
return { rules: context.rules.map((rule) => {
|
|
62
|
-
if (rule.id === ruleId && !rule.enabled) return {
|
|
63
|
-
...rule,
|
|
64
|
-
enabled: true
|
|
65
|
-
};
|
|
66
|
-
return rule;
|
|
67
|
-
}) };
|
|
68
|
-
});
|
|
69
|
-
var addElementRules = (fqn, type) => machine.assign(({ context }) => {
|
|
70
|
-
return { rules: [...context.rules, {
|
|
71
|
-
id: nextId(context, type + fqn),
|
|
72
|
-
expr: { ref: { model: fqn } },
|
|
73
|
-
enabled: true,
|
|
74
|
-
type
|
|
75
|
-
}] };
|
|
76
|
-
});
|
|
77
|
-
var removeElementRules = (fqn) => machine.assign(({ context }) => {
|
|
78
|
-
const isRule = isRuleOf(fqn);
|
|
79
|
-
return { rules: context.rules.filter((rule) => {
|
|
80
|
-
return !isRule(rule);
|
|
81
|
-
}) };
|
|
82
|
-
});
|
|
83
|
-
var toggleElement = () => machine.enqueueActions(({ context, event, enqueue }) => {
|
|
84
|
-
assertEvent(event, "toggle.element");
|
|
85
|
-
const isRuleOfTheElement = isRuleOf(event.id);
|
|
86
|
-
const lastRule = last(context.rules);
|
|
87
|
-
if (lastRule && isRuleOfTheElement(lastRule)) {
|
|
88
|
-
enqueue.assign({ rules: context.rules.slice(0, -1) });
|
|
89
|
-
return;
|
|
90
|
-
}
|
|
91
|
-
const state = deriveElementState(event.id, context);
|
|
92
|
-
switch (state.state) {
|
|
93
|
-
case "disabled":
|
|
94
|
-
enqueue(enableRule(state.ruleId));
|
|
95
|
-
break;
|
|
96
|
-
case "not-present":
|
|
97
|
-
enqueue(removeElementRules(event.id));
|
|
98
|
-
enqueue(addElementRules(event.id, "include"));
|
|
99
|
-
break;
|
|
100
|
-
case "include-implicit":
|
|
101
|
-
enqueue(removeElementRules(event.id));
|
|
102
|
-
enqueue(addElementRules(event.id, "exclude"));
|
|
103
|
-
break;
|
|
104
|
-
case "include-explicit":
|
|
105
|
-
case "exclude":
|
|
106
|
-
enqueue(removeElementRules(event.id));
|
|
107
|
-
break;
|
|
108
|
-
default: nonexhaustive$1(state);
|
|
109
|
-
}
|
|
110
|
-
});
|
|
111
|
-
var toggleRule = () => machine.assign(({ context, event }) => {
|
|
112
|
-
assertEvent(event, "toggle.rule");
|
|
113
|
-
return { rules: context.rules.map((rule) => {
|
|
114
|
-
if (rule.id === event.ruleId) return {
|
|
115
|
-
...rule,
|
|
116
|
-
enabled: !rule.enabled
|
|
117
|
-
};
|
|
118
|
-
return rule;
|
|
119
|
-
}) };
|
|
120
|
-
});
|
|
121
|
-
var deleteRule = () => machine.assign(({ context, event }) => {
|
|
122
|
-
assertEvent(event, "delete.rule");
|
|
123
|
-
return { rules: context.rules.filter((rule) => rule.id !== event.ruleId) };
|
|
124
|
-
});
|
|
125
|
-
var scheduleLayout = () => machine.raise({ type: "layout" });
|
|
126
|
-
var idle = machine.createStateConfig({
|
|
127
|
-
id: "idle",
|
|
128
|
-
on: {
|
|
129
|
-
"select.open": { ...to.selecting },
|
|
130
|
-
"toggle.rule": {
|
|
131
|
-
actions: toggleRule(),
|
|
132
|
-
...to.layouting
|
|
133
|
-
},
|
|
134
|
-
"delete.rule": {
|
|
135
|
-
actions: deleteRule(),
|
|
136
|
-
...to.layouting
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
});
|
|
140
|
-
var selecting = machine.createStateConfig({
|
|
141
|
-
id: "selecting",
|
|
142
|
-
on: {
|
|
143
|
-
"toggle.element": { actions: [
|
|
144
|
-
toggleElement(),
|
|
145
|
-
emitViewUpdate(),
|
|
146
|
-
scheduleLayout()
|
|
147
|
-
] },
|
|
148
|
-
"select.close": { ...to.idle }
|
|
149
|
-
}
|
|
150
|
-
});
|
|
151
|
-
var layouting = machine.createStateConfig({
|
|
152
|
-
id: "layouting",
|
|
153
|
-
always: {
|
|
154
|
-
actions: scheduleLayout(),
|
|
155
|
-
...to.idle
|
|
156
|
-
}
|
|
157
|
-
});
|
|
158
|
-
var editor = machine.createStateConfig({
|
|
159
|
-
initial: "selecting",
|
|
160
|
-
states: {
|
|
161
|
-
idle,
|
|
162
|
-
selecting,
|
|
163
|
-
layouting
|
|
164
|
-
}
|
|
165
|
-
});
|
|
166
|
-
//#endregion
|
|
167
|
-
export { editor };
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { createContext, machine } from "./actor.types.js";
|
|
2
|
-
import { layouter } from "./actor.layouter.js";
|
|
3
|
-
import { editor } from "./actor.editor.js";
|
|
4
|
-
var adhocEditorLogic = machine.createMachine({
|
|
5
|
-
id: "adhoc-editor",
|
|
6
|
-
context: createContext,
|
|
7
|
-
type: "parallel",
|
|
8
|
-
states: {
|
|
9
|
-
layouter,
|
|
10
|
-
editor
|
|
11
|
-
}
|
|
12
|
-
});
|
|
13
|
-
//#endregion
|
|
14
|
-
export { adhocEditorLogic };
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { ActionFunction, LogAction, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, DoneActorEvent, ErrorActorEvent } from 'xstate';
|
|
2
|
-
import { Context, Events, EmittedEvents, AdhocViewServiceActor } from './actor.types';
|
|
3
|
-
import { AdhocViewPredicate } from '@likec4/core/compute-view';
|
|
4
|
-
import { LayoutedElementView } from '@likec4/core';
|
|
5
|
-
export declare const emitViewUpdate: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, EmittedEvents>;
|
|
6
|
-
export declare const layouter: {
|
|
7
|
-
initial: string;
|
|
8
|
-
states: {
|
|
9
|
-
idle: {
|
|
10
|
-
id: string;
|
|
11
|
-
entry: LogAction<Context, Events, undefined, Events>;
|
|
12
|
-
exit: LogAction<Context, Events, undefined, Events>;
|
|
13
|
-
on: {
|
|
14
|
-
layout: {
|
|
15
|
-
target: "#layouter-call";
|
|
16
|
-
};
|
|
17
|
-
};
|
|
18
|
-
};
|
|
19
|
-
call: {
|
|
20
|
-
id: string;
|
|
21
|
-
entry: LogAction<Context, Events, undefined, Events>;
|
|
22
|
-
exit: LogAction<Context, Events, undefined, Events>;
|
|
23
|
-
invoke: {
|
|
24
|
-
src: "service";
|
|
25
|
-
input: ({ context }: {
|
|
26
|
-
context: Context;
|
|
27
|
-
event: Events;
|
|
28
|
-
self: ActorRef<MachineSnapshot<Context, Events, Record<string, AnyActorRef>, StateValue, string, unknown, any, any>, Events, AnyEventObject>;
|
|
29
|
-
}) => {
|
|
30
|
-
predicates: AdhocViewPredicate[];
|
|
31
|
-
};
|
|
32
|
-
onDone: {
|
|
33
|
-
target: "#layouter-idle";
|
|
34
|
-
actions: ( ActionFunction<Context, DoneActorEvent<{
|
|
35
|
-
view: LayoutedElementView;
|
|
36
|
-
}, string>, Events, undefined, {
|
|
37
|
-
src: "service";
|
|
38
|
-
logic: AdhocViewServiceActor;
|
|
39
|
-
id: string | undefined;
|
|
40
|
-
}, never, never, never, never> | ActionFunction<Context, DoneActorEvent<{
|
|
41
|
-
view: LayoutedElementView;
|
|
42
|
-
}, string>, Events, undefined, never, never, never, never, EmittedEvents>)[];
|
|
43
|
-
};
|
|
44
|
-
onError: {
|
|
45
|
-
target: "#layouter-idle";
|
|
46
|
-
actions: LogAction<Context, ErrorActorEvent<unknown, string>, undefined, Events>[];
|
|
47
|
-
};
|
|
48
|
-
};
|
|
49
|
-
};
|
|
50
|
-
};
|
|
51
|
-
};
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import "../../_virtual/_rolldown/runtime.js";
|
|
2
|
-
import { machine, ruleToPredicate } from "./actor.types.js";
|
|
3
|
-
import { filter, map, piped } from "remeda";
|
|
4
|
-
import { objectHash } from "@likec4/core/utils";
|
|
5
|
-
import { assign, emit, log } from "xstate";
|
|
6
|
-
//#region src/adhoc-editor/state/actor.layouter.ts
|
|
7
|
-
var to = {
|
|
8
|
-
idle: { target: "#layouter-idle" },
|
|
9
|
-
call: { target: "#layouter-call" }
|
|
10
|
-
};
|
|
11
|
-
var idle = machine.createStateConfig({
|
|
12
|
-
id: to.idle.target.substring(1),
|
|
13
|
-
entry: log("entry idle ->"),
|
|
14
|
-
exit: log(" -> idle exit "),
|
|
15
|
-
on: { "layout": { ...to.call } }
|
|
16
|
-
});
|
|
17
|
-
var emitViewUpdate = () => machine.emit({ type: "view.update" });
|
|
18
|
-
var selectEnabled = piped(filter((rule) => rule.enabled), map(ruleToPredicate));
|
|
19
|
-
var call = machine.createStateConfig({
|
|
20
|
-
id: to.call.target.substring(1),
|
|
21
|
-
entry: log("entry call ->"),
|
|
22
|
-
exit: log(" -> call exit "),
|
|
23
|
-
invoke: {
|
|
24
|
-
src: "service",
|
|
25
|
-
input: ({ context }) => ({ predicates: selectEnabled(context.rules) }),
|
|
26
|
-
onDone: {
|
|
27
|
-
actions: [assign({
|
|
28
|
-
view: ({ context, event }) => {
|
|
29
|
-
const id = objectHash(selectEnabled(context.rules));
|
|
30
|
-
return {
|
|
31
|
-
...event.output.view,
|
|
32
|
-
hash: id,
|
|
33
|
-
id
|
|
34
|
-
};
|
|
35
|
-
},
|
|
36
|
-
error: void 0
|
|
37
|
-
}), emit({ type: "view.update" })],
|
|
38
|
-
...to.idle
|
|
39
|
-
},
|
|
40
|
-
onError: {
|
|
41
|
-
actions: [log(({ event }) => `error: ${event.error}`), assign({ error: ({ event }) => `${event.error}` })],
|
|
42
|
-
...to.idle
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
});
|
|
46
|
-
var layouter = machine.createStateConfig({
|
|
47
|
-
initial: "idle",
|
|
48
|
-
states: {
|
|
49
|
-
idle,
|
|
50
|
-
call
|
|
51
|
-
}
|
|
52
|
-
});
|
|
53
|
-
//#endregion
|
|
54
|
-
export { emitViewUpdate, layouter };
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import { AdhocViewPredicate } from '@likec4/core/compute-view';
|
|
2
|
-
import { Fqn, LayoutedElementView, ModelFqnExpr } from '@likec4/core/types';
|
|
3
|
-
import { PromiseActorLogic } from 'xstate/actors';
|
|
4
|
-
import { SetupReturn, NonReducibleUnknown, MetaObject } from 'xstate';
|
|
5
|
-
type CalcAdhocViewInput = {
|
|
6
|
-
predicates: AdhocViewPredicate[];
|
|
7
|
-
};
|
|
8
|
-
type CalcAdhocViewOutput = {
|
|
9
|
-
view: LayoutedElementView;
|
|
10
|
-
};
|
|
11
|
-
export type AdhocViewService = {
|
|
12
|
-
process: (input: CalcAdhocViewInput) => Promise<CalcAdhocViewOutput>;
|
|
13
|
-
};
|
|
14
|
-
export type AdhocViewServiceActor = PromiseActorLogic<CalcAdhocViewOutput, CalcAdhocViewInput>;
|
|
15
|
-
export type Input = {};
|
|
16
|
-
export type AdhocRule = {
|
|
17
|
-
id: string;
|
|
18
|
-
expr: ModelFqnExpr.Ref;
|
|
19
|
-
enabled: boolean;
|
|
20
|
-
type: 'include' | 'exclude';
|
|
21
|
-
};
|
|
22
|
-
export declare function ruleToPredicate(rule: AdhocRule): AdhocViewPredicate;
|
|
23
|
-
export interface Context {
|
|
24
|
-
view: LayoutedElementView | null;
|
|
25
|
-
error: string | undefined;
|
|
26
|
-
rules: AdhocRule[];
|
|
27
|
-
}
|
|
28
|
-
export type EmittedEvents = {
|
|
29
|
-
type: 'navigate.to';
|
|
30
|
-
} | {
|
|
31
|
-
type: 'view.update';
|
|
32
|
-
} | {
|
|
33
|
-
type: 'click.element';
|
|
34
|
-
id: Fqn;
|
|
35
|
-
};
|
|
36
|
-
export type Events = {
|
|
37
|
-
type: 'toggle.element';
|
|
38
|
-
id: Fqn;
|
|
39
|
-
} | {
|
|
40
|
-
type: 'click.element';
|
|
41
|
-
id: Fqn;
|
|
42
|
-
} | {
|
|
43
|
-
type: 'toggle.rule';
|
|
44
|
-
ruleId: string;
|
|
45
|
-
} | {
|
|
46
|
-
type: 'delete.rule';
|
|
47
|
-
ruleId: string;
|
|
48
|
-
} | {
|
|
49
|
-
type: 'select.open';
|
|
50
|
-
} | {
|
|
51
|
-
type: 'select.close';
|
|
52
|
-
} | {
|
|
53
|
-
type: 'layout';
|
|
54
|
-
} | {
|
|
55
|
-
type: 'dispose';
|
|
56
|
-
};
|
|
57
|
-
export declare const machine: SetupReturn<Context, Events, {
|
|
58
|
-
service: AdhocViewServiceActor;
|
|
59
|
-
}, {}, {}, {
|
|
60
|
-
hasView: unknown;
|
|
61
|
-
}, never, "hasView", NonReducibleUnknown, NonReducibleUnknown, EmittedEvents, MetaObject>;
|
|
62
|
-
export declare function createContext(): Context;
|
|
63
|
-
export {};
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import "../../_virtual/_rolldown/runtime.js";
|
|
2
|
-
import { setup } from "xstate";
|
|
3
|
-
//#region src/adhoc-editor/state/actor.types.ts
|
|
4
|
-
function ruleToPredicate(rule) {
|
|
5
|
-
return rule.type === "include" ? { include: [rule.expr] } : { exclude: [rule.expr] };
|
|
6
|
-
}
|
|
7
|
-
var machine = setup({
|
|
8
|
-
types: {
|
|
9
|
-
context: {},
|
|
10
|
-
tags: "",
|
|
11
|
-
events: {},
|
|
12
|
-
emitted: {}
|
|
13
|
-
},
|
|
14
|
-
actors: { service: {} },
|
|
15
|
-
guards: { hasView: ({ context }) => context.view !== null }
|
|
16
|
-
});
|
|
17
|
-
function createContext() {
|
|
18
|
-
return {
|
|
19
|
-
view: null,
|
|
20
|
-
error: void 0,
|
|
21
|
-
rules: []
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
//#endregion
|
|
25
|
-
export { createContext, machine, ruleToPredicate };
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
import { Fqn } from '@likec4/core';
|
|
2
|
-
import { StoreSnapshot, Store } from '@xstate/store';
|
|
3
|
-
import { TreeCollection } from '@zag-js/collection';
|
|
4
|
-
import { PropsWithChildren } from 'react';
|
|
5
|
-
import { TreeNodeData } from '../useElementsTree';
|
|
6
|
-
type EditorPanelState = {
|
|
7
|
-
searchInput: string;
|
|
8
|
-
expandedValue: string[];
|
|
9
|
-
collection: TreeCollection<TreeNodeData>;
|
|
10
|
-
};
|
|
11
|
-
declare const createEditorPanelStore: ({ initial, sideEffects, }: {
|
|
12
|
-
initial: TreeCollection<TreeNodeData>;
|
|
13
|
-
sideEffects: {
|
|
14
|
-
onElementStateClick: (payload: {
|
|
15
|
-
id: Fqn;
|
|
16
|
-
}) => void;
|
|
17
|
-
};
|
|
18
|
-
}) => Store<EditorPanelState, {
|
|
19
|
-
inputChange: {
|
|
20
|
-
value: string;
|
|
21
|
-
};
|
|
22
|
-
inputKeyDown: {};
|
|
23
|
-
modelUpdate: {
|
|
24
|
-
collection: TreeCollection<TreeNodeData>;
|
|
25
|
-
};
|
|
26
|
-
elementClick: {
|
|
27
|
-
id: Fqn;
|
|
28
|
-
};
|
|
29
|
-
}, {
|
|
30
|
-
type: "inputKeyDown";
|
|
31
|
-
}>;
|
|
32
|
-
export type EditorPanelStore = ReturnType<typeof createEditorPanelStore>;
|
|
33
|
-
export declare const EditorPanelStoreProvider: (props: PropsWithChildren) => import("react").JSX.Element;
|
|
34
|
-
export declare function selectEditorPanelState<T>(selector: (state: EditorPanelState) => T): [
|
|
35
|
-
selector: (snapshot: StoreSnapshot<EditorPanelState>) => T,
|
|
36
|
-
compare: (a: NoInfer<T> | undefined, b: NoInfer<T>) => boolean
|
|
37
|
-
];
|
|
38
|
-
export declare function selectEditorPanelState<T>(selector: (state: EditorPanelState) => T, compare: (a: NoInfer<T> | undefined, b: NoInfer<T>) => boolean): [
|
|
39
|
-
selector: (snapshot: StoreSnapshot<EditorPanelState>) => T,
|
|
40
|
-
compare: (a: NoInfer<T> | undefined, b: NoInfer<T>) => boolean
|
|
41
|
-
];
|
|
42
|
-
export declare function useEditorPanelStore(): Store<EditorPanelState, {
|
|
43
|
-
inputChange: {
|
|
44
|
-
value: string;
|
|
45
|
-
};
|
|
46
|
-
inputKeyDown: {};
|
|
47
|
-
modelUpdate: {
|
|
48
|
-
collection: TreeCollection<TreeNodeData>;
|
|
49
|
-
};
|
|
50
|
-
elementClick: {
|
|
51
|
-
id: Fqn;
|
|
52
|
-
};
|
|
53
|
-
}, {
|
|
54
|
-
type: "inputKeyDown";
|
|
55
|
-
}>;
|
|
56
|
-
export declare function useEditorPanelState<T>(arg1: readonly [
|
|
57
|
-
(snapshot: StoreSnapshot<EditorPanelState>) => T,
|
|
58
|
-
(a: NoInfer<T> | undefined, b: NoInfer<T>) => boolean
|
|
59
|
-
]): T;
|
|
60
|
-
export declare function useEditorPanelState<T>(selector: (snapshot: StoreSnapshot<EditorPanelState>) => T, compare?: (a: NoInfer<T> | undefined, b: NoInfer<T>) => boolean): T;
|
|
61
|
-
/**
|
|
62
|
-
* Hook to subscribe to editor panel events
|
|
63
|
-
* @param args - The event name and handler function
|
|
64
|
-
* @example
|
|
65
|
-
* useOnEditorPanelEvent('inputKeyDown', () => {
|
|
66
|
-
* console.log('Input key down event')
|
|
67
|
-
* })
|
|
68
|
-
*/
|
|
69
|
-
export declare function useOnEditorPanelEvent(...args: Parameters<EditorPanelStore['on']>): void;
|
|
70
|
-
/**
|
|
71
|
-
* Hook to access the editor panel store trigger or create a wrapped trigger function
|
|
72
|
-
*
|
|
73
|
-
* @overload
|
|
74
|
-
* @returns The store trigger object
|
|
75
|
-
*
|
|
76
|
-
* @overload
|
|
77
|
-
* @template T - The parameter types for the wrapped trigger function
|
|
78
|
-
* @param trigger - A function that receives the store trigger as the first parameter
|
|
79
|
-
* @returns A wrapped function that calls the trigger with the store trigger prepended
|
|
80
|
-
*
|
|
81
|
-
* @example
|
|
82
|
-
* // Get the trigger object directly
|
|
83
|
-
* const trigger = useEditorPanelTrigger()
|
|
84
|
-
* trigger.inputChange({ value: 'search' })
|
|
85
|
-
*
|
|
86
|
-
* @example
|
|
87
|
-
* // Create a wrapped trigger function
|
|
88
|
-
* const handleInputChange = useEditorPanelTrigger((trigger, value: string) => {
|
|
89
|
-
* trigger.inputChange({ value })
|
|
90
|
-
* })
|
|
91
|
-
* handleInputChange('search')
|
|
92
|
-
*/
|
|
93
|
-
export declare function useEditorPanelTrigger(): EditorPanelStore['trigger'];
|
|
94
|
-
export declare function useEditorPanelTrigger<T extends any[]>(trigger: (...params: [trigger: EditorPanelStore['trigger'], ...T]) => void): (...args: T) => void;
|
|
95
|
-
export {};
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
import "../../_virtual/_rolldown/runtime.js";
|
|
2
|
-
import { useCallbackRef } from "../../hooks/useCallbackRef.js";
|
|
3
|
-
import { useUpdateEffect } from "../../hooks/useUpdateEffect.js";
|
|
4
|
-
import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
|
|
5
|
-
import { useAdhocEditorActor } from "../hooks.js";
|
|
6
|
-
import { createTreeCollection } from "../useElementsTree.js";
|
|
7
|
-
import { deriveElementStates } from "./utils.js";
|
|
8
|
-
import { createContext, useContext, useEffect, useMemo, useRef } from "react";
|
|
9
|
-
import { jsx } from "react/jsx-runtime";
|
|
10
|
-
import { hasAtLeast } from "remeda";
|
|
11
|
-
import { createStore, shallowEqual } from "@xstate/store";
|
|
12
|
-
import { useSelector } from "@xstate/store/react";
|
|
13
|
-
//#region src/adhoc-editor/state/panel.tsx
|
|
14
|
-
var createEditorPanelStore = ({ initial, sideEffects }) => createStore({
|
|
15
|
-
context: {
|
|
16
|
-
searchInput: "",
|
|
17
|
-
expandedValue: [],
|
|
18
|
-
collection: initial
|
|
19
|
-
},
|
|
20
|
-
emits: { inputKeyDown: (payload) => {} },
|
|
21
|
-
on: {
|
|
22
|
-
"inputChange": (context, event) => {
|
|
23
|
-
return {
|
|
24
|
-
...context,
|
|
25
|
-
searchInput: event.value
|
|
26
|
-
};
|
|
27
|
-
},
|
|
28
|
-
"inputKeyDown": (context, event, enqueue) => {
|
|
29
|
-
enqueue.emit.inputKeyDown();
|
|
30
|
-
},
|
|
31
|
-
"modelUpdate": (context, event) => {
|
|
32
|
-
return {
|
|
33
|
-
...context,
|
|
34
|
-
collection: event.collection
|
|
35
|
-
};
|
|
36
|
-
},
|
|
37
|
-
"elementClick": (context, event, enqueue) => {
|
|
38
|
-
const current = context.collection.findNode(event.id);
|
|
39
|
-
const path = context.collection.getIndexPath(event.id);
|
|
40
|
-
if (!current || !path) return context;
|
|
41
|
-
enqueue.effect(() => {
|
|
42
|
-
sideEffects.onElementStateClick({ id: event.id });
|
|
43
|
-
});
|
|
44
|
-
return context;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
var EditorPanelStoreContext = createContext(null);
|
|
49
|
-
var EditorPanelStoreProvider = (props) => {
|
|
50
|
-
const likec4model = useLikeC4Model();
|
|
51
|
-
const likec4modelRef = useRef(likec4model);
|
|
52
|
-
likec4modelRef.current = likec4model;
|
|
53
|
-
const actorRef = useAdhocEditorActor();
|
|
54
|
-
const store = useMemo(() => createEditorPanelStore({
|
|
55
|
-
initial: createTreeCollection(likec4model),
|
|
56
|
-
sideEffects: { onElementStateClick({ id }) {
|
|
57
|
-
actorRef.send({
|
|
58
|
-
type: "toggle.element",
|
|
59
|
-
id
|
|
60
|
-
});
|
|
61
|
-
} }
|
|
62
|
-
}), [actorRef]);
|
|
63
|
-
useUpdateEffect(() => {
|
|
64
|
-
store.trigger.modelUpdate({ collection: createTreeCollection(likec4model, deriveElementStates(actorRef.getSnapshot().context)) });
|
|
65
|
-
}, [likec4model]);
|
|
66
|
-
useEffect(() => {
|
|
67
|
-
const subscription = actorRef.on("view.update", () => {
|
|
68
|
-
store.trigger.modelUpdate({ collection: createTreeCollection(likec4modelRef.current, deriveElementStates(actorRef.getSnapshot().context)) });
|
|
69
|
-
});
|
|
70
|
-
return () => {
|
|
71
|
-
subscription.unsubscribe();
|
|
72
|
-
};
|
|
73
|
-
}, [actorRef]);
|
|
74
|
-
return /* @__PURE__ */ jsx(EditorPanelStoreContext.Provider, {
|
|
75
|
-
value: store,
|
|
76
|
-
children: props.children
|
|
77
|
-
});
|
|
78
|
-
};
|
|
79
|
-
function selectEditorPanelState(selector, compare) {
|
|
80
|
-
return [(snapshot) => selector(snapshot.context), compare ?? shallowEqual];
|
|
81
|
-
}
|
|
82
|
-
function useEditorPanelStore() {
|
|
83
|
-
return useContext(EditorPanelStoreContext);
|
|
84
|
-
}
|
|
85
|
-
function useEditorPanelState(...args) {
|
|
86
|
-
const store = useEditorPanelStore();
|
|
87
|
-
let selector;
|
|
88
|
-
let compare;
|
|
89
|
-
if (args.length === 2) [selector, compare] = args;
|
|
90
|
-
else if (args.length === 1 && Array.isArray(args[0]) && hasAtLeast(args[0], 2)) [selector, compare] = args[0];
|
|
91
|
-
else if (args.length === 1 && Array.isArray(args[0]) && hasAtLeast(args[0], 1)) [selector, compare] = [args[0], shallowEqual];
|
|
92
|
-
else if (args.length === 1 && typeof args[0] === "function") [selector, compare] = [args[0], shallowEqual];
|
|
93
|
-
else throw new Error("Invalid arguments for useEditorPanelState");
|
|
94
|
-
return useSelector(store, selector, compare);
|
|
95
|
-
}
|
|
96
|
-
/**
|
|
97
|
-
* Hook to subscribe to editor panel events
|
|
98
|
-
* @param args - The event name and handler function
|
|
99
|
-
* @example
|
|
100
|
-
* useOnEditorPanelEvent('inputKeyDown', () => {
|
|
101
|
-
* console.log('Input key down event')
|
|
102
|
-
* })
|
|
103
|
-
*/
|
|
104
|
-
function useOnEditorPanelEvent(...args) {
|
|
105
|
-
const store = useEditorPanelStore();
|
|
106
|
-
const event = args[0];
|
|
107
|
-
const handler = useCallbackRef(args[1]);
|
|
108
|
-
useEffect(() => {
|
|
109
|
-
const subscription = store.on(event, handler);
|
|
110
|
-
return () => {
|
|
111
|
-
subscription.unsubscribe();
|
|
112
|
-
};
|
|
113
|
-
}, [event, store]);
|
|
114
|
-
}
|
|
115
|
-
function useEditorPanelTrigger(...args) {
|
|
116
|
-
const store = useEditorPanelStore();
|
|
117
|
-
if (args.length === 0) return store.trigger;
|
|
118
|
-
const trigger = args[0];
|
|
119
|
-
return useCallbackRef((...args) => {
|
|
120
|
-
trigger(...[store.trigger, ...args]);
|
|
121
|
-
});
|
|
122
|
-
}
|
|
123
|
-
//#endregion
|
|
124
|
-
export { EditorPanelStoreProvider, selectEditorPanelState, useEditorPanelState, useEditorPanelTrigger, useOnEditorPanelEvent };
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { Fqn } from '@likec4/core/types';
|
|
2
|
-
import { Context } from './actor.types';
|
|
3
|
-
/**
|
|
4
|
-
* Derives the state of elements in the view based on the active rules.
|
|
5
|
-
*
|
|
6
|
-
* Categorizes elements into:
|
|
7
|
-
* - Explicitly included: Elements that are both in the view and have an enabled include rule
|
|
8
|
-
* - Implicitly included: Elements in the view without an explicit include rule
|
|
9
|
-
* - Excluded: Elements with an enabled exclude rule that are not in the view
|
|
10
|
-
*/
|
|
11
|
-
export declare function deriveElementStates({ rules, view }: Pick<Context, 'rules' | 'view'>): {
|
|
12
|
-
includedExplicit: Set<Fqn>;
|
|
13
|
-
includedImplicit: Set<Fqn>;
|
|
14
|
-
excluded: Set<Fqn>;
|
|
15
|
-
disabled: Set<Fqn>;
|
|
16
|
-
};
|
|
17
|
-
export type ElementStates = ReturnType<typeof deriveElementStates>;
|