Feature/refactor editor

README.md

@@ -14,7 +14,7 @@ Harena is available at https://harena.ds4h.org/.
 <!-- platform that includes: authoring environment, player engine and the Versum narrative scripting language translator. -->
 
 <!--
-## Table of Contents 
+## Table of Contents
 
 * [Getting Started](#getting-started)
   * [Option 1: Access our instance running at cloud](#option-1-access-our-instance-running-at-cloud)

src/adonisjs/public/author/index.html

@@ -99,7 +99,11 @@
     <script src="/translator/translator.js"></script>
     <script src="/translator/item-templates.js"></script>
 
+    <script src="/dccs/edit/local-storage-stack.js"></script>
+    <script src="/dccs/edit/action-deserializer.js"></script>
+    <script src="/dccs/edit/command-manager.js"></script>
     <script src="/dccs/edit/properties.js"></script>
+    <script src="/dccs/edit/action-apply-properties.js"></script>
     <script src="/dccs/edit/upload-adapter.js"></script>
     <script src="/dccs/edit/inplace-editor.js"></script>
     <script src="/dccs/edit/inplace-plain-editor.js"></script>
@@ -347,6 +351,9 @@ <h6 style="color:#808080;">Created by {{author_grade}}: {{username}} ({{institut
               </button>
 
 
+              <dcc-button xstyle="in" topic="properties/undo/details" label="UNDO"></dcc-button>
+              <dcc-button xstyle="in" topic="properties/redo/details" label="REDO"></dcc-button>
+
               <div id="advanced-mode" style="display:none">
                 <dcc-button topic="control/case/markdown" label="MARKDOWN" xstyle="in"></dcc-button>
               </div>
@@ -431,7 +438,6 @@ <h6 style="color:#808080;">Created by {{author_grade}}: {{username}} ({{institut
                     <div id="properties-panel" class="styp-properties-panel"></div>
                     <div id="properties-buttons">
                        <dcc-button xstyle="in" topic="properties/apply/details" label="APPLY"></dcc-button>
-                       <dcc-button xstyle="in" topic="properties/undo/details" label="UNDO"></dcc-button>
                        <!--
                        <div class="control-button"><dcc-button xstyle="in" topic="control/element/selected/up" label="Element Up" image="icons/icon-move-up.svg"></dcc-button></div>
                        <div class="control-button"><dcc-button xstyle="in" topic="control/element/selected/down" label="Element Down" image="icons/icon-move-down.svg"></dcc-button></div>

src/adonisjs/public/author/js/author.js

@@ -42,12 +42,26 @@ class AuthorManager {
 
     this._caseModified = false
 
-    window.onbeforeunload = function () {
-      return (this._caseModified)
-        ? 'If you leave this page you will lose your unsaved changes.' : null
-    }
+// Function that runs when the user attempts to leave the page, making the user confirm before leaving
+// To use this uncomment the next two lines and  code and the tryHalt function.
+//    this.tryHalt = this.tryHalt.bind(this)
+//    window.onbeforeunload = this.tryHalt
+
+    this.commandManager = new CommandManager('caseEditor', this)
   }
 
+  /*  async tryHalt () {
+      try {
+      if (this._caseModified)
+          Tracker.caseTryHalt(pPlay.userid, pPlay.caseid, pPlay.running.runningId)
+      } catch (e) {
+        console.log('=== error on halt')
+        console.log(e)
+      }
+      return ''
+    }
+    */
+
   /* <TODO>
       A commom code for shared functionalities between player and author
       ******/
@@ -261,6 +275,8 @@ class AuthorManager {
   async caseLoadSelect () {
     const saved = await this.saveChangedCase()
 
+    this.commandManager.clear()
+
     const cases = await MessageBus.i.request('data/case/*/list', null, null, true)
     // {user: this._userid});
 
@@ -298,7 +314,7 @@ class AuthorManager {
     */
   async caseNew (template) {
     this._temporaryCase = true
-
+    this.commandManager.clear()
     // await this._themeSelect();
     // let template = await this._templateSelect("case");
 
@@ -814,7 +830,7 @@ class AuthorManager {
     console.log(topic)
     console.log(message)
 
-    await Properties.s.closePreviousProperties()
+    await Properties.s.closePreviousProperties(message._selectedByAction)
 
     const dccId = MessageBus.extractLevel(topic, 3)
 
@@ -845,9 +861,9 @@ class AuthorManager {
          dcc = inDCC
       }
       parentDCC.edit(role)
-
+      
       Properties.s.editElementProperties(
-        this._knots, this._knotSelected, el, dcc, role, message.buttonType)
+        this._knots, this._knotSelected, el, dcc, role, message.buttonType, message.presentationId, dccId, this.commandManager)
     }
   }
 

src/adonisjs/public/dccs/edit/action-apply-properties.js

@@ -0,0 +1,66 @@
+class ApplyPropertiesAction{
+  //Action that implements element edit operations.
+
+  constructor(knotId, el, newObjProperties, oldObjProperties = null, dccId, role, buttonType, presentationId){
+    this._oldObjProperties = oldObjProperties
+    this._objProperties = null
+    this.el = el
+    this._newObjProperties = JSON.parse(JSON.stringify(newObjProperties))
+    this.type = 'ApplyProperties'
+    this.knotId = knotId
+    this._dccId = dccId
+    this._role = role
+    this._buttonType = buttonType
+    this._presentationId = presentationId
+  }
+
+    async execute(knots){
+      //Get Object Properties and clone it into oldObjProperties for later use
+      this._objProperties = knots[this.knotId].content[this.el]
+      this._oldObjProperties = JSON.parse(JSON.stringify(this._objProperties))
+
+      //Update Object Properties,Markdown and view
+      knots[this.knotId].content[this.el] = this._newObjProperties
+      Translator.instance.updateElementMarkdown(this._newObjProperties)
+      await MessageBus.i.request('control/knot/update', null, null, true)
+    }
+
+
+    async undo(knots){
+      //Restore object to oldObjProperties
+      knots[this.knotId].content[this.el] = this._oldObjProperties
+      this._objProperties = knots[this.knotId].content[this.el]
+      this._objProperties._modified = true
+      await MessageBus.i.request('control/knot/update', null, null, true)
+    }
+
+    selectElement(){
+      //Create a element selected message to change the selected element upon undo/redo actions
+      let topic = 'control/element/' + this._dccId + '/selected'
+
+      let message = {}
+      message._selectedByAction = true
+      if (this._role != null){
+        message.role = this._role
+      }
+      if (this._buttonType != null){
+        message.buttonType = this._buttonType
+      }
+      if (this._presentationId != null){
+        message.presentationId = this._presentationId
+      }
+
+      MessageBus.i.publish(topic, message)
+    }
+
+    serialize(action){
+      action.type = this.type
+      return JSON.stringify(action)
+    }
+
+    static deserialize(properties){
+      return new ApplyPropertiesAction(properties.knotId, properties.el, properties._newObjProperties, properties._oldObjProperties,
+                                       properties._dccId,properties._role, properties._buttonType, properties.presentationId)
+    }
+
+}

src/adonisjs/public/dccs/edit/action-deserializer.js

@@ -0,0 +1,11 @@
+class ActionDeserializer{
+  static deserialize(action){
+    let properties = JSON.parse(action)
+    switch (properties.type) {
+      case 'ApplyProperties':
+        action = ApplyPropertiesAction.deserialize(properties)
+        break
+    }
+    return action
+  }
+}

src/adonisjs/public/dccs/edit/command-manager.js

@@ -0,0 +1,51 @@
+class CommandManager{
+  //This Class is resposible for calling and managing actions. The Undo/Redo feature is here implemented by using the LocalStorageStack class to controll the
+  //undo and redo stacks so that the actions are stored in the brower local memory of the users computer and can later be retrieved.
+  constructor (editorName, author) {
+    //Create stacks and instatiate author
+    this._undoStack = new LocalStorageStack(editorName + 'UndoStack')
+    this._redoStack = new LocalStorageStack(editorName + 'RedoStack')
+    this._author = author
+  };
+
+  execute(action) {
+    //Call the execute item, push the action to the undo stack and clear the redo stack
+    this.knots = this._author._compiledCase.knots
+    action.execute(this.knots)
+    this._undoStack.push(action.serialize(action))
+    this._redoStack.clear()
+  }
+
+  undo(){
+    //Get the top item from the undo stack, add it on the redo stack, select the element and undo the action.
+    this.knots = this._author._compiledCase.knots
+    if(this._undoStack.length > 0){
+      let action = this._undoStack.pop()
+      this._redoStack.push(action)
+      action = ActionDeserializer.deserialize(action)
+      action.selectElement()
+      action.undo(this.knots)
+    }
+  }
+
+  redo(){
+    //Get the top action from the redo stack, add it to the undo stack, select the element and execute the action.
+    this.knots = this._author._compiledCase.knots
+    if(this._redoStack.length > 0){
+      let action = this._redoStack.pop()
+      this._undoStack.push(action)
+      action = ActionDeserializer.deserialize(action)
+      action.selectElement()
+      action.execute(this.knots)
+    }
+  }
+
+  clear(){
+    //Clear stacks and pointers to them.
+    this._undoStack.clear()
+    this._redoStack.clear()
+    this._undoStack = null
+    this._redoStack = null
+  }
+
+}

src/adonisjs/public/dccs/edit/inplace-editor.js

@@ -30,16 +30,16 @@ class EditDCC {
     return ep
   }
 
-  async handleConfirm () {
-    await this._handleEditorAction('confirm')
+  async handleConfirm (selectedByAction) {
+    await this._handleEditorAction('confirm', selectedByAction)
   }
 
   async handleCancel () {
     await this._handleEditorAction('cancel')
   }
 
-  async _handleEditorAction (action) {
-    if (action === 'confirm') {
+  async _handleEditorAction (action, selectedByAction) {
+    if (action === 'confirm' && !selectedByAction) {
       await this._properties.applyProperties(false)
       // await MessageBus.i.request('properties/apply/short', null, null, true)
     } else {

src/adonisjs/public/dccs/edit/inplace-plain-editor.js

@@ -14,15 +14,16 @@ class EditDCCPlain {
     }
   }
 
-  async handleConfirm () {
+  async handleConfirm (selectedByAction) {
     this._editElement.contentEditable = false
     // <TODO> this will becone an action
     this._objProperties[this._objField] =
            this._editElement.innerHTML.trim()
              .replace(/\u200B/gm, '') // removing non printable special characters
              .replace(/(?:<br>)+$/i, '')
-
-    await this._properties.applyProperties(false)
+    if(!selectedByAction){
+      await this._properties.applyProperties(false)
+    }
   }
 
   // <FUTURE>?

src/adonisjs/public/dccs/edit/inplace-text-editor.js

@@ -135,9 +135,11 @@ class EditDCCText extends EditDCC {
     // MessageBus.i.publish('control/knot/update', null, true)
   }
 
-  async handleConfirm() {
-    this._updateTranslated()
-    await this._closeEditor()
+  async handleConfirm(selectedByAction) {
+    if(!selectedByAction){
+      this._updateTranslated()
+      await this._closeEditor()
+    }
   }
 
   async handleCancel() {

src/adonisjs/public/dccs/edit/local-storage-stack.js

@@ -0,0 +1,41 @@
+class LocalStorageStack{
+  //Class that simulates stack operations for using the local storage key-value database.
+  //The length of the stack is stored in a item with it's name, the items are stored in a item named stackName + length
+  constructor(stackName){
+    //Get item with stack name to get the stored stack if it exists, otherwise create a stack with this name and store 0 as length.
+    this._stackName = stackName
+    this.length = localStorage.getItem(stackName)
+    if(this.length == null){
+      this.length = 0
+      localStorage.setItem(stackName, 0)
+    }
+  }
+
+  push(item){
+    //push item, increase length and store it
+    localStorage.setItem(this._stackName + this.length.toString(), item)
+    this.length++
+    localStorage.setItem(this._stackName, this.length)
+  }
+
+  pop(){
+    //Get top item, descrease length and store it
+    let item = null
+    if(this.length > 0){
+      this.length--
+      localStorage.setItem(this._stackName, this.length)
+      item = localStorage.getItem(this._stackName + this.length.toString())
+      localStorage.removeItem(this._stackName + this.length.toString())
+    }
+    return item
+  }
+
+  clear(){
+    //Remove all items from the stack and it's length
+    while(this.length > 0){
+      this.length--
+      localStorage.removeItem(this._stackName + this.length.toString())
+    }
+    localStorage.removeItem(this._stackName)
+  }
+}