Merge branch 'beta-conn'

brought in the beta conn files.. this will help in the future

CHANGELOG.md

+# 0.1.20
+
+_14th July 2020_
+
+### Changed
+
+- Updated z-index on initial creation to easier to see you have created a few
+
+### Fixed
+
+- hid IPFS debug information
+
+# 0.1.19
+
+_13th July 2020_
+
+### Changes
+
+- List view has be renamed mobile view and works better on smaller devices. Allow for quick capture of ideas whislt using a smaller screen (not perfect but better than before)
+
+### Fixed
+
+- IPFS Media is working (updated code for 0.49.0)
+
 # 0.1.18
 
 _2nd July 2020_

app/package.json

 {
   "name": "nodenogg.in",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "private": true,
   "scripts": {
     "serve": "NODE_ENV=development vue-cli-service serve",
@@ -15,17 +15,11 @@
     "file-loader": "^6.0.0",
     "interactive-shape-recognition": "^1.0.1",
     "ipfs": "^0.49.0",
-    "lodash": "^4.17.20",
+    "lodash": "^4.17.19",
     "marked": "^1.1.1",
-    "pixi-cull": "^1.0.0",
-    "pixi-multistyle-text": "^0.10.0",
-    "pixi-viewport": "^4.13.2",
     "pixi.js": "^5.3.3",
     "pouchdb": "^7.2.2",
-    "pouchdb-authentication": "^1.1.3",
-    "pouchdb-browser": "^7.2.2",
     "pouchdb-find": "^7.2.2",
-    "pouchdb-live-find": "^0.4.0",
     "pouchdb-replication-stream": "^1.2.9",
     "pouchdb-utils": "^7.2.2",
     "set-value": "^3.0.2",
@@ -35,20 +29,18 @@
     "vue-context": "^6.0.0",
     "vue-draggable-resizable": "^2.2.0",
     "vue-emoji-picker": "^1.0.1",
-    "vue-multiselect": "^2.1.6",
     "vue-router": "^3.4.3",
-    "vuex": "^3.5.1",
-    "vuex-pathify": "^1.4.1"
+    "vuex": "^3.5.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.4",
-    "@vue/cli-plugin-eslint": "^4.5.4",
-    "@vue/cli-plugin-router": "^4.5.4",
-    "@vue/cli-plugin-vuex": "^4.5.4",
-    "@vue/cli-service": "^4.5.4",
+    "@vue/cli-plugin-babel": "^4.5.3",
+    "@vue/cli-plugin-eslint": "^4.5.3",
+    "@vue/cli-plugin-router": "^4.5.3",
+    "@vue/cli-plugin-vuex": "^4.5.3",
+    "@vue/cli-service": "^4.5.3",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.0.3",
-    "eslint": "^7.7.0",
+    "eslint": "^7.6.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^6.2.2",
     "prettier": "^2.0.5",

app/src/components/NodesLayer.vue

@@ -172,7 +172,7 @@ export default {
 
   data() {
     return {
-      pickupz: 99,
+      pickupz: 1,
       localreadmode: false,
       mode: '',
     }
@@ -359,7 +359,7 @@ textarea {
 img {
   width: 100%;
 }
-/* .draggable {
+/* .dragging {
   transform: scale(0.7);
 } */
 </style>

app/src/components/OnBoard.vue

@@ -6,7 +6,7 @@
       :h="335"
       :x="560"
       :y="50"
-      :z="0"
+      :z="1"
       :draggable="true"
       style="background-color: #6fcf97;"
     >
@@ -45,12 +45,12 @@
       :h="375"
       :x="1100"
       :y="50"
-      :z="0"
+      :z="1"
       :draggable="true"
       style="background-color: #6fcf97;"
     >
       <form>
-        <div>
+        <div class="content">
           <p id="nodeid" :inner-html.prop="nodetext2 | marked"></p>
           <div v-if="microcosm == false">
             <input
@@ -146,6 +146,11 @@ export default {
   padding: 0 0.5em;
 }
 
+.content {
+  overflow: hidden;
+  max-height: 100%;
+}
+
 h1,
 h2,
 h3,

app/src/components/OtherNodeslayer.vue

@@ -28,7 +28,7 @@
             </p>
           </div>
           <div class="react" v-if="nodeid != undefined">
-            <h2>React</h2>
+            <!-- <h2>React</h2> -->
             <div class="eeee">
               <input :value="nodeid" name="id" readonly hidden />
               <input
@@ -219,7 +219,7 @@ export default {
     return {
       input: '',
       search: '',
-      pickupz: 99,
+      pickupz: 1,
     }
   },
 

app/src/components/SvgLinks.vue

+<template>
+  <svg
+    v-bind:viewBox="`0 0 ${width} ${height}`"
+    :width="width"
+    :height="height"
+  >
+    <template v-for="group in groups">
+      <path
+        v-on:click="(e) => onClick(curve, e)"
+        v-for="curve in group.links"
+        v-bind:key="curve.id"
+        v-bind:d="curve.path"
+        v-bind:stroke="getPalette(curve.color, 'dark')"
+        v-bind:stroke-dasharray="
+          curve.lineDash
+            ? curve.lineDash.join(' ')
+            : defaultLinkProps.lineDash.join(' ')
+        "
+        v-bind:stroke-width="curve.lineWidth || defaultLinkProps.lineWidth"
+      />
+    </template>
+    <path
+      v-bind:stroke="getPalette('blue', 'dark')"
+      v-bind:stroke-width="defaultLinkProps.lineWidth"
+      v-if="newLink && newLink.target"
+      v-bind:d="getCurve(newLink)"
+    />
+    <circle
+      v-bind:cx="newLink.target.x"
+      v-bind:cy="newLink.target.y"
+      r="10"
+      v-bind:fill="getPalette('blue', 'dark')"
+      v-if="newLink && newLink.target"
+    />
+  </svg>
+</template>
+
+<script>
+import { getPalette } from '@/experimental/constants/color'
+
+//import { generateLinkHandles } from '@/experimental/utils/nodes'
+//import { generateBezierCurve, makeBezier } from '@/experimental/utils/svg'
+import { generateBezierCurve } from '@/experimental/utils/svg'
+import { groupBy } from '@/experimental/utils/helpers'
+
+const groupByFrom = groupBy('from')
+
+export default {
+  data() {
+    return {
+      getPalette,
+      defaultLinkProps: {
+        hue: 'dark',
+        tension: 0.25,
+        lineWidth: 5,
+        lineDash: [0, 0],
+      },
+    }
+  },
+
+  computed: {
+    groups() {
+      const grouped = groupByFrom(this.links)
+      return Object.keys(grouped).map((id) => {
+        return {
+          id,
+          links: grouped[id].map((link) => {
+            const fromNode = this.findNode(link.from)
+            const toNode = this.findNode(link.to)
+            return {
+              ...link,
+              path: generateBezierCurve(
+                fromNode,
+                toNode,
+                this.defaultLinkProps.tension
+              ),
+            }
+          }),
+        }
+      })
+    },
+  },
+  methods: {
+    getCurve(link) {
+      const fromNode = this.findNode(link.from)
+      const toNode = { ...link.target, width: 1, height: 1 }
+      const r = generateBezierCurve(fromNode, toNode, 0.1)
+      return r
+    },
+    onClick(link, e) {
+      this.onClickLink([link.id])
+    },
+    findNode(id) {
+      return [...this.nodes].find((pt) => pt.id === id)
+    },
+  },
+}
+</script>

app/src/components/UploadLayer.vue

@@ -12,8 +12,8 @@
       <!-- <h1>{{ status }}</h1>
       <h2>ID: {{ id }}</h2>
       <h2>Agent version: {{ agentVersion }}</h2> -->
-      <!-- 
-      <button type="button" @click="saveIPFS">Upload</button>
+
+      <!-- <button type="button" @click="saveIPFS">Upload</button>
       <button type="button" @click="getIPFS">Get IPFS</button> -->
       <!-- {{ uploadready }} -->
       <textarea id="ipfshash" v-model="copytext"></textarea>
@@ -85,11 +85,11 @@ export default {
         // console.log(node)
         // Call ipfs `id` method.
         // Returns the identity of the Peer.
-        const { agentVersion, id } = await node.id()
-        this.agentVersion = agentVersion
-        this.id = id
+        //  const { agentVersion, id } = await node.id()
+        //  this.agentVersion = agentVersion
+        //   this.id = id
         // Set successful status text.
-        this.status = 'Connected to IPFS 😊'
+        //  this.status = 'Connected to IPFS 😊'
       } catch (err) {
         // Set error status text.
         this.status = `Error: ${err}`
@@ -103,13 +103,8 @@ export default {
 
     async saveIPFS() {
       try {
-        for await (const result of node.add(this.selectedFile)) {
-          //console.log(result.cid.string)
-          this.fileContents = result
-          // console.log(this.fileContents.path)
-          // node.swarm.peers().then((a) => console.log(a))
+        this.fileContents = await node.add(this.selectedFile)
         this.getIPFS()
-        }
       } catch (err) {
         // Set error status text.
         this.status = `Error: ${err}`

app/src/experimental/ModeToolbar.vue

@@ -112,6 +112,11 @@ export default {
 </script>
 
 <style scoped>
+nav {
+  display: none;
+}
+
+@media (min-width: 450px) {
   nav {
     position: fixed;
 
@@ -142,4 +147,5 @@ button {
   button.active {
     background: rgb(30, 30, 30);
   }
+}
 </style>

app/src/experimental/PanZoomContainer.vue

@@ -133,7 +133,7 @@ export default {
       if (!this.interaction.origin) {
         return
       }
-      // console.log('touch')
+      //console.log(e.touches.length)
       e.preventDefault()
       const isPinchAction =
         e.touches.length == 2 && this.interaction.origin.points.length > 1

app/src/experimental/modes/index.js

@@ -31,16 +31,16 @@ export const move = {
   shortcut: false,
 }
 
-// export const connect = {
-//   name: 'connect',
-//   view: {
-//     pan: false,
-//     zoom: false,
-//   },
-//   icon: 'connection',
-//   cursor: 'crosshair',
-//   shortcut: false,
-// }
+export const connect = {
+  name: 'connect',
+  view: {
+    pan: false,
+    zoom: false,
+  },
+  icon: 'connection',
+  cursor: 'crosshair',
+  shortcut: false,
+}
 
 export const draw = {
   name: 'draw',

app/src/router/index.js

@@ -13,6 +13,11 @@ export const routes = [
     name: 'Home',
     component: Home,
   },
+  {
+    path: '/mobile',
+    name: 'Mobile',
+    component: List,
+  },
   {
     path: '/about',
     name: 'About',
@@ -22,11 +27,6 @@ export const routes = [
     component: () =>
       import(/* webpackChunkName: "about" */ '../routes/About.vue'),
   },
-  {
-    path: '/list',
-    name: 'List Test',
-    component: List,
-  },
 
   // {
   //   path: '/test',

app/src/routes/About.vue

@@ -29,6 +29,10 @@
 
     <h3>Considerations</h3>
     <ul>
+      <li>
+        &nbsp;You may need to create a new microcosm to take advantage of new
+        enhancements
+      </li>
       <li>&nbsp;Data is not yet encrypted.</li>
       <li>&nbsp;There is no Export yet.</li>
 
@@ -36,7 +40,8 @@
         Please
         <strong>UNDERSTAND</strong> all data as not backed up, data structures
         and data will ocasssionaly be deleted or changed remotely which may
-        effect and break your local data.
+        effect and break your local data. Please make a seperate copy (copy and
+        paste into a local file)
       </li>
     </ul>
     <h2>Design-led ethical Edutech</h2>

app/src/routes/List.vue

@@ -2,7 +2,6 @@
   <div id="listwrapper">
     <!-- <div v-for="(posvalue, index) in configPositions" v-bind:key="index"> -->
     <h1 class="mobile">Your nodes - list mode</h1>
-    <h2>Testing Only</h2>
     <!-- <OffLine
       v-for="value in myNodes"
       v-bind:key="value.node_id"
@@ -10,10 +9,39 @@
       v-bind:nodetext="value.node_text"
       @editTrue="(e) => editTrue(e)"
     /> -->
+    <div v-if="clientset">
+      <div class="btn-row">
+        <BaseButton class="new" buttonClass="action" @click="addNode()"
+          >Create Node</BaseButton
+        >
+      </div>
 
+      <form>
+        <!-- <div v-if="posvalue.read_mode == false"> -->
+        <div
+          v-for="value in myNodes.slice().reverse()"
+          v-bind:key="value.node_id"
+        >
+          <textarea
+            @focus="editTrue(true)"
+            @blur="editTrue(false)"
+            autofocus
+            @input="editNode"
+            v-model="value.node_text"
+            :id="nodeid"
+            ref="nodetext"
+            placeholder="Idea goes here!"
+          ></textarea>
+        </div>
+      </form>
+    </div>
+    <!-- // onboarding for list view -->
+    <div v-else>
       <form>
         <div>
           <p id="nodeid" :inner-html.prop="nodetext1 | marked"></p>
+
+          <div v-if="name == false">
             <input
               type="text"
               v-model.trim="clientid"
@@ -31,11 +59,16 @@
               >
             </div>
           </div>
+          <div v-else>
+            <h4>Saved</h4>
+          </div>
+        </div>
       </form>
 
       <form>
         <div>
           <p id="nodeid" :inner-html.prop="nodetext2 | marked"></p>
+          <div v-if="microcosm == false">
             <input
               type="text"
               v-model.trim="localmicrocosm"
@@ -48,40 +81,19 @@
               @blur="editTrue(false)"
             />
             <div class="btn-row">
-          <BaseButton buttonClass="special" @click="createMicrocosm(), letsGo()"
+              <BaseButton
+                buttonClass="special"
+                @click="createMicrocosm(), letsGo()"
                 >Create Microcosm</BaseButton
               >
             </div>
           </div>
-    </form>
-    <div class="btn-row">
-      <BaseButton class="new" buttonClass="action" @click="addNode()"
-        >Create Node</BaseButton
-      >
+          <div v-else>
+            <h4>Loading...</h4>
           </div>
-
-    <form>
-      <!-- <div v-if="posvalue.read_mode == false"> -->
-      <div
-        v-for="value in myNodes.slice().reverse()"
-        v-bind:key="value.node_id"
-      >
-        <textarea
-          @focus="editTrue(true)"
-          @blur="editTrue(false)"
-          autofocus
-          @input="editNode"
-          v-model="value.node_text"
-          :id="nodeid"
-          ref="nodetext"
-          placeholder="Idea goes here!"
-        ></textarea>
         </div>
-      <!-- </div> -->
-      <!-- <div v-if="posvalue.read_mode == true">
-          <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked"></p>
-        </div> -->
       </form>
+    </div>
 
     <ModeToolbar />
   </div>
@@ -108,9 +120,10 @@ export default {
       offline: false,
       nodetext1:
         '## What shall we call you ? 💥 \n First we need to connect this device to your ideas. This name is what allows you to create and edit your nodes and can be anything you like and this name is always anonymous.',
-
       nodetext2:
         '## Start those engines ! 🏎 \n Now you can create your own microcosm to store your ideas and ask people to join you, either just tell them the name of the microcosm or share the alpha.nodenogg.in URL and add the ending; </br><em><b>/microcosm/nameofyourmicrocosm</b></em>',
+      name: false,
+      microcosm: false,
     }
   },
 
@@ -145,6 +158,7 @@ export default {
       this.createMicrocosm()
       this.setClient()
       this.letsGo()
+      this.clientset = 'true'
     }
   },
 
@@ -165,13 +179,16 @@ export default {
     createMicrocosm() {
       this.$store.dispatch('createMicrocosm', this.localmicrocosm)
       localStorage.setItem('mylastMicrocosm', this.localmicrocosm)
+      this.microcosm = true
     },
     setClient() {
       this.$store.dispatch('setClient', this.clientid),
         localStorage.setItem('myNNClient', this.clientid)
+      this.name = true
     },
 
     letsGo() {
+      this.clientset = !this.clientset
       this.$emit('clientAdded')
     },
 

app/src/store/index.js

@@ -17,6 +17,8 @@ Vue.use(Vuex)
 Vue.component('vue-draggable-resizable', VueDraggableResizable)
 
 var myclient = 'firstvisit'
+var localxpos = 50
+var localypos = 50
 
 if (localStorage.getItem('mylastMicrocosm') == null) {
   var microcosm = 'firstvisit'
@@ -365,13 +367,36 @@ const store = new Vuex.Store({
           })
       })
       pouchdb.get(state.global_pos_name).then(function (doc) {
+        //console.log(doc.positions[doc.positions.length - 1].z_index)
+        var i
+        localxpos = 50
+        localypos = 50
+        for (i = 0; i < Object.keys(doc.positions).length; i++) {
+          if (doc.positions[i].x_pos == 50) {
+            localxpos = 70
+            localypos = 70
+          }
+          if (doc.positions[i].x_pos == 70) {
+            localxpos = 90
+            localypos = 90
+          }
+          if (doc.positions[i].x_pos == 90) {
+            localxpos = 110
+            localypos = 110
+          }
+          if (doc.positions[i].x_pos == 110) {
+            localxpos = 50
+            localypos = 50
+          }
+        }
+
         doc.positions.push({
           node_id: uniqueid,
-          x_pos: 50,
-          y_pos: 50,
+          x_pos: localxpos,
+          y_pos: localypos,
           width: 220,
           height: 295,
-          z_index: 1,
+          z_index: 10,
           read_mode: false,
         })
         return pouchdb