v0.2.0 with new algorithm

Author: KB1RD

README.md

@@ -7,10 +7,10 @@ Check it out at [matrix-notepad.kb1rd.net](https://matrix-notepad.kb1rd.net/) an
 This is not in any particular order:
 * [x] More or less working insertions
 * [x] More or less working removals
-* [ ] Conflict resolution
-* [ ] Improved UI/UX (this will be incremental)
+* [ ] Conflict resolution -- Almost!
+* [x] Improved UI/UX (this will be incremental)
 * [ ] Unit testing!!!
-* [ ] Create a different package for the `Logootish` algorithm
+* [x] Create a different package for the `Logootish` algorithm -- Right [here](https://github.com/KB1RD/logootish-js)
 * [ ] Node 'squashing' or similar. Currently Matrix Notepad has to sync ALL of the events :(
 * [ ] Rich text editing
 
@@ -23,9 +23,7 @@ Fundementally, it is frustrating that there is no standard way to collaborate on
 Just head on over to [matrix-notepad.kb1rd.net](https://matrix-notepad.kb1rd.net/) and sign in. This will bring you to a room list. It's not a great idea to re-use rooms, so if you haven't joined a document room yet, click the "Add" button at the top of the room list and either create a room or join an existing one by ID or alias.
 
 ### WARNING!
-First of all, since this is experimental software, do not use it to store very important or confidential information. Second, I have recommended to some of the Matrix devs that they create another account to test this program. This program *shouldn't* do anything to break anyone's account -- I use it on my normal Matrix account and nothing bad has happened. Yet. I suggested that they use another account because their job depends upon a working account. If you *absolutely* need your Matrix account every day, I would recommend creating another account just to be safe. This program will:
-1.) Post a good number of events to whichever room you choose. If you use this to type out a novel or something, it may slow down Riot since sync requests get larger, but this shouldn't be too much of an issue
-2.) Scroll back as far as possible in whichever room you choose. For this reason, **do not** open public chats since the editor will try to sync back to the beginning of time and probably crash your browser. I'm working on a more efficient sync system. See issue #11
+Since this is experimental software, do not use it to store very important or confidential information. I am not responsible for lost information
 
 ### Bug Reporting
 If you see error messages pop up or you encounter any bugs, **please** report it either on GitHub or on the Matrix chat. This is **very** helpful as I'm sure there are bugs that I don't know about.
@@ -40,20 +38,29 @@ Have a look at the [Wiki](https://github.com/KB1RD/matrix-notepad/wiki) if you'r
 
 ## Organization
 Here is the directory structure
-* `algorithms` -- A directory for possible algorithms in case I ever want to develop others. This is more of an organizational thing
-  * `/logootish` -- The `logootish` algorithm that I developed. This is the more interesting of all the directories
-    * `/index.js` -- The main Logootish algorithm
-    * `/bst.js` -- A custom binary sorting tree that supports custom compare functions and supports getting groups of nodes. This is used to select regions of nodes to consider. This may need a rewrite
-    * `/ints.js` -- A custom `Int32` type. I implemented this so that any int-based type would have a standard interface using methods rather than operators because JavaScript doesn't support operator overloading. In the future, it would be possible to replace the `Int32` type with any other int type because of this interface. Because it's only an Int32, the document will have issues if you add 2^31 characters consecutively, but then again so will most web browsers :)
-    * `utils.js` -- Random utilities that I should move somewhere else. This includes `Enum`, `arraymap`, `PeekableIterator`, and `FatalError`
 * `components` -- Vue components
 * `layouts` -- Nuxt layouts. This is currently just the default layout
 * `pages` -- Nuxt pages
 * `plugins` -- Nuxt plugins that perform vital functions for the program that are not the algorithm or the Vuex store
+  * `/matrix.js` -- Provides the interface between Matrix, the GUI, and the algorithm. It is dense and poorly written since I'm still trying to figure out where to put everything.
 * `static` -- Static files. Currently only has the site icon
 * `store` -- The Vuex store. This is used for UI only since I want the algorithm to be seperate from Vue.JS. Vuex does track the state of the Matrix client, but not the state of document nodes (that's all "traditional" ES6 JS)
 * `test` -- A directory that I have reserved for unit testing. This would help **a lot** if I actually implemented it. *sigh*
 
+## Debugging
+I have removed the debug panel as of version `0.2.0` in favor of a console based debug under the window-scope variable `$debug`. Here's the main tricks:
+
+```js
+// Provides direct access to the ListDocumentModel
+$debug.active_document.ldm
+
+// Disable the initial load
+$debug.syncback_settings.initial = false
+
+// Manually fetch events (if initial load is disabled)
+$debug.active_document.fetchEvents(1)
+```
+
 ## Build Setup
 ``` bash
 # install dependencies

components/DebugPanel.vue

@@ -15,7 +15,7 @@
           style="text-align: left; margin: -24px -32px; margin-top: 3em; overflow: auto;"
           :options="cmOption"
           @ready="$emit('ready')"
-          @changes="onNewChanges"
+          @beforeChange="onNewChanges"
         />
       </client-only>
     </a-card>
@@ -32,6 +32,7 @@ export default {
 
   data() {
     return {
+      console,
       text: '',
 
       cmOption: {
@@ -73,63 +74,52 @@ export default {
 
       cmdoc.replaceRange('', startpos, endpos)
     },
+    translate(src, dest, len) {
+      const cmdoc = this.$refs.codemirror.codemirror.doc
+      debug.log(`TRANSLATE ${len} CHARS FROM ${src} -> ${dest}`)
+      const startpos = cmdoc.posFromIndex(src)
+      const endpos = cmdoc.posFromIndex(src + len)
+      const body = cmdoc.getRange(startpos, endpos)
+      this.remove(src, len)
+      this.insert(dest, body)
+    },
 
-    onNewChanges(cm, changes) {
+    onNewChanges(cm, change) {
       const line_seperator = '\n'
-      const modifyCmLinePositionBasedOnText = (to, text) => {
-        // Add the extra lines in to the line count
-        to.line += text.length - 1
-        // If there's a new line, go back to the start of the line
-        if (text.length > 1) {
-          to.ch = 0
+      // TODO: Possible create a custom CM document to fix this BS. That way,
+      // text appears as part of the local echo of a Matrix event
+      if (
+        this.changes_to_ignore[change.from.line] &&
+        this.changes_to_ignore[change.from.line].includes(change.from.ch)
+      ) {
+        this.changes_to_ignore[change.from.line].pop(change.from.ch)
+        if (!this.changes_to_ignore[change.from.line].length) {
+          delete this.changes_to_ignore[change.from.line]
         }
-        // Add the final line position
-        to.ch += text[text.length - 1].length
-
-        return to
+        return
       }
 
-      changes.forEach((change) => {
-        // TODO: Possible create a custom CM document to fix this BS. That way,
-        // text appears as part of the local echo of a Matrix event
-        if (
-          this.changes_to_ignore[change.from.line] &&
-          this.changes_to_ignore[change.from.line].includes(change.from.ch)
-        ) {
-          this.changes_to_ignore[change.from.line].pop(change.from.ch)
-          if (!this.changes_to_ignore[change.from.line].length) {
-            delete this.changes_to_ignore[change.from.line]
-          }
-          return
-        }
-
-        const from = Object.assign({}, change.from)
-        const from_index = cm.indexFromPos(from)
+      // Local echos will replay the change
+      change.cancel()
 
-        // Addition is in the post-removal coordinate system
-        const addition_to = Object.assign({}, change.from)
+      const from = Object.assign({}, change.from)
+      const from_index = cm.indexFromPos(from)
+      const to = Object.assign({}, change.to)
+      const to_index = cm.indexFromPos(to)
 
-        // Update based on actual values (in my experience, CM reports incorrect
-        // lengths in *some* cases, so this just starts from scratch)
-        modifyCmLinePositionBasedOnText(addition_to, change.text)
+      // Length of removal
+      const removal_length = to_index - from_index
 
-        // Length of removal. Start w/ the newline chars:
-        let removal_length = change.removed.length - 1
-        change.removed.forEach((str) => {
-          removal_length += str.length
-        })
+      // Raw text of the addition
+      const addition_raw = change.text.join(line_seperator)
 
-        // Raw text of the addition
-        const addition_raw = change.text.join(line_seperator)
-
-        if (removal_length) {
-          this.$emit('remove', { pos: from_index, length: removal_length })
-        }
+      if (removal_length) {
+        this.$emit('remove', { pos: from_index, length: removal_length })
+      }
 
-        if (addition_raw.length) {
-          this.$emit('insert', { pos: from_index, body: addition_raw })
-        }
-      })
+      if (addition_raw.length) {
+        this.$emit('insert', { pos: from_index, body: addition_raw })
+      }
     }
   }
 }

components/DocumentEditor.vue

@@ -1,6 +1,6 @@
 {
   "name": "matrix-notepad",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "Store & collaborate on text files over the Matrix protocol",
   "author": "Nathan Pennie",
   "license": "GPL-3.0",
@@ -17,6 +17,7 @@
     "@nuxtjs/axios": "^5.3.6",
     "ant-design-vue": "^1.1.10",
     "codemirror": "^5.48.2",
+    "jsonschema": "^1.2.5",
     "logootish-js": "https://github.com/KB1RD/logootish-js.git#v0.2.1",
     "matrix-js-sdk": "^2.3.0",
     "nuxt": "^2.0.0",

package.json

@@ -11,15 +11,6 @@
         WIP
       </a-drawer> -->
 
-      <DebugPanel
-        v-if="$store.state.debug"
-        cansync
-        @fetch="(n) => (fetchEvents ? fetchEvents(n) : undefined)"
-        @dumpLogoot="dumpLogoot"
-        @dumpLdoc="dumpLdoc"
-        @dumpRemoval="dumpRemoval"
-      />
-
       <div style="margin: 10px 0px; text-align: left;">
         <a-button type="primary" icon="home" @click="$router.push('/')">
           Home
@@ -46,15 +37,14 @@
 
 <script>
 import { debug } from '@/plugins/debug'
-import DebugPanel from '@/components/DebugPanel'
 import DocumentEditor from '@/components/DocumentEditor'
 
 export default {
   validate({ params }) {
     return /^[!#][^!#:]*:[^!#:]*(:[0-9]+)?$/gm.test(params.room)
   },
 
-  components: { DebugPanel, DocumentEditor },
+  components: { DocumentEditor },
 
   head() {
     return {
@@ -112,14 +102,31 @@ export default {
               self.cm_resolve_ready = resolve
             }
           })
+          const onOperation = (ops) => {
+            ops.forEach((op) => {
+              switch (op.type) {
+                case 'i':
+                  this.$refs.editor.insert(op.start, op.body)
+                  return
+                case 'r':
+                  this.$refs.editor.remove(op.start, op.length)
+                  return
+                case 't':
+                  this.$refs.editor.translate(op.source, op.dest, op.length)
+              }
+            })
+          }
           const doc = await self.$matrix.createDocument(
             this.$route.params.room,
-            this.$refs.editor.insert,
-            this.$refs.editor.remove,
+            onOperation,
             this.onDocumentError
           )
 
+          // The old debug panel has been replaced in favor of this
+          this.$debug.active_document = doc
+
           // This is a really stupid way to keep the document out of Vue's reach
+          // (We do **not** want Vue doing state tracking on the CRDT)
           Object.defineProperty(this, 'document', {
             get() {
               return doc
@@ -169,17 +176,17 @@ export default {
 
     dumpLogoot() {
       if (this.document) {
-        debug.info(this.document.logoot_bst.toString())
+        debug.info(this.document.doc.logoot_bst.toString())
       }
     },
     dumpLdoc() {
       if (this.document) {
-        debug.info(this.document.ldoc_bst.toString())
+        debug.info(this.document.doc.ldoc_bst.toString())
       }
     },
     dumpRemoval() {
       if (this.document) {
-        debug.info(this.document.removal_bst.toString())
+        debug.info(this.document.doc.removal_bst.toString())
       }
     }
 

pages/edit/_room.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="container">
     <div>
-      <DebugPanel v-if="$store.state.debug" />
-
       <a-button
         type="dashed"
         block
@@ -35,11 +33,10 @@
 </template>
 
 <script>
-import DebugPanel from '@/components/DebugPanel'
 import AddRoomModal from '@/components/AddRoomModal'
 
 export default {
-  components: { DebugPanel, AddRoomModal },
+  components: { AddRoomModal },
 
   computed: {
     rooms() {