fix intance hiding

shuart · Jul 1, 2024 · cbc6efb · cbc6efb
1 parent 60cea26
commit cbc6efb
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 14 deletions.
diff --git a/src/js/vendor/stellae/stellae_d3_forces.js b/src/js/vendor/stellae/stellae_d3_forces.js
@@ -28,7 +28,7 @@ var createSimulation = function (params) {
             // .force("link", d3.forceLink(simulationLinks).id(d => d.id).distance(0).strength(-1))
             // .force("link", d3.forceLink(links).id(d => d.id).distance(0).strength(-1))
             // .force("charge", d3.forceManyBody().strength(-50))
-            .force("charge_force", d3.forceManyBody().strength(-0.07).distanceMax(10))
+            .force("charge_force", d3.forceManyBody().strength(-0.07).distanceMax(18))
             .force("x", d3.forceX())
             .force("y", d3.forceY())
             .alphaDecay(0.03)
@@ -195,20 +195,41 @@ var createSimulation = function (params) {
         if (uuid != currentDraggedNode) {
             currentDraggedNode =uuid
             // d3ForceSimulation.alphaTarget(0.1).restart()
-            d3ForceSimulation.restart();
-            d3ForceSimulation.alpha(1.0);
+            // d3ForceSimulation.restart();
+            // d3ForceSimulation.alpha(1.0);
 
         }
-        d3ForceSimulation.restart();
-        d3ForceSimulation.alpha(1.0);
+        // d3ForceSimulation.restart();
+        // d3ForceSimulation.alpha(1.0);
         setNodeForcedPosition(uuid, x,y)
         // console.log(simulationLinks);
         // alert("simulation forces")
     }
+
+    var dragNodeStart = function (uuid) {
+        if (uuid != currentDraggedNode) {
+            currentDraggedNode =uuid
+            // d3ForceSimulation.alphaTarget(0.1).restart()
+            // d3ForceSimulation.restart();
+            // d3ForceSimulation.alpha(1.0);
+
+        }
+        // d3ForceSimulation.restart();
+        // d3ForceSimulation.alpha(0.3);
+        d3ForceSimulation.alphaTarget(0.3).restart()
+        // setNodeForcedPosition(uuid, x,y)
+        // console.log(simulationLinks);
+        // alert("simulation forces")
+    }
+    var dragNodeEnd= function () {
+        d3ForceSimulation.alphaTarget(0);
+    }
 
     self.fixNodes = fixNodes
     self.unfixNodes = unfixNodes
     self.dragNode = dragNode
+    self.dragNodeStart = dragNodeStart
+    self.dragNodeEnd = dragNodeEnd
     self.addNodes = addNodes
     self.startSimulation= startSimulation
     self.addlinks= addLinks

diff --git a/src/js/vendor/stellae/stellae_hide_fade_nodes.js b/src/js/vendor/stellae/stellae_hide_fade_nodes.js
@@ -23,4 +23,35 @@ var unFadeNode = function(node){
         })
 }
 
-export {fadeNode, unFadeNode}
+
+function createNodeVisibilityManager() {
+    var self = {};
+    var state = undefined;
+    var instanceEngine = undefined;
+
+    var hide = function (id) {
+        if (instanceEngine) {
+            instanceEngine.getNode(id).hide()
+        }
+    }
+    var show = function (id) {
+        if (instanceEngine) {
+            instanceEngine.getNode(id).show()
+        }
+    }
+    var setState = function (id) {
+
+    }
+    var setInstanceEngine = function (engine) {
+        instanceEngine =engine
+    }
+
+    self.hide=hide;
+    self.show=show;
+    self.setState=setState;
+    self.setInstanceEngine=setInstanceEngine;
+    return self
+}
+var nodeVisibilityManager = createNodeVisibilityManager()
+
+export {fadeNode, unFadeNode, nodeVisibilityManager}
diff --git a/src/js/vendor/stellae/stellae_instances.js b/src/js/vendor/stellae/stellae_instances.js
@@ -54,7 +54,6 @@ export function createInstanceEngine(scene, nodes) {
     // }
 
     function getNode(uuid) {
-
         return nodeList[uuid]
     }
 
@@ -84,24 +83,28 @@ export function createInstanceEngine(scene, nodes) {
             lastPosition.x=x;lastPosition.y=y;lastPosition.z=z;
         }
 
-        function setRotation(x,y,z) {
+        var setRotation =function(x,y,z) {
             var x = x ||lastRotation.x
             var y = y ||lastRotation.y
             var z = z ||lastRotation.z
-
+            console.log(x,y,z);
+            console.log('eeeeeeeeeeeeeee');
             const matrix = new THREE.Matrix4();
             getInstancedMesh().getMatrixAt( reference[2], matrix );
             // dummy.position.set( lastPosition.x, lastPosition.y, lastPosition.y);
-            dummy.matrix = matrix 
+            matrix.copy(dummy.matrix)
             dummy.rotation.x = x
             dummy.rotation.y = y
             dummy.rotation.z = z
+            dummy.scale.x = lastScale.x
+            dummy.scale.y = lastScale.y
+            dummy.scale.z = lastScale.z
             dummy.updateMatrix();
             getInstancedMesh().setMatrixAt( reference[2], dummy.matrix );
             // matrix.setPosition( x,y,z );
             // getInstancedMesh().setMatrixAt( reference[2], matrix );
             // getInstancedMesh().instanceMatrix.needsUpdate = true;
-            lastRotation.x=x;lastRotation.y=y;lastRotation.z=z;
+            // lastRotation.x=x;lastRotation.y=y;lastRotation.z=z;
         }
         function setScale(x,y,z) {
             var x = x ||lastScale.x
@@ -111,7 +114,8 @@ export function createInstanceEngine(scene, nodes) {
             const matrix = new THREE.Matrix4();
             getInstancedMesh().getMatrixAt( reference[2], matrix );
             // dummy.position.set( lastPosition.x, lastPosition.y, lastPosition.y);
-            dummy.matrix = matrix 
+            matrix.copy(dummy.matrix)
+            //  = matrix 
             dummy.scale.x = x
             dummy.scale.y = y
             dummy.scale.z = z
@@ -122,7 +126,17 @@ export function createInstanceEngine(scene, nodes) {
             // getInstancedMesh().instanceMatrix.needsUpdate = true;
             lastScale.x=x;lastScale.y=y;lastScale.z=z;
         }
+        function hide() {
+            setRotation(3.1416/2,0,0)
+            // setPosition(10,10,0)
+        }
+        function show() {
+            node.setRotation(-3.1416/2,0,0)
+        }
+
 
+        node.hide =hide
+        node.show =show
         node.setScale =setScale
         node.setPosition =setPosition
         node.setRotation =setRotation
@@ -159,8 +173,22 @@ export function createInstanceEngine(scene, nodes) {
                 // instance.instanceMatrix.needsUpdate = true;
             }
         }
+        function hide() {
+            for (let i = 0; i < children.length; i++) {
+                const element = children[i].node;
+                element.hide()
+            }
+        }
+        function show() {
+            for (let i = 0; i < children.length; i++) {
+                const element = children[i].node;
+                element.show()
+            }
+        }
 
 
+        layout.hide =hide
+        layout.show =show
         layout.add =add
         layout.setPosition =setPosition
         layoutList[uuid]=layout

diff --git a/src/js/vendor/stellae/stellae_side_list.js b/src/js/vendor/stellae/stellae_side_list.js
@@ -1,4 +1,5 @@
 import cleanLinksVisibility from "./stellae_utils_clean_links_connections.js";
+import { nodeVisibilityManager } from "./stellae_hide_fade_nodes.js";
 
 var createListView = function(container){
     var self = {}
@@ -48,6 +49,11 @@ var createListView = function(container){
 
         element.querySelector(".stella_visibility").addEventListener("click", function (e) {
             data.visible = !data.visible
+            if (data.visible) {
+                nodeVisibilityManager.show(data.edata.uuid)
+            }else{
+                nodeVisibilityManager.hide(data.edata.uuid)
+            }
             data.edata.nodeData.setAttribute("visible", data.visible) //register the status for save
             data.visible? element.querySelector(".stella_visibility").innerHTML=eyeSvg : element.querySelector(".stella_visibility").innerHTML= eyeClosedSvg
             cleanLinksVisibility(state)

diff --git a/src/js/vendor/stellae/stellae_toolbar.js b/src/js/vendor/stellae/stellae_toolbar.js
@@ -1,6 +1,7 @@
 import nuuid from "./stellae_utils_uuid.js"
 import cleanLinksVisibility from "./stellae_utils_clean_links_connections.js";
 import { getConnectedNodes } from "./stellae_utils_find_connections.js";
+import { nodeVisibilityManager } from "./stellae_hide_fade_nodes.js";
 
 var createToolbar = function(container){
     var self = {}
@@ -110,6 +111,7 @@ var createToolbar = function(container){
                 var selected = e.graphState.selectedToMove
                 console.log(selected);
                 for (let i = 0; i < selected.length; i++) {
+                    nodeVisibilityManager.hide(selected[i].edata.uuid)
                     selected[i].visible = false;
                     selected[i].edata.nodeData.setAttribute("visible", selected[i].visible) //register the status for save TODO move in utils
                 }
@@ -123,9 +125,11 @@ var createToolbar = function(container){
                 console.log(selected);
                 for (let i = 0; i < nodes.length; i++) {
                     nodes[i].visible = false;
+                    nodeVisibilityManager.hide(nodes[i].edata.uuid)
                 }
                 for (let i = 0; i < selected.length; i++) { //TODO, could be done in one pass to optimize
                     selected[i].visible = true;
+                    nodeVisibilityManager.show(selected[i].edata.uuid)
                 }
                 e.graphState.sideList.addNodes(e.graphState.nodes)
                 cleanLinksVisibility(e.graphState)
@@ -137,6 +141,7 @@ var createToolbar = function(container){
                     var connected = getConnectedNodes(selected[i], e.graphState)
                     for (let i = 0; i < connected.length; i++) { //TODO, could be done in one pass to optimize
                         connected[i].visible = true;
+                        nodeVisibilityManager.show(connected[i].edata.uuid)
                     }
                 }
                 e.graphState.sideList.addNodes(e.graphState.nodes)

diff --git a/src/js/vendor/stellae/stellae_ui.js b/src/js/vendor/stellae/stellae_ui.js
@@ -13,7 +13,7 @@ import createSelectionBox from "./stellae_selection_box.js";
 import { markSelected, markUnSelected } from "./stellae_utils_select_unselect.js";
 import cleanLinksVisibility from "./stellae_utils_clean_links_connections.js";
 import { createLinksRCM, createNodeRCM } from "./stellae_right_click_menu.js";
-import { fadeNode, unFadeNode } from "./stellae_hide_fade_nodes.js";
+import { fadeNode, unFadeNode, nodeVisibilityManager } from "./stellae_hide_fade_nodes.js";
 import { createInstanceEngine } from "./stellae_instances.js";
 
 
@@ -161,6 +161,8 @@ export default function createStellaeUi({
         state.helperLine = new THREE.Line( lineGeometry, lineMaterial );
         state.scene.add(state.helperLine)
         instanceEngine = createInstanceEngine( state.scene)
+        nodeVisibilityManager.setState(state)
+        nodeVisibilityManager.setInstanceEngine(instanceEngine)
 
         const size = 1000;
         const divisions = 1000;
@@ -425,6 +427,10 @@ export default function createStellaeUi({
                     if (state.selectedToMove[0].layoutType=="group") {//when node is group
                         state.selectedToMove[0].layoutItemInteractions.onDragStart(intersects.x,intersects.z,state, simulation) //delegate the move action of the other nodes to the group
                     }
+                    if (useSimulation) {
+
+                        simulation.dragNodeStart(state.selectedToMove[0].edata.uuid)
+                    }
                 }
 
                 //find offset from previous position for smooth move
@@ -491,13 +497,17 @@ export default function createStellaeUi({
             state.dragStarted = false;
             state.dragOffset = {x:0,z:0};
             state.controls.enabled = true;
+            if (useSimulation) {
+                simulation.dragNodeEnd()
+            }
 
 
             //check for click up
             if (state.recordedClickForMouseUp && state.recordedClickForMouseUp.x == state.mouse.x && state.recordedClickForMouseUp.y == state.mouse.y) {
                 if (uiCallbacks.onNodeClick) {
                     uiCallbacks.onNodeClick({dataManager, state, input:{targetItem:state.lastSelectedHeader.edata.uuid}})
                 }
+
             }
             state.recordedClickForMouseUp = false
             //check for connections
@@ -512,9 +522,10 @@ export default function createStellaeUi({
                     }
                     dataManager.addLinks([state.linkToAdd])
                 }
-                dataManager.evaluateTree();
+                // dataManager.evaluateTree();//TODO was it needed?
                 state.linkToAdd = undefined;
             }
+
             if(state.boxSelectingInProgress && selectionBox){
                 state.boxSelectingInProgress = false;
                 state.boxSelecting = false;
@@ -524,6 +535,7 @@ export default function createStellaeUi({
                 markUnSelected(state.nodes)
                 markSelected(selectedNodes)
             }
+
         }
         function onDblClick (event){
             state.mouse.x = ( (event.clientX-state.containerDim.x) / state.containerDim.width ) * 2 - 1;