added colour picker icon & added legacy background

added some code to fill in background of older microcosms where nodes had no color

CHANGELOG.md

+# 0.1.42
+
+_11th December 2020_
+
+### Added
+
+- You can now colour code your nodes.
+
 # 0.1.41
 
 _11th December 2020_

app/package.json

 {
   "name": "nodenogg.in",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

app/src/components/NodesLayer.vue

@@ -133,14 +133,24 @@
                     buttonClass="nodes"
                     @click.prevent="readFlag(nodes.node_id, nodes.read_mode)"
                   />
+                  <v-swatches
+                    v-model="color"
+                    @input="chooseColor(color, nodes.node_id)"
+                    :swatches="swatches"
+                    :shapes="shapes"
+                    show-border
+                    show-fallback
+                    fallback-input-type="color"
+                  >
+                    <SvgButton3
+                      buttonClass="nodes"
+                      @click.prevent
+                      slot="trigger"
+                    />
+                  </v-swatches>
                 </div>
               </template>
-              <v-swatches
-                v-model="color"
-                @input="chooseColor(color, nodes.node_id)"
-                show-fallback
-                fallback-input-type="color"
-              ></v-swatches>
+
               <div class="allemoji">
                 <div
                   class="eachemoji"
@@ -165,8 +175,10 @@ import { mapState } from 'vuex'
 import marked from 'marked'
 import SvgButton from '@/components/SvgButton'
 import SvgButton2 from '@/components/SvgButton2'
+import SvgButton3 from '@/components/SvgButton3'
 import draggable from '@/experimental/Draggable'
 import VSwatches from 'vue-swatches'
+import 'vue-swatches/dist/vue-swatches.css'
 
 var readmode
 
@@ -177,6 +189,15 @@ export default {
     return {
       border: '2px dashed black',
       color: '#9bc2d8',
+      shapes: 'circles',
+
+      // swatches: [{ color: '#F493A7', showBorder: true }],
+      swatches: [
+        ['#EB5757', '#F2994A', '#F2C94C'],
+        ['#219653', '#27AE60', '#6FCF97'],
+        ['#2F80ED', '#2D9CDB', '#56CCF2'],
+        ['#9B51E0', '#BB6BD9', '#E9B7FC'],
+      ],
 
       pickupz: 1,
       localreadmode: false,
@@ -218,7 +239,10 @@ export default {
 
     nodes_filtered: function () {
       return this.myNodes.filter((nodes) => {
-        console.log(nodes)
+        // backwards compatablity fix
+        if (nodes.color == undefined || '') {
+          nodes.color = '#A4C2D6'
+        }
         return nodes.deleted == false
       })
     },
@@ -422,6 +446,7 @@ export default {
     draggable,
     SvgButton,
     SvgButton2,
+    SvgButton3,
     VSwatches,
   },
 }

app/src/components/OtherNodeslayer.vue

@@ -262,6 +262,10 @@ export default {
 
     othernodes_filtered: function () {
       return this.otherNodes.filter((nodes) => {
+        // backwards compatablity fix 
+        if (nodes.color == undefined || '') {
+          nodes.color = '#A4C2D6'
+        }
         return nodes.deleted == false
       })
     },

app/src/components/SvgButton3.vue

+<template>
+  <div>
+    <button v-on="$listeners" class="button" :class="buttonClass">
+      <svg xmlns="http://www.w3.org/2000/svg" width="50" viewBox="0 0 194 178">
+        <g transform="translate(-1340.934 -573.185)">
+          <g transform="translate(16 57)">
+            <path
+              class="a"
+              d="M1370.346,606.448C1250.818,701.656,1237.2,715.157,1237.2,715.157l-12.18,28.185,32.968-8.841,132.15-102.707Z"
+              transform="translate(103 -49)"
+            />
+            <path
+              class="a"
+              d="M0,0H47a8,8,0,0,1,8,8V35a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z"
+              transform="translate(1484.229 527.185) rotate(50)"
+            />
+          </g>
+          <path
+            class="b"
+            d="M1278.245,681.651c-43.206,34.469-41.047,33.506-41.047,33.506l-12.18,28.185,32.968-8.841,57.042-46.029Z"
+            transform="translate(122 -12)"
+          />
+          <path
+            class="c"
+            d="M1370.346,606.448C1250.818,701.656,1237.2,715.157,1237.2,715.157l36.986-31.527,41.706,6.236,42.508-33.315,31.739-24.758Z"
+            transform="translate(122 -12)"
+          />
+          <path
+            class="d"
+            d="M1370.346,606.448C1250.818,701.656,1237.2,715.157,1237.2,715.157l-12.18,28.185,32.968-8.841,132.15-102.707Z"
+            transform="translate(122 -12)"
+          />
+          <path
+            d="M10,0H46a9,9,0,0,1,9,9V35a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V10A10,10,0,0,1,10,0Z"
+            transform="translate(1498.229 573.185) rotate(50)"
+          />
+        </g>
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    buttonClass: {
+      type: String,
+    },
+  },
+}
+</script>
+
+<style lang="css" scoped>
+button {
+  background-color: #6fcf97;
+  touch-action: manipulation;
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+
+button.nodes {
+  background-color: rgba(255, 255, 255, 0);
+}
+
+.a {
+  fill: #4f4f4f;
+}
+.b {
+  fill: #2d9cdb;
+}
+.c {
+  fill: #fff;
+}
+.d {
+  fill: none;
+  stroke: #000;
+  stroke-width: 7px;
+}
+</style>