Trying tool icons

README.md

@@ -36,7 +36,7 @@ Running Toolchains locally is easy!
  - [ ] tool layering - any selected tool should be above others
  - [ ] add tool to coordinates in current view, rather than 0,0
  - [ ] clear current toolchain
- - [ ] name toolchain
+ - [x] name toolchain
  - [ ] pipe coloring for boolean/null values
  - [ ] cache toolchains to local storage?
  - [ ] adaptive pipe routing? current beziers are fine for most cases but not
@@ -58,7 +58,7 @@ Running Toolchains locally is easy!
  - [ ] toolbar context menu
  - [x] remove tool
  - [x] collapse ui elements (hide ports when not active)
- - [ ] Edit tool display name
+ - [x] Edit tool display name
  - [ ] show state inspector
 - workspace ui
  - [x] tool library

styles/styles.css

@@ -175,10 +175,10 @@ body {
 
 .collapse-header {
  display: flex;
- align-items: center;
+ align-items: baseline;
  font-size: 0.8rem;
- gap: 3px;
- padding: 4px 0;
+ gap: 4px;
+ padding: 3px 0;
  font-weight: 600;
  color: var(--inactive);
  cursor: pointer;

styles/tool.css

@@ -1,5 +1,10 @@
 .selected {
  outline: 2px solid var(--cyan);
+ z-index: 20;
+}
+
+.not-selected {
+ z-index: 10;
 }
 
 .tool {
@@ -12,6 +17,7 @@
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  background-color: var(--black);
+ box-shadow: 0 0 1px 0 black;
 }
 
 .mini {
@@ -30,7 +36,6 @@
  justify-content: space-between;
  z-index: 3;
  padding: 4px 5px;
- gap: 20px;
 }
 
 .mini .toolbar {
@@ -42,13 +47,17 @@
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
+ padding-right: 5px;
+ color: var(--white);
 }
 
 /* TOOL MENU */
 
 .menu {
  cursor: pointer;
- color: var(--text-light);
+ color: #50505d;
+ display: flex;
+ align-items: center;
 }
 
 .menu:hover,
@@ -74,7 +83,7 @@
  flex-direction: column;
  padding: 3px;
  border-radius: 5px;
- box-shadow: 0 0 7px 0 black;
+ box-shadow: 0 0 4px 0 black;
  z-index: 5;
 }
 
@@ -114,14 +123,19 @@
 }
 
 /* PORTS */
+.mini .port-container {
+ justify-content: center;
+}
 
 .port-container {
  display: flex;
  flex-direction: column;
- position: absolute;
+ position: relative;
  gap: 2px;
  grid-row: 2;
+ width: 0;
  z-index: 1;
+ padding: 3px 0;
 }
 
 .inports {

tools/color/color.js

@@ -14,6 +14,7 @@ const config = {
  width: 75,
  height: 75,
  resize: "both",
+ icon: "palette",
  },
 };
 

tools/files/downloadFile.js

@@ -13,6 +13,7 @@ const config = {
  displayName: "Download File",
  width: 150,
  height: 50,
+ icon: "download",
  },
 };
 

tools/files/uploadFile.js

@@ -13,6 +13,7 @@ const config = {
  displayName: "Upload File",
  width: 150,
  height: 50,
+ icon: "upload",
  },
 };
 

tools/image/imageViewer.js

@@ -14,6 +14,7 @@ const config = {
  width: 200,
  height: 200,
  resize: "both",
+ icon: "image",
  },
 };
 

tools/logic/and.js

@@ -29,9 +29,7 @@ function andGate(inports, outports, state) {
  }
  }
 
- const render = () => {};
-
- return { inportsUpdated, render };
+ return { inportsUpdated };
 }
 
 export default { config, tool: andGate };

tools/logic/not.js

@@ -25,9 +25,7 @@ function notGate(inports, outports, state) {
  }
  }
 
- const render = () => {};
-
- return { inportsUpdated, render };
+ return { inportsUpdated };
 }
 
 export default { config, tool: notGate };

ui/toolView.js

@@ -48,39 +48,41 @@ function toolMenu(tool) {
  <i class="edit-toolname fa-solid fa-pen-to-square fa-fw"></i
  ><span class="edit-toolname ">Edit Display Name</span>
  </div>
- <div class="menu-item collapse">
+ <!-- <div class="menu-item collapse">
  <i
  class="collapse fa-solid fa-fw ${tool.ui.mini
-  ? "fa-maximize"
-  : "fa-minimize"}"></i
+ ? "fa-maximize"
+ : "fa-minimize"}"></i
  ><span class="collapse">${tool.ui.mini ? "Expand" : "Collapse"}</span>
- </div>
+ </div> -->
  <div class="menu-item remove">
  <i class="fa-solid fa-trash fa-fw remove"></i
  ><span class="remove">Delete</span>
  </div>`;
 }
 
 export function toolView(toolID, tool, state) {
+ let selected = state.selection.has(toolID);
  let locked = state.resizing || state.transforming || state.lockInteraction;
  return html`<div
  class="tool resize-${tool.ui.resize}
  ${tool.ui.mini ? "mini" : "full"}
- ${state.selection.has(toolID) ? "selected" : ""}"
+ ${selected ? "selected" : "not-selected"}"
  data-toolid=${toolID}
  style="
  --x:${tool.pos.x}px;
  --y:${tool.pos.y}px;
  --ui-width:${tool.ui.width ?? 0}px;
  --ui-height:${tool.ui.height ?? 0}px;">
  <div class="toolbar">
+ <!-- ${tool.ui.icon
+ ? html`<i class="fa-solid fa-fw fa-${tool.ui.icon}"></i>`
+ : nothing} -->
  <span class="tool-displayname">${tool.ui.displayName}</span>
- <span>
- <a class="menu" href="#"
- ><i class="fa-solid fa-ellipsis-vertical"> </i>
- </a>
+ <div class="menu-icon">
+ <a class="menu" href="#"><i class="fa-solid fa-xs fa-gear"> </i> </a>
  <div class="tool-menu">${toolMenu(tool)}</div>
- </span>
+ </div>
  </div>
  <div class="inports port-container">
  ${Object.entries(tool.inports).map(([portID, port]) =>
@@ -98,7 +100,5 @@ export function toolView(toolID, tool, state) {
  ${shadow(tool.lifecycle.render(), tool)}
  </div>
  <div class="resize-handle"></div>`}
-
- <!-- <div class="tool-state">${stateView(tool.state)}</div> -->
  </div>`;
 }