Initial implementation of regulations editor

package.json

@@ -13,14 +13,25 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@tauri-apps/api": "^1.4.0",
+    "@types/cytoscape": "^3.19.15",
+    "@types/cytoscape-dagre": "^2.3.3",
+    "cytoscape": "^3.27.0",
+    "cytoscape-dagre": "^2.5.0",
+    "cytoscape-dblclick": "^0.3.1",
+    "cytoscape-edgehandles": "^4.0.1",
+    "cytoscape-popper": "^2.0.0",
     "dataclass": "^2.1.1",
     "lit": "^3.0.2",
+    "lodash": "^4.17.21",
     "uikit": "^3.17.8",
     "uikit-icons": "^0.5.0"
   },
   "devDependencies": {
     "@microsoft/eslint-formatter-sarif": "^3.0.0",
     "@tauri-apps/cli": "^1.4.0",
+    "@types/cytoscape-edgehandles": "^4.0.3",
+    "@types/cytoscape-popper": "^2.0.4",
+    "@types/lodash": "^4.14.201",
     "@types/node": "^20.3.2",
     "@types/rollup-plugin-less": "^1.1.4",
     "@types/uikit": "^3.14.0",

src/html/component/content-pane/content-pane.less

@@ -7,4 +7,10 @@
 .content-pane {
   outline: white solid 1px;
   height: 99%;
+  padding: 0.5em;
+}
+
+.pin-button {
+  position: absolute;
+  z-index: 999;
 }

src/html/component/content-pane/content-pane.ts

@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js'
 import style_less from './content-pane.less?inline'
 import { type TabData } from '../../util/tab-data'
 import { library, icon, findIconDefinition } from '@fortawesome/fontawesome-svg-core'
+import '../regulations-editor/regulations-editor'
 import { faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons'
 library.add(faLock, faLockOpen)
 
@@ -30,7 +31,7 @@ export class ContentPane extends LitElement {
                 <button class="uk-button uk-button-small uk-button-secondary pin-button" @click="${this.pin}">
                     ${this.tab.pinned ? locked : unlocked}
                 </button>
-                <h1 class="uk-heading uk-text-success">${this.tab.data}</h1>
+                ${this.tab.data}
             </div>
         `
   }

src/html/component/regulations-editor/element-type.ts

@@ -0,0 +1,12 @@
+export enum ElementType {
+  NONE,
+  EDGE,
+  NODE
+}
+
+export enum Monotonicity {
+  UNSPECIFIED = 'unspecified',
+  ACTIVATION = 'activation',
+  INHIBITION = 'inhibition',
+  OFF = 'off'
+}

src/html/component/regulations-editor/node-menu.less

@@ -0,0 +1,49 @@
+@import "uikit/src/less/uikit.theme.less";
+
+.menu-icon {
+  max-height: 1em;
+  width: 100%;
+  padding-top: 0.2em;
+  color: #2f2f2f;
+}
+
+.float-menu {
+  position: absolute;
+  /* This is to accommodate longer hints */
+  width: 12em;
+  height: 4em;
+  /* Ensure hint is in the middle */
+  text-align: center;
+  /* Ensures the zoom is properly applied when needed */
+  transform-origin: 0 0;
+  /* We don't animate other stuff because that needs to be in sync with the graph */
+  transition: opacity 0.3s;
+  pointer-events: none;
+
+  .float-button {
+    width: 2em;
+    height: 2em;
+    border-radius: 24px;
+    transition: 0.3s;
+  }
+
+  .float-button:hover {
+    background-color: #CFD8DC;
+  }
+
+  .button-row {
+    width: 6em;
+    height: 2em;
+    margin: 0 auto;
+    border-radius: 24px;
+    background-color: #ECEFF1;
+    pointer-events: all;
+  }
+
+  .hint {
+    font-weight: bold;
+    transition: opacity 0.3s;
+    pointer-events: none;
+    text-shadow: 0 2px 5px #d0d0d0;
+  }
+}