draw arrows using buttons

karchjd · Aug 2, 2024 · 9ddb40f · 9ddb40f
1 parent 3b70ae9
commit 9ddb40f
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 100 deletions.
diff --git a/frontend/src/DuckTapeFixes.svelte b/frontend/src/DuckTapeFixes.svelte
@@ -7,7 +7,7 @@
 
   // fixes bug of cytoscape that makes things ungrabbable
   setInterval(() => {
-    if (!$appState.drawing && cy) {
+    if ($appState.drawing == "none" && cy) {
       cy.autoungrabify(false);
       cy.nodes().grabify();
     }

diff --git a/frontend/src/Graph/MountGraph.svelte b/frontend/src/Graph/MountGraph.svelte
@@ -19,8 +19,6 @@
   let cyContainer;
   let m = { x: 0, y: 0 };
 
-  let undirected;
-
   onMount(() => {
     // Initialize the Cytoscape instance
     cy.mount(cyContainer);
@@ -34,10 +32,10 @@
       event.key.toLowerCase() === "x"
     ) {
       eh.enableDrawMode();
-      undirected = false;
-      $appState.drawing = true;
       if (event.key === "Alt") {
-        undirected = true;
+        $appState.drawing = "undirected";
+      } else {
+        $appState.drawing = "directed";
       }
     }
 
@@ -77,14 +75,14 @@
   }
 
   function handleKeyUp(event) {
-    $appState.drawing = false;
-    makeNodesGrabbable();
     if (
       event.key === "Alt" ||
       event.key === " " ||
       event.key.toLowerCase() === "x"
     ) {
       eh.disableDrawMode();
+      $appState.drawing = "none";
+      makeNodesGrabbable();
     }
   }
 
@@ -96,7 +94,6 @@
   function handleMouseOut() {
     document.removeEventListener("keydown", handleKeyDown, false);
     document.removeEventListener("keyup", handleKeyUp, false);
-    eh.disableDrawMode();
   }
 
   function handleMousemove(event) {
@@ -111,7 +108,7 @@
     edge.remove();
     edge.init();
     if (sourceNodeId !== targetNodeId) {
-      if (undirected) {
+      if ($appState.drawing === "undirected") {
         edge.setUndirected();
       } else {
         edge.setDirected();

diff --git a/frontend/src/Toolbars/ToolbarTop.svelte b/frontend/src/Toolbars/ToolbarTop.svelte
@@ -1,6 +1,8 @@
 <script>
-  import { appState, cyStore } from "../stores";
+  import { appState, cyStore, ehStore } from "../stores";
   import { OBSERVED, LATENT, CONSTANT } from "../Graph/classNames.js";
+  import { get } from "svelte/store";
+
   let state = {};
 
   let unsubscribe = appState.subscribe((newState) => {
@@ -51,6 +53,18 @@
   }
   let varNames;
 
+  let eh = get(ehStore);
+
+  function toggleArrowState(direction) {
+    if ($appState.drawing === direction) {
+      eh.disableDrawMode();
+      $appState.drawing = "none";
+    } else {
+      eh.enableDrawMode();
+      $appState.drawing = direction;
+    }
+  }
+
   $: {
     if (
       typeof $cyStore.getObservedNodes === "function" &&
@@ -72,17 +86,19 @@
       <button
         id="directed-arrow"
         class="arrow-btn"
-        title="Directed Arrow"
+        title="Draw Directed Arrows"
+        class:active={$appState.drawing === "directed"}
         on:click={() => {
-          alertEdge("directed");
+          toggleArrowState("directed");
         }}>➔</button
       >
       <button
         id="undirected-arrow"
         class="arrow-btn"
-        title="Undirected Arrow"
+        title="Draw Undirected Arrows"
+        class:active={$appState.drawing === "undirected"}
         on:click={() => {
-          alertEdge("undirected");
+          toggleArrowState("undirected");
         }}>↔</button
       >
       <div
@@ -211,9 +227,9 @@
     font-size: 20px; /* Adjust font size as needed */
     text-align: center; /* Ensure the arrow is centered horizontally */
     cursor: pointer;
-    border: none;
     background: none;
     vertical-align: middle;
+    border: 1px solid transparent;
   }
 
   #directed-arrow {
@@ -324,4 +340,16 @@
     align-items: center;
     gap: 0px; /* Adjust the gap as necessary */
   }
+
+  .arrow-btn.active {
+    background-color: #e0e0e0;
+    border: 1px solid #888;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+  }
+
+  .arrow-btn:active {
+    background-color: #d0d0d0;
+    border-color: #777;
+  }
 </style>
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
@@ -56,14 +56,14 @@ export let appState = writable({
   ids: null,
   dragged: null,
   draggedName: null,
-  drawing: false,
   full: true,
   ready: false,
   parsedModel: false,
   meansModelled: null,
   buttonDown: false,
   showServerErrors: true,
-  everEdge: false
+  everEdge: false,
+  drawing: "none",
 });
 
 export let dataInfo = writable(0);

diff --git a/inst/www/assets/index-ae84faf0.css → inst/www/assets/index-22d6632d.css b/inst/www/assets/index-ae84faf0.css → inst/www/assets/index-22d6632d.css
@@ -275,7 +275,7 @@
 
 .cy-panzoom-zoom-only .cy-panzoom-zoom-out {
   top: 70px;
-}div.svelte-11pj9ut{z-index:1;display:flex;flex-basis:70%;padding:0px;min-width:0;min-height:0}.toolbox.svelte-1ecko2{height:60px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 10px;width:100%}#buttonCont.svelte-1ecko2,.draggable-list.svelte-1ecko2{display:flex;align-items:center}#buttonCont.svelte-1ecko2{flex-grow:0;flex-shrink:0}.draggable-list.svelte-1ecko2{flex-grow:1;flex-shrink:1;overflow-x:auto}.vertical-bar.svelte-1ecko2{height:100%;width:2px;background-color:#000;flex-shrink:0}.arrow-btn.svelte-1ecko2{font-size:20px;text-align:center;cursor:pointer;border:none;background:none;vertical-align:middle}#directed-arrow.svelte-1ecko2{font-size:20px}#undirected-arrow.svelte-1ecko2{font-size:20px}.variable-button.svelte-1ecko2{margin:0 5px;padding:8px 16px;cursor:pointer;height:30px;width:30px;position:relative;border:none;background:none;cursor:grab}.variable-button.svelte-1ecko2::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}#add-latent-variable.svelte-1ecko2::before{width:20px;height:20px;background-color:white;border:2px solid black;border-radius:50%}#add-manifest-variable.svelte-1ecko2::before{width:20px;height:20px;background-color:white;border:2px solid black}#add-constant-variable.svelte-1ecko2::before{width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:21px solid black;content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}#add-constant-variable.svelte-1ecko2::after{content:"";position:absolute;width:0;height:0;border-left:11.5px solid transparent;border-right:11.5px solid transparent;border-bottom:20px solid white;top:50%;left:50%;transform:translate(-50%, -50%)}.draggable-list.svelte-1ecko2{display:flex;gap:15px;list-style-type:none;padding:0;margin:0;overflow:hidden;overflow-x:auto;max-width:0.5wv}.draggable-item.svelte-1ecko2{padding:3px 6px;background-color:white;border:1px solid #000;cursor:grab;white-space:nowrap}#buttonCont.svelte-1ecko2{display:flex;justify-content:space-around;align-items:center;flex-wrap:nowrap}#model-buttons.svelte-1ecko2{display:flex;justify-content:space-between;align-items:center;gap:10px}#buttons.svelte-1ecko2{display:flex;justify-content:space-between;align-items:center;gap:0px}nav.svelte-12n5yi9{width:100%;margin:0;padding:0}.navbar.svelte-12n5yi9{min-height:auto !important}.minimal.svelte-1oq006n{color:black;text-decoration:none;padding:3px 16px;margin:12px 8px}.minimal.svelte-1oq006n:hover,.minimal.svelte-1oq006n:focus{background-color:#f5f5f5}input[type="checkbox"].svelte-17cge7g.svelte-17cge7g{display:none}li.svelte-17cge7g label.svelte-17cge7g{display:block;padding:3px 10px;clear:both;font-weight:normal;line-height:1.42857143;color:#333;white-space:nowrap;margin:0;transition:background-color 0.4s ease}li.svelte-17cge7g input.svelte-17cge7g{margin:0px 5px;top:2px;position:relative}li.svelte-17cge7g label.svelte-17cge7g:hover,li.svelte-17cge7g label.svelte-17cge7g:focus{background-color:#f5f5f5}.disabled-label.svelte-17cge7g.svelte-17cge7g{color:#aaa}.disabled-label.svelte-17cge7g.svelte-17cge7g:hover{cursor:not-allowed}div.svelte-lbhkwe label.svelte-lbhkwe{display:block;padding:3px 10px;clear:both;font-weight:normal;line-height:1.42857143;color:#333;white-space:nowrap;margin:0;transition:background-color 0.4s ease}input[type="radio"].svelte-lbhkwe.svelte-lbhkwe{display:none}div.svelte-lbhkwe input.svelte-lbhkwe{margin:0px 5px;top:2px;position:relative}div.svelte-lbhkwe label.svelte-lbhkwe:hover,div.svelte-lbhkwe label.svelte-lbhkwe:focus{background-color:#f5f5f5}.text-muted.svelte-lbhkwe.svelte-lbhkwe{color:#6c757d}.dropdown-submenu.svelte-143y7r6.svelte-143y7r6{position:relative}.dropdown-submenu.svelte-143y7r6>.dropdown-menu.svelte-143y7r6{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px;border-radius:0 6px 6px 6px}.dropdown-submenu.svelte-143y7r6:hover>.dropdown-menu.svelte-143y7r6{display:block}.dropdown-submenu.svelte-143y7r6>a.svelte-143y7r6:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#ccc;margin-top:5px;margin-right:-10px}.dropdown-submenu.svelte-143y7r6:hover>a.svelte-143y7r6:after{border-left-color:#fff}.dropdown-submenu.svelte-143y7r6.svelte-143y7r6{position:relative}.dropdown-submenu.svelte-143y7r6>.dropdown-menu.svelte-143y7r6{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px;border-radius:0 6px 6px 6px}.dropdown-submenu.svelte-143y7r6:hover>.dropdown-menu.svelte-143y7r6{display:block}.dropdown-submenu.svelte-143y7r6>a.svelte-143y7r6:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#ccc;margin-top:5px;margin-right:-10px}.dropdown-submenu.svelte-143y7r6:hover>a.svelte-143y7r6:after{border-left-color:#fff}pre.svelte-74yvxb{white-space:pre;text-align:left;min-height:0;display:flex;flex-basis:30%;flex-direction:column;overflow-y:scroll;overflow-x:scroll;min-width:0;min-height:0;margin:0}.cy-context-menus-cxt-menu {
+}div.svelte-11pj9ut{z-index:1;display:flex;flex-basis:70%;padding:0px;min-width:0;min-height:0}.toolbox.svelte-cmzyih{height:60px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 10px;width:100%}#buttonCont.svelte-cmzyih,.draggable-list.svelte-cmzyih{display:flex;align-items:center}#buttonCont.svelte-cmzyih{flex-grow:0;flex-shrink:0}.draggable-list.svelte-cmzyih{flex-grow:1;flex-shrink:1;overflow-x:auto}.vertical-bar.svelte-cmzyih{height:100%;width:2px;background-color:#000;flex-shrink:0}.arrow-btn.svelte-cmzyih{font-size:20px;text-align:center;cursor:pointer;background:none;vertical-align:middle;border:1px solid transparent}#directed-arrow.svelte-cmzyih{font-size:20px}#undirected-arrow.svelte-cmzyih{font-size:20px}.variable-button.svelte-cmzyih{margin:0 5px;padding:8px 16px;cursor:pointer;height:30px;width:30px;position:relative;border:none;background:none;cursor:grab}.variable-button.svelte-cmzyih::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}#add-latent-variable.svelte-cmzyih::before{width:20px;height:20px;background-color:white;border:2px solid black;border-radius:50%}#add-manifest-variable.svelte-cmzyih::before{width:20px;height:20px;background-color:white;border:2px solid black}#add-constant-variable.svelte-cmzyih::before{width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:21px solid black;content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}#add-constant-variable.svelte-cmzyih::after{content:"";position:absolute;width:0;height:0;border-left:11.5px solid transparent;border-right:11.5px solid transparent;border-bottom:20px solid white;top:50%;left:50%;transform:translate(-50%, -50%)}.draggable-list.svelte-cmzyih{display:flex;gap:15px;list-style-type:none;padding:0;margin:0;overflow:hidden;overflow-x:auto;max-width:0.5wv}.draggable-item.svelte-cmzyih{padding:3px 6px;background-color:white;border:1px solid #000;cursor:grab;white-space:nowrap}#buttonCont.svelte-cmzyih{display:flex;justify-content:space-around;align-items:center;flex-wrap:nowrap}#model-buttons.svelte-cmzyih{display:flex;justify-content:space-between;align-items:center;gap:10px}#buttons.svelte-cmzyih{display:flex;justify-content:space-between;align-items:center;gap:0px}.arrow-btn.active.svelte-cmzyih{background-color:#e0e0e0;border:1px solid #888;box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.3);border-radius:4px}.arrow-btn.svelte-cmzyih:active{background-color:#d0d0d0;border-color:#777}nav.svelte-12n5yi9{width:100%;margin:0;padding:0}.navbar.svelte-12n5yi9{min-height:auto !important}.minimal.svelte-1oq006n{color:black;text-decoration:none;padding:3px 16px;margin:12px 8px}.minimal.svelte-1oq006n:hover,.minimal.svelte-1oq006n:focus{background-color:#f5f5f5}input[type="checkbox"].svelte-17cge7g.svelte-17cge7g{display:none}li.svelte-17cge7g label.svelte-17cge7g{display:block;padding:3px 10px;clear:both;font-weight:normal;line-height:1.42857143;color:#333;white-space:nowrap;margin:0;transition:background-color 0.4s ease}li.svelte-17cge7g input.svelte-17cge7g{margin:0px 5px;top:2px;position:relative}li.svelte-17cge7g label.svelte-17cge7g:hover,li.svelte-17cge7g label.svelte-17cge7g:focus{background-color:#f5f5f5}.disabled-label.svelte-17cge7g.svelte-17cge7g{color:#aaa}.disabled-label.svelte-17cge7g.svelte-17cge7g:hover{cursor:not-allowed}div.svelte-lbhkwe label.svelte-lbhkwe{display:block;padding:3px 10px;clear:both;font-weight:normal;line-height:1.42857143;color:#333;white-space:nowrap;margin:0;transition:background-color 0.4s ease}input[type="radio"].svelte-lbhkwe.svelte-lbhkwe{display:none}div.svelte-lbhkwe input.svelte-lbhkwe{margin:0px 5px;top:2px;position:relative}div.svelte-lbhkwe label.svelte-lbhkwe:hover,div.svelte-lbhkwe label.svelte-lbhkwe:focus{background-color:#f5f5f5}.text-muted.svelte-lbhkwe.svelte-lbhkwe{color:#6c757d}.dropdown-submenu.svelte-143y7r6.svelte-143y7r6{position:relative}.dropdown-submenu.svelte-143y7r6>.dropdown-menu.svelte-143y7r6{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px;border-radius:0 6px 6px 6px}.dropdown-submenu.svelte-143y7r6:hover>.dropdown-menu.svelte-143y7r6{display:block}.dropdown-submenu.svelte-143y7r6>a.svelte-143y7r6:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#ccc;margin-top:5px;margin-right:-10px}.dropdown-submenu.svelte-143y7r6:hover>a.svelte-143y7r6:after{border-left-color:#fff}.dropdown-submenu.svelte-143y7r6.svelte-143y7r6{position:relative}.dropdown-submenu.svelte-143y7r6>.dropdown-menu.svelte-143y7r6{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px;border-radius:0 6px 6px 6px}.dropdown-submenu.svelte-143y7r6:hover>.dropdown-menu.svelte-143y7r6{display:block}.dropdown-submenu.svelte-143y7r6>a.svelte-143y7r6:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#ccc;margin-top:5px;margin-right:-10px}.dropdown-submenu.svelte-143y7r6:hover>a.svelte-143y7r6:after{border-left-color:#fff}pre.svelte-74yvxb{white-space:pre;text-align:left;min-height:0;display:flex;flex-basis:30%;flex-direction:column;overflow-y:scroll;overflow-x:scroll;min-width:0;min-height:0;margin:0}.cy-context-menus-cxt-menu {
     display:none;
     z-index: 1000;
     position:absolute;