Merge pull request #34 from datasci4health/development

New Elements

src/adonisjs/public/author/css/properties.css

@@ -1,9 +1,19 @@
 @charset "UTF-8";
 
-.styp-properties-panel {
-   flex: 30%;
+.styp-elements-block {
+   flex: 20%;
    min-width: 20%;
+   max-width: 30%;
    height: 100%;
+   overflow: hidden;
+   display: flex;
+   flex-direction: column;
+}
+
+.styp-properties-panel {
+   flex: 95%;
+   width: 100%;
+   height: 95%;
    overflow: scroll;
    display: flex;
    flex-direction: column;

src/adonisjs/public/author/index.html

@@ -74,7 +74,14 @@
             </div>
          </div>
          <div id="knot-panel" class="sty-knot-panel std-border"></div>
-         <div id="properties-panel" class="styp-properties-panel std-border"></div>
+         <div id="elements-block" class="styp-elements-block">
+            <div id="properties-panel" class="styp-properties-panel std-border"></div>
+            <div id="elements-panel" class="sty-control-panel std-border">
+               <div class="control-button"><dcc-trigger action="control/element/text/new" label="Text" image="icons/icon-dcc-text.svg"></dcc-trigger></div>
+               <div class="control-button"><dcc-trigger action="control/element/image/new" label="Text" image="icons/icon-dcc-image.svg"></dcc-trigger></div>
+               <div class="control-button"><dcc-trigger action="control/element/option/new" label="Text" image="icons/icon-dcc-trigger.svg"></dcc-trigger></div>
+            </div>
+         </div>
       </div>
    </div>
 </body>

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

@@ -113,7 +113,9 @@ class AuthorManager {
       else if (MessageBus.matchFilter(topic, "control/group/+/selected"))
          this.groupSelected(topic, message);
       else if (MessageBus.matchFilter(topic, "control/element/+/selected"))
-         this.elementEdit(topic);
+         this.elementSelected(topic);
+      else if (MessageBus.matchFilter(topic, "control/element/+/new"))
+         this.elementNew(topic);
       else switch (topic) {
          case "control/case/new":  this.caseNew();
                                    break;
@@ -366,7 +368,7 @@ class AuthorManager {
             this._renderKnot();
             Properties.s.editKnotProperties(this._knots[this._knotSelected],
                                             this._knotSelected);
-            this._activateEditDCCs();
+            this._collectEditableDCCs();
          }
       }
     }
@@ -453,22 +455,18 @@ class AuthorManager {
     */
 
    _renderKnot() {
-      if (this._renderState == 1) {
-         console.log(this._htmlKnot);
+      if (this._renderState == 1)
          this._knotPanel.innerHTML = this._htmlKnot;
-      } else
+      else
          this._presentEditor(this._knots[this._knotSelected]._source);
    }
 
-   _activateEditDCCs() {
+   _collectEditableDCCs() {
       let elements = this._knotPanel.querySelectorAll("*");
       this._editableDCCs = {};
-      for (let e = 0; e < elements.length; e++) {
-         // console.log("=== dcc: " + elements[e].tagName);
-         // console.log("=== dcc: " + elements[e].presentation);
-         if (elements[e].tagName.toLowerCase().startsWith("dcc-") &&
-             elements[e].presentation) // {
-            this._editableDCCs[elements[e].id] = elements[e].presentation;
+      for (let e = 0; e < elements.length; e++)
+         if (elements[e].tagName.toLowerCase().startsWith("dcc-")) // {
+            this._editableDCCs[elements[e].id] = elements[e];
             // const presentation = elements[e].presentation;
             // this._editableDCCs[elements[e].id] = presentation;
             /*
@@ -483,10 +481,9 @@ class AuthorManager {
 
             // elements[e].activateEditDCC();
          //}
-       }
    }
 
-   elementEdit(topic) {
+   elementSelected(topic) {
       const dccId = MessageBus.extractLevel(topic, 3);
 
       if (this._previousEditedDCC) {
@@ -499,7 +496,7 @@ class AuthorManager {
             this._previousEditedDCC.style.border = null;
       }
 
-      let presentation = this._editableDCCs[dccId];
+      let presentation = this._editableDCCs[dccId].presentation;
       if (presentation.style.border)
          this._previousBorderStyle = presentation.style.border;
       presentation.style.border = "5px dashed blue";
@@ -515,7 +512,17 @@ class AuthorManager {
          Properties.s.editElementProperties(
             this._knots[this._knotSelected].content[el]);
    }
-
+
+   elementNew(topic) {
+      const elementType = MessageBus.extractLevel(topic, 3);
+      let newElement = Translator.objTemplates[elementType];
+      newElement.seq = this._knots[this._knotSelected].content[
+         this._knots[this._knotSelected].content.length-1].seq + 1;
+      this._knots[this._knotSelected].content.push(newElement);
+      Translator.instance.updateElementMarkdown(newElement);
+      MessageBus.ext.publish("control/knot/update");
+   }
+
    async knotUpdate() {
       // console.log(message);
       if (this._knotSelected != null) {
@@ -542,7 +549,7 @@ class AuthorManager {
          this._renderKnot();
          // Properties.s.editKnotProperties(this._knots[this._knotSelected],
          //                                 this._knotSelected);
-         this._activateEditDCCs();
+         this._collectEditableDCCs();
          /*
          document.querySelector("#trigger-knot-edit").image =
              "icons/icon-edit-knot.svg";

src/adonisjs/public/dccs/components/dcc-dialog.js

@@ -10,6 +10,10 @@ class DCCTalk extends DCCVisual {
    }
 
    async connectedCallback() {
+      this._speech = (this.hasAttribute("speech")) ? this.speech : this.innerHTML;
+      console.log("=== speech ===");
+      console.log(this._speech);
+
       if (MessageBus.page.hasSubscriber("dcc/request/talk-sequence")) {
          let sequencem = await MessageBus.page.request("dcc/request/talk-sequence");
          this.sequence = sequencem.message;
@@ -83,20 +87,18 @@ class DCCTalk extends DCCVisual {
             image.setAttributeNS("http://www.w3.org/1999/xlink", "href",
                   "images/" + this.character.replace(/ /igm, "_").toLowerCase() + ".png");
 
-         if (this.hasAttribute("speech")) {
-            let speech = this._injectTalkElement("#talk-speech");
-            if (speech != null)
-              speech.innerHTML = this.speech;
-         }
+         this._presentation = this._injectTalkElement("#talk-speech");
+         if (this._presentation != null)
+            this._presentation.innerHTML = this._speech;
       } else {
          let charImg = "images/" + this.character.toLowerCase()
                         .replace(/ /igm, "_") + ".png";
          let template = document.createElement("template");
 
-         const speech = (this.hasAttribute("speech")) ? this.speech : "";
+         // const speech = (this.hasAttribute("speech")) ? this.speech : "";
          template.innerHTML = DCCTalk.templateElements.replace("[image]",charImg)
                                                       .replace("[character]", this.character)
-                                                      .replace("[speech]", speech);
+                                                      .replace("[speech]", this._speech);
          this._shadow = this.attachShadow({mode: "open"});
          this._shadow.appendChild(template.content.cloneNode(true));
          this._presentation = this._shadow.querySelector("#presentation-dcc");

src/adonisjs/public/translator/README.md

@@ -130,7 +130,7 @@ This content is further converted to HTML by the compiler.
 ```
 {
     type:  "image"
-    alt:   <alt text>
+    alternative:   <alt text>
     path:  <image path>
     title: <image title>
 }
@@ -230,15 +230,27 @@ This content is further converted to HTML by the compiler.
 
 ## Talk Open
 ### Markdown to Object
-* Sentence: `:[character]:`
-* Expression: `^[ \t]*:[ \t]*(\w[\w \t]*):[ \t]*$`
+* Sentence:
+```
+:[character]:
+!\[alt-text\]([path] "[title]")
+```
+* Expression: `^[ \t]*:[ \t]*(\w[\w \t]*):[ \t]*(?:[\f\n\r][\n\r]?!\[([\w \t]*)\]\(([\w:.\/\?&#\-]+)[ \t]*(?:"([\w ]*)")?\))?[ \t]*$`
   * Group #1: character
+  * Group #1: character image - alt text
+  * Group #2: character image - path
+  * Group #3: character image - title
 ![talk Expression](expressions/talk-open.png)
 * Object:
 ```
 {
    type: "talk-open"
    character: <identification of the character>
+   image: {
+      alternative: <alt text>
+      path:  <image path>
+      title: <image title>
+   }
 }
 ```
 ### Object to HTML

src/adonisjs/public/translator/item-templates.js

@@ -12,7 +12,7 @@ talk:
 talkopen:
 `
 
-<dcc-talk id='dcc[seq]'[author] character='[character]'>
+<dcc-talk id='dcc[seq]'[author] character='[character]'[image][alt]>
 
 `,
 talkclose:
@@ -69,4 +69,23 @@ image:
 option:
 `* {label}{rule}-> {target}`
 };
+
+Translator.objTemplates = {
+text: {
+   type: "text",
+   content: "Type your text here"
+},
+image: {
+   type: "image",
+   alternative: "Image",
+   path: "../templates/basic/images/landscape.svg",
+   title: "Image"
+},
+option: {
+   type: "option",
+   subtype: "*",
+   label: "Button",
+   target: "Target"
+}
+};
 })();