@liquidcars/atlas-geometry-processes 0.1.0 → 0.2.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.
Files changed (3) hide show
  1. package/README.md +17 -13
  2. package/index.js +101 -118
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -17,7 +17,7 @@ not depend on Three.js.
17
17
 
18
18
  | Geometry | Use |
19
19
  | --- | --- |
20
- | process.terminator | Start/end |
20
+ | process.terminator | Start / end |
21
21
  | process.activity | Task, subprocess or call activity |
22
22
  | process.decision | Decision/gateway |
23
23
  | process.data | Data input/output |
@@ -42,6 +42,11 @@ The symbols are intentionally process-oriented rather than generic primitives:
42
42
  they preserve the visual vocabulary of flowcharts while remaining volumetric,
43
43
  selectable and compatible with Atlas relations.
44
44
 
45
+ Studio presents the everyday vocabulary as **Processes · Essentials** and the
46
+ specialized flowchart vocabulary as **Processes · Advanced**. This grouping
47
+ changes only discovery and display names; all existing geometry ids remain
48
+ stable and backwards compatible.
49
+
45
50
  ## Example
46
51
 
47
52
  ~~~yaml
@@ -56,7 +61,6 @@ selectable and compatible with Atlas relations.
56
61
  geometry: process.activity
57
62
  geometryOptions:
58
63
  variant: task
59
- icon: "✓"
60
64
 
61
65
  - id: order-valid
62
66
  name: Order valid?
@@ -68,7 +72,7 @@ selectable and compatible with Atlas relations.
68
72
  name: Rejected
69
73
  geometry: process.document
70
74
  geometryOptions:
71
- icon: "!"
75
+ copies: 2
72
76
 
73
77
  relations:
74
78
  - from: receive-order
@@ -89,8 +93,7 @@ semantics:
89
93
  {
90
94
  "geometry": "process.display",
91
95
  "geometryOptions": {
92
- "screen": "active",
93
- "icon": "UI"
96
+ "screen": "active"
94
97
  },
95
98
  "geometryPalette": {
96
99
  "body": "#263746",
@@ -99,17 +102,18 @@ semantics:
99
102
  }
100
103
  ~~~
101
104
 
102
- Icons and images are optional. A symbol stays clean when no marker is supplied.
103
- Images accept browser-loadable URLs or data URIs; external hosts must permit
104
- cross-origin loading when required by the browser.
105
+ Images are optional on the few symbols where a real visual asset is useful.
106
+ The pack deliberately avoids text-based icon fields because entity labels are
107
+ the semantic caption and front-face text competes with them. Images accept
108
+ browser-loadable URLs or data URIs; external hosts must permit cross-origin
109
+ loading when required by the browser.
105
110
 
106
111
  ## Design notes
107
112
 
108
- The first release follows common flowchart semantics visible in standard
109
- process-symbol libraries. Some symbols, such as a document's curved lower edge
110
- or a manual-input parallelogram, are represented as stylized 3D compounds so
111
- they remain legible from the interactive camera instead of pretending to be
112
- flat 2D SVG glyphs.
113
+ The symbols follow common flowchart semantics while remaining volumetric. The
114
+ terminator is a single rounded pill, documents use a light paper face with a
115
+ wave at the lower edge, connectors face the camera as compact discs, and notes
116
+ use the familiar folded-corner Post-it silhouette.
113
117
 
114
118
  The pack uses namespace process and registers itself on import:
115
119
 
package/index.js CHANGED
@@ -2,16 +2,14 @@ import { registerGeometryPack } from "@liquidcars/atlas";
2
2
 
3
3
  const clamp = (value, minimum, maximum) => Math.min(maximum, Math.max(minimum, Number(value) || minimum));
4
4
 
5
- const frontMarker = (parameters, color = "accent", position = [0, 0, .54], size = [.3, .24, 1]) => {
6
- if (!parameters?.icon && !parameters?.image) return [];
5
+ const frontImage = (parameters, position = [0, 0, .54], size = [.3, .24, 1]) => {
6
+ if (!parameters?.image) return [];
7
7
  return [{
8
8
  shape: "plane",
9
9
  size,
10
10
  position,
11
- color: parameters.image ? "#ffffff" : color,
12
- icon: parameters.icon,
11
+ color: "#ffffff",
13
12
  image: parameters.image,
14
- iconColor: "#ffffff",
15
13
  edges: false,
16
14
  doubleSided: true
17
15
  }];
@@ -26,6 +24,17 @@ const frontLine = (position, size, color = "accent") => ({
26
24
  metalness: .12
27
25
  });
28
26
 
27
+ const frontWave = (y = -.29, z = .175, color = "body") => Array.from({ length: 15 }, (_, index) => {
28
+ const progress = index / 14;
29
+ return {
30
+ shape: "sphere",
31
+ size: [.09, .026, .018],
32
+ position: [-.42 + progress * .84, y + Math.sin(progress * Math.PI * 2) * .045, z],
33
+ color,
34
+ edges: false
35
+ };
36
+ });
37
+
29
38
  const processPalette = {
30
39
  body: "#496879",
31
40
  edge: "#8fd3ee",
@@ -33,7 +42,10 @@ const processPalette = {
33
42
  decision: "#d19a54",
34
43
  data: "#5e9f9a",
35
44
  input: "#6c8fb7",
36
- paper: "#8ca9b7",
45
+ paper: "#f4f1e8",
46
+ note: "#efcf62",
47
+ fold: "#fff0ae",
48
+ screen: "#173541",
37
49
  storage: "#597887",
38
50
  accent: "#72dbc9",
39
51
  positive: "#8bd8a8",
@@ -44,29 +56,25 @@ const processPalette = {
44
56
  export const processGeometryPack = {
45
57
  namespace: "process",
46
58
  name: "Process Symbols",
47
- version: "0.1.0",
59
+ version: "0.2.0",
48
60
  category: "Processes",
49
61
  palette: processPalette,
50
62
  geometries: [
51
63
  {
52
64
  id: "terminator",
53
- name: "Terminator",
65
+ name: "Start / End",
54
66
  description: "Start or end of a process.",
67
+ category: "Processes · Essentials",
55
68
  canonicalSize: [3, 1.35, 1.5],
56
69
  parameters: {
57
- kind: { type: "select", label: "Kind", options: ["start", "end"], default: "start" },
58
- icon: { type: "icon", label: "Front icon", default: "" },
59
- image: { type: "image", label: "Front image URL", default: "" }
70
+ kind: { type: "select", label: "Kind", options: ["start", "end"], default: "start" }
60
71
  },
61
72
  anchors: { input: [-1, 0, 0], output: [1, 0, 0] },
62
73
  create({ parameters }) {
63
74
  const color = parameters.kind === "end" ? "negative" : "positive";
64
75
  return {
65
76
  parts: [
66
- { shape: "box", size: [.72, .8, .82], color, radius: .16, edgeColor: "edge" },
67
- { shape: "sphere", size: [.62, .8, .82], position: [-.35, 0, 0], color, edges: false },
68
- { shape: "sphere", size: [.62, .8, .82], position: [.35, 0, 0], color, edges: false },
69
- ...frontMarker(parameters, "ink", [0, 0, .45], [.34, .26, 1])
77
+ { shape: "box", size: [1, .72, .7], color, radius: .36, segments: 10, edgeColor: "edge" }
70
78
  ]
71
79
  };
72
80
  }
@@ -75,11 +83,11 @@ export const processGeometryPack = {
75
83
  id: "activity",
76
84
  name: "Process",
77
85
  description: "A normal process activity or task.",
86
+ category: "Processes · Essentials",
78
87
  canonicalSize: [2.8, 1.8, 1.8],
79
88
  parameters: {
80
89
  variant: { type: "select", label: "Variant", options: ["task", "subprocess", "call"], default: "task" },
81
90
  radius: { type: "number", label: "Corner radius", min: 0, max: .2, step: .01, default: .05 },
82
- icon: { type: "icon", label: "Front icon", default: "" },
83
91
  image: { type: "image", label: "Front image URL", default: "" }
84
92
  },
85
93
  anchors: { input: [-1, 0, 0], output: [1, 0, 0], detail: [0, 0, 1] },
@@ -94,37 +102,36 @@ export const processGeometryPack = {
94
102
  );
95
103
  }
96
104
  if (parameters.variant === "call") parts.push(frontLine([0, .39, .42], [.72, .035, .035], "accent"));
97
- return { parts: [...parts, ...frontMarker(parameters)] };
105
+ return { parts: [...parts, ...frontImage(parameters)] };
98
106
  }
99
107
  },
100
108
  {
101
109
  id: "decision",
102
110
  name: "Decision",
103
111
  description: "A branching decision or gateway.",
112
+ category: "Processes · Essentials",
104
113
  canonicalSize: [2.25, 1.8, 2.25],
105
114
  parameters: {
106
- outcome: { type: "select", label: "Expected outcome", options: ["neutral", "positive", "negative"], default: "neutral" },
107
- icon: { type: "icon", label: "Front icon", default: "" }
115
+ outcome: { type: "select", label: "Expected outcome", options: ["neutral", "positive", "negative"], default: "neutral" }
108
116
  },
109
117
  anchors: { input: [-1, 0, 0], yes: [1, 0, 0], no: [0, -1, 0], detail: [0, 0, 1] },
110
118
  create({ parameters }) {
111
119
  const color = parameters.outcome === "positive" ? "positive" : parameters.outcome === "negative" ? "negative" : "decision";
112
120
  return {
113
121
  parts: [
114
- { shape: "box", size: [.88, .22, .88], rotation: [0, 0, Math.PI / 4], color, edgeColor: "edge", radius: .04 },
115
- ...frontMarker(parameters, "ink", [0, 0, .15], [.25, .2, 1])
122
+ { shape: "box", size: [.88, .22, .88], rotation: [0, 0, Math.PI / 4], color, edgeColor: "edge", radius: .04 }
116
123
  ]
117
124
  };
118
125
  }
119
126
  },
120
127
  {
121
128
  id: "data",
122
- name: "Data",
129
+ name: "Data input / output",
123
130
  description: "Data entering or leaving a process.",
131
+ category: "Processes · Essentials",
124
132
  canonicalSize: [2.7, 1.55, 1.7],
125
133
  parameters: {
126
134
  direction: { type: "select", label: "Direction", options: ["input", "output", "both"], default: "input" },
127
- icon: { type: "icon", label: "Front icon", default: "" },
128
135
  image: { type: "image", label: "Front image URL", default: "" }
129
136
  },
130
137
  anchors: { input: [-1, 0, 0], output: [1, 0, 0], detail: [0, 0, 1] },
@@ -133,7 +140,7 @@ export const processGeometryPack = {
133
140
  return {
134
141
  parts: [
135
142
  { shape: "box", size: [1, .58, .78], rotation: [0, 0, -.16], color, edgeColor: "edge", radius: .03 },
136
- ...frontMarker(parameters, "ink", [0, 0, .43], [.3, .23, 1])
143
+ ...frontImage(parameters, [0, 0, .43], [.3, .23, 1])
137
144
  ]
138
145
  };
139
146
  }
@@ -142,16 +149,14 @@ export const processGeometryPack = {
142
149
  id: "manual-operation",
143
150
  name: "Manual Operation",
144
151
  description: "A manually performed operation.",
152
+ category: "Processes · Advanced",
145
153
  canonicalSize: [2.75, 1.6, 1.7],
146
- parameters: {
147
- icon: { type: "icon", label: "Front icon", default: "" }
148
- },
154
+ parameters: {},
149
155
  anchors: { input: [-1, 0, 0], output: [1, 0, 0] },
150
156
  create({ parameters }) {
151
157
  return {
152
158
  parts: [
153
- { shape: "frustum-pyramid", size: [1, .64, .84], color: "input", edgeColor: "edge" },
154
- ...frontMarker(parameters, "ink", [0, 0, .44], [.28, .22, 1])
159
+ { shape: "frustum-pyramid", size: [1, .64, .84], color: "input", edgeColor: "edge" }
155
160
  ]
156
161
  };
157
162
  }
@@ -160,11 +165,10 @@ export const processGeometryPack = {
160
165
  id: "document",
161
166
  name: "Document",
162
167
  description: "A document or generated record.",
163
- canonicalSize: [2.65, 2, 1.65],
168
+ category: "Processes · Essentials",
169
+ canonicalSize: [2.65, 2, .72],
164
170
  parameters: {
165
- copies: { type: "number", label: "Copies", min: 1, max: 3, step: 1, default: 1 },
166
- icon: { type: "icon", label: "Front icon", default: "" },
167
- image: { type: "image", label: "Front image URL", default: "" }
171
+ copies: { type: "number", label: "Copies", min: 1, max: 3, step: 1, default: 1 }
168
172
  },
169
173
  anchors: { input: [-1, 0, 0], output: [1, 0, 0], archive: [0, -1, 0] },
170
174
  create({ parameters }) {
@@ -173,28 +177,24 @@ export const processGeometryPack = {
173
177
  for (let index = copies - 1; index >= 0; index--) {
174
178
  parts.push({
175
179
  shape: "box",
176
- size: [1, .72, .78],
177
- position: [index * .06, index * .04, index * -.05],
180
+ size: [1, .76, .34],
181
+ position: [index * .055, index * .04, index * -.08],
178
182
  color: index === 0 ? "paper" : "body",
179
183
  edgeColor: "edge",
180
184
  radius: .04
181
185
  });
182
186
  }
183
- parts.push(
184
- frontLine([-.28, -.22, .43], [.42, .035, .035], "ink"),
185
- frontLine([.22, -.22, .43], [.22, .035, .035], "ink"),
186
- ...frontMarker(parameters, "ink", [0, .12, .44], [.25, .2, 1])
187
- );
187
+ parts.push(...frontWave(-.29, .185, "body"));
188
188
  return { parts };
189
189
  }
190
190
  },
191
191
  {
192
192
  id: "predefined-process",
193
- name: "Predefined Process",
193
+ name: "Reusable Process",
194
194
  description: "A reusable subprocess or named routine.",
195
+ category: "Processes · Advanced",
195
196
  canonicalSize: [2.9, 1.8, 1.8],
196
197
  parameters: {
197
- icon: { type: "icon", label: "Front icon", default: "" },
198
198
  image: { type: "image", label: "Front image URL", default: "" }
199
199
  },
200
200
  anchors: { input: [-1, 0, 0], output: [1, 0, 0], call: [0, 0, 1] },
@@ -204,19 +204,19 @@ export const processGeometryPack = {
204
204
  { shape: "box", size: [1, .76, .8], color: "process", edgeColor: "edge", radius: .07 },
205
205
  frontLine([-.42, 0, .43], [.035, .68, .035], "accent"),
206
206
  frontLine([.42, 0, .43], [.035, .68, .035], "accent"),
207
- ...frontMarker(parameters)
207
+ ...frontImage(parameters)
208
208
  ]
209
209
  };
210
210
  }
211
211
  },
212
212
  {
213
213
  id: "stored-data",
214
- name: "Stored Data",
214
+ name: "Data Store",
215
215
  description: "Persisted data or a data store.",
216
+ category: "Processes · Essentials",
216
217
  canonicalSize: [2.45, 1.9, 2.1],
217
218
  parameters: {
218
- tiers: { type: "number", label: "Tiers", min: 1, max: 4, step: 1, default: 2 },
219
- icon: { type: "icon", label: "Front icon", default: "" }
219
+ tiers: { type: "number", label: "Tiers", min: 1, max: 4, step: 1, default: 2 }
220
220
  },
221
221
  anchors: { input: [-1, 0, 0], output: [1, 0, 0], query: [0, 0, 1] },
222
222
  create({ parameters }) {
@@ -231,40 +231,33 @@ export const processGeometryPack = {
231
231
  edgeColor: "accent"
232
232
  });
233
233
  }
234
- return { parts: [...parts, ...frontMarker(parameters, "accent", [0, 0, .46], [.27, .22, 1])] };
234
+ return { parts };
235
235
  }
236
236
  },
237
237
  {
238
238
  id: "internal-storage",
239
239
  name: "Internal Storage",
240
240
  description: "A store managed inside the process boundary.",
241
+ category: "Processes · Advanced",
241
242
  canonicalSize: [2.55, 2, 1.8],
242
- parameters: {
243
- partitions: { type: "number", label: "Partitions", min: 1, max: 4, step: 1, default: 2 },
244
- icon: { type: "icon", label: "Front icon", default: "" }
245
- },
243
+ parameters: {},
246
244
  anchors: { input: [-1, 0, 0], output: [1, 0, 0], access: [0, 0, 1] },
247
- create({ parameters }) {
248
- const partitions = Math.round(clamp(parameters.partitions, 1, 4));
249
- const parts = [
245
+ create() {
246
+ return { parts: [
250
247
  { shape: "box", size: [1, .78, .8], color: "storage", edgeColor: "edge", radius: .03 },
251
- frontLine([0, 0, .43], [.035, .7, .035], "accent")
252
- ];
253
- for (let index = 1; index < partitions; index++) {
254
- const x = -.36 + index * (.72 / partitions);
255
- parts.push(frontLine([x, 0, .44], [.022, .66, .035], "accent"));
256
- }
257
- return { parts: [...parts, ...frontMarker(parameters)] };
248
+ frontLine([-.36, 0, .43], [.025, .66, .035], "accent"),
249
+ frontLine([0, .28, .43], [.72, .025, .035], "accent")
250
+ ] };
258
251
  }
259
252
  },
260
253
  {
261
254
  id: "direct-data",
262
- name: "Direct Data",
255
+ name: "Direct-access Storage",
263
256
  description: "Direct-access data, typically represented by a drum or disk.",
257
+ category: "Processes · Advanced",
264
258
  canonicalSize: [2.6, 1.9, 2.15],
265
259
  parameters: {
266
- medium: { type: "select", label: "Medium", options: ["disk", "drum"], default: "disk" },
267
- icon: { type: "icon", label: "Front icon", default: "" }
260
+ medium: { type: "select", label: "Medium", options: ["disk", "drum"], default: "disk" }
268
261
  },
269
262
  anchors: { input: [-1, 0, 0], output: [1, 0, 0], read: [0, 0, 1] },
270
263
  create({ parameters }) {
@@ -272,8 +265,7 @@ export const processGeometryPack = {
272
265
  return {
273
266
  parts: [
274
267
  { shape: "cylinder", size: [.86, 1.02, .86], rotation: [0, 0, Math.PI / 2], color, edgeColor: "edge" },
275
- { shape: "cylinder", size: [.48, 1.04, .48], rotation: [0, 0, Math.PI / 2], color: "accent", edges: false },
276
- ...frontMarker(parameters, "ink", [0, 0, .5], [.27, .2, 1])
268
+ { shape: "cylinder", size: [.48, 1.04, .48], rotation: [0, 0, Math.PI / 2], color: "accent", edges: false }
277
269
  ]
278
270
  };
279
271
  }
@@ -282,9 +274,9 @@ export const processGeometryPack = {
282
274
  id: "manual-input",
283
275
  name: "Manual Input",
284
276
  description: "Data entered manually by an operator.",
277
+ category: "Processes · Advanced",
285
278
  canonicalSize: [2.75, 1.65, 1.75],
286
279
  parameters: {
287
- icon: { type: "icon", label: "Front icon", default: "" },
288
280
  image: { type: "image", label: "Front image URL", default: "" }
289
281
  },
290
282
  anchors: { input: [-1, .15, 0], output: [1, 0, 0], operator: [0, 1, 0] },
@@ -292,7 +284,7 @@ export const processGeometryPack = {
292
284
  return {
293
285
  parts: [
294
286
  { shape: "box", size: [1, .62, .8], rotation: [0, 0, .16], color: "input", edgeColor: "edge", radius: .03 },
295
- ...frontMarker(parameters, "ink", [0, 0, .43], [.3, .22, 1])
287
+ ...frontImage(parameters, [0, 0, .43], [.3, .22, 1])
296
288
  ]
297
289
  };
298
290
  }
@@ -301,28 +293,26 @@ export const processGeometryPack = {
301
293
  id: "preparation",
302
294
  name: "Preparation",
303
295
  description: "Preparation, setup or initialization step.",
296
+ category: "Processes · Advanced",
304
297
  canonicalSize: [2.7, 1.8, 1.8],
305
- parameters: {
306
- icon: { type: "icon", label: "Front icon", default: "" }
307
- },
298
+ parameters: {},
308
299
  anchors: { input: [-1, 0, 0], output: [1, 0, 0], setup: [0, 1, 0] },
309
300
  create({ parameters }) {
310
301
  return {
311
302
  parts: [
312
- { shape: "prism", size: [1, .74, .82], color: "process", edgeColor: "edge" },
313
- ...frontMarker(parameters)
303
+ { shape: "prism", size: [1, .74, .82], color: "process", edgeColor: "edge" }
314
304
  ]
315
305
  };
316
306
  }
317
307
  },
318
308
  {
319
309
  id: "parallel-mode",
320
- name: "Parallel Mode",
310
+ name: "Parallel Step",
321
311
  description: "A process that can execute in parallel.",
312
+ category: "Processes · Advanced",
322
313
  canonicalSize: [2.8, 1.9, 1.8],
323
314
  parameters: {
324
- lanes: { type: "number", label: "Lanes", min: 2, max: 4, step: 1, default: 2 },
325
- icon: { type: "icon", label: "Front icon", default: "" }
315
+ lanes: { type: "number", label: "Lanes", min: 2, max: 4, step: 1, default: 2 }
326
316
  },
327
317
  anchors: { input: [-1, 0, 0], output: [1, 0, 0], lane: [0, 0, 1] },
328
318
  create({ parameters }) {
@@ -334,26 +324,27 @@ export const processGeometryPack = {
334
324
  const y = -.27 + index * (.54 / Math.max(1, lanes - 1));
335
325
  parts.push(frontLine([0, y, .43], [.66, .025, .035], index % 2 ? "accent" : "edge"));
336
326
  }
337
- return { parts: [...parts, ...frontMarker(parameters)] };
327
+ return { parts };
338
328
  }
339
329
  },
340
330
  {
341
331
  id: "loop-limit",
342
- name: "Loop Limit",
332
+ name: "Loop",
343
333
  description: "A bounded loop or iteration limit.",
334
+ category: "Processes · Advanced",
344
335
  canonicalSize: [2.7, 1.9, 1.8],
345
336
  parameters: {
346
- limit: { type: "number", label: "Limit", min: 1, max: 99, step: 1, default: 3 },
347
- icon: { type: "icon", label: "Front icon", default: "" }
337
+ limit: { type: "number", label: "Limit", min: 1, max: 99, step: 1, default: 3 }
348
338
  },
349
339
  anchors: { input: [-1, 0, 0], output: [1, 0, 0], loop: [0, 0, 1] },
350
340
  create({ parameters }) {
351
341
  const limit = Math.round(clamp(parameters.limit, 1, 99));
342
+ const limitWidth = .2 + Math.log10(limit + 1) / 2 * .5;
352
343
  return {
353
344
  parts: [
354
345
  { shape: "pyramid-square", size: [1, .72, .82], color: "decision", edgeColor: "edge" },
355
346
  frontLine([0, -.17, .45], [.34, .035, .035], "ink"),
356
- ...frontMarker({ ...parameters, icon: parameters.icon || String(limit) }, "ink", [0, .12, .45], [.28, .2, 1])
347
+ frontLine([0, .12, .45], [limitWidth, .045, .035], "ink")
357
348
  ]
358
349
  };
359
350
  }
@@ -362,20 +353,21 @@ export const processGeometryPack = {
362
353
  id: "display",
363
354
  name: "Display",
364
355
  description: "A user-facing display or presentation step.",
356
+ category: "Processes · Advanced",
365
357
  canonicalSize: [2.9, 1.8, 1.8],
366
358
  parameters: {
367
359
  screen: { type: "select", label: "Screen state", options: ["idle", "active", "warning"], default: "active" },
368
- image: { type: "image", label: "Screen image URL", default: "" },
369
- icon: { type: "icon", label: "Screen icon", default: "" }
360
+ image: { type: "image", label: "Screen image URL", default: "" }
370
361
  },
371
362
  anchors: { input: [-1, 0, 0], output: [1, 0, 0], user: [0, 0, 1] },
372
363
  create({ parameters }) {
373
- const color = parameters.screen === "warning" ? "negative" : parameters.screen === "active" ? "accent" : "body";
364
+ const color = parameters.screen === "warning" ? "negative" : parameters.screen === "active" ? "accent" : "screen";
374
365
  return {
375
366
  parts: [
376
367
  { shape: "box", size: [.9, .68, .76], color: "body", edgeColor: "edge", radius: .12 },
377
- { shape: "box", size: [.72, .5, .05], position: [0, .02, .41], color: "screen", edgeColor: color, radius: .03 },
378
- ...frontMarker(parameters, color, [0, .02, .45], [.25, .18, 1])
368
+ { shape: "box", size: [.72, .5, .05], position: [0, .02, .41], color, edgeColor: color, radius: .03 },
369
+ { shape: "sphere", size: [.055, .055, .035], position: [.36, -.29, .43], color, edges: false },
370
+ ...frontImage(parameters, [0, .02, .45], [.25, .18, 1])
379
371
  ]
380
372
  };
381
373
  }
@@ -384,70 +376,63 @@ export const processGeometryPack = {
384
376
  id: "connector",
385
377
  name: "Connector",
386
378
  description: "An in-page connector or continuation point.",
387
- canonicalSize: [1.55, 1.55, 1.55],
379
+ category: "Processes · Essentials",
380
+ canonicalSize: [1.55, 1.55, .55],
388
381
  parameters: {
389
- kind: { type: "select", label: "Kind", options: ["sequence", "junction"], default: "sequence" },
390
- icon: { type: "icon", label: "Connector icon", default: "" }
382
+ kind: { type: "select", label: "Kind", options: ["sequence", "junction"], default: "sequence" }
391
383
  },
392
384
  anchors: { input: [-1, 0, 0], output: [1, 0, 0], continuation: [0, 0, 1] },
393
385
  create({ parameters }) {
394
386
  const color = parameters.kind === "junction" ? "decision" : "accent";
395
387
  return {
396
388
  parts: [
397
- { shape: "cylinder", size: [.72, .22, .72], rotation: [0, 0, Math.PI / 2], color, edgeColor: "edge" },
398
- { shape: "sphere", size: [.32, .32, .32], position: [0, 0, .39], color: "ink", edges: false },
399
- ...frontMarker(parameters, "ink", [0, 0, .51], [.2, .16, 1])
389
+ { shape: "cylinder", size: [.82, .22, .82], rotation: [Math.PI / 2, 0, 0], color, edgeColor: "edge" }
400
390
  ]
401
391
  };
402
392
  }
403
393
  },
404
394
  {
405
395
  id: "off-page-reference",
406
- name: "Off-page Reference",
396
+ name: "Off-page Link",
407
397
  description: "A continuation to another page or diagram.",
398
+ category: "Processes · Advanced",
408
399
  canonicalSize: [2.2, 2.1, 1.7],
409
- parameters: {
410
- target: { type: "string", label: "Target", default: "" },
411
- icon: { type: "icon", label: "Reference icon", default: "" }
412
- },
400
+ parameters: {},
413
401
  anchors: { input: [-1, 0, 0], output: [1, 0, 0], continuation: [0, -1, 0] },
414
402
  create({ parameters }) {
415
403
  return {
416
404
  parts: [
417
- { shape: "pyramid-square", size: [1, .72, .82], rotation: [0, 0, Math.PI / 4], color: "paper", edgeColor: "edge" },
418
- ...frontMarker({ ...parameters, icon: parameters.icon || parameters.target }, "ink", [0, 0, .2], [.25, .18, 1])
405
+ { shape: "pyramid-square", size: [1, .72, .82], rotation: [0, 0, Math.PI / 4], color: "paper", edgeColor: "edge" }
419
406
  ]
420
407
  };
421
408
  }
422
409
  },
423
410
  {
424
411
  id: "annotation",
425
- name: "Annotation",
412
+ name: "Note",
426
413
  description: "A note linked to a process symbol.",
427
- canonicalSize: [2.7, 1.9, 1.6],
428
- parameters: {
429
- icon: { type: "icon", label: "Annotation icon", default: "i" },
430
- image: { type: "image", label: "Annotation image URL", default: "" }
431
- },
414
+ category: "Processes · Essentials",
415
+ canonicalSize: [2.35, 2.15, .62],
416
+ parameters: {},
432
417
  anchors: { target: [-1, 0, 0], note: [1, 0, 0] },
433
418
  create({ parameters }) {
434
419
  return {
435
420
  parts: [
436
- { shape: "box", size: [.72, .58, .58], color: "paper", edgeColor: "edge", radius: .04 },
437
- frontLine([.58, 0, 0], [.62, .035, .035], "accent"),
438
- ...frontMarker(parameters, "ink", [0, 0, .32], [.22, .16, 1])
421
+ { shape: "box", size: [.82, .82, .32], color: "note", edgeColor: "edge", radius: .025 },
422
+ { shape: "pyramid-triangle", size: [.22, .035, .22], position: [.31, .31, .18], rotation: [Math.PI / 2, 0, Math.PI / 4], color: "fold", edges: false },
423
+ frontLine([.2, .2, .185], [.24, .025, .018], "body")
439
424
  ]
440
425
  };
441
426
  }
442
427
  },
443
428
  {
444
429
  id: "control-transfer",
445
- name: "Control Transfer",
430
+ name: "Transfer",
446
431
  description: "A control or flow transfer marker.",
432
+ category: "Processes · Advanced",
447
433
  canonicalSize: [2.5, 1.55, 1.55],
448
434
  parameters: {
449
- direction: { type: "select", label: "Direction", options: ["forward", "back"], default: "forward" },
450
- icon: { type: "icon", label: "Transfer icon", default: "" }
435
+ direction: { type: "select", label: "Direction", options: ["forward", "back"], default: "forward" }
451
436
  },
452
437
  anchors: { input: [-1, 0, 0], output: [1, 0, 0] },
453
438
  create({ parameters }) {
@@ -455,28 +440,26 @@ export const processGeometryPack = {
455
440
  return {
456
441
  parts: [
457
442
  { shape: "box", size: [.62, .16, .16], position: [-.17, 0, 0], color: "accent", edges: false },
458
- { shape: "cone", size: [.42, .42, .42], position: [.28, 0, 0], rotation: [0, 0, rotation], color: "accent", edgeColor: "edge" },
459
- ...frontMarker(parameters, "ink", [0, 0, .24], [.2, .16, 1])
443
+ { shape: "cone", size: [.42, .42, .42], position: [.28, 0, 0], rotation: [0, 0, rotation], color: "accent", edgeColor: "edge" }
460
444
  ]
461
445
  };
462
446
  }
463
447
  },
464
448
  {
465
449
  id: "condition",
466
- name: "Condition",
450
+ name: "Rule / Condition",
467
451
  description: "A condition or rule gate.",
452
+ category: "Processes · Advanced",
468
453
  canonicalSize: [2.25, 1.8, 2.1],
469
454
  parameters: {
470
- state: { type: "select", label: "State", options: ["true", "false", "unknown"], default: "unknown" },
471
- icon: { type: "icon", label: "Condition icon", default: "" }
455
+ state: { type: "select", label: "State", options: ["true", "false", "unknown"], default: "unknown" }
472
456
  },
473
457
  anchors: { input: [-1, 0, 0], true: [1, .35, 0], false: [1, -.35, 0] },
474
458
  create({ parameters }) {
475
459
  const color = parameters.state === "true" ? "positive" : parameters.state === "false" ? "negative" : "decision";
476
460
  return {
477
461
  parts: [
478
- { shape: "pyramid-triangle", size: [1, .68, .84], color, edgeColor: "edge" },
479
- ...frontMarker(parameters, "ink", [0, 0, .45], [.22, .18, 1])
462
+ { shape: "pyramid-triangle", size: [1, .68, .84], color, edgeColor: "edge" }
480
463
  ]
481
464
  };
482
465
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@liquidcars/atlas-geometry-processes",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "Standard process and flowchart geometry pack for LiquidCars Atlas",
5
5
  "type": "module",
6
6
  "main": "./index.js",