Merge pull request #399 from nus-mtp/development/v0.1.5

Development/v0.1.5

sashimi-webapp/index.html

@@ -42,9 +42,6 @@
     <script src="./vendors/viz-lite.js"></script>
     <!-- mermaid does not support markdown-it, hence we are doing this -->
     <script src="./vendors/mermaidAPI.min.js"></script>
-    <!-- Customised mermaid.css taken from hackmd.io, this custom CSS resolves the issue of -->
-    <!-- the styling applying to the whole HTML document -->
-    <link href="./vendors/mermaid.css" rel="stylesheet">
     <div id="app"></div>
     <!-- built files will be auto injected -->
     <script src="https://code.jquery.com/pep/0.4.2/pep.js"></script>

sashimi-webapp/package.json

@@ -80,6 +80,7 @@
     "opn": "^4.0.2",
     "ora": "^1.1.0",
     "phantomjs-prebuilt": "^2.1.14",
+    "promise-worker": "^1.1.1",
     "raw-loader": "^0.5.1",
     "sass-loader": "^5.0.1",
     "save": "^2.3.0",
@@ -103,6 +104,7 @@
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.16.1",
     "webpack-merge": "^2.6.1",
+    "webworkify-webpack": "^2.0.4",
     "xss": "^0.3.3"
   },
   "devDependencies": {},

sashimi-webapp/src/assets/styles/keyframes.scss

@@ -21,7 +21,20 @@
   100% { transform: scale(1) }
 }
 
+@keyframes docListView {
+  0% { transform: translate(-20px) }
+  100% { transform: translate(0) }
+}
+
 @keyframes docListView{
   0% { transform: scale(1.05) }
   100% { transform: scale(1) }
-}
+}
+
+@keyframes renameError {
+  0% { transform: translateX(-2px) }
+  25% { transform: translateX(2px) }
+  50% { transform: translateX(-2px) }
+  75% { transform: translateX(2px) }
+  100% { transform: translateX(0px) }
+}

sashimi-webapp/src/assets/styles/variables.scss

@@ -19,7 +19,7 @@ $button-sashimi-width: 42px;
 $navbar-elements-left-margin: 18px;
 $navbar-button-dropdown-width: 140px;
 
-$view-type-buttons-width: 100.36px;
+$view-type-buttons-width: 100px;
 
 $searchbar-icons-width: 44px;
 $searchbar-mobile-margin-left: 15px;

sashimi-webapp/src/components/editor-viewer/Content.vue

@@ -5,12 +5,16 @@
       <div class="col editor-wrapper">
         <editor 
           v-model="mdContent"
+          :scrollPosition="editorScrollPosition"
+          v-on:updateViewerScrollPosition="updateViewerScrollPosition"
         ></editor>
       </div>
       <div class="col viewer-wrapper">
         <viewer 
-          :editor-content="mdContent" 
-          :file-format="fileFormat" 
+          :editor-content="mdContent"
+          :file-format="fileFormat"
+          :scrollPosition="viewerScrollPosition"
+          v-on:updateEditorScrollPosition="updateEditorScrollPosition"
           >
         </viewer>
       </div>
@@ -21,6 +25,7 @@
 <script>
 import _ from 'lodash';
 import fileManager from 'src/logic/filemanager';
+import featureData from 'src/../static/data/features.txt';
 import navbar from './Navbar';
 import viewer from './Viewer';
 import editor from './Editor';
@@ -40,7 +45,9 @@ export default {
       file: null,
       viewMode: 'split',
       navbarInput: this.viewMode,
-      changeViewModeOnResize: function() {
+      editorScrollPosition: 1,
+      viewerScrollPosition: 1,
+      changeViewModeOnResize() {
         if (window.innerWidth < 768 && this.viewMode === 'split') {
           this.viewMode = 'editor';
           this.navbarInput = 'editor';
@@ -69,27 +76,40 @@ export default {
       }
     },
     mdContent: _.debounce(function saveFile(value) {
-      this.file.save(value);
+      if (this.file) {
+        this.file.save(value);
+      }
     }, 1000),
   },
-  method: {
+  methods: {
+    updateViewerScrollPosition(position) {
+      this.viewerScrollPosition = position;
+    },
+    updateEditorScrollPosition(position) {
+      this.editorScrollPosition = position;
+    }
   },
   computed: {
   },
   mounted() {
     contentVue = this;
 
-    // for testing purposes
-    // will be handled by fileManager logic
-    const fileID = parseInt(this.$route.query.id);
-    if (fileID && fileManager.getFileByID(fileID)) {
-      this.file = fileManager.getFileByID(fileID);
-      this.file.load()
-        .then((data) => {
-          this.mdContent = data;
-        });
+    if (this.$route.path === '/features') {
+      // Special case to handle feature document
+      this.mdContent = featureData;
     } else {
-      this.$router.push('/');
+      // for testing purposes
+      // will be handled by fileManager logic
+      const fileID = parseInt(this.$route.query.id);
+      if (fileID && fileManager.getFileByID(fileID)) {
+        this.file = fileManager.getFileByID(fileID);
+        this.file.load()
+          .then((data) => {
+            this.mdContent = data;
+          });
+      } else {
+        this.$router.push('/');
+      }
     }
 
     if (window.innerWidth < 768) {

sashimi-webapp/src/components/editor-viewer/Editor.vue

@@ -18,7 +18,7 @@ export default {
   components: {
     codemirror
   },
-  props: ['value'],
+  props: ['value', 'scrollPosition'],
   data() {
     return {
       isBeingLoaded: true,
@@ -35,6 +35,56 @@ export default {
         gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
         styleSelectedText: true,
         highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
+      },
+      // Scroll related functions
+      localScrollPosition: 1,
+      canUserScroll: true,
+      canOtherScroll: true,
+      enableUserScrollListener: () => { this.canUserScroll = true; },
+      disableUserScrollListener: () => { this.canUserScroll = false; },
+      userScrollListeners: [],
+      enableOtherScrolledListener: () => { this.canOtherScroll = true; },
+      disableOtherScrolledListener: () => { this.canOtherScroll = false; },
+      otherScrollListeners: [],
+      /**
+       * This function is called when user is scrolling the component
+       */
+      broadcastNewScrollPosition: (cmInstance) => {
+        // If it is being scrolled by other component,
+        // no need to broadcast scroll position again
+        if (!this.canUserScroll) return;
+
+        // Prevent programatic updating by own component
+        this.disableOtherScrolledListener();
+        this.userScrollListeners.forEach(clearTimeout);
+
+        // Retrieve scroll information for emitting
+        const cmScrollTop = cmInstance.getScrollInfo().top;
+        const newLinePosition = cmInstance.lineAtHeight(cmScrollTop, 'local') + 1;
+        this.$emit('updateViewerScrollPosition', newLinePosition);
+
+        // Welcome programatic updating by own component again after a while
+        this.userScrollListeners.push(setTimeout(this.enableOtherScrolledListener, 1000));
+      },
+      /**
+       * This function is called when the component receive scroll update signal
+       * from other component
+       */
+      updateScrollPosition: (position) => {
+        // If user is scrolling this component, disable scroll manipulation
+        if (!this.canOtherScroll) return;
+        if (this.localScrollPosition === position) return;
+
+        // Prevent scroll position listener from manually adjusting the scroll height again
+        this.disableUserScrollListener();
+        this.userScrollListeners.forEach(clearTimeout);
+
+        // Retrieve scroll information for setting height
+        const destinationPosition = codeMirrorInstance.heightAtLine(position - 1, 'local');
+        codeMirrorInstance.scrollTo(null, destinationPosition);
+
+        // listener for scroll position from
+        this.userScrollListeners.push(setTimeout(this.enableUserScrollListener, 1000));
       }
     };
   },
@@ -50,10 +100,14 @@ export default {
         codeMirrorInstance.setCursor(data.length);
         this.isBeingLoaded = false;
       }
+    },
+    scrollPosition(position) {
+      this.updateScrollPosition(position);
     }
   },
   mounted() {
     codeMirrorInstance = this.$refs.myEditor.editor;
+    codeMirrorInstance.on('scroll', this.broadcastNewScrollPosition);
   }
 };
 

sashimi-webapp/src/components/editor-viewer/Navbar.vue

@@ -76,8 +76,7 @@
 </template>
 
 <script>
-import router from 'src/router';
-import condProcessor from 'src/logic/documentPackager/conditionalProcessor';
+import condProcessor from 'src/logic/documentPackager/plugins/conditionalProcessor';
 
 export default {
   components: {

sashimi-webapp/src/components/editor-viewer/Viewer.vue

@@ -2,21 +2,28 @@
   <div class="viewer" v-bind:data-fileFormat='fileFormat'>
     <viewerPages 
       v-if="fileFormat === 'pages'"
-      v-bind:htmlData="getHtmlData"
+      :htmlData="htmlData"
+      :scrollPosition="scrollPosition"
+      v-on:updateEditorScrollPosition="updateEditorScrollPosition"
     ></viewerPages>
     <viewerSlides 
       v-else-if="fileFormat === 'slides'"
-      v-bind:htmlData="getHtmlData"
+      :htmlData="htmlData"
+      :scrollPosition="scrollPosition"
+      v-on:updateEditorScrollPosition="updateEditorScrollPosition"
     ></viewerSlides>
     <viewerHtml 
       v-else 
-      v-bind:htmlData="getHtmlData"
+      :htmlData="htmlData"
+      :scrollPosition="scrollPosition"
+      v-on:updateEditorScrollPosition="updateEditorScrollPosition"
     ></viewerHtml>
   </div>
 </template>
 
 <script>
   import Vue from 'vue';
+  import _ from 'lodash';
   import AsyncComputed from 'vue-async-computed';
   import documentPackager from 'src/logic/documentPackager';
   import DocumentPrinter from 'src/logic/inputHandler/DocumentPrinter';
@@ -27,23 +34,37 @@
   Vue.use(AsyncComputed);
 
   let documentPrinter = null;
+  const htmlParserTrottleFn = _.throttle(function parseFn(data) {
+    documentPackager.getHtmlData(data)
+    .then((htmlData) => {
+      this.htmlData = htmlData;
+    });
+  }, 1000);
 
   export default {
     components: {
       viewerPages,
       viewerSlides,
       viewerHtml,
     },
-    props: ['editorContent', 'fileFormat'],
-    asyncComputed: {
-      getHtmlData() {
-        return documentPackager.getHtmlData(this.editorContent);
-      }
+    data() {
+      return {
+        htmlData: '',
+      };
     },
+    props: ['editorContent', 'fileFormat', 'scrollPosition'],
     watch: {
       fileFormat() {
         // Update event listener reference on fileFormat change
         documentPrinter.setDomBehaviour();
+      },
+      editorContent(data) {
+        htmlParserTrottleFn.call(this, data);
+      }
+    },
+    methods: {
+      updateEditorScrollPosition(newLinePosition) {
+        this.$emit('updateEditorScrollPosition', newLinePosition);
       }
     },
     mounted() {

sashimi-webapp/src/components/editor-viewer/Viewers/Html.vue

@@ -9,31 +9,29 @@
 
 <script>
   import Vue from 'vue';
-  import diagramsRenderer from 'src/logic/renderer/diagrams';
+  import DiagramsRenderer from 'src/logic/renderer/diagrams';
   import documentBuilder from 'src/helpers/documentBuilder';
+  import scrollSync from 'src/logic/inputHandler/scrollSync';
 
   /**
    * Diagram rendering function for HTML view
    * @param {element} renderTarget - HTML element that will be used to render data into
    * @param {string} htmlData - string containing the parsed and rendered markdown syntax by markdown-it
    */
-  function renderUpdate(renderTarget, htmlData) {
-    renderTarget.innerHTML = htmlData;
-    // find everything and replace/drawsvg
-    diagramsRenderer(renderTarget);
-  }
 
   export default {
-    props: ['htmlData'],
+    props: ['htmlData', 'scrollPosition'],
     data() {
       return {
         renderDoc: null,
+        diagramsRenderer: null,
       };
     },
     watch: {
       htmlData(data) {
         if (this.renderDoc) {
-          renderUpdate(this.renderDoc.body, data);
+          this.renderDoc.body.innerHTML = this.htmlData;
+          this.diagramsRenderer.process(this.renderDoc.body);
         }
       }
     },
@@ -55,7 +53,12 @@
         })
         .then(() => {
           this.renderDoc = this.$el.contentWindow.document;
-          renderUpdate(this.renderDoc.body, this.htmlData);
+          this.renderDoc.body.innerHTML = this.htmlData;
+
+          this.diagramsRenderer = new DiagramsRenderer();
+          this.diagramsRenderer.process(this.renderDoc.body);
+
+          scrollSync.vueHelper.setDomBehaviour.call(this, 'scrollPosition', this.renderDoc);
         });
       });
     }