✨ CmpOp and Bool properties, input labels in props

editor-solidjs/src/RightPane.module.css

@@ -64,3 +64,7 @@
     margin-top: 0.25em;
     margin-bottom: 0.25em;
 }
+
+.prop_name {
+    user-select: none;
+}

editor-solidjs/src/Tile.jsx

@@ -7,6 +7,8 @@ import Direction from "./input/Direction.jsx";
 import Orientation from "./input/Orientation.jsx";
 import Number from "./input/Number.jsx";
 import Value from "./input/Value.jsx";
+import Bool from "./input/Bool.jsx";
+import CmpOp from "./input/CmpOp.jsx";
 
 export const COMPONENTS = new Map();
 
@@ -16,6 +18,7 @@ COMPONENTS.set("Orientation", Orientation);
 COMPONENTS.set("Uint", (props) => <Number value={props.value} setValue={props.setValue} min={0} />);
 COMPONENTS.set("Int", Number);
 COMPONENTS.set("Value", Value);
+COMPONENTS.set("CmpOp", CmpOp);
 
 export default function Tile(props) {
     let {full_tile, set_full_tile} = props;
@@ -63,9 +66,15 @@ export default function Tile(props) {
                         {([label, type, value]) => {
                             if (COMPONENTS.has(type)) {
                                 let setValue = bindSetValue(label, value);
-                                return <li><b>{label}: </b>{COMPONENTS.get(type)({value: () => value, setValue})}</li>
+                                return (<li><label>
+                                    <b class={styles.prop_name}>{label}: </b>
+                                    {COMPONENTS.get(type)({value: () => value, setValue})}
+                                </label></li>);
                             } else {
-                                return <li><b>{label}: </b>{value?.toString()}</li>
+                                return (<li>
+                                    <b class={styles.prop_name}>{label}: </b>
+                                    {value?.toString()}
+                                </li>);
                             }
                         }}
                     </For>

editor-solidjs/src/input/Bool.jsx

@@ -0,0 +1,14 @@
+import {createEffect} from "solid-js";
+
+import styles from "./input.module.css";
+
+export default function Bool(props) {
+    let {value, setValue} = props;
+
+    return (<input
+        type="checkbox"
+        class={styles.input}
+        checked={value()}
+        onChange={(evt) => setValue(!!evt.currentTarget.checked)}
+    />);
+}

editor-solidjs/src/input/CmpOp.jsx

@@ -0,0 +1,21 @@
+import {createEffect} from "solid-js";
+
+import styles from "./input.module.css";
+
+export default function CmpOp(props) {
+    let {value, setValue} = props;
+    let select;
+
+    createEffect(() => {
+        select.value = value();
+    });
+
+    return (<select class={styles.select} title="CmpOp" ref={select} onChange={() => setValue(select.value)}>
+        <option value="Eq" default>= Equals</option>
+        <option value="Neq">≠ Not equals</option>
+        <option value="Lt">&lt; Less than</option>
+        <option value="Lte">≤ Less or equal</option>
+        <option value="Gt">&gt; Greater than</option>
+        <option value="Gte">≥ Greater or equal</option>
+    </select>);
+}

editor-solidjs/src/input/input.module.css

@@ -26,6 +26,37 @@
     max-width: 12em;
 }
 
+.input[type="checkbox"] {
+    appearance: none;
+    display: inline-flex;
+    height: 1em;
+    width: 1em;
+    vertical-align: middle;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.input[type="checkbox"]::before {
+    content: " ";
+    display: inline-block;
+    font-size: 0.9em;
+    text-align: center;
+    transform: translateY(-0.1em);
+}
+
+.input[type="checkbox"]:checked {
+    background-color: #2d3e6d;
+}
+
+.input[type="checkbox"]:checked:hover {
+    background-color: #364a81;
+}
+
+.input[type="checkbox"]:checked::before {
+    content: "\2714";
+}
+
 .select:hover, .input:hover, .select_type:hover {
     color: white;
     background: rgba(0, 0, 0, 0.4);

stackline/tiles/arithmetic.rs

@@ -206,6 +206,10 @@ impl Tile for Cmp {
             Gte => TextChar::from_state('\u{2265}', ctx.state), // GREATER-THAN OR EQUAL TO (no circled version)
         }
     }
+
+    fn schema(&self) -> TileSchema {
+        TileSchema::value("Operation", "CmpOp")
+    }
 }
 
 impl Default for Operation {

stackline/tiles/logic.rs

@@ -66,4 +66,13 @@ impl Tile for If {
             TextChar::from_state('?', ctx.state)
         }
     }
+
+    fn schema(&self) -> TileSchema {
+        // TODO: add Vec<Signal>?
+        TileSchema::map()
+            .add(
+                "invert",
+                TileSchema::value("Invert", "Bool")
+            )
+    }
 }

stackline/tiles/storage.rs

@@ -45,7 +45,7 @@ impl Tile for Store {
 
     fn schema(&self) -> TileSchema {
         TileSchema::map()
-            .add("signal", TileSchema::value("Stored signal", "Signal|null"))
+            .add("signal", TileSchema::value("Stored signal", "Signal"))
     }
 }
 
@@ -205,7 +205,7 @@ impl Tile for Stacker {
 
     fn schema(&self) -> TileSchema {
         TileSchema::map()
-            .add("signal", TileSchema::value("Signal to stack", "Signal|null"))
+            .add("signal", TileSchema::value("Signal to stack", "Signal"))
             .add("orientation", TileSchema::value("Orientation", "Orientation"))
     }
 }

stackline/tiles/transmit.rs

@@ -283,6 +283,18 @@ impl Tile for Sender {
             }
         }
     }
+
+    fn schema(&self) -> TileSchema {
+        // TODO: add Vec<Signal>?
+        TileSchema::map()
+            .add(
+                "coordinates",
+                TileSchema::tuple()
+                    .push(TileSchema::value("Pane", "String"))
+                    .push(TileSchema::value("X", "Uint"))
+                    .push(TileSchema::value("Y", "Uint"))
+            )
+    }
 }
 
 #[cfg(test)]

stackline/tiles/wire.rs

@@ -147,7 +147,7 @@ impl Tile for Resistor {
     fn schema(&self) -> TileSchema {
         TileSchema::map()
             .add("direction", TileSchema::value("Direction", "Direction"))
-            .add("signal", TileSchema::value("Signal", "Signal|null"))
+            .add("signal", TileSchema::value("Signal", "Signal"))
     }
 }