Relocate/pin objects option menu

uqbar-project · Sep 30, 2023 · 6b72425 · 6b72425
1 parent cfc2a6d
commit 6b72425
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 23 deletions.
diff --git a/public/diagram/diagram.css b/public/diagram/diagram.css
@@ -29,6 +29,20 @@
   width: 10rem;
 }
 
+.button {
+  border-radius: 2em;
+  background-color: var(--background-color-action);
+  color: var(--color-action);
+  padding: 0.6em 0.3em;
+  font-weight: 600;
+  position: absolute;
+  top: 10px;
+  right: 25px;
+  width: 10em;
+  height: 4em;
+  z-index: 10;
+}
+
 .row {
   display: flex;
   flex-direction: row;
@@ -39,25 +53,21 @@
   width: 3em;
   position: absolute;
   right: 9.5em;
-  top: 6em;
   align-self: flex-end;
 }
 
-.button {
-  border-radius: 2em;
-  background-color: var(--background-color-action);
-  color: var(--color-action);
-  padding: 0.6em 0.3em;
-  font-weight: 600;
-  position: absolute;
-  top: 10px;
-  right: 25px;
-  width: 10em;
-  height: 4em;
-  z-index: 10;
+#img-mode {
+  top: 6em;
+}
+
+#img-pin {
+  top: 10em;
+  right: 9em;
+  width: 4em;
+  height: 2.75em;
 }
 
-#toggle {
+.toggle {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -66,15 +76,22 @@
   border-radius: 30px;
   background-color: var(--color-action);
   position: absolute;
-  top: 6em;
   right: 3em;
   transition: all 0.5s ease-in;
   cursor: pointer;
   z-index: 10;
 }
 
+#toggle-mode {
+  top: 6em;
+}
+
+#toggle-pin {
+  top: 10em;
+}
+
 /* Making a dot switch inside the Toggle Button */
-#toggle::before {
+.toggle::before {
   content: "";
   width: 25px;
   height: 25px;
@@ -88,12 +105,12 @@
 }
 
 /* Changing toggle button background when checked */
-#toggle:checked {
+.toggle:checked {
   background-color: var(--background-color-action);
 }
 
 /* Changing dot switch color and moving to the right side when checked */
-#toggle:checked::before {
+.toggle:checked::before {
   background: var(--color-action);
   left: 32px;
 }
diff --git a/public/diagram/diagram.js b/public/diagram/diagram.js
@@ -124,6 +124,15 @@ function updateNodes(elements) {
   layout.run()
 }
 
+function objectsPositionChanged() {
+  const newTitle = objectsKeepTheirPosition() ? 'ON -> objects will keep their positions' : 'OFF -> objects will be relocated to fit into the graph layout'
+  document.getElementById('toggle-pin').setAttribute('title', `Fix objects position: ${newTitle}`)
+}
+
+function objectsKeepTheirPosition() {
+  return document.getElementById('toggle-pin').checked
+}
+
 function reloadDiagram(elements) {
   currentElements = [...elements]
   changeElementsMode()
@@ -132,7 +141,7 @@ function reloadDiagram(elements) {
 
   const newElements = elements.filter((element) => !cy.hasElementWithId(element.data.id))
   if (newElements.length) {
-    const shouldUpdateLayout =  cy.elements().length === 0
+    const shouldUpdateLayout = !objectsKeepTheirPosition() || cy.elements().length === 0
     const addedNodes = cy.add(newElements)
     if (shouldUpdateLayout) {
       updateLayout()
@@ -156,6 +165,10 @@ function readyForLayoutElems(elements) {
 }
 
 function modeChanged() {
+  const toggleMode = document.getElementById('toggle-mode')
+  const newTitle = toggleMode.checked ? 'Dark mode ON' : 'Light Mode ON'
+  toggleMode.setAttribute('title', newTitle)
+
   document.getElementById('main').style = `background-color: ${backgroundColor()}`
   cy.elements().remove()
   reloadDiagram(currentElements)
@@ -166,7 +179,7 @@ function backgroundColor() {
 }
 
 function isDarkMode() {
-  return document.getElementById('toggle').checked
+  return document.getElementById('toggle-mode').checked
 }
 
 function changeElementsMode() {

diff --git a/public/diagram/images/dark-mode.png b/public/diagram/images/dark-mode.png
diff --git a/public/diagram/images/pin-objects.png b/public/diagram/images/pin-objects.png
diff --git a/public/diagram/index.html b/public/diagram/index.html
@@ -23,8 +23,12 @@
         <button class="button" onclick="updateLayout()" title="Relocate the objects and their relationships in the diagram">ORGANIZE</button>
         <!-- Modo Oscuro/Claro -->
         <div class="row">
-          <img src="images/dark-mode.png" title="Dark/Light mode"/>
-          <input type="checkbox" id="toggle" title="Dark/Light mode" onchange="modeChanged()">
+          <img src="images/dark-mode.png" id="img-mode" title="Dark/Light mode"/>
+          <input type="checkbox" id="toggle-mode" class="toggle" onchange="modeChanged()">
+        </div>
+        <div class="row">
+          <img src="images/pin-objects.png" id="img-pin" title="Fix objects position"/>
+          <input type="checkbox" id="toggle-pin" class="toggle" onshow="objectsPositionChanged()" onchange="objectsPositionChanged()">
         </div>
       </div>
       <script type="module">
@@ -46,7 +50,7 @@
         initializeCytoscape(document.getElementById("cy"));
 
         socket.on("initDiagram", function (options) {
-          document.getElementById('toggle').checked = options?.darkMode ?? false;
+          document.getElementById('toggle-mode').checked = options?.darkMode ?? false;
           modeChanged();
         });