@buerli.io/core 0.0.34 → 0.0.35-beta.0

package/build/{geometry → esm/geometry}/ThreeGeometryCreator.js

@@ -65,14 +65,17 @@ export class ThreeGeometryCreator {
             });
         }
         const points = Object.values(pointMap);
-        return Object.assign({ graphicId,
+        return {
+            graphicId,
             map,
             meshes,
             lines,
             edges,
             arcs,
             points,
-            box }, this.getMetadata(null, container, color));
+            box,
+            ...this.getMetadata(null, container, color),
+        };
     }
     createSurface(mesh, container, color = [0, 0, 0]) {
         let meshGeom = this.createMesh(mesh, container, color);
@@ -100,38 +103,41 @@ export class ThreeGeometryCreator {
         geometry.setIndex(mesh.indices);
         geometry.setAttribute('position', new THREE.Float32BufferAttribute(mesh.vertices, 3));
         mesh.normals && geometry.setAttribute('normal', new THREE.Float32BufferAttribute(mesh.normals, 3));
-        return Object.assign({ 
+        return {
             // TODO: The server should not send invalid meshes.
-            isValid: mesh.vertices && mesh.vertices.length > 0, geometry,
+            isValid: mesh.vertices && mesh.vertices.length > 0,
+            geometry,
             graphicId,
             type,
-            loops }, this.getMetadata(mesh, container, color));
+            loops,
+            ...this.getMetadata(mesh, container, color),
+        };
     }
     createPlane(mesh, meshGeom) {
         const type = GraphicType.PLANE;
         const { normal: n, pointOnPlane: p } = mesh.properties.surface;
         const pointOnPlane = new THREE.Vector3(p[0], p[1], p[2]);
         const normal = new THREE.Vector3(n[0], n[1], n[2]).normalize();
-        return Object.assign(Object.assign({}, meshGeom), { type, pointOnPlane, normal });
+        return { ...meshGeom, type, pointOnPlane, normal };
     }
     createCylinder(mesh, meshGeom) {
         const type = GraphicType.CYLINDER;
         const { origin: o, axis: a, height, radius } = mesh.properties.surface;
         const origin = new THREE.Vector3(o[0], o[1], o[2]);
         const axis = new THREE.Vector3(a[0], a[1], a[2]).normalize();
-        return Object.assign(Object.assign({}, meshGeom), { type, origin, axis, height, radius });
+        return { ...meshGeom, type, origin, axis, height, radius };
     }
     createCone(mesh, meshGeom) {
         const type = GraphicType.CONE;
         const { origin: o, axis: a, height, radiusBottom, radiusTop } = mesh.properties.surface;
         const origin = new THREE.Vector3(o[0], o[1], o[2]);
         const axis = new THREE.Vector3(a[0], a[1], a[2]).normalize();
-        return Object.assign(Object.assign({}, meshGeom), { type, origin, axis, height, radiusBottom, radiusTop });
+        return { ...meshGeom, type, origin, axis, height, radiusBottom, radiusTop };
     }
     createSphere(mesh, meshGeom) {
         const type = GraphicType.SPHERE;
         const { radius } = mesh.properties.surface;
-        return Object.assign(Object.assign({}, meshGeom), { type, radius });
+        return { ...meshGeom, type, radius };
     }
     createLine(line, container, points, color = [0, 0, 0]) {
         const graphicId = line.id;
@@ -143,9 +149,14 @@ export class ThreeGeometryCreator {
         this.insertPoint(container, `${startId}|point`, startId, start.clone(), line.id, 'start', points);
         this.insertPoint(container, `${endId}|point`, endId, end.clone(), line.id, 'end', points);
         const geometry = new THREE.BufferGeometry().setFromPoints([start.clone(), end.clone()]);
-        return Object.assign(Object.assign({ geometry,
+        return {
+            geometry,
             graphicId,
-            type }, this.getMetadata(line, container, color)), { start: start.clone(), end: end.clone() });
+            type,
+            ...this.getMetadata(line, container, color),
+            start: start.clone(),
+            end: end.clone(),
+        };
     }
     createEdge(edge, container, points, color = [0, 0, 0]) {
         const threePts = [];
@@ -171,9 +182,14 @@ export class ThreeGeometryCreator {
         this.insertPoint(container, `${startId}|point`, startId, start, edge.id, 'start', points);
         this.insertPoint(container, `${endId}|point`, endId, end, edge.id, 'end', points);
         const geometry = new THREE.BufferGeometry().setFromPoints(threePts);
-        return Object.assign(Object.assign({ geometry,
+        return {
+            geometry,
             graphicId,
-            type }, this.getMetadata(edge, container, color)), { start: start.clone(), end: end.clone() });
+            type,
+            ...this.getMetadata(edge, container, color),
+            start: start.clone(),
+            end: end.clone(),
+        };
     }
     createArc(arc, container, points, color = [0, 0, 0]) {
         const graphicId = arc.id;
@@ -217,13 +233,27 @@ export class ThreeGeometryCreator {
         this.insertPoint(container, `${startId}|point`, startId, start, arc.id, 'start', points);
         this.insertPoint(container, `${endId}|point`, endId, end, arc.id, 'end', points);
         const geometry = new THREE.BufferGeometry().setFromPoints(threePts);
-        return Object.assign(Object.assign({ geometry,
+        return {
+            geometry,
             graphicId,
-            type }, this.getMetadata(arc, container, color)), { normal: normal.clone(), center: center.clone(), radius: arc.radius, angle: arc.angle });
+            type,
+            ...this.getMetadata(arc, container, color),
+            normal: normal.clone(),
+            center: center.clone(),
+            radius: arc.radius,
+            angle: arc.angle,
+        };
     }
     createPoint(container, key, graphicId, position, ownerId, type) {
-        return Object.assign(Object.assign({ key,
-            graphicId, type: GraphicType.POINT }, this.getMetadata(null, container)), { position: position.clone(), geometry: position.clone(), owners: [{ ownerId, type }] });
+        return {
+            key,
+            graphicId,
+            type: GraphicType.POINT,
+            ...this.getMetadata(null, container),
+            position: position.clone(),
+            geometry: position.clone(),
+            owners: [{ ownerId, type }],
+        };
     }
     insertPoint(container, key, graphicId, position, ownerId, type, points) {
         const existingPoint = points[key];

package/build/{index.js → esm/index.js}

@@ -4,4 +4,5 @@ export * from './types';
 export * from './utils/Math';
 export * from './utils/Measure';
 export * from './utils/Timing';
+export * from './store/subscribtion/subscribeToDrawing';
 //#endregion Re-export type definitions

package/build/{store → esm/store}/index.js

@@ -3,9 +3,12 @@ function getDrawing(id) {
     const { drawing } = api.getState();
     return drawing.refs[id];
 }
+/**
+ * @returns PluginState or undefined if either drawing or plugin don't exist
+ */
 function getPlugin(drawingId, pluginId) {
     const { drawing } = api.getState();
-    return drawing.refs[drawingId].plugin.refs[pluginId];
+    return drawing.refs[drawingId]?.plugin.refs[pluginId];
 }
 function init(sel) {
     api.getState().api.init(typeof sel === 'function' ? sel(api.getState()) || {} : sel);

package/build/esm/store/states/buerli.js

@@ -0,0 +1,116 @@
+import { createDrawingState } from './drawing';
+import { getInitialMessageState } from './message';
+const initError = 'Please call the init action before you use the buerli store.';
+export const createState = (set, get, api) => ({
+    initDone: false,
+    options: {
+        url: '',
+        elements: {},
+        plugins: {},
+        globalPlugins: [],
+        theme: {
+            primary: '#e36b7c',
+            secondary: '#fcc7cb',
+            dark: '#54545d',
+            highlightedGeom: '#e36b7c',
+            hoveredGeom: '#40a9ff',
+        },
+        config: {
+            geometry: {},
+        },
+    },
+    drawing: {
+        ids: [],
+        refs: {},
+        active: null,
+    },
+    api: {
+        ...generalApi(set, get),
+        ...drawingManagementApi(set, get, api),
+    },
+    ...getInitialMessageState(set, get, api),
+});
+const generalApi = (set, get) => ({
+    // TODO: rename init to setOptions and remove initDone if everything is ok
+    /**
+     * This api method initializes state. Considering user can accidentally ommit some important like elements,
+     * there is a warning disaplying for these cases.
+     *
+     * @param options - options which will be set into state.options
+     */
+    init(options) {
+        set(state => ({ options: { ...state.options, ...options }, initDone: true }));
+    },
+});
+const drawingManagementApi = (set, get, api) => ({
+    async createDrawing(name) {
+        const { initDone, drawing } = get();
+        if (!initDone)
+            throw new Error(initError);
+        const drawingState = createDrawingState(sel => set(state => {
+            const newState = typeof sel === 'function' ? sel(state.drawing.refs[drawingState.id]) : sel;
+            return {
+                drawing: {
+                    ...state.drawing,
+                    refs: {
+                        ...state.drawing.refs,
+                        [drawingState.id]: {
+                            ...state.drawing.refs[drawingState.id],
+                            ...newState,
+                        },
+                    },
+                },
+            };
+        }), () => get().drawing.refs[drawingState.id], api, drawing.ids.length, name);
+        set(state => ({
+            drawing: {
+                ...state.drawing,
+                refs: { ...state.drawing.refs, [drawingState.id]: drawingState },
+                ids: [...state.drawing.ids, drawingState.id],
+                active: drawingState.id,
+            },
+        }));
+        // Initialize global plugins
+        get().options.globalPlugins.forEach(def => get().drawing.refs[drawingState.id].api.plugin.createPlugin(def));
+        return drawingState;
+    },
+    removeDrawing(id) {
+        const { initDone } = get();
+        if (!initDone)
+            throw new Error(initError);
+        // Note:
+        // Since it can lead to unexpected behaviour because of updating everything at once
+        // split the state modification into two parts.
+        // 1. Reset active drawing
+        // 2. Remove drawing from state
+        // Give the listeners the possibility to handle the active drawing before it is removed.
+        // There was exactly such a situation in buerli-examples, where a cad instance of buerli-headless
+        // was destroyed (removes drawing as well) while a components is going to be unmounted, but an
+        // other component already binds to the active drawing before it is removed. Yes, it can be handled
+        // by the application but it makes sense to pay attention to this behaviour at this place already.
+        // 1.
+        // Calculate and set the active drawing before removing the drawing from the store.
+        set(state => {
+            const index = state.drawing.ids.indexOf(id);
+            // Pick close by drawing unless another drawing has been active all along
+            const active = index >= 0 && state.drawing.active === id
+                ? state.drawing.ids[index + 1] || state.drawing.ids[index - 1] || null
+                : state.drawing.active;
+            return { drawing: { ...state.drawing, active } };
+        });
+        // 2.
+        // Remove drawing from store.
+        set(state => {
+            const refs = { ...state.drawing.refs };
+            const ids = state.drawing.ids.filter(d => d !== id);
+            delete refs[id];
+            return { drawing: { ...state.drawing, refs, ids } };
+        });
+    },
+    setActiveDrawing(id) {
+        const { initDone, drawing } = get();
+        if (!initDone)
+            throw new Error(initError);
+        set({ drawing: { ...drawing, active: id } });
+    },
+});

package/build/esm/store/states/canvas.js

@@ -0,0 +1,13 @@
+////////////////////////////////////////////////////
+// DATA
+////////////////////////////////////////////////////
+export const canvasData = () => ({
+    controls: { isInteracting: false, enabled: true },
+});
+////////////////////////////////////////////////////
+// API
+////////////////////////////////////////////////////
+export const canvasApi = (set, get) => ({
+    setInteraction: (isInteracting) => set(state => ({ canvas: { ...state.canvas, controls: { ...state.canvas.controls, isInteracting } } })),
+    setControlsEnabled: (enabled) => set(state => ({ canvas: { ...state.canvas, controls: { ...state.canvas.controls, enabled } } })),
+});

package/build/esm/store/states/geometry.js

@@ -0,0 +1,98 @@
+import * as THREE from 'three';
+import { ThreeGeometryCreator } from '../../geometry/ThreeGeometryCreator';
+////////////////////////////////////////////////////
+// DATA
+////////////////////////////////////////////////////
+export const geometryData = () => ({
+    cache: {},
+    stamp: -1,
+    bounds: {
+        center: new THREE.Vector3(0, 0, 0),
+        radius: 200,
+        min: new THREE.Vector3(-100, -100, -100),
+        max: new THREE.Vector3(100, 100, 100),
+    },
+    config: { product: {} },
+});
+////////////////////////////////////////////////////
+// API
+////////////////////////////////////////////////////
+export const geometryApi = (set, get) => ({
+    /**
+     * Updates the @see geometry.bounds depending on all products of the model.
+     * The update will only happen, if at least one solid of one product is available.
+     */
+    updateBounds: () => {
+        const { api, structure } = get();
+        if (structure.visibleContainers.length > 0) {
+            const bb = api.structure.calculateProductBounds(structure.root);
+            set(state => ({ geometry: { ...state.geometry, stamp: Date.now(), bounds: bb } }));
+        }
+    },
+    createGeometryIfNotCached: (containerId, color) => {
+        const { graphic, geometry } = get();
+        let geom = geometry.cache[containerId];
+        if (!geom) {
+            const container = graphic.containers[containerId];
+            if (container) {
+                geom = new ThreeGeometryCreator().createGeometry(container, color);
+                set(state => {
+                    const geometryCache = { ...state.geometry.cache, [containerId]: geom };
+                    return {
+                        geometry: {
+                            ...state.geometry,
+                            cache: geometryCache,
+                            stamp: Date.now(),
+                        },
+                    };
+                });
+            }
+        }
+        return geom;
+    },
+    setColor: (containerId, r, g, b) => {
+        const thCol = new THREE.Color(r, g, b);
+        const cachedGeom = { ...get().geometry.cache[containerId] };
+        cachedGeom.color = thCol;
+        cachedGeom.meshes.forEach(mesh => (mesh.color = thCol));
+        set(state => ({
+            geometry: {
+                ...state.geometry,
+                cache: { ...state.geometry.cache, [containerId]: cachedGeom },
+                stamp: Date.now(),
+            },
+        }));
+    },
+    setOpacity: (containerId, opacity) => {
+        const cachedGeom = { ...get().geometry.cache[containerId], opacity };
+        cachedGeom.meshes.forEach(mesh => (mesh.opacity = opacity));
+        set(state => ({
+            geometry: {
+                ...state.geometry,
+                cache: { ...state.geometry.cache, [containerId]: cachedGeom },
+                stamp: Date.now(),
+            },
+        }));
+    },
+    setConfig: (objId, config) => {
+        set(state => {
+            const productConfigs = { ...state.geometry.config.product };
+            if (config) {
+                const newConfig = { ...state.geometry.config.product[objId] };
+                if ('disabled' in config)
+                    newConfig.disabled = config.disabled;
+                if ('edges' in config)
+                    newConfig.edges = { ...newConfig.edges, ...config.edges };
+                if ('meshes' in config)
+                    newConfig.meshes = { ...newConfig.meshes, ...config.meshes };
+                if ('points' in config)
+                    newConfig.points = { ...newConfig.points, ...config.points };
+                productConfigs[objId] = newConfig;
+            }
+            else {
+                delete productConfigs[objId];
+            }
+            return { geometry: { ...state.geometry, config: { ...state.geometry.config, product: productConfigs } } };
+        });
+    },
+});

package/build/esm/store/states/graphic.js

@@ -0,0 +1,82 @@
+////////////////////////////////////////////////////
+// DATA
+////////////////////////////////////////////////////
+export const graphicData = () => ({
+    containers: {},
+});
+////////////////////////////////////////////////////
+// API
+////////////////////////////////////////////////////
+export const graphicApi = (set, get) => ({
+    addPackages: (packages) => {
+        // Timing.dump('load', `add graphic packages ${graphic.length} ${graphic[0].containers.length}`)
+        let cacheChanged = false;
+        const newChache = { ...get().geometry.cache };
+        const addedContainers = {};
+        packages.forEach(gr => {
+            gr.containers.forEach(cont => {
+                addedContainers[cont.id] = cont;
+                // If the cached geometry for the added container already exist,
+                // it has to be removed from the cache to ensure geometry updates.
+                if (newChache[cont.id]) {
+                    delete newChache[cont.id];
+                    cacheChanged = true;
+                }
+            });
+        });
+        set(state => ({
+            graphic: { ...state.graphic, containers: { ...state.graphic.containers, ...addedContainers } },
+            geometry: cacheChanged ? { ...state.geometry, cache: newChache, stamp: Date.now() } : state.geometry,
+        }));
+        const { graphic, api } = get();
+        /**
+         * Update the bounds with the newly added graphic.
+         */
+        api.geometry.updateBounds();
+        /**
+         * Create the geometry for the graphic packages.
+         * Only the geometry which does not already exist will be created (@see createGeometryIfNotCached).
+         */
+        const containerIds = Object.getOwnPropertyNames(graphic.containers);
+        const createGeometry = async () => {
+            for (const id of containerIds) {
+                api.geometry.createGeometryIfNotCached(id);
+            }
+        };
+        createGeometry().catch();
+        // console.log('graphicContainers after add:', Object.getOwnPropertyNames(get().graphic.containers))
+    },
+    cleanupGraphicRecords: () => {
+        const { graphic, geometry, api } = get();
+        // collect the used solid ids from the structure tree
+        const solidIds = api.structure.collectUsedSolidIds();
+        // console.log('solidIds before cleanup:', solidIds)
+        // cleanup the graphic containers in the state
+        const usedContainers = {};
+        const existingContainers = graphic.containers;
+        const existingContainerIds = Object.getOwnPropertyNames(existingContainers);
+        if (existingContainerIds.length > 0) {
+            existingContainerIds.forEach(contIdStr => {
+                const contId = Number(contIdStr);
+                if (solidIds.indexOf(contId) >= 0) {
+                    usedContainers[contId] = existingContainers[contId];
+                }
+            });
+            set({ graphic: { ...graphic, containers: usedContainers } });
+            // console.log('graphicContainers after cleanup:', Object.getOwnPropertyNames(get().graphic.ontainers))
+        }
+        // cleanup the cached geometry depending on the uses solids
+        const usedGeometry = {};
+        const existingGeometry = geometry.cache;
+        const existingGeometryIds = Object.getOwnPropertyNames(existingGeometry);
+        if (existingGeometryIds.length > 0) {
+            existingGeometryIds.forEach(contIdStr => {
+                const contId = Number(contIdStr);
+                if (solidIds.indexOf(contId) >= 0) {
+                    usedGeometry[contId] = existingGeometry[contId];
+                }
+            });
+            set({ geometry: { ...geometry, cache: usedGeometry, stamp: Date.now() } });
+        }
+    },
+});

package/build/{store → esm/store}/states/message.js

@@ -11,11 +11,11 @@ const messageApi = (set, get, api) => ({
     show(message) {
         const newId = uuidv4();
         const msg = get().message;
-        set({ message: Object.assign(Object.assign({}, msg), { data: Object.assign({ id: newId }, message), timestamp: Date.now() }) });
+        set({ message: { ...msg, data: { id: newId, ...message }, timestamp: Date.now() } });
         return newId;
     },
     update(id, message) {
         const msg = get().message;
-        set({ message: Object.assign(Object.assign({}, msg), { data: Object.assign({ id }, message), timestamp: Date.now() }) });
+        set({ message: { ...msg, data: { id, ...message }, timestamp: Date.now() } });
     },
 });

package/build/esm/store/states/plugin.js

@@ -0,0 +1,152 @@
+import { v4 as uuidv4 } from 'uuid';
+export const pluginData = () => ({
+    feature: [],
+    global: [],
+    refs: {},
+    active: {
+        feature: null,
+        global: [],
+    },
+    visible: [],
+});
+export const pluginApi = (set, get) => ({
+    setActiveFeature: (id) => {
+        set(state => {
+            let plugins = state.plugin.refs;
+            const oldPlugin = state.plugin.active.feature !== null && state.plugin.refs[state.plugin.active.feature];
+            if (oldPlugin && state.plugin.active.feature !== id && !oldPlugin.persistent && id !== null) {
+                // Reset plugin-state when the plugin is re-activated, not persistent and has not been active all along
+                const initState = oldPlugin.initialState || {};
+                plugins = {
+                    ...plugins,
+                    [oldPlugin.id]: {
+                        ...oldPlugin,
+                        state: typeof initState === 'function' ? initState(get().id, id) : initState,
+                    },
+                };
+            }
+            return {
+                plugin: { ...state.plugin, active: { ...state.plugin.active, feature: id }, refs: plugins },
+                selection: { ...state.selection, active: null },
+            };
+        });
+    },
+    setVisiblePlugin: (id, visible) => {
+        set(currentState => {
+            const filtered = currentState.plugin.visible.filter(p => p !== id);
+            if (visible)
+                filtered.push(id);
+            return {
+                plugin: {
+                    ...currentState.plugin,
+                    visible: filtered,
+                },
+            };
+        });
+    },
+    setActiveGlobal: (id, active) => {
+        set(currentState => {
+            if (currentState.plugin.global.indexOf(id) === -1) {
+                console.warn('Given plugin id does not exist.');
+                return currentState;
+            }
+            const filtered = currentState.plugin.active.global.filter(p => p !== id);
+            if (active)
+                filtered.push(id);
+            return {
+                plugin: {
+                    ...currentState.plugin,
+                    active: {
+                        ...currentState.plugin.active,
+                        global: filtered,
+                    },
+                },
+            };
+        });
+    },
+    // TODO remove defaultId and useEmbeddedPlugin ?
+    createPlugin: (def, defaultId, drawingId, objectId) => {
+        const id = defaultId !== void 0 ? defaultId : uuidv4();
+        function init(definition) {
+            const { description, Root = null, View = null } = definition;
+            const initialState = description.initialState || {};
+            const localState = typeof initialState === 'function' ? initialState(drawingId, objectId) : initialState;
+            set(currentState => {
+                const newPlugin = {
+                    id,
+                    ...description,
+                    drawingId,
+                    objectId,
+                    state: localState,
+                    Root,
+                    View,
+                    set: (sel) => {
+                        // set function can be called when drawing doesn't exist anymore, in this case nothing should be done.
+                        if (get() === undefined)
+                            return;
+                        set(state => {
+                            const newState = typeof sel === 'function' ? sel(state.plugin.refs[id].state) : sel;
+                            return {
+                                plugin: {
+                                    ...state.plugin,
+                                    refs: {
+                                        ...state.plugin.refs,
+                                        [id]: {
+                                            ...state.plugin.refs[id],
+                                            state: { ...state.plugin.refs[id].state, ...newState },
+                                        },
+                                    },
+                                },
+                            };
+                        });
+                    },
+                };
+                return {
+                    plugin: {
+                        ...currentState.plugin,
+                        feature: description.global ? currentState.plugin.feature : [...currentState.plugin.feature, id],
+                        global: description.global ? [...currentState.plugin.global, id] : currentState.plugin.global,
+                        refs: { ...currentState.plugin.refs, [id]: { ...currentState.plugin.refs[id], ...newPlugin } },
+                    },
+                };
+            });
+        }
+        // Initialize plugin definition, which may be a promise or an object
+        if (isPromisePlugin(def)) {
+            // The definition is async, so we create a plugin slot right away and complete it later
+            init({
+                description: { author: '', name: '', persistent: false, global: false, version: '' },
+                Root: null,
+                View: null,
+            });
+            def.then(init).catch();
+        }
+        else
+            init(def);
+        // Return unsubscribe
+        return (deactivate = true) => {
+            // Use 'get' to check if the drawing still exists
+            get &&
+                get() &&
+                set(state => {
+                    const newPlugins = { ...state.plugin.refs };
+                    delete newPlugins[id];
+                    return {
+                        plugin: {
+                            ...state.plugin,
+                            active: {
+                                ...state.plugin.active,
+                                feature: deactivate ? null : state.plugin.active.feature,
+                            },
+                            feature: state.plugin.feature.filter(pluginId => pluginId !== id),
+                            global: state.plugin.global.filter(pluginId => pluginId !== id),
+                            refs: newPlugins,
+                        },
+                    };
+                });
+        };
+    },
+});
+export function isPromisePlugin(def) {
+    return def.then !== undefined;
+}