@awesome-flow/ecs 0.2.0 → 0.4.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/index.cjs +260 -276
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +26 -22
- package/dist/index.d.ts +26 -22
- package/dist/index.js +216 -234
- package/dist/index.js.map +1 -1
- package/package.json +6 -7
package/dist/index.js
CHANGED
|
@@ -1,21 +1,15 @@
|
|
|
1
|
-
// src/
|
|
1
|
+
// src/abstract/ecs-flow-context.ts
|
|
2
2
|
import { createContext } from "react";
|
|
3
|
-
var EcsFlowContext = createContext(
|
|
4
|
-
ecsFlowRepository: null,
|
|
5
|
-
entityRepository: null,
|
|
6
|
-
entityEventsManager: null,
|
|
7
|
-
entityUpdateCounter: null,
|
|
8
|
-
systemsModuleRepository: null
|
|
9
|
-
});
|
|
3
|
+
var EcsFlowContext = createContext(null);
|
|
10
4
|
|
|
11
5
|
// src/utils/id-generator.ts
|
|
12
|
-
var
|
|
6
|
+
var EcsIdGenerator = class {
|
|
13
7
|
static entityProxy(proxy) {
|
|
14
8
|
return `${proxy.entityType}:${proxy.entityUid}`;
|
|
15
9
|
}
|
|
16
10
|
};
|
|
17
11
|
|
|
18
|
-
// src/
|
|
12
|
+
// src/abstract/ecs-flow-repository.ts
|
|
19
13
|
var EcsFlowRepository = class {
|
|
20
14
|
nodes;
|
|
21
15
|
constructor() {
|
|
@@ -31,98 +25,44 @@ var EcsFlowRepository = class {
|
|
|
31
25
|
return this.nodes.get(entityType.toString());
|
|
32
26
|
}
|
|
33
27
|
addEntityNode(node) {
|
|
34
|
-
this.nodes.set(
|
|
28
|
+
this.nodes.set(EcsIdGenerator.entityProxy(node.data.entity), node);
|
|
35
29
|
}
|
|
36
30
|
getEntityNode(entity) {
|
|
37
|
-
return this.nodes.get(
|
|
31
|
+
return this.nodes.get(EcsIdGenerator.entityProxy(entity));
|
|
38
32
|
}
|
|
39
33
|
listAllNodes() {
|
|
40
34
|
return Array.from(this.nodes.values());
|
|
41
35
|
}
|
|
42
36
|
};
|
|
43
37
|
|
|
44
|
-
// src/
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
import { useReactFlow } from "@xyflow/react";
|
|
51
|
-
import { useCallback, useContext, useEffect, useMemo } from "react";
|
|
52
|
-
import { Fragment, jsx } from "react/jsx-runtime";
|
|
53
|
-
function FlowEcsAutoLayout(props) {
|
|
54
|
-
const { getNodes, getEdges } = useReactFlow();
|
|
55
|
-
const context = useContext(FlowContext);
|
|
56
|
-
const setNodes = context.useFlowStore((state) => state.setNodes);
|
|
57
|
-
const graph = useMemo(() => new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({})), []);
|
|
58
|
-
const getLayoutElements = useCallback(
|
|
59
|
-
(nodes, edges, options) => {
|
|
60
|
-
graph.setGraph(options);
|
|
61
|
-
edges.forEach((edge) => graph.setEdge(edge.source, edge.target));
|
|
62
|
-
nodes.forEach((node) => {
|
|
63
|
-
if (node.measured) {
|
|
64
|
-
graph.setNode(node.id, {
|
|
65
|
-
width: node.measured.width,
|
|
66
|
-
height: node.measured.height
|
|
67
|
-
});
|
|
68
|
-
}
|
|
69
|
-
});
|
|
70
|
-
Dagre.layout(graph);
|
|
71
|
-
return {
|
|
72
|
-
nodes: nodes.map((node) => {
|
|
73
|
-
const graphNode = graph.node(node.id);
|
|
74
|
-
if (graphNode) {
|
|
75
|
-
return { ...node, position: { x: graphNode.x, y: graphNode.y } };
|
|
76
|
-
}
|
|
77
|
-
return node;
|
|
78
|
-
}),
|
|
79
|
-
edges
|
|
80
|
-
};
|
|
81
|
-
},
|
|
82
|
-
[graph]
|
|
83
|
-
);
|
|
84
|
-
useEffect(() => {
|
|
85
|
-
if (props.needsLayout) {
|
|
86
|
-
const storeNodes = getNodes();
|
|
87
|
-
if (storeNodes?.length) {
|
|
88
|
-
const edges = getEdges();
|
|
89
|
-
const layout = getLayoutElements(storeNodes, edges, {
|
|
90
|
-
rankdir: "LR"
|
|
91
|
-
});
|
|
92
|
-
setNodes(layout.nodes);
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
}, [props.needsLayout]);
|
|
96
|
-
useEffect(() => {
|
|
97
|
-
if (props.needsLayout) {
|
|
98
|
-
props.setNeedsLayout(false);
|
|
99
|
-
}
|
|
100
|
-
});
|
|
101
|
-
return /* @__PURE__ */ jsx(Fragment, {});
|
|
102
|
-
}
|
|
103
|
-
var flow_ecs_auto_layout_default = FlowEcsAutoLayout;
|
|
104
|
-
|
|
105
|
-
// src/ecs/flow-ecs-entities.tsx
|
|
106
|
-
import { FlowContext as FlowContext4 } from "@awesome-flow/core/abstract";
|
|
107
|
-
import { useContext as useContext8, useEffect as useEffect5, useState as useState2 } from "react";
|
|
38
|
+
// src/abstract/handle-types.ts
|
|
39
|
+
var EcsHandleDataType = /* @__PURE__ */ ((EcsHandleDataType2) => {
|
|
40
|
+
EcsHandleDataType2["proxy"] = "proxy";
|
|
41
|
+
EcsHandleDataType2["module"] = "module";
|
|
42
|
+
return EcsHandleDataType2;
|
|
43
|
+
})(EcsHandleDataType || {});
|
|
108
44
|
|
|
109
45
|
// src/nodes/node-systems-module.tsx
|
|
110
46
|
import { NodeContainer } from "@awesome-flow/core/layout";
|
|
111
|
-
import { useContext
|
|
47
|
+
import { useContext } from "react";
|
|
48
|
+
import { Badge as Badge3 } from "@mantine/core";
|
|
112
49
|
|
|
113
50
|
// src/layout/systems-module-layout.tsx
|
|
114
51
|
import { SystemType } from "@awesome-ecs/abstract/systems";
|
|
115
52
|
import { Accordion as Accordion2, Text } from "@mantine/core";
|
|
116
|
-
import { useMemo as
|
|
53
|
+
import { useMemo as useMemo2 } from "react";
|
|
54
|
+
|
|
55
|
+
// src/components/pipeline-middleware-list.tsx
|
|
56
|
+
import { Accordion, Badge as Badge2, Stack } from "@mantine/core";
|
|
117
57
|
|
|
118
58
|
// src/components/badge-list.tsx
|
|
119
59
|
import { Badge } from "@mantine/core";
|
|
120
60
|
import { memo as memo2 } from "react";
|
|
121
61
|
|
|
122
62
|
// src/components/formatter-camel-case.tsx
|
|
123
|
-
import { memo, useMemo
|
|
63
|
+
import { memo, useMemo } from "react";
|
|
124
64
|
function CamelCaseFormatter(props) {
|
|
125
|
-
const value =
|
|
65
|
+
const value = useMemo(
|
|
126
66
|
() => props.value?.toString().replace(/([a-z])([A-Z])/g, "$1 $2"),
|
|
127
67
|
[props.value]
|
|
128
68
|
);
|
|
@@ -131,17 +71,16 @@ function CamelCaseFormatter(props) {
|
|
|
131
71
|
var formatter_camel_case_default = memo(CamelCaseFormatter);
|
|
132
72
|
|
|
133
73
|
// src/components/badge-list.tsx
|
|
134
|
-
import { jsx
|
|
74
|
+
import { jsx } from "react/jsx-runtime";
|
|
135
75
|
function BadgeList(props) {
|
|
136
76
|
return props.items.map((value, i) => {
|
|
137
|
-
return /* @__PURE__ */
|
|
77
|
+
return /* @__PURE__ */ jsx(Badge, { ...props.badge || [], children: /* @__PURE__ */ jsx(formatter_camel_case_default, { value }) }, i);
|
|
138
78
|
});
|
|
139
79
|
}
|
|
140
80
|
var badge_list_default = memo2(BadgeList);
|
|
141
81
|
|
|
142
82
|
// src/components/pipeline-middleware-list.tsx
|
|
143
|
-
import {
|
|
144
|
-
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
83
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
145
84
|
function PipelineMiddlewareList(props) {
|
|
146
85
|
let middleware = [];
|
|
147
86
|
if (props.pipeline) {
|
|
@@ -151,56 +90,54 @@ function PipelineMiddlewareList(props) {
|
|
|
151
90
|
return m.name || m.constructor.name;
|
|
152
91
|
});
|
|
153
92
|
return /* @__PURE__ */ jsxs(Accordion.Item, { value: props.label, children: [
|
|
154
|
-
/* @__PURE__ */
|
|
155
|
-
/* @__PURE__ */
|
|
93
|
+
/* @__PURE__ */ jsx2(Accordion.Control, { children: /* @__PURE__ */ jsx2(Badge2, { fullWidth: true, variant: "light", rightSection: components.length, children: props.label }) }),
|
|
94
|
+
/* @__PURE__ */ jsx2(Accordion.Panel, { children: /* @__PURE__ */ jsx2(Stack, { children: /* @__PURE__ */ jsx2(badge_list_default, { items: components, badge: { variant: "outline" } }) }) })
|
|
156
95
|
] }, props.label);
|
|
157
96
|
}
|
|
158
97
|
var pipeline_middleware_list_default = PipelineMiddlewareList;
|
|
159
98
|
|
|
160
99
|
// src/layout/systems-module-layout.tsx
|
|
161
|
-
import { Fragment
|
|
100
|
+
import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
162
101
|
function SystemsModuleLayout(props) {
|
|
163
102
|
const { module } = props;
|
|
164
103
|
const runtimeContext = module["runtimeContext"];
|
|
165
|
-
const systemContext = runtimeContext
|
|
166
|
-
const { status } =
|
|
104
|
+
const { systemContext } = runtimeContext;
|
|
105
|
+
const { status } = useMemo2(() => {
|
|
167
106
|
return systemContext.runtime;
|
|
168
107
|
}, [systemContext.runtime.status]);
|
|
169
108
|
const init = runtimeContext.systemPipelines.get(SystemType.initialize);
|
|
170
109
|
const update = runtimeContext.systemPipelines.get(SystemType.update);
|
|
171
110
|
const render = runtimeContext.systemPipelines.get(SystemType.render);
|
|
172
111
|
const sync = runtimeContext.systemPipelines.get(SystemType.sync);
|
|
173
|
-
return /* @__PURE__ */ jsxs2(
|
|
112
|
+
return /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
174
113
|
/* @__PURE__ */ jsxs2(Text, { children: [
|
|
175
114
|
"Status: ",
|
|
176
115
|
status
|
|
177
116
|
] }),
|
|
178
117
|
/* @__PURE__ */ jsxs2(Accordion2, { children: [
|
|
179
|
-
init && /* @__PURE__ */
|
|
180
|
-
update && /* @__PURE__ */
|
|
181
|
-
render && /* @__PURE__ */
|
|
182
|
-
sync && /* @__PURE__ */
|
|
118
|
+
init && /* @__PURE__ */ jsx3(pipeline_middleware_list_default, { pipeline: init, label: "Initialize" }),
|
|
119
|
+
update && /* @__PURE__ */ jsx3(pipeline_middleware_list_default, { pipeline: update, label: "Update" }),
|
|
120
|
+
render && /* @__PURE__ */ jsx3(pipeline_middleware_list_default, { pipeline: render, label: "Render" }),
|
|
121
|
+
sync && /* @__PURE__ */ jsx3(pipeline_middleware_list_default, { pipeline: sync, label: "Sync" })
|
|
183
122
|
] })
|
|
184
123
|
] });
|
|
185
124
|
}
|
|
186
125
|
var systems_module_layout_default = SystemsModuleLayout;
|
|
187
126
|
|
|
188
127
|
// src/nodes/node-systems-module.tsx
|
|
189
|
-
import {
|
|
190
|
-
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
128
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
191
129
|
function SystemsModuleNode({ id, data, selected, type }) {
|
|
192
|
-
const { systemsModuleRepository } =
|
|
130
|
+
const { systemsModuleRepository } = useContext(EcsFlowContext);
|
|
193
131
|
const module = systemsModuleRepository.get(data.entityType);
|
|
194
|
-
return /* @__PURE__ */
|
|
132
|
+
return /* @__PURE__ */ jsx4(
|
|
195
133
|
NodeContainer,
|
|
196
134
|
{
|
|
197
135
|
id,
|
|
198
136
|
selected,
|
|
199
|
-
|
|
200
|
-
title: /* @__PURE__ */
|
|
201
|
-
templateId: data.templateId,
|
|
137
|
+
data,
|
|
138
|
+
title: /* @__PURE__ */ jsx4(Badge3, { fullWidth: true, color: "indigo", variant: "transparent", children: /* @__PURE__ */ jsx4(formatter_camel_case_default, { value: data.entityType }) }),
|
|
202
139
|
type,
|
|
203
|
-
children: /* @__PURE__ */
|
|
140
|
+
children: /* @__PURE__ */ jsx4(systems_module_layout_default, { type: data.entityType, module })
|
|
204
141
|
}
|
|
205
142
|
);
|
|
206
143
|
}
|
|
@@ -209,7 +146,7 @@ var node_systems_module_default = SystemsModuleNode;
|
|
|
209
146
|
// src/nodes/node-entity.tsx
|
|
210
147
|
import { NodeContainer as NodeContainer2 } from "@awesome-flow/core/layout";
|
|
211
148
|
import { Badge as Badge9 } from "@mantine/core";
|
|
212
|
-
import { useContext as
|
|
149
|
+
import { useContext as useContext4, useMemo as useMemo5 } from "react";
|
|
213
150
|
|
|
214
151
|
// src/layout/entity-layout.tsx
|
|
215
152
|
import { Accordion as Accordion6, Badge as Badge8, Divider, Group } from "@mantine/core";
|
|
@@ -220,43 +157,43 @@ import { memo as memo5 } from "react";
|
|
|
220
157
|
|
|
221
158
|
// src/components/entity-component-inspector.tsx
|
|
222
159
|
import { Box, Button, Collapse } from "@mantine/core";
|
|
223
|
-
import { memo as memo4, useMemo as
|
|
160
|
+
import { memo as memo4, useMemo as useMemo4 } from "react";
|
|
224
161
|
import { useDisclosure } from "@mantine/hooks";
|
|
225
162
|
|
|
226
163
|
// src/components/object-inspector.tsx
|
|
227
164
|
import { useComputedColorScheme } from "@mantine/core";
|
|
228
|
-
import { memo as memo3, useMemo as
|
|
165
|
+
import { memo as memo3, useMemo as useMemo3 } from "react";
|
|
229
166
|
import { Inspector } from "react-inspector";
|
|
230
|
-
import { jsx as
|
|
167
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
231
168
|
function ObjectInspector(props) {
|
|
232
169
|
const colorScheme = useComputedColorScheme();
|
|
233
|
-
const theme =
|
|
170
|
+
const theme = useMemo3(
|
|
234
171
|
() => colorScheme === "dark" ? "chromeDark" : "chromeLight",
|
|
235
172
|
[colorScheme]
|
|
236
173
|
);
|
|
237
|
-
return /* @__PURE__ */
|
|
174
|
+
return /* @__PURE__ */ jsx5(Inspector, { table: false, theme, data: props.data });
|
|
238
175
|
}
|
|
239
176
|
var object_inspector_default = memo3(ObjectInspector);
|
|
240
177
|
|
|
241
178
|
// src/components/entity-component-inspector.tsx
|
|
242
|
-
import { jsx as
|
|
179
|
+
import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
243
180
|
function EntityComponentInspector(props) {
|
|
244
181
|
const [opened, { toggle }] = useDisclosure(false);
|
|
245
|
-
const buttonColor =
|
|
182
|
+
const buttonColor = useMemo4(() => opened ? "light" : "indigo", [opened]);
|
|
246
183
|
return /* @__PURE__ */ jsxs3(Box, { children: [
|
|
247
|
-
/* @__PURE__ */
|
|
248
|
-
/* @__PURE__ */
|
|
184
|
+
/* @__PURE__ */ jsx6(Button, { variant: "outline", size: "xs", onClick: toggle, color: buttonColor, fullWidth: true, children: props.component.componentType }),
|
|
185
|
+
/* @__PURE__ */ jsx6(Collapse, { in: opened, children: opened && /* @__PURE__ */ jsx6(object_inspector_default, { data: props.component }) })
|
|
249
186
|
] });
|
|
250
187
|
}
|
|
251
188
|
var entity_component_inspector_default = memo4(EntityComponentInspector);
|
|
252
189
|
|
|
253
190
|
// src/components/entity-component-list.tsx
|
|
254
|
-
import { jsx as
|
|
191
|
+
import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
255
192
|
function EntityComponentList(props) {
|
|
256
193
|
const components = Array.from(props.entity.components.values());
|
|
257
194
|
return /* @__PURE__ */ jsxs4(Accordion3.Item, { value: "components", children: [
|
|
258
|
-
/* @__PURE__ */
|
|
259
|
-
/* @__PURE__ */
|
|
195
|
+
/* @__PURE__ */ jsx7(Accordion3.Control, { children: /* @__PURE__ */ jsx7(Badge4, { fullWidth: true, variant: "light", rightSection: components.length, children: "Components" }) }),
|
|
196
|
+
/* @__PURE__ */ jsx7(Accordion3.Panel, { children: /* @__PURE__ */ jsx7(Stack2, { children: components.map((c, i) => /* @__PURE__ */ jsx7(entity_component_inspector_default, { component: c }, i)) }) })
|
|
260
197
|
] }, "components");
|
|
261
198
|
}
|
|
262
199
|
var entity_component_list_default = memo5(EntityComponentList);
|
|
@@ -264,41 +201,41 @@ var entity_component_list_default = memo5(EntityComponentList);
|
|
|
264
201
|
// src/components/entity-proxy-list.tsx
|
|
265
202
|
import { Accordion as Accordion4, Badge as Badge5, Stack as Stack3 } from "@mantine/core";
|
|
266
203
|
import { memo as memo6 } from "react";
|
|
267
|
-
import { jsx as
|
|
204
|
+
import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
268
205
|
function EntityProxyList(props) {
|
|
269
206
|
const proxies = Array.from(props.entity.proxies.values()).map((c) => c.values());
|
|
270
|
-
const items = proxies.map((p) => Array.from(p).map((k) =>
|
|
207
|
+
const items = proxies.map((p) => Array.from(p).map((k) => EcsIdGenerator.entityProxy(k))).flat();
|
|
271
208
|
return /* @__PURE__ */ jsxs5(Accordion4.Item, { value: "proxies", children: [
|
|
272
|
-
/* @__PURE__ */
|
|
273
|
-
/* @__PURE__ */
|
|
209
|
+
/* @__PURE__ */ jsx8(Accordion4.Control, { children: /* @__PURE__ */ jsx8(Badge5, { fullWidth: true, variant: "light", rightSection: items.length, children: "Proxies" }) }),
|
|
210
|
+
/* @__PURE__ */ jsx8(Accordion4.Panel, { children: /* @__PURE__ */ jsx8(Stack3, { children: /* @__PURE__ */ jsx8(badge_list_default, { items, badge: { variant: "outline" } }) }) })
|
|
274
211
|
] }, "proxies");
|
|
275
212
|
}
|
|
276
213
|
var entity_proxy_list_default = memo6(EntityProxyList);
|
|
277
214
|
|
|
278
215
|
// src/components/entity-subscription-list.tsx
|
|
279
216
|
import { Accordion as Accordion5, Badge as Badge6, Stack as Stack4 } from "@mantine/core";
|
|
280
|
-
import { memo as memo7, useContext as
|
|
281
|
-
import { jsx as
|
|
217
|
+
import { memo as memo7, useContext as useContext2 } from "react";
|
|
218
|
+
import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
282
219
|
function EntitySubscriptionList(props) {
|
|
283
|
-
const { entityEventsManager } =
|
|
220
|
+
const { entityEventsManager } = useContext2(EcsFlowContext);
|
|
284
221
|
const subscriptions = entityEventsManager.getSubscriptionsForEntity(props.entity.myProxy);
|
|
285
222
|
return /* @__PURE__ */ jsxs6(Accordion5.Item, { value: "subscriptions", children: [
|
|
286
|
-
/* @__PURE__ */
|
|
287
|
-
/* @__PURE__ */
|
|
223
|
+
/* @__PURE__ */ jsx9(Accordion5.Control, { children: /* @__PURE__ */ jsx9(Badge6, { fullWidth: true, variant: "light", rightSection: subscriptions.length, children: "Events" }) }),
|
|
224
|
+
/* @__PURE__ */ jsx9(Accordion5.Panel, { children: /* @__PURE__ */ jsx9(Stack4, { children: /* @__PURE__ */ jsx9(badge_list_default, { items: subscriptions, badge: { variant: "outline" } }) }) })
|
|
288
225
|
] }, "subscriptions");
|
|
289
226
|
}
|
|
290
227
|
var entity_subscription_list_default = memo7(EntitySubscriptionList);
|
|
291
228
|
|
|
292
229
|
// src/components/entity-update-counter.tsx
|
|
293
230
|
import { Badge as Badge7 } from "@mantine/core";
|
|
294
|
-
import { memo as memo8, useContext as
|
|
295
|
-
import { Fragment as
|
|
231
|
+
import { memo as memo8, useContext as useContext3, useEffect, useState } from "react";
|
|
232
|
+
import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
296
233
|
function EntityUpdateCounter(props) {
|
|
297
234
|
const [, setRefresh] = useState(0);
|
|
298
|
-
const { entityUpdateCounter } =
|
|
235
|
+
const { entityUpdateCounter } = useContext3(EcsFlowContext);
|
|
299
236
|
const updates = entityUpdateCounter.getUpdateCount(props.entityUid) || 0;
|
|
300
237
|
const removes = entityUpdateCounter.getRemoveCount(props.entityUid) || 0;
|
|
301
|
-
|
|
238
|
+
useEffect(() => {
|
|
302
239
|
const interval = setInterval(() => {
|
|
303
240
|
setRefresh((refresh) => refresh + 1);
|
|
304
241
|
}, 1e3);
|
|
@@ -307,52 +244,107 @@ function EntityUpdateCounter(props) {
|
|
|
307
244
|
clearInterval(interval);
|
|
308
245
|
};
|
|
309
246
|
}, []);
|
|
310
|
-
return /* @__PURE__ */ jsxs7(
|
|
311
|
-
/* @__PURE__ */
|
|
312
|
-
/* @__PURE__ */
|
|
247
|
+
return /* @__PURE__ */ jsxs7(Fragment2, { children: [
|
|
248
|
+
/* @__PURE__ */ jsx10(Badge7, { variant: "light", children: updates }),
|
|
249
|
+
/* @__PURE__ */ jsx10(Badge7, { variant: "light", color: "orange", children: removes })
|
|
313
250
|
] });
|
|
314
251
|
}
|
|
315
252
|
var entity_update_counter_default = memo8(EntityUpdateCounter);
|
|
316
253
|
|
|
317
254
|
// src/layout/entity-layout.tsx
|
|
318
|
-
import { Fragment as
|
|
255
|
+
import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
319
256
|
function EntityLayout({ entity }) {
|
|
320
|
-
return /* @__PURE__ */ jsxs8(
|
|
257
|
+
return /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
321
258
|
/* @__PURE__ */ jsxs8(Group, { children: [
|
|
322
|
-
/* @__PURE__ */
|
|
323
|
-
/* @__PURE__ */
|
|
259
|
+
/* @__PURE__ */ jsx11(Badge8, { variant: "outline", color: "orange", children: entity.myProxy.entityUid }),
|
|
260
|
+
/* @__PURE__ */ jsx11(entity_update_counter_default, { entityUid: entity.myProxy.entityUid })
|
|
324
261
|
] }),
|
|
325
|
-
/* @__PURE__ */
|
|
262
|
+
/* @__PURE__ */ jsx11(Divider, { my: 5 }),
|
|
326
263
|
/* @__PURE__ */ jsxs8(Accordion6, { children: [
|
|
327
|
-
/* @__PURE__ */
|
|
328
|
-
/* @__PURE__ */
|
|
329
|
-
/* @__PURE__ */
|
|
264
|
+
/* @__PURE__ */ jsx11(entity_component_list_default, { entity }),
|
|
265
|
+
/* @__PURE__ */ jsx11(entity_proxy_list_default, { entity }),
|
|
266
|
+
/* @__PURE__ */ jsx11(entity_subscription_list_default, { entity })
|
|
330
267
|
] })
|
|
331
268
|
] });
|
|
332
269
|
}
|
|
333
270
|
var entity_layout_default = EntityLayout;
|
|
334
271
|
|
|
335
272
|
// src/nodes/node-entity.tsx
|
|
336
|
-
import { jsx as
|
|
273
|
+
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
337
274
|
function EntityNode({ id, data, selected, type }) {
|
|
338
|
-
const { entityRepository } =
|
|
339
|
-
const entity =
|
|
340
|
-
return /* @__PURE__ */
|
|
275
|
+
const { entityRepository } = useContext4(EcsFlowContext);
|
|
276
|
+
const entity = useMemo5(() => entityRepository.get(data.entity), [data.entity]);
|
|
277
|
+
return /* @__PURE__ */ jsx12(
|
|
341
278
|
NodeContainer2,
|
|
342
279
|
{
|
|
343
280
|
id,
|
|
344
281
|
selected,
|
|
345
|
-
|
|
346
|
-
title: /* @__PURE__ */
|
|
347
|
-
templateId: data.templateId,
|
|
282
|
+
data,
|
|
283
|
+
title: /* @__PURE__ */ jsx12(Badge9, { fullWidth: true, variant: "transparent", children: /* @__PURE__ */ jsx12(formatter_camel_case_default, { value: entity.myProxy.entityType }) }),
|
|
348
284
|
type,
|
|
349
|
-
children: /* @__PURE__ */
|
|
285
|
+
children: /* @__PURE__ */ jsx12(entity_layout_default, { entity })
|
|
350
286
|
}
|
|
351
287
|
);
|
|
352
288
|
}
|
|
353
289
|
var node_entity_default = EntityNode;
|
|
354
290
|
|
|
355
|
-
// src/node
|
|
291
|
+
// src/templates/template-entity-node.ts
|
|
292
|
+
import { Position } from "@xyflow/react";
|
|
293
|
+
|
|
294
|
+
// src/abstract/templates.ts
|
|
295
|
+
var EcsTemplateGroup = /* @__PURE__ */ ((EcsTemplateGroup2) => {
|
|
296
|
+
EcsTemplateGroup2["ecs"] = "ECS";
|
|
297
|
+
return EcsTemplateGroup2;
|
|
298
|
+
})(EcsTemplateGroup || {});
|
|
299
|
+
|
|
300
|
+
// src/templates/template-entity-node.ts
|
|
301
|
+
var EntityNodeTemplate = class {
|
|
302
|
+
template = {
|
|
303
|
+
type: "entity-node" /* entity */,
|
|
304
|
+
group: "ECS" /* ecs */,
|
|
305
|
+
data: {
|
|
306
|
+
title: "Entity",
|
|
307
|
+
entity: null
|
|
308
|
+
},
|
|
309
|
+
handles: [
|
|
310
|
+
{
|
|
311
|
+
dataType: "proxy" /* proxy */,
|
|
312
|
+
position: Position.Left,
|
|
313
|
+
connection: "target",
|
|
314
|
+
disabled: true
|
|
315
|
+
},
|
|
316
|
+
{
|
|
317
|
+
dataType: "proxy" /* proxy */,
|
|
318
|
+
position: Position.Right,
|
|
319
|
+
connection: "source",
|
|
320
|
+
disabled: true
|
|
321
|
+
}
|
|
322
|
+
]
|
|
323
|
+
};
|
|
324
|
+
};
|
|
325
|
+
|
|
326
|
+
// src/templates/template-systems-module.ts
|
|
327
|
+
import { Position as Position2 } from "@xyflow/react";
|
|
328
|
+
var SystemsModuleNodeTemplate = class {
|
|
329
|
+
template = {
|
|
330
|
+
type: "systems-module-node" /* systemsModule */,
|
|
331
|
+
group: "ECS" /* ecs */,
|
|
332
|
+
data: {
|
|
333
|
+
title: "Systems Module",
|
|
334
|
+
entityType: null
|
|
335
|
+
},
|
|
336
|
+
handles: [
|
|
337
|
+
{
|
|
338
|
+
dataType: "module" /* module */,
|
|
339
|
+
position: Position2.Left,
|
|
340
|
+
connection: "target",
|
|
341
|
+
disabled: true
|
|
342
|
+
}
|
|
343
|
+
]
|
|
344
|
+
};
|
|
345
|
+
};
|
|
346
|
+
|
|
347
|
+
// src/abstract/node-types.ts
|
|
356
348
|
var EcsNodeType = /* @__PURE__ */ ((EcsNodeType2) => {
|
|
357
349
|
EcsNodeType2["systemsModule"] = "systems-module-node";
|
|
358
350
|
EcsNodeType2["entity"] = "entity-node";
|
|
@@ -362,8 +354,77 @@ var ecsNodeTypes = {
|
|
|
362
354
|
["systems-module-node" /* systemsModule */]: node_systems_module_default,
|
|
363
355
|
["entity-node" /* entity */]: node_entity_default
|
|
364
356
|
};
|
|
357
|
+
var ecsNodeTemplates = {
|
|
358
|
+
["entity-node" /* entity */]: new EntityNodeTemplate(),
|
|
359
|
+
["systems-module-node" /* systemsModule */]: new SystemsModuleNodeTemplate()
|
|
360
|
+
};
|
|
361
|
+
|
|
362
|
+
// src/flow/flow-ecs-state.tsx
|
|
363
|
+
import { useEffect as useEffect7, useContext as useContext10, useState as useState3 } from "react";
|
|
365
364
|
|
|
366
|
-
// src/
|
|
365
|
+
// src/flow/flow-ecs-auto-layout.tsx
|
|
366
|
+
import { FlowContext } from "@awesome-flow/core/abstract";
|
|
367
|
+
import Dagre from "@dagrejs/dagre";
|
|
368
|
+
import { useReactFlow } from "@xyflow/react";
|
|
369
|
+
import { useCallback, useContext as useContext5, useEffect as useEffect2, useMemo as useMemo6 } from "react";
|
|
370
|
+
import { Fragment as Fragment4, jsx as jsx13 } from "react/jsx-runtime";
|
|
371
|
+
function FlowEcsAutoLayout(props) {
|
|
372
|
+
const { getNodes, getEdges } = useReactFlow();
|
|
373
|
+
const context = useContext5(FlowContext);
|
|
374
|
+
const setNodes = context.useFlowStore((state) => state.setNodes);
|
|
375
|
+
const graph = useMemo6(() => new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({})), []);
|
|
376
|
+
const getLayoutElements = useCallback(
|
|
377
|
+
(nodes, edges, options) => {
|
|
378
|
+
graph.setGraph(options);
|
|
379
|
+
edges.forEach((edge) => graph.setEdge(edge.source, edge.target));
|
|
380
|
+
nodes.forEach((node) => {
|
|
381
|
+
if (node.measured) {
|
|
382
|
+
graph.setNode(node.id, {
|
|
383
|
+
width: node.measured.width,
|
|
384
|
+
height: node.measured.height
|
|
385
|
+
});
|
|
386
|
+
}
|
|
387
|
+
});
|
|
388
|
+
Dagre.layout(graph);
|
|
389
|
+
return {
|
|
390
|
+
nodes: nodes.map((node) => {
|
|
391
|
+
const graphNode = graph.node(node.id);
|
|
392
|
+
if (graphNode) {
|
|
393
|
+
return { ...node, position: { x: graphNode.x, y: graphNode.y } };
|
|
394
|
+
}
|
|
395
|
+
return node;
|
|
396
|
+
}),
|
|
397
|
+
edges
|
|
398
|
+
};
|
|
399
|
+
},
|
|
400
|
+
[graph]
|
|
401
|
+
);
|
|
402
|
+
useEffect2(() => {
|
|
403
|
+
if (props.needsLayout) {
|
|
404
|
+
const storeNodes = getNodes();
|
|
405
|
+
if (storeNodes?.length) {
|
|
406
|
+
const edges = getEdges();
|
|
407
|
+
const layout = getLayoutElements(storeNodes, edges, {
|
|
408
|
+
rankdir: "LR"
|
|
409
|
+
});
|
|
410
|
+
setNodes(layout.nodes);
|
|
411
|
+
}
|
|
412
|
+
}
|
|
413
|
+
}, [props.needsLayout]);
|
|
414
|
+
useEffect2(() => {
|
|
415
|
+
if (props.needsLayout) {
|
|
416
|
+
props.setNeedsLayout(false);
|
|
417
|
+
}
|
|
418
|
+
});
|
|
419
|
+
return /* @__PURE__ */ jsx13(Fragment4, {});
|
|
420
|
+
}
|
|
421
|
+
var flow_ecs_auto_layout_default = FlowEcsAutoLayout;
|
|
422
|
+
|
|
423
|
+
// src/flow/flow-ecs-entities.tsx
|
|
424
|
+
import { FlowContext as FlowContext4 } from "@awesome-flow/core/abstract";
|
|
425
|
+
import { useContext as useContext8, useEffect as useEffect5, useState as useState2 } from "react";
|
|
426
|
+
|
|
427
|
+
// src/flow/flow-ecs-edge-proxies.tsx
|
|
367
428
|
import { useContext as useContext6, useEffect as useEffect3 } from "react";
|
|
368
429
|
import { FlowContext as FlowContext2 } from "@awesome-flow/core/abstract";
|
|
369
430
|
import { Fragment as Fragment5, jsx as jsx14 } from "react/jsx-runtime";
|
|
@@ -396,7 +457,7 @@ function FlowEcsEdgeProxies(props) {
|
|
|
396
457
|
}
|
|
397
458
|
var flow_ecs_edge_proxies_default = FlowEcsEdgeProxies;
|
|
398
459
|
|
|
399
|
-
// src/
|
|
460
|
+
// src/flow/flow-ecs-edge-modules.tsx
|
|
400
461
|
import { useContext as useContext7, useEffect as useEffect4 } from "react";
|
|
401
462
|
import { FlowContext as FlowContext3 } from "@awesome-flow/core/abstract";
|
|
402
463
|
import { Fragment as Fragment6, jsx as jsx15 } from "react/jsx-runtime";
|
|
@@ -425,7 +486,7 @@ function FlowEcsEdgeModules(props) {
|
|
|
425
486
|
}
|
|
426
487
|
var flow_ecs_edge_modules_default = FlowEcsEdgeModules;
|
|
427
488
|
|
|
428
|
-
// src/
|
|
489
|
+
// src/flow/flow-ecs-entities.tsx
|
|
429
490
|
import { Fragment as Fragment7, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
430
491
|
function FlowEcsEntities() {
|
|
431
492
|
const context = useContext8(FlowContext4);
|
|
@@ -455,7 +516,7 @@ function FlowEcsEntities() {
|
|
|
455
516
|
}
|
|
456
517
|
var flow_ecs_entities_default = FlowEcsEntities;
|
|
457
518
|
|
|
458
|
-
// src/
|
|
519
|
+
// src/flow/flow-ecs-modules.tsx
|
|
459
520
|
import { useEffect as useEffect6, useContext as useContext9 } from "react";
|
|
460
521
|
import { FlowContext as FlowContext5 } from "@awesome-flow/core/abstract";
|
|
461
522
|
import { Fragment as Fragment8, jsx as jsx17 } from "react/jsx-runtime";
|
|
@@ -487,7 +548,7 @@ function FlowEcsModules() {
|
|
|
487
548
|
}
|
|
488
549
|
var flow_ecs_modules_default = FlowEcsModules;
|
|
489
550
|
|
|
490
|
-
// src/
|
|
551
|
+
// src/flow/flow-ecs-state.tsx
|
|
491
552
|
import { Fragment as Fragment9, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
492
553
|
function FlowEcsState(props) {
|
|
493
554
|
const [, setUpdates] = useState3(0);
|
|
@@ -508,97 +569,18 @@ function FlowEcsState(props) {
|
|
|
508
569
|
] });
|
|
509
570
|
}
|
|
510
571
|
var flow_ecs_state_default = FlowEcsState;
|
|
511
|
-
|
|
512
|
-
// src/templates/template-entity-node.ts
|
|
513
|
-
import { IDGenerator } from "@awesome-flow/core/utils";
|
|
514
|
-
|
|
515
|
-
// src/handle-types.ts
|
|
516
|
-
var EcsHandleDataType = /* @__PURE__ */ ((EcsHandleDataType2) => {
|
|
517
|
-
EcsHandleDataType2[EcsHandleDataType2["proxy"] = 1] = "proxy";
|
|
518
|
-
EcsHandleDataType2[EcsHandleDataType2["module"] = 2] = "module";
|
|
519
|
-
return EcsHandleDataType2;
|
|
520
|
-
})(EcsHandleDataType || {});
|
|
521
|
-
|
|
522
|
-
// src/templates/template-entity-node.ts
|
|
523
|
-
import { Position } from "@xyflow/react";
|
|
524
|
-
var EntityNodeTemplate = class {
|
|
525
|
-
create() {
|
|
526
|
-
const data = {
|
|
527
|
-
title: "Entity",
|
|
528
|
-
entity: null
|
|
529
|
-
};
|
|
530
|
-
return {
|
|
531
|
-
id: IDGenerator.template(),
|
|
532
|
-
removable: false,
|
|
533
|
-
type: "entity-node" /* entity */,
|
|
534
|
-
data,
|
|
535
|
-
handles: [
|
|
536
|
-
{
|
|
537
|
-
dataType: 1 /* proxy */,
|
|
538
|
-
position: Position.Left,
|
|
539
|
-
connection: "target",
|
|
540
|
-
disabled: true
|
|
541
|
-
},
|
|
542
|
-
{
|
|
543
|
-
dataType: 1 /* proxy */,
|
|
544
|
-
position: Position.Right,
|
|
545
|
-
connection: "source",
|
|
546
|
-
disabled: true
|
|
547
|
-
}
|
|
548
|
-
]
|
|
549
|
-
};
|
|
550
|
-
}
|
|
551
|
-
isHandleAllowed() {
|
|
552
|
-
return false;
|
|
553
|
-
}
|
|
554
|
-
getHandleAllowedDataType() {
|
|
555
|
-
return 1 /* proxy */;
|
|
556
|
-
}
|
|
557
|
-
};
|
|
558
|
-
|
|
559
|
-
// src/templates/template-systems-module.ts
|
|
560
|
-
import { IDGenerator as IDGenerator2 } from "@awesome-flow/core/utils";
|
|
561
|
-
import { Position as Position2 } from "@xyflow/react";
|
|
562
|
-
var SystemsModuleNodeTemplate = class {
|
|
563
|
-
create() {
|
|
564
|
-
const data = {
|
|
565
|
-
title: "Systems Module",
|
|
566
|
-
entityType: null,
|
|
567
|
-
handles: null,
|
|
568
|
-
templateId: null
|
|
569
|
-
};
|
|
570
|
-
return {
|
|
571
|
-
id: IDGenerator2.template(),
|
|
572
|
-
removable: false,
|
|
573
|
-
type: "systems-module-node" /* systemsModule */,
|
|
574
|
-
data,
|
|
575
|
-
handles: [
|
|
576
|
-
{
|
|
577
|
-
dataType: 2 /* module */,
|
|
578
|
-
position: Position2.Left,
|
|
579
|
-
connection: "target",
|
|
580
|
-
disabled: true
|
|
581
|
-
}
|
|
582
|
-
]
|
|
583
|
-
};
|
|
584
|
-
}
|
|
585
|
-
isHandleAllowed() {
|
|
586
|
-
return false;
|
|
587
|
-
}
|
|
588
|
-
getHandleAllowedDataType() {
|
|
589
|
-
return 2 /* module */;
|
|
590
|
-
}
|
|
591
|
-
};
|
|
592
572
|
export {
|
|
593
573
|
EcsFlowContext,
|
|
594
574
|
EcsFlowRepository,
|
|
595
575
|
EcsHandleDataType,
|
|
596
576
|
EcsNodeType,
|
|
577
|
+
EcsTemplateGroup,
|
|
597
578
|
node_entity_default as EntityNode,
|
|
598
579
|
EntityNodeTemplate,
|
|
599
580
|
flow_ecs_state_default as FlowEcsState,
|
|
600
581
|
node_systems_module_default as SystemsModuleNode,
|
|
601
582
|
SystemsModuleNodeTemplate,
|
|
583
|
+
ecsNodeTemplates,
|
|
602
584
|
ecsNodeTypes
|
|
603
585
|
};
|
|
604
586
|
//# sourceMappingURL=index.js.map
|