@zenuml/core 2.0.20 → 2.0.22

package/docs/async-vs-sync-parser-rules.md

@@ -1,4 +1,5 @@
 Async:
+
 ```
 asyncMessage
  : source ARROW target COL content
@@ -17,7 +18,9 @@ target
  : ID | STRING
  ;
 ```
+
 Sync:
+
 ```
 message
  : messageBody (SCOL | braceBlock)?
@@ -52,8 +55,8 @@ assignment
  : (type? assignee ASSIGN)
  ;
 ```
-First of all, `from->to` and `source->target` are very similar. Let's first merge them.
 
+First of all, `from->to` and `source->target` are very similar. Let's first merge them.
 
       if(!this.rightToLeft) {
         if(this.outOfBand) {
@@ -75,4 +78,4 @@ First of all, `from->to` and `source->target` are very similar. Let's first merg
         // to   origin
         const dist = this.distance2(this.to, this.origin)
         return (dist - indent - fragmentOff) * (-1)
-      }
+      }

package/docs/divider-parser-allow-spaces.md

@@ -6,6 +6,7 @@ The `divider` statement is used to separate the sequence of statements into logi
 groups.
 
 For example, a HTTPS sequence can be separated into three logical groups:
+
 1. Connect establishment
 2. TLS handshake
 3. HTTP request/response
@@ -32,7 +33,6 @@ Server->Client: HTTP Response
 
 ## The Lexer
 
-
 ## `divider` is a statement
 
-`divider` is treated as a statement as any other messages. 
+`divider` is treated as a statement as any other messages.

package/docs/highlighting-messages.md

@@ -1,13 +1,14 @@
 Since 1.0.63
 
 # Highlighting messages
+
 The renderer will highlight an `Interaction` based on the value of `cursor` in the store.
 For example, for DSL `A.x B.y`, if `cursor` is between [0, 3], `A.x` is highlighted in
-the diagram; if `cursor` is between [4, 7], `B.y` is highlighted. 
+the diagram; if `cursor` is between [4, 7], `B.y` is highlighted.
 
 ## What elements can be highlighted?
 
-Theoretically, every element can be highlighted. The logic is different for 
+Theoretically, every element can be highlighted. The logic is different for
 different types.
 
 We will focus on messages: Creation and Messages (Sync & Async).
@@ -15,32 +16,36 @@ We will focus on messages: Creation and Messages (Sync & Async).
 ### Creation
 
 Creations parser definition is:
+
 ```
 creationBody (SCOL | braceBlock)?
 ```
 
-We will highlight the creation call and assignment but NOT the `braceBlock`. 
+We will highlight the creation call and assignment but NOT the `braceBlock`.
 The triggering cursor must be in between `creationBody`.
 
 ### Message
 
 Message parser definition is:
+
 ```
 messageBody (SCOL | braceBlock)?
 ```
+
 We will highlight the message call and assignment but NOT the `braceBlock`.
 The triggering cursor must be in between `messageBody`.
 
 ### Async Message
 
 Async message parser definition is:
+
 ```
 source ARROW target COL content
-``` 
+```
+
 We will highlight the whole message call.
 The triggering curso must bee in between `source ARROW target COL content`.
 
-
 ## Implementation
 
 The global store has a state `cursor`. Each component check whether this cursor

package/docs/inherited-vs-provided-from.md

@@ -1,4 +1,5 @@
 What we should be looking at is `statement` which can be one of:
+
 1. Alt/Par/Opt/Loop
 1. Message
 1. Creation
@@ -9,20 +10,22 @@ we need to find its parent message or creation and get their owners.
 
 There are two ways to decide where the message is from.
 One way is to deduce from its parent context - inherited from;
-the other way is to explicitly define it from its own context - 
+the other way is to explicitly define it from its own context -
 provided from.
 
 ## Inherited
 
 Sync message
+
 ```
 A.m1 {
   // m2 has an "inherited from" as `A`
-  m2  
+  m2
 }
 ```
 
 Async message
+
 ```
 A.m1 {
   // m2 has an "inherited from" as `A`
@@ -33,15 +36,17 @@ A.m1 {
 ## Provided
 
 Sync message
+
 ```
 A.m1 {
   // m2 has a "provided from" as `B`
   B->C.m2
-  
+
 }
 ```
 
 Async message
+
 ```
 A.m1 {
   // m2 has a "provided from" as `B`
@@ -49,7 +54,7 @@ A.m1 {
 }
 ```
 
-It is allowed to have a `provided from` that equals to its 
+It is allowed to have a `provided from` that equals to its
 `inherited from`.
 
 # Discussion

package/docs/participants-function.md

@@ -21,7 +21,5 @@ So `onParticipant` must overwrite that.
 `getInheritedFrom` function. It will be convenient that it returns
 `from` directly.
 
-
- However, we also need the `InheritedFrom` and `ProvidedFrom`
-  to calculate the translateX for Interactions.
-
+However, we also need the `InheritedFrom` and `ProvidedFrom`
+to calculate the translateX for Interactions.

package/docs/responsive-participant-margin.md

@@ -2,7 +2,7 @@ This is to adjust the margin of the lifelines based on the message length.
 For example, if the message is long, the margin of the lifelines will be increased.
 
 A.method() {
-  B.aLongMethodName_and_we_want_to_adjust_the_margin_of_the_lifelines_based_on_the_message_length();
+B.aLongMethodName_and_we_want_to_adjust_the_margin_of_the_lifelines_based_on_the_message_length();
 }
 
 # Strategy A
@@ -16,7 +16,7 @@ Instead of rendering message layer based on lifeline's position, we render
 the lifelines based on message occurrence's positions.
 
 There is a problem of this strategy. If we pre-declare the order of the participants,
- for example, `B A A.method()`, we have to render B on the left of A.
+for example, `B A A.method()`, we have to render B on the left of A.
 
 So maybe, we could implement it in two rounds. First, we define the order of participants.
 Then we calculate the position of the lifelines based on the order.

package/docs/starter.md

@@ -1,8 +1,9 @@
 There are two ways for the context to get declared Starter:
+
 1. @Starter(X)
 2. X->A:m or X->A.m
 
-As long as the starter's name is not \_STARTER_, it is treated as declared.
+As long as the starter's name is not \_STARTER\_, it is treated as declared.
 
 Then we check whether the Starter is a declared participant by its `explicit`
 field.

package/docs/testing-minified-lib.md

@@ -1,29 +1,27 @@
 ```html
-<meta charset="utf-8">
+<meta charset="utf-8" />
 <title>vue-sequence demo</title>
 <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
 <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
 <script src="./vue-sequence.umd.min.js"></script>
 
-<link rel="stylesheet" href="./vue-sequence.css">
+<link rel="stylesheet" href="./vue-sequence.css" />
 
 <div id="mounting-point"></div>
 
 <script>
-
-  window.addEventListener("load", function(event) {
-    console.log("window loaded");
+  window.addEventListener('load', function (event) {
+    console.log('window loaded');
     Vue.use(Vuex);
     let { SeqDiagram, Store } = window['vue-sequence'];
     let storeConfig = Store();
-    storeConfig.state.code = "A.method";
-    Vue.component("seq-diagram", SeqDiagram);
+    storeConfig.state.code = 'A.method';
+    Vue.component('seq-diagram', SeqDiagram);
     window.app = new Vue({
       el: document.getElementById('mounting-point'),
       store: new Vuex.Store(storeConfig),
-      render: (h) => h('seq-diagram')
+      render: (h) => h('seq-diagram'),
     });
   });
 </script>
-
 ```

package/docs/why-we-publish-embed-view-to-github-pages.md

@@ -2,14 +2,15 @@ We have got two options to host the embed view: on GitHub pages or
 Cloudflare pages (or other third party).
 
 The benefit of Cloudflare pages is:
+
 1. It offers multiple versions. Basically every publish will generate
    a standalone url with current commit hash.
 2. It does not require commit the `dist` folder to the repository.
 
 The benefit of using GitHub Pages:
+
 1. It will definitely be easier to set up for collaborators on GitHub,
    because they do not need a Cloudflare account.
 
 Easy collaboration is more important to us, so we will host this on
 GitHub Pages.
-

package/docs/width-translate-and-offsets.md

@@ -4,11 +4,14 @@ Interaction width, in the most simple scenario, is defined by the distance of tw
 `from` and `to`.
 
 ## Simple case
+
 ### Width
-In the following 
-Each '◻' is a pixel 
+
+In the following
+Each '◻' is a pixel
+
 ```
-  |   A   |       |   B   | 
+  |   A   |       |   B   |
 1 2 3 4 5 6 7 8 9 a b c d e f g h
 ◻ ◻ ◻ ◻ ◻ ◻ ◻ ◻ ◻ ◻ ◻ ◻ ◻ ◻ ◻ ◻ ◻
 ```
@@ -20,10 +23,13 @@ A has left as 2, center as 4 and right as 6; B has a/c/e. For Interaction `m2` i
 the width should be 4 to c (inclusive) that is 9 (`c - 4 + 1`). This is `distance(from, to)`.
 
 #### 2. Message width
+
 Message width should be 100% content + interactionBorderWidthx2 - ((OccurrenceWidth - 1)/2)x2 - interactionBorderWidth.
 
 ### Left
+
 #### 1. Message left
+
 ```
 100% // content width of interaction
 + InteractionBorderWidth x 2
@@ -31,24 +37,26 @@ Message width should be 100% content + interactionBorderWidthx2 - ((OccurrenceWi
 ```
 
 #### 2. Self Occurrence Left
+
 ```
 left: width of InteractionBorderWidth
 ```
+
 ### Offset
+
 There are a few ways to implement offset, we have to combine them.
 
 #### 1. Padding of occurance
+
 > Suppose the width of an occurance is 5 (border width 1x2, content 3)
 
 To aligh Occurance's center, we need to set its left. An occurance
 at `left: 100%` will be from c to g. Note that the 100% only consider
 the content width.
 
- To align its center to c, we
+To align its center to c, we
 have to move back by 3 (`(occuranceWidth-1)/2 - interactionBorderWidth - LifelineWidth`).
 
 occurance must have a padding of 1 that is (width - boarder x 2 - 1) / 2.
 
 ## Self call indent
-
-

package/embed.html

@@ -1,43 +1,41 @@
 <!DOCTYPE html>
 <html style="height: 100%; width: 100%">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <meta name="application-name" content="ZenUML">
-    <meta name="apple-mobile-web-app-title" content="ZenUML">
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="application-name" content="ZenUML" />
+    <meta name="apple-mobile-web-app-title" content="ZenUML" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>ZenUML</title>
-    <meta name="Description" content="ZenUML is a free online diagram application for generating sequence diagrams from text.">
-    <meta name="Keywords" content="diagram, online, sequence diagram, uml">
+    <meta
+      name="Description"
+      content="ZenUML is a free online diagram application for generating sequence diagrams from text."
+    />
+    <meta name="Keywords" content="diagram, online, sequence diagram, uml" />
   </head>
   <body style="height: 100%; width: 100%">
     <noscript>
-      <strong>We're sorry but ZenUML doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but ZenUML doesn't work properly without JavaScript enabled. Please enable it
+        to continue.</strong
+      >
     </noscript>
     <script>
       (() => {
         async function handle_message(ev) {
           let { action, cmd_id } = ev.data;
-          const send_message = (payload) => parent.postMessage( { ...payload }, ev.origin);
+          const send_message = (payload) => parent.postMessage({ ...payload }, ev.origin);
           const send_reply = (payload) => send_message({ ...payload, cmd_id });
           const send_ok = () => send_reply({ action: 'cmd_ok' });
-          const send_error = (message, stack) => send_reply({ action: 'cmd_error', message, stack });
+          const send_error = (message, stack) =>
+            send_reply({ action: 'cmd_error', message, stack });
 
           if (action === 'eval') {
             try {
-              let { code, theme, style, css } = ev.data.args
-              await zenUml.render(code, theme)
-              send_ok()
-            } catch (e) {
-              send_error(e.message, e.stack);
-            }
-          }
-
-          if (action === 'get_png') {
-            try {
-              let png = await zenUml.getPng()
-              send_reply({ action: 'cmd_png', png })
+              let { code, theme, style, css } = ev.data.args;
+              await zenUml.render(code, theme);
+              send_ok();
             } catch (e) {
               send_error(e.message, e.stack);
             }
@@ -46,7 +44,7 @@
           if (action === 'catch_clicks') {
             try {
               const top_origin = ev.origin;
-              document.body.addEventListener('click', event => {
+              document.body.addEventListener('click', (event) => {
                 if (event.which !== 1) return;
                 if (event.metaKey || event.ctrlKey || event.shiftKey) return;
                 if (event.defaultPrevented) return;
@@ -56,7 +54,12 @@
                 while (el && el.nodeName !== 'A') el = el.parentNode;
                 if (!el || el.nodeName !== 'A') return;
 
-                if (el.hasAttribute('download') || el.getAttribute('rel') === 'external' || el.target) return;
+                if (
+                  el.hasAttribute('download') ||
+                  el.getAttribute('rel') === 'external' ||
+                  el.target
+                )
+                  return;
 
                 event.preventDefault();
 
@@ -71,7 +74,7 @@
                 window.open(el.href, '_blank');
               });
               send_ok();
-            } catch(e) {
+            } catch (e) {
               send_error(e.message, e.stack);
             }
           }
@@ -82,19 +85,19 @@
         window.onerror = function (msg, url, lineNo, columnNo, error) {
           if (msg.includes('module specifier “vue”')) {
             // firefox only error, ignore
-            return false
+            return false;
           }
           try {
             parent.postMessage({ action: 'error', value: error }, '*');
           } catch (e) {
             parent.postMessage({ action: 'error', value: msg }, '*');
           }
-        }
+        };
 
-        window.addEventListener("unhandledrejection", event => {
+        window.addEventListener('unhandledrejection', (event) => {
           if (event.reason.message.includes('Cross-origin')) {
-            event.preventDefault()
-            return
+            event.preventDefault();
+            return;
           }
           try {
             parent.postMessage({ action: 'unhandledrejection', value: event.reason }, '*');
@@ -108,34 +111,39 @@
         ['clear', 'log', 'info', 'dir', 'warn', 'error', 'table'].forEach((level) => {
           const original = console[level];
           console[level] = (...args) => {
-            const msg = String(args[0])
+            const msg = String(args[0]);
             if (
-                msg.includes('You are running a development build of Vue') ||
-                msg.includes('You are running the esm-bundler build of Vue')
+              msg.includes('You are running a development build of Vue') ||
+              msg.includes('You are running the esm-bundler build of Vue')
             ) {
-              return
+              return;
             }
             const stringifiedArgs = stringify(args);
-            if (
-                previous.level === level &&
-                previous.args &&
-                previous.args === stringifiedArgs
-            ) {
-              parent !== window && parent.postMessage({ action: 'console', level, duplicate: true }, '*');
+            if (previous.level === level && previous.args && previous.args === stringifiedArgs) {
+              parent !== window &&
+                parent.postMessage({ action: 'console', level, duplicate: true }, '*');
             } else {
               previous = { level, args: stringifiedArgs };
 
               try {
                 parent !== window && parent.postMessage({ action: 'console', level, args }, '*');
               } catch (err) {
-                parent !== window && parent.postMessage({ action: 'console', level, args: args.map(a => {
-                    return a instanceof Error ? a.message : String(a)
-                  }) }, '*');
+                parent !== window &&
+                  parent.postMessage(
+                    {
+                      action: 'console',
+                      level,
+                      args: args.map((a) => {
+                        return a instanceof Error ? a.message : String(a);
+                      }),
+                    },
+                    '*'
+                  );
               }
             }
 
             original(...args);
-          }
+          };
         });
         [
           { method: 'group', action: 'console_group' },
@@ -150,7 +158,6 @@
           };
         });
 
-
         const original_trace = console.trace;
 
         console.trace = (...args) => {
@@ -159,7 +166,6 @@
           original_trace(...args);
         };
 
-
         function stringify(args) {
           try {
             return JSON.stringify(args);
@@ -167,18 +173,12 @@
             return null;
           }
         }
-      })()
-
+      })();
     </script>
 
-
-    <div id="diagram" class="diagram" style="text-align: center">
-      <pre class="zenuml">
-
-      </pre>
+    <div id="diagram" class="diagram">
+      <pre class="zenuml"></pre>
     </div>
     <script type="module" src="src/main.ts"></script>
-
-
   </body>
 </html>

package/index.html

@@ -1,25 +1,39 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
-    <link rel='preload stylesheet' as='style' href='https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap'>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="preload stylesheet"
+      as="style"
+      href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap"
+    />
     <!--    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap'>-->
-    <style id="zenumlstyle">/* Prefix your CSS rules with `#diagram` */
-    /*@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');*/
-    /*!*@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap");*!*/
-
-    /*#diagram1 .sequence-diagram {*/
-    /*    font-family: "Kalam", serif;*/
-    /*}*/
+    <style id="zenumlstyle">
+      /* Prefix your CSS rules with `#diagram` */
+      /*@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');*/
+      /*!*@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap");*!*/
 
+      /*#diagram1 .sequence-diagram {*/
+      /*    font-family: "Kalam", serif;*/
+      /*}*/
     </style>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="stylesheet"
-          href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css" crossOrigin="anonymous">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css"
+      crossorigin="anonymous"
+    />
     <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.1/lib/codemirror.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/codemirror.min.css" crossOrigin="anonymous" integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/codemirror.min.css"
+      crossorigin="anonymous"
+      integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
     <title>ZenUML Core Demo</title>
     <style>
       .zenuml .CodeMirror {
@@ -35,20 +49,27 @@
     editor and other layouts work properly.-->
   <body class="zenuml">
     <noscript>
-      <strong>We're sorry but vue-sequence doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but vue-sequence doesn't work properly without JavaScript enabled. Please
+        enable it to continue.</strong
+      >
     </noscript>
     <div class="m-1 grid grid-cols-6" id="diagram1">
       <div class="col-span-2">
-        <textarea id="text" class="col-span-1 m-1 border-2" cols="30" rows="200" oninput="updateCode(this.value)"></textarea>
+        <textarea
+          id="text"
+          class="col-span-1 m-1 border-2"
+          cols="30"
+          rows="200"
+          oninput="updateCode(this.value)"
+        ></textarea>
       </div>
       <div class="col-span-4">
-<pre class="zenuml">
-
-</pre>
+        <pre class="zenuml"></pre>
       </div>
     </div>
     <script>
-      const editor = CodeMirror.fromTextArea(document.getElementById("text"), {
+      const editor = CodeMirror.fromTextArea(document.getElementById('text'), {
         lineNumbers: true,
         singleCursorHeightPerLine: false,
       });
@@ -64,12 +85,17 @@
         }
       }
 
-      editor.on("change", function(cm) {
-        waitUntil( () => {return window.zenUml}, () => {
-          window.zenUml.render(cm.getValue(), 'theme-default').then(r => {
-            window.parentLogger.child({name: 'index.html'}).debug('render resolved', r);
-          });
-        });
+      editor.on('change', function (cm) {
+        waitUntil(
+          () => {
+            return window.zenUml;
+          },
+          () => {
+            window.zenUml.render(cm.getValue(), 'theme-default').then((r) => {
+              window.parentLogger.child({ name: 'index.html' }).debug('render resolved', r);
+            });
+          }
+        );
         // write cm.getValue() to localStorage
         localStorage.setItem('zenuml-cm-code', cm.getValue());
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenuml/core",
-  "version": "2.0.20",
+  "version": "2.0.22",
   "private": false,
   "repository": {
     "url": "https://github.com/ZenUml/core.git"
@@ -33,7 +33,7 @@
     "git:forget": "git rm -r --cached . && git add . && git commit -m \"Forget all ignored files\"",
     "test:specs": "echo \"Error: test:specs is not supported\""
   },
-  "main": "./dist/zenuml-core.mjs",
+  "main": "./dist/zenuml.esm.mjs",
   "types": "./types/index.d.ts",
   "dependencies": {
     "@types/assert": "^1.5.4",
@@ -97,8 +97,7 @@
     },
     "extends": [
       "plugin:vue/essential",
-      "eslint:recommended",
-      "@vue/typescript"
+      "eslint:recommended"
     ],
     "rules": {},
     "parserOptions": {