wip moved canvas routine in store. it's awful

src/components/MenuElementaryCA.vue

@@ -2,17 +2,16 @@
   <MenuRow row-title="Elementary Cellular Automata">
     <form>
       <div class="form-field">
-        <label
-          >Initial state presets
+        <label>
+          Initial state presets
           <br />
           <select
-            name="initial1dStates"
-            value="initial1dStates"
-            @input="updateInitial1dState"
+            name="initialStates"
+            :value="initialState"
+            @input="updateInitialState"
           >
             <option
-              v-for="state in initial1dStates"
-              :key="'preset1d' + state.id"
+              v-for="state in initialStates"
               :value="state.id"
             >
               {{ state.name }}
@@ -25,35 +24,37 @@
       </div>
       <div class="form-field">
         <label
-          >Rules presets
+        >Rules presets
           <br />
-          <select name="rules1d" value="rules" @input="update1dRules">
+          <select
+            name="ruleset-elementary"
+            :value="rules.name"
+            @input="updateRules"
+          >
             <option
-              v-for="(rule, name) in presetRules"
-              :key="'rule1d' + name"
-              :value="name"
+              v-for="ruleset in presetRules"
+              :value="ruleset.name"
             >
-              {{ name }}
+              {{ ruleset.name }}
             </option>
           </select>
         </label>
       </div>
       <div class="form-field">
-        <a style="cursor: pointer" @click="copy1dRules">copy rules</a>
+        <a style="cursor: pointer" @click="copyRules">copy rules</a>
       </div>
       <div
-        v-for="(rule, name) in rules"
-        :key="'rule1d' + name"
+        v-for="(rule, name) in rules.rules"
         class="form-field"
       >
         <label
-          >{{ name }}
+        >{{ name }}
           <input
             :value="rule"
             type="checkbox"
             :name="name"
             :checked="rule"
-            @input="update1dSingleRule"
+            @input="updateSingleRule"
           />
         </label>
       </div>
@@ -72,150 +73,171 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-import MenuRow from "./MenuRow.vue";
-export default {
-  name: "MenuElementaryCA",
-  components: {
-    MenuRow,
-  },
-  data() {
-    // TODO: Why not a getter in the store?
-    return {
-      presetRules: {
-        "rule 73": {
-          100: 0,
-          101: 0,
-          110: 1,
-          111: 0,
-          "011": 1,
-          "010": 0,
-          "001": 0,
-          "000": 1,
-        },
-        "rule 86": {
-          100: 1,
-          101: 0,
-          110: 0,
-          111: 1,
-          "011": 0,
-          "010": 1,
-          "001": 0,
-          "000": 1,
-        },
-        "rule 90": {
-          100: 1,
-          101: 0,
-          110: 1,
-          111: 0,
-          "011": 0,
-          "010": 0,
-          "001": 1,
-          "000": 0,
-        },
-        "rule 45?": {
-          100: 0,
-          101: 0,
-          110: 1,
-          111: 0,
-          "011": 1,
-          "010": 0,
-          "001": 1,
-          "000": 1,
-        },
-        "rule 54?": {
-          100: 1,
-          101: 0,
-          110: 1,
-          111: 1,
-          "011": 0,
-          "010": 1,
-          "001": 1,
-          "000": 0,
-        },
-        "unknown rule": {
-          100: 0,
-          101: 0,
-          110: 0,
-          111: 1,
-          "011": 0,
-          "010": 0,
-          "001": 1,
-          "000": 1,
-        },
+  import { mapGetters } from "vuex";
+  import MenuRow from "./MenuRow.vue";
+  export default {
+    name: "MenuElementaryCA",
+    components: {
+      MenuRow,
+    },
+    data() {
+      // TODO: Why not a getter in the store?
+      return {
+        presetRules: [
+          {
+            name: "rule 73",
+            rules: {
+              100: 0,
+              101: 0,
+            110: 1,
+            111: 0,
+            "011": 1,
+            "010": 0,
+            "001": 0,
+            "000": 1,
+            }
+          },
+          {
+            name: "rule 86",
+            rules:{
+            100: 1,
+            101: 0,
+            110: 0,
+            111: 1,
+            "011": 0,
+            "010": 1,
+            "001": 0,
+            "000": 1,
+            },
+          },
+          {
+            name: "rule 90",
+            rules: {
+              100: 1,
+              101: 0,
+              110: 1,
+              111: 0,
+              "011": 0,
+              "010": 0,
+              "001": 1,
+              "000": 0,
+            },
+          },
+          {
+            name: "rule 45?",
+            rules: {
+            100: 0,
+            101: 0,
+            110: 1,
+            111: 0,
+            "011": 1,
+            "010": 0,
+            "001": 1,
+            "000": 1,
+            },
+          },
+          {
+            name: "rule 54?",
+            rules: {
+            100: 1,
+            101: 0,
+            110: 1,
+            111: 1,
+            "011": 0,
+            "010": 1,
+            "001": 1,
+            "000": 0,
+            },
+          },
+          {
+            name: "unknown rule",
+            rules: {
+              100: 0,
+              101: 0,
+              110: 0,
+              111: 1,
+              "011": 0,
+              "010": 0,
+              "001": 1,
+              "000": 1,
+            },
+          }
+  ],
+        initialStates: [
+          {
+            id: "onecell",
+            name: "One cell at center",
+            description: "State with a single cell in the middle",
+          },
+          {
+            id: "random",
+            name: "Random cell",
+            description: "State populated with random cells",
+          },
+        ],
+      };
+    },
+    computed: {
+      ...mapGetters({
+        initialState: "getInitial1dState",
+        rules: "get1dRules",
+      }),
+      rules1dFileName() {
+        return (
+          Object.keys(this.rules)
+                .map((index) => {
+                  return this.rules[index];
+                })
+                .join("_") + ".json"
+        );
       },
-      initial1dStates: [
-        {
-          id: "onecell",
-          name: "One cell at center",
-          description: "State with a single cell in the middle",
-        },
-        {
-          id: "random",
-          name: "Random cell",
-          description: "State populated with random cells",
-        },
-      ],
-    };
-  },
-  computed: {
-    ...mapGetters({
-      initial1dState: "getInitial1dState",
-      rules: "get1dRules",
-    }),
-    rules1dFileName() {
-      return (
-        Object.keys(this.rules)
-          .map((index) => {
-            return this.rules[index];
-          })
-          .join("_") + ".json"
-      );
     },
-  },
-  methods: {
-    copy1dRules() {
-      const rules = JSON.stringify(this.rules);
-      navigator.clipboard.writeText(rules);
-    },
-    isCurrentPreset(event) {
-      const elem = event.target;
-      return this.initialState === elem.value;
-    },
-    update1dSingleRule(event) {
-      const elem = event.target;
-      const value = elem.checked ? 1 : 0;
-      const data = { rule: elem.name, value: value };
-      this.$store.commit("update1dSingleRule", data);
-    },
-    update1dRules(event) {
-      const elem = event.target;
-      const name = elem.value;
-      const rules = this.presetRules[name];
-      Object.keys(rules).map((index) => {
-        const data = { rule: index, value: rules[index] };
+    methods: {
+      copyRules() {
+        const rules = JSON.stringify(this.rules);
+        navigator.clipboard.writeText(rules);
+      },
+      isCurrentPreset(event) {
+        const elem = event.target;
+        return this.initialState === elem.value;
+      },
+      updateSingleRule(event) {
+        const elem = event.target;
+        const value = elem.checked ? 1 : 0;
+        const data = { rule: elem.name, value: value };
         this.$store.commit("update1dSingleRule", data);
-      });
+      },
+      updateRules(event) {
+        // TODO : change this, awfully confusing
+        const elem = event.target;
+        const name = elem.value;
+        const rules = this.presetRules.find(
+          (ruleset) => { return ruleset.name === name }
+        )
+        Object.keys(rules.rules).map((value, index) => {
+          const data = { name: name, rule: value, value: rules.rules[value] };
+          this.$store.commit("update1dSingleRule", data);
+        });
+      },
+      updateInitialState(event) {
+        const elem = event.target;
+        this.$store.commit("setInitial1dState", elem.value);
+      },
+      draw1d() {
+        this.$store.commit("setDrawingStatus", 1);
+        this.$store.dispatch("draw1d");
+      },
+      reset() {
+        this.$store.dispatch("reset");
+      },
     },
-    updateInitial1dState(event) {
-      const elem = event.target;
-      this.$store.commit("setInitial1dState", elem.value);
-    },
-    draw1d() {
-      this.$root.$store.state.drawing = 1;
-      this.$root.$emit("draw1d");
-    },
-    reset() {
-      this.$root.$emit("reset");
-    },
-  },
-};
+  };
 </script>
 <style>
-.menu-row a {
-  color: white;
-  font-weight: bold;
-  text-decoration: none;
-  font-size: small;
-}
+  .menu-row a {
+     color: white;
+     font-weight: bold;
+     text-decoration: none;
+     font-size: small;
+  }
 </style>