@thatopen/services 0.0.3 → 0.0.5

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 (140) hide show
  1. package/README.md +24 -263
  2. package/dist/cli/commands/swap.d.ts +3 -0
  3. package/dist/cli/lib/beta.d.ts +2 -0
  4. package/dist/cli/lib/config.d.ts +2 -0
  5. package/dist/cli.js +85 -126
  6. package/dist/core/examples/apps.d.ts +1 -0
  7. package/dist/core/examples/components.d.ts +1 -0
  8. package/dist/core/examples/execution.d.ts +1 -0
  9. package/dist/core/examples/file-metadata.d.ts +1 -0
  10. package/dist/core/examples/files.d.ts +1 -0
  11. package/dist/core/examples/folders.d.ts +1 -0
  12. package/dist/core/examples/hidden-files.d.ts +1 -0
  13. package/dist/core/examples/icons.d.ts +1 -0
  14. package/dist/core/examples/permissions.d.ts +1 -0
  15. package/dist/types/items.d.ts +2 -0
  16. package/docs/builtin/paths.json +54 -0
  17. package/docs/cli/create.md +28 -0
  18. package/docs/cli/local-server.md +38 -0
  19. package/docs/cli/login.md +32 -0
  20. package/docs/cli/paths.json +30 -0
  21. package/docs/cli/publish.md +31 -0
  22. package/docs/cli/run.md +26 -0
  23. package/docs/cli/serve.md +43 -0
  24. package/docs/cli/swap.md +30 -0
  25. package/docs/client/paths.json +38 -0
  26. package/package.json +8 -10
  27. package/resources/AGENTS.md +39 -0
  28. package/src/built-in/AppManager/example.ts +86 -0
  29. package/src/built-in/CDEManager/example.ts +214 -0
  30. package/src/built-in/CDEManager/examples/FileEditing/example.ts +226 -0
  31. package/src/built-in/CDEManager/examples/FileMoves/example.ts +186 -0
  32. package/src/built-in/CDEManager/examples/FileOperations/example.ts +295 -0
  33. package/src/built-in/CDEManager/examples/FileTransfers/example.ts +210 -0
  34. package/src/built-in/CDEManager/examples/FolderManagement/example.ts +230 -0
  35. package/src/built-in/CDEManager/examples/MetadataSchema/example.ts +230 -0
  36. package/src/built-in/CDEManager/examples/MetadataViews/example.ts +166 -0
  37. package/src/built-in/CDEManager/examples/ProjectConfig/example.ts +177 -0
  38. package/src/built-in/FileList/example.ts +107 -0
  39. package/src/built-in/TabbedNavigation/example.ts +115 -0
  40. package/src/built-in/ViewportsManager/example.ts +106 -0
  41. package/src/cli/templates/{shared/app → app}/vite.config.js +42 -23
  42. package/src/cli/templates/{shared/cloud → cloud-component}/vite.config.js +46 -27
  43. package/src/cli/templates/shared/AGENTS.md +8 -30
  44. package/src/cli/templates/shared/CLAUDE.md +1 -1
  45. package/AGENTS.md +0 -86
  46. package/CONTEXT.md +0 -258
  47. package/dist/built-in/index.d.ts +0 -723
  48. package/dist/cli/commands/create-tests.d.ts +0 -3
  49. package/dist/cli/commands/serve-tests.d.ts +0 -3
  50. package/docs/access-backend-data.md +0 -19
  51. package/docs/app-architecture.md +0 -94
  52. package/docs/app-layout.md +0 -139
  53. package/docs/app-wiring.md +0 -123
  54. package/docs/bim-components/coding-conventions.md +0 -128
  55. package/docs/bim-components/element-collections.md +0 -69
  56. package/docs/bim-components/expose-events.md +0 -84
  57. package/docs/bim-components/library-examples.md +0 -28
  58. package/docs/bim-components/observable-collections.md +0 -83
  59. package/docs/bim-components/overview.md +0 -160
  60. package/docs/bim-components/per-frame-updates.md +0 -20
  61. package/docs/bim-components/save-and-restore-state.md +0 -21
  62. package/docs/bim-components/setup-and-cleanup.md +0 -64
  63. package/docs/bim-components/type-conventions.md +0 -49
  64. package/docs/bim-components/user-driven-object-creation.md +0 -56
  65. package/docs/cli-setup.md +0 -54
  66. package/docs/cloud-components.md +0 -74
  67. package/docs/connect-logic-to-ui.md +0 -113
  68. package/docs/previewing.md +0 -45
  69. package/docs/publishing.md +0 -35
  70. package/docs/scaffolding.md +0 -71
  71. package/docs/ui-components/async-actions.md +0 -18
  72. package/docs/ui-components/confirmation-dialog.md +0 -39
  73. package/docs/ui-components/data-table.md +0 -185
  74. package/docs/ui-components/display-text.md +0 -39
  75. package/docs/ui-components/inline-form.md +0 -44
  76. package/docs/ui-components/library-examples.md +0 -24
  77. package/docs/ui-components/overview.md +0 -194
  78. package/docs/ui-components/rendering-patterns.md +0 -129
  79. package/docs/ui-components/sections-layout.md +0 -123
  80. package/docs/update-grid-elements.md +0 -46
  81. package/docs/using-colors.md +0 -32
  82. package/docs/using-icons.md +0 -37
  83. package/src/cli/templates/bim/src/bim-components/CloudRunner/src/index.ts +0 -1
  84. package/src/cli/templates/bim/src/bim-components/CloudRunner/src/types.ts +0 -5
  85. package/src/cli/templates/bim/src/bim-components/index.ts +0 -1
  86. package/src/cli/templates/bim/src/globals.ts +0 -1
  87. package/src/cli/templates/bim/src/setups/index.ts +0 -3
  88. package/src/cli/templates/bim/src/ui-components/app-info-section/index.ts +0 -26
  89. package/src/cli/templates/bim/src/ui-components/app-info-section/src/index.ts +0 -1
  90. package/src/cli/templates/bim/src/ui-components/cloud-runner-section/index.ts +0 -37
  91. package/src/cli/templates/bim/src/ui-components/cloud-runner-section/src/index.ts +0 -1
  92. package/src/cli/templates/bim/src/ui-components/index.ts +0 -2
  93. package/src/cli/templates/bim-beta/CONTEXT.md +0 -241
  94. package/src/cli/templates/bim-beta/package.json +0 -25
  95. package/src/cli/templates/bim-beta/src/app.ts +0 -16
  96. package/src/cli/templates/bim-beta/src/bim-components/CloudRunner/index.ts +0 -91
  97. package/src/cli/templates/bim-beta/src/main.ts +0 -89
  98. package/src/cli/templates/bim-beta/src/setups/cloud-runner.ts +0 -13
  99. package/src/cli/templates/bim-beta/src/setups/ui-manager.ts +0 -27
  100. package/src/cli/templates/bim-beta/src/setups/viewports-manager.ts +0 -22
  101. package/src/cli/templates/bim-beta/src/ui-components/app-info-section/src/types.ts +0 -15
  102. package/src/cli/templates/bim-beta/src/ui-components/cloud-runner-section/src/types.ts +0 -14
  103. package/src/cli/templates/cloud/_thatopen +0 -5
  104. package/src/cli/templates/cloud/package.json +0 -22
  105. package/src/cli/templates/cloud-test/CONTEXT.md +0 -56
  106. package/src/cli/templates/cloud-test/src/main.ts +0 -565
  107. package/src/cli/templates/default/CONTEXT.md +0 -92
  108. package/src/cli/templates/default/package.json +0 -18
  109. package/src/cli/templates/default/src/main.ts +0 -62
  110. package/src/cli/templates/test/CONTEXT.md +0 -53
  111. package/src/cli/templates/test/package.json +0 -25
  112. package/src/cli/templates/test/src/main.ts +0 -955
  113. /package/src/cli/templates/{bim/CONTEXT.md → app/README.md} +0 -0
  114. /package/src/cli/templates/{shared/app → app}/index.html +0 -0
  115. /package/src/cli/templates/{bim → app}/package.json +0 -0
  116. /package/src/cli/templates/{bim → app}/src/app.ts +0 -0
  117. /package/src/cli/templates/{bim → app}/src/bim-components/CloudRunner/index.ts +0 -0
  118. /package/src/cli/templates/{bim-beta → app}/src/bim-components/CloudRunner/src/index.ts +0 -0
  119. /package/src/cli/templates/{bim-beta → app}/src/bim-components/CloudRunner/src/types.ts +0 -0
  120. /package/src/cli/templates/{bim-beta → app}/src/bim-components/index.ts +0 -0
  121. /package/src/cli/templates/{bim-beta → app}/src/globals.ts +0 -0
  122. /package/src/cli/templates/{bim → app}/src/main.ts +0 -0
  123. /package/src/cli/templates/{bim → app}/src/setups/cloud-runner.ts +0 -0
  124. /package/src/cli/templates/{bim-beta → app}/src/setups/index.ts +0 -0
  125. /package/src/cli/templates/{bim → app}/src/setups/ui-manager.ts +0 -0
  126. /package/src/cli/templates/{bim → app}/src/setups/viewports-manager.ts +0 -0
  127. /package/src/cli/templates/{bim-beta → app}/src/ui-components/app-info-section/index.ts +0 -0
  128. /package/src/cli/templates/{bim-beta → app}/src/ui-components/app-info-section/src/index.ts +0 -0
  129. /package/src/cli/templates/{bim → app}/src/ui-components/app-info-section/src/types.ts +0 -0
  130. /package/src/cli/templates/{bim-beta → app}/src/ui-components/cloud-runner-section/index.ts +0 -0
  131. /package/src/cli/templates/{bim-beta → app}/src/ui-components/cloud-runner-section/src/index.ts +0 -0
  132. /package/src/cli/templates/{bim → app}/src/ui-components/cloud-runner-section/src/types.ts +0 -0
  133. /package/src/cli/templates/{bim-beta → app}/src/ui-components/index.ts +0 -0
  134. /package/src/cli/templates/{shared/app → app}/tsconfig.json +0 -0
  135. /package/src/cli/templates/{cloud/CONTEXT.md → cloud-component/README.md} +0 -0
  136. /package/src/cli/templates/{cloud-test → cloud-component}/_thatopen +0 -0
  137. /package/src/cli/templates/{cloud → cloud-component}/declarations.json +0 -0
  138. /package/src/cli/templates/{cloud-test → cloud-component}/package.json +0 -0
  139. /package/src/cli/templates/{cloud → cloud-component}/src/main.ts +0 -0
  140. /package/src/cli/templates/{shared/cloud → cloud-component}/tsconfig.json +0 -0
@@ -1,28 +0,0 @@
1
- # Library Examples
2
-
3
- Before writing any implementation that uses That Open Engine — whether you know the component name or are trying to figure out how to achieve something — check whether an official example covers it. Official examples are the best starting point: they show correct initialization sequences, idiomatic API usage, and working patterns from the source authors.
4
-
5
- ## How to find an example
6
-
7
- 1. Fetch the `paths.json` for each repo below (you can do all three in parallel). Do not summarize the response — retain the full JSON in context and use the descriptions to reason about which examples are relevant.
8
- 2. Use the descriptions in the JSON to reason about which examples best match the user's intent. Prefer semantic matching over path name matching — a description may cover what the user needs even if the component name doesn't match exactly.
9
- 3. Only proceed to fetch an example if its description confirms that it directly covers the user's intent, or that it can serve as a building block for composing a new custom component. Do not fetch speculatively.
10
- 4. Construct the full URL: `{base_url}{path_entry}` and fetch the example file to use as your implementation reference.
11
-
12
- Path names are descriptive — `VisibilityOperations`, `EditElements`, `SteelDetailing` — so matching by intent works well even when the user hasn't named a specific component.
13
-
14
- ---
15
-
16
- ## Repositories
17
-
18
- ### engine_components
19
- Components from `@thatopen/components` (OBC) and `@thatopen/components-front` (OBF).
20
-
21
- - **paths.json**: `https://raw.githubusercontent.com/ThatOpen/engine_components/refs/heads/main/examples/paths.json`
22
- - **Base URL**: `https://raw.githubusercontent.com/ThatOpen/engine_components/refs/heads/main/`
23
-
24
- ### engine_fragment
25
- The `@thatopen/fragments` low-level library. There are no named OBC components here — users typically describe what they want to do (e.g., "edit model properties", "modify elements", "work with visibility").
26
-
27
- - **paths.json**: `https://raw.githubusercontent.com/ThatOpen/engine_fragment/refs/heads/main/examples/paths.json`
28
- - **Base URL**: `https://raw.githubusercontent.com/ThatOpen/engine_fragment/refs/heads/main/`
@@ -1,83 +0,0 @@
1
- # Observable Collections
2
-
3
- `FRAGS.DataMap` and `FRAGS.DataSet` are lifecycle-aware extensions of `Map` and `Set`. The only difference from their native counterparts is that they emit events when items are added or removed, making the collection observable.
4
-
5
- Use `DataMap` when there is a clear key to identify each item. Use `DataSet` when the item itself is the identifier. `DataMap` is the default choice in most cases.
6
-
7
- ---
8
-
9
- ## `FRAGS.DataMap<K, V>`
10
-
11
- ### Declaration
12
-
13
- The primary collection of a component is conventionally named `list`:
14
-
15
- ```ts
16
- import * as FRAGS from "@thatopen/fragments"
17
-
18
- readonly list = new FRAGS.DataMap<string, SpotElevation>();
19
- ```
20
-
21
- ### Reactive events
22
-
23
- ```ts
24
- this.list.onItemSet.add(({ key, value }) => {
25
- // called after an item is added
26
- });
27
-
28
- this.list.onBeforeDelete.add(({ key, value }) => {
29
- // called before an item is removed — use to clean up resources
30
- });
31
-
32
- this.list.onItemDeleted.add(({ key }) => {
33
- // called after an item is removed
34
- });
35
- ```
36
-
37
- ### Get-or-create
38
-
39
- When inserting into a `DataMap` where the entry may not exist yet, use a get-or-create pattern:
40
-
41
- ```ts
42
- let entry = this.list.get(key);
43
- if (!entry) {
44
- entry = new SpotElevation();
45
- this.list.set(key, entry);
46
- }
47
- entry.doSomething();
48
- ```
49
-
50
- ### Guard
51
-
52
- A guard runs before every `set()` call and can block the insertion by returning `false`:
53
-
54
- ```ts
55
- this.list.guard = (key, value) => {
56
- return value.isValid;
57
- };
58
- ```
59
-
60
- ---
61
-
62
- ## `FRAGS.DataSet<T>`
63
-
64
- Same API as `DataMap` but without keys — the item itself is the identifier:
65
-
66
- ```ts
67
- readonly list = new FRAGS.DataSet<SpotElevation>();
68
-
69
- this.list.onItemSet.add(({ value }) => { ... });
70
- this.list.onBeforeDelete.add(({ value }) => { ... });
71
- ```
72
-
73
- ---
74
-
75
- ## Collections of auxiliary class instances
76
-
77
- When a component manages instances of its own auxiliary classes, cleanup typically happens in `onBeforeDelete`:
78
-
79
- ```ts
80
- this.list.onBeforeDelete.add(({ value: spotElevation }) => {
81
- spotElevation.dispose();
82
- });
83
- ```
@@ -1,160 +0,0 @@
1
- # BIM Component Creation
2
-
3
- Architecture, patterns, and step-by-step guide for creating BIM components with That Open Engine (OBC/OBF) — the domain-logic layer that wraps fragments, IFC data, measurements, selections, or any non-UI behavior.
4
-
5
- ## Working mode
6
-
7
- Before doing anything else, **read [`./library-examples.md`](./library-examples.md) and fetch the `paths.json` for both `engine_components` and `engine_fragment` in parallel.** Review all descriptions to understand what the engine already provides before forming any opinion about what needs to be built.
8
-
9
- Only after that, **propose an implementation plan and wait for the user's approval.**
10
-
11
- The proposal must describe:
12
- - Whether the need is covered by an existing engine component (consume via `components.get()`)
13
- - Whether existing components can be composed to cover it
14
- - Only if neither applies: which new component(s) will be created, what properties, events, and public methods it will expose, and whether it needs lifecycle, serialization, render loop, or interactive creation interfaces
15
-
16
- Only proceed with changes after the user explicitly confirms the plan. If the scope is unclear, ask first — do not assume.
17
-
18
- ---
19
-
20
- ## What is a BIM Component?
21
-
22
- That Open Engine is the collection of packages that power the app: `@thatopen/components`, `@thatopen/components-front`, `@thatopen/fragments`, `@thatopen/ui`, and `@thatopen/ui-obc`. BIM components are built on top of this ecosystem.
23
-
24
- A BIM component is a class that extends `OBC.Component` and encapsulates domain logic — IFC queries, calculations, data management, fragment operations, etc. It exposes that logic through a clean, event-driven interface that UI templates and other components can consume.
25
-
26
- ### The engine works with Fragments
27
-
28
- That Open Engine does not work with IFC STEP files directly. It works with **Fragments** — an open binary format (`.frag`) built for performance: a 2 GB IFC file becomes ~80 MB, loads in seconds at 60fps in the browser.
29
-
30
- The runtime representation of a loaded model is a `FragmentsModel`. Its data schema usually mirrors the IFC SCHEMA (local IDs map to IFC express IDs, the spatial structure parallels IFC hierarchy, properties follow IFC attributes and relations), but it is not IFC STEP — it is Fragments. Any component that queries elements, reads properties, or operates on geometry works through the `FragmentsModel` API.
31
-
32
- For loading models, querying elements, or reading properties, fetch the relevant example from [`./library-examples.md`](./library-examples.md) before writing any implementation code.
33
-
34
- ### When to create one
35
-
36
- Create a BIM component when custom domain logic is needed.
37
-
38
- After reviewing the `paths.json` descriptions fetched in the working mode step:
39
-
40
- - If an existing component covers the need → consume it via `this.components.get()` and fetch its example. Do not reimplement.
41
- - If existing components can be composed to cover it → compose them, fetching the relevant examples as building blocks.
42
- - Only if the need is genuinely not covered → propose creating a custom component.
43
-
44
- Custom components can themselves consume built-in components via `this.components.get()`, so examples remain useful even when building something new.
45
-
46
- ---
47
-
48
- ## Step 1 — Define the component
49
-
50
- Names should be short but descriptive. Use PascalCase for both folder and class, matching exactly:
51
-
52
- | Artifact | Convention | Example |
53
- |---|---|---|
54
- | Folder | PascalCase | `ActivityTracker/` |
55
- | Class | PascalCase | `ActivityTracker` |
56
- | Types prefix | PascalCase matching class | `ActivityTrackerConfig`, `ActivityTrackerResult` |
57
-
58
- Use the `Manager` suffix when the component creates instances of something or governs a broad concern — consistent with `FragmentsManager`, `Classifier`, etc. For focused, single-responsibility components, omit it.
59
-
60
- ---
61
-
62
- ## Step 2 — Create the file structure
63
-
64
- ```
65
- ActivityTracker/
66
- index.ts → class definition + re-exports ./src
67
- src/
68
- index.ts → re-exports types and support files
69
- types.ts → interfaces, type aliases, enums
70
- SpotElevation.ts → auxiliary class (if needed)
71
- ```
72
-
73
- Only one class per component extends `OBC.Component` — the main one in `index.ts`. Any other classes the component defines or instantiates are plain TypeScript classes that live in `src/` alongside `types.ts`, and never extend `OBC.Component`.
74
-
75
- ---
76
-
77
- ## Step 3 — Implement the class in `index.ts`
78
-
79
- ### Skeleton
80
-
81
- Every component needs a unique, hardcoded static UUID — a fixed string literal defined once and never changed. The constructor must call `super(components)` and register the instance with `components.add(UUID, this)` so it becomes globally retrievable via `components.get(ActivityTracker)`.
82
-
83
- Before writing the implementation, read [`./coding-conventions.md`](./coding-conventions.md) for naming rules, backing fields, and async patterns that apply throughout the class.
84
-
85
- ```ts
86
- import * as OBC from "@thatopen/components"
87
-
88
- export class ActivityTracker extends OBC.Component {
89
- static readonly uuid = "1b43361b-ef43-4207-9c40-dbed37bec0b6" as const;
90
-
91
- enabled = true;
92
-
93
- constructor(components: OBC.Components) {
94
- super(components);
95
- components.add(ActivityTracker.uuid, this);
96
- }
97
- }
98
-
99
- export * from "./src"
100
- ```
101
-
102
- ### Interfaces
103
-
104
- OBC defines capability interfaces that components can implement to stay consistent with each other and with the engine. Pick the resource that matches your need:
105
-
106
- | I need... | Resource |
107
- |---|---|
108
- | Initialize the component with config, or clean up resources when it's destroyed | [`./setup-and-cleanup.md`](./setup-and-cleanup.md) |
109
- | Save and restore state across sessions | [`./save-and-restore-state.md`](./save-and-restore-state.md) |
110
- | Run logic on every frame of the render loop | [`./per-frame-updates.md`](./per-frame-updates.md) |
111
- | Implement a flow where the user creates objects in the scene step by step | [`./user-driven-object-creation.md`](./user-driven-object-creation.md) |
112
- | Expose events or react to state changes | [`./expose-events.md`](./expose-events.md) |
113
-
114
- ### Accessing other components
115
-
116
- Resolve dependencies at call time — never store component instances as fields as it may create memory leaks:
117
-
118
- ```ts
119
- const fragments = this.components.get(OBC.FragmentsManager);
120
- const highlighter = this.components.get(OBF.Highlighter);
121
- ```
122
-
123
- ---
124
-
125
- ## Step 4 — Define types in `src/types.ts`
126
-
127
- Types are defined in parallel as the class needs them, not upfront. All typing for the component lives here — domain interfaces, event payloads, serialized types — so there is a single place to look.
128
-
129
- See [`./type-conventions.md`](./type-conventions.md) for common patterns (runtime vs serialized types, generics, etc.).
130
-
131
- ---
132
-
133
- ## Step 5 — Export from the barrel
134
-
135
- Re-export the component from the project's barrel index so it's accessible from a single import point:
136
-
137
- ```ts
138
- export * from "./ActivityTracker"
139
- ```
140
-
141
- ---
142
-
143
- ## Wiring up
144
-
145
- Instantiating the component and connecting it to engine events is not the component's responsibility — that belongs in external initialization code. The constructor should never call other components. See [`../app-wiring.md`](../app-wiring.md) for how this is done.
146
-
147
- ---
148
-
149
- ## See also
150
-
151
- - [`./library-examples.md`](./library-examples.md) — Find official usage examples and discover what the engine provides
152
- - [`./element-collections.md`](./element-collections.md) — Represent or combine element collections across components
153
- - [`./observable-collections.md`](./observable-collections.md) — Store component-internal data with reactive notifications
154
- - [`./expose-events.md`](./expose-events.md) — Expose events for other components or the UI to react to
155
- - [`./setup-and-cleanup.md`](./setup-and-cleanup.md) — Initialize the component with config or clean up resources on destroy
156
- - [`./save-and-restore-state.md`](./save-and-restore-state.md) — Persist and restore state across sessions
157
- - [`./per-frame-updates.md`](./per-frame-updates.md) — Run logic on every frame of the render loop
158
- - [`./user-driven-object-creation.md`](./user-driven-object-creation.md) — Let the user create objects in the scene step by step
159
- - [`./type-conventions.md`](./type-conventions.md) — Define component types (runtime vs serialized, generics)
160
- - [`./coding-conventions.md`](./coding-conventions.md) — Code conventions (naming, backing fields, async)
@@ -1,20 +0,0 @@
1
- # Per-Frame Updates
2
-
3
- ## `OBC.Updateable`
4
-
5
- Implement when the component needs to execute logic on every frame — animating objects, polling state, updating visual feedback.
6
-
7
- ```ts
8
- export class ActivityTracker extends OBC.Component implements OBC.Updateable {
9
- readonly onBeforeUpdate = new OBC.Event<undefined>();
10
- readonly onAfterUpdate = new OBC.Event<undefined>();
11
-
12
- update(delta?: number) {
13
- this.onBeforeUpdate.trigger(undefined);
14
- // per-frame logic
15
- this.onAfterUpdate.trigger(undefined);
16
- }
17
- }
18
- ```
19
-
20
- The component is driven externally — a world or a setup file calls `update()` each frame. The component never drives itself.
@@ -1,21 +0,0 @@
1
- # Save and Restore State
2
-
3
- ## `OBC.Serializable<D, S>`
4
-
5
- Implement when the component must persist its state — to a file, to the cloud, or across sessions.
6
-
7
- `D` is the runtime type, `S` is the serialized (JSON-safe) equivalent. Both are defined in `src/types.ts`. See [`./type-conventions.md`](./type-conventions.md) for the serialization patterns, including the `localId` → GUID conversion that must happen before storing any item references.
8
-
9
- ```ts
10
- export class ActivityTracker extends OBC.Component
11
- implements OBC.Serializable<ActivityTrackerData, SerializedActivityTrackerData> {
12
-
13
- export(): SerializedActivityTrackerData {
14
- // convert runtime state to JSON-safe structure
15
- }
16
-
17
- import(data: SerializedActivityTrackerData) {
18
- // restore runtime state from serialized structure
19
- }
20
- }
21
- ```
@@ -1,64 +0,0 @@
1
- # Setup and Cleanup
2
-
3
- Two interfaces govern a component's lifecycle: `OBC.Configurable` for one-time initialization before use, and `OBC.Disposable` for cleanup when the component is destroyed.
4
-
5
- ---
6
-
7
- ## `OBC.Configurable<TManager, TConfig>`
8
-
9
- Implement when the component requires one-time initialization. This separates construction (cheap, no side effects) from setup (resolves dependencies, applies config, registers event listeners).
10
-
11
- ```ts
12
- export interface ActivityTrackerConfig {
13
- color: THREE.Color;
14
- autoColorize: boolean;
15
- }
16
-
17
- export class ActivityTracker extends OBC.Component
18
- implements OBC.Configurable<ActivityTrackerConfigManager, ActivityTrackerConfig> {
19
-
20
- isSetup = false;
21
- readonly onSetup = new OBC.Event<undefined>();
22
-
23
- protected _defaultConfig: ActivityTrackerConfig = {
24
- color: new THREE.Color("#6528d7"),
25
- autoColorize: false,
26
- };
27
-
28
- setup(config?: Partial<ActivityTrackerConfig>) {
29
- if (this.isSetup) return;
30
- const fullConfig = { ...this._defaultConfig, ...config };
31
- // apply config, resolve dependencies...
32
- this.isSetup = true;
33
- this.onSetup.trigger(undefined);
34
- }
35
- }
36
- ```
37
-
38
- The `if (this.isSetup) return` guard ensures setup only runs once. The constructor must never call other components — that belongs in `setup()`.
39
-
40
- ---
41
-
42
- ## `OBC.Disposable`
43
-
44
- Implement when the component holds resources that must be explicitly released — Three.js geometries and materials, event subscriptions to external components, workers.
45
-
46
- ```ts
47
- export class ActivityTracker extends OBC.Component implements OBC.Disposable {
48
- readonly onDisposed = new OBC.Event<undefined>();
49
-
50
- dispose() {
51
- // 1. Release Three.js resources
52
- this._mesh?.geometry.dispose();
53
- this._material.dispose();
54
-
55
- // 2. Reset all events (if OBC.Eventable is also implemented)
56
- this.events.reset();
57
-
58
- // 3. Signal disposal — always last
59
- this.onDisposed.trigger(undefined);
60
- }
61
- }
62
- ```
63
-
64
- `onDisposed` must be triggered at the end of `dispose()`, after all cleanup is done.
@@ -1,49 +0,0 @@
1
- # Type Conventions
2
-
3
- All types for a component live in `src/types.ts` — domain interfaces, event payloads, serialized equivalents — so there is a single place to look.
4
-
5
- ---
6
-
7
- ## Runtime vs serialized
8
-
9
- Components that implement `OBC.Serializable` need two versions of their data types: a runtime version that uses rich TypeScript types, and a serialized version that is JSON-safe.
10
-
11
- The serialized type is named `Serialized{TypeName}`:
12
-
13
- ```ts
14
- // Runtime — uses Map, Set, Date, THREE.Color
15
- export interface Activity {
16
- index: number;
17
- name: string;
18
- color: THREE.Color;
19
- items: OBC.ModelIdMap;
20
- dates: Set<string>;
21
- }
22
-
23
- // Serialized — JSON-safe equivalent
24
- export interface SerializedActivity {
25
- index: number;
26
- name: string;
27
- color: string; // THREE.Color → hex string
28
- items: [string, number[]][]; // ModelIdMap → tuple array
29
- dates: string[]; // Set → array
30
- }
31
- ```
32
-
33
- Conversion happens inside `export()` and `import()` (see [`./save-and-restore-state.md`](./save-and-restore-state.md)).
34
-
35
- ---
36
-
37
- ## Generics that require `type`, not `interface`
38
-
39
- Some OBC and FRAGS generics enforce that their type parameter is a `type` alias. Passing an `interface` causes a TypeScript error. When in doubt, prefer `type` for types used as generic parameters:
40
-
41
- ```ts
42
- // ✗ Fails — interface not assignable to the generic constraint
43
- export interface ActivityData { name: string; value: number }
44
- const list = new FRAGS.DataMap<string, ActivityData>(); // error
45
-
46
- // ✓ Correct
47
- export type ActivityData = { name: string; value: number }
48
- const list = new FRAGS.DataMap<string, ActivityData>();
49
- ```
@@ -1,56 +0,0 @@
1
- # User-Driven Object Creation
2
-
3
- ## `OBC.Createable`
4
-
5
- Implement when the component lets the user create objects in the scene through a multi-step interaction — click to start, click to confirm, Escape to cancel, click existing to delete.
6
-
7
- The key characteristic is **statefulness between clicks**: `create()` is called on every user click, but the first click initiates the workflow and the second confirms it by calling `endCreation()` internally.
8
-
9
- ```ts
10
- export class ActivityTracker extends OBC.Component implements OBC.Createable {
11
- private _temp: { isDragging: boolean; preview?: SomeObject } = {
12
- isDragging: false,
13
- };
14
-
15
- create = () => {
16
- if (!this.enabled) return;
17
- if (!this._temp.isDragging) {
18
- this._temp.isDragging = true;
19
- this._temp.preview = new SomeObject();
20
- return;
21
- }
22
- this.endCreation();
23
- };
24
-
25
- endCreation = () => {
26
- if (!this._temp.preview) return;
27
- this.list.add(this._temp.preview);
28
- this._temp.isDragging = false;
29
- this._temp.preview = undefined;
30
- };
31
-
32
- cancelCreation = () => {
33
- this._temp.isDragging = false;
34
- this._temp.preview?.dispose();
35
- this._temp.preview = undefined;
36
- };
37
-
38
- delete = () => {
39
- if (!this.world) return;
40
- const casters = this.components.get(OBC.Raycasters);
41
- const caster = casters.get(this.world);
42
- const intersect = caster.castRayToObjects([...this._boundingBoxes]);
43
- if (!intersect) return;
44
- // identify and remove the hit object from list
45
- };
46
- }
47
- ```
48
-
49
- Wire up the Escape key in the component's `enabled` setter so `cancelCreation()` fires automatically when the component is disabled mid-flow:
50
-
51
- ```ts
52
- set enabled(value: boolean) {
53
- this._enabled = value;
54
- if (!value) this.cancelCreation();
55
- }
56
- ```
package/docs/cli-setup.md DELETED
@@ -1,54 +0,0 @@
1
- # CLI Setup and Authentication
2
-
3
- Before you can scaffold or publish a That Open Platform app, two things must be in place: the `@thatopen/services` CLI installed globally, and a valid platform token for authentication.
4
-
5
- ---
6
-
7
- ## Step 1: Install or update the CLI
8
-
9
- Run the following command in the terminal. This installs the CLI if it isn't present, or updates it to the latest version if it already is:
10
-
11
- ```bash
12
- npm i @thatopen/services@latest -g
13
- ```
14
-
15
- Once done, verify it works:
16
-
17
- ```bash
18
- thatopen --version
19
- ```
20
-
21
- If this returns a version number, the CLI is ready. If `npm` is not found, install Node.js first — download the LTS version from [https://nodejs.org](https://nodejs.org), then retry.
22
-
23
- ---
24
-
25
- ## Step 2: Get a platform token
26
-
27
- Generate an access token from the platform:
28
-
29
- 1. Go to [https://dev.platform.thatopen.com](https://dev.platform.thatopen.com)
30
- 2. In the header, click **Data**
31
- 3. Find the **Tokens** card and create a new token
32
- 4. Enable the permissions: **Apps**, **Components** and **Storage**
33
- 5. Copy the token
34
-
35
- ---
36
-
37
- ## Step 3: Authenticate
38
-
39
- Once you have the token, run:
40
-
41
- ```bash
42
- npm run login -- --token <TOKEN>
43
- ```
44
-
45
- where `<TOKEN>` is the token you copied. This stores credentials globally at `~/.thatopen/config.json` and persists across sessions — you only need to do this once per machine.
46
-
47
- ---
48
-
49
- ## When to use this guide
50
-
51
- Read this guide when:
52
- - You are starting a new app and haven't confirmed the CLI is installed
53
- - A `thatopen` command fails with a "command not found" or "not authenticated" error
54
- - You have never built a platform app before on this machine
@@ -1,74 +0,0 @@
1
- # Cloud components & automations
2
-
3
- A **cloud component** is a piece of logic that runs **server-side** (Node.js) on the platform,
4
- on the shared project context, via the API. Use them to automate real operations — clash checks,
5
- validations, document generation — and to let apps offload heavy work.
6
-
7
- ## Apps vs cloud components
8
-
9
- | | Apps | Cloud components |
10
- |---|---|---|
11
- | **Runs in** | Browser (iframe on the platform) | Server (Node.js child process) |
12
- | **Item type** | `APP` | `TOOL` |
13
- | **Entry point** | Side effects in `main.ts` (renders UI) | `export async function main()` |
14
- | **Build output** | IIFE `dist/bundle.js` (all deps bundled) | IIFE `dist/bundle.js` (only `@thatopen/services` externalized) |
15
- | **Template** | `bim`, `default`, `test` | `cloud`, `cloud-test` |
16
-
17
- ## Scaffold
18
-
19
- ```bash
20
- thatopen create my-component --template cloud
21
- cd my-component
22
- ```
23
-
24
- The component is an `export async function main()` that runs on the server. The execution engine
25
- injects these globals (do **not** import them; for `OBC`/`THREE`/`web-ifc` import them so the
26
- bundler includes them):
27
-
28
- | Global | Purpose |
29
- |--------|---------|
30
- | `thatOpenServices` | Authenticated `EngineServicesClient` |
31
- | `executionParams` | Parameters passed by the caller |
32
- | `executionContext` | `{ projectId?, executionId, toolId, toolVersion }` |
33
- | `executionReporter` | `{ message(msg), error(msg), progress(pct) }` for live feedback |
34
- | `OBC` | `@thatopen/components` — BIM engine (import it) |
35
- | `THREE` | `three` — 3D math/geometry (import it) |
36
- | `fs` | Node.js filesystem (import it) |
37
-
38
- ## Run locally
39
-
40
- ```bash
41
- npm run run # build + test locally
42
- npx thatopen run --params '{"inputFile":"model.ifc"}' # pass parameters
43
- ```
44
-
45
- `thatopen local-server` starts an API-compatible local execution server (default `:4001`) so an
46
- app can call the component before it's deployed (set `client.localServerUrl`).
47
-
48
- ## Authenticate & publish
49
-
50
- ```bash
51
- npm run login -- --token <your-token>
52
- npm run publish
53
- ```
54
-
55
- ## Calling a component from an app
56
-
57
- ```ts
58
- const { executionId } = await client.executeComponent(componentId, { param: "value" }, versionTag?);
59
- client.onExecutionProgress(executionId, (data) => {
60
- // data.progressUpdate — percentage
61
- // data.messageUpdate — status messages
62
- });
63
- ```
64
-
65
- Include `projectId` in the execution params to scope the run to a project (the backend validates
66
- the component is linked to that project). See [CONTEXT.md](../CONTEXT.md) for the permissions contract.
67
-
68
- ## Automations (event-triggered components)
69
-
70
- An **automation** is a cloud component that runs automatically in response to a platform **event**
71
- (rather than being invoked by hand) — e.g. "run the clash check whenever a model is updated."
72
- The component is the same; what differs is the trigger. Add it to a project, choose the event(s)
73
- that fire it, and the platform executes it on the shared project context, reporting progress and
74
- logs through `executionReporter`. Build and publish it exactly like any other cloud component above.