Refactor JS API

pylover · Aug 19, 2021 · bdcf67f · bdcf67f
1 parent c556ec1
commit bdcf67f
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 55 deletions.
diff --git a/Makefile b/Makefile
@@ -96,7 +96,7 @@ $(WEBCLINIC_BUILD)/adia.stdlib.js: \
 		--search-directory $(WEBCLINIC) \
 		--stdlib-directory $(WEBCLINIC_BUILD) \
 		--exclude check* \
-		--exclude test/* \
+		--exclude build/* \
 		--filename adia.stdlib.js
 
 $(WEBCLINIC_BUILD)/tests:

diff --git a/adia/__init__.py b/adia/__init__.py
@@ -11,7 +11,7 @@
 from .renderer import Renderer
 
 
-__version__ = '2.2.0'
+__version__ = '3.0.0'
 __all__ = [
     'Diagram',
     'SequenceDiagram',

diff --git a/documentation/javascriptapi.rst b/documentation/javascriptapi.rst
@@ -59,15 +59,17 @@ as the below:
    <meta charset="utf-8">
 
    <link rel="stylesheet" href="global.css">
-
+   
    <!-- One-By-One  -->
    <script type="text/javascript" src="brython.js"></script>
    <script type="text/javascript" src="adia.stdlib.js"></script>
    <script type="text/javascript" src="adia.js"></script>
 
    <!-- OR Bundle -->
+   <!--
    <script type="text/javascript" src="adia.bundle.js"></script>
-
+   -->
+
    <!-- Worker -->
    <script 
      type="text/python" 
@@ -131,19 +133,22 @@ as the below:
    let versionArea = document.getElementById('version');
    
    /* Create ADia instance */
-   const aDia = new ADia({
-     delay: 10,  // ms
-     init: (aDia) => versionArea.innerText = `ADia version: ${aDia.__version__}`,
-     input: () => sourceArea.value,
-     clean: () => {
-       errorArea.value = '';
-       targetArea.value = '';
-     },
-     success: dia => targetArea.value = dia,
-     error: msg => errorArea.value = msg,
-     status: state => statusArea.innerText = state
+   window.aDia.delay = 10
+   window.aDia.addHook('init', (aDia) => {
+     versionArea.innerText = `ADia version: ${aDia.__version__}`
    });
    
+   window.aDia.input =  () => sourceArea.value
+   window.aDia.addHook('result', () => {
+     errorArea.value = '';
+     targetArea.value = '';
+   });
+   
+   window.aDia.addHook('success', (aDia, dia) => targetArea.value = dia)
+   window.aDia.addHook('error', (aDia, err) => errorArea.value = msg)
+   window.aDia.addHook('status', (aDia, state) => statusArea.innerText = state)
+   
+   
    const go = aDia.go.bind(aDia);
    window.addEventListener('load', go);
    sourceArea.addEventListener('input', go);
@@ -152,6 +157,7 @@ as the below:
    </body>
    </html>
 
+
 The ``ADia`` class will listen for changes of source element and inform you
 by provided callbacks.
 

diff --git a/webclinic/adia.js b/webclinic/adia.js
@@ -1,41 +1,54 @@
 class ADia {
   delay = 0; // ms
+  loadingProbeInterval = 300; // ms
+  input;
 
-  // new, inititializing, processing, idle
-  #_status = 'new';
+  // inititializing, processing, idle
+  #_status = 'initializing';
 
   /* Private Fields */
   #_delayTimer;
   #_source;
 
-  constructor(options) {
-    this.cleanCallback = options.clean;
-    this.successCallback = options.success;
-    this.errorCallback = options.error;
-    this.statusCallback = options.status;
-    this.initCallback = options.init;
-    this.input = options.input;
-    if (options.delay != undefined) {
-      this.delay = options.delay;
+  constructor() {
+    this.hooks = {
+      result: [],
+      success: [],
+      error: [],
+      status: [],
+      init: [],
     }
-    if (options.loadingProbeInterval != undefined) {
-      this.loadingProbeInterval = options.loadingProbeInterval;
+    this.ensureADiaAPI();
+  }
+
+  addHook(name, func) {
+    let handlers = this.hooks[name]
+    if (!handlers.includes(func)) {
+      handlers.push(func)
     }
   }
 
+  hook(name, data) {
+    let handlers = this.hooks[name]
+    if (handlers == undefined) {
+      throw `Invalid hook name: ${name}`;
+    }
+
+    for (var i = 0; i < handlers.length; i++) {
+      handlers[i](this, data);
+    }
+  }
+
   get status() {
     return this.#_status;
   }
 
   set status(newValue) {
     this.#_status = newValue;
-    if (this.statusCallback) {
-      this.statusCallback(newValue);
-    }
+    this.hook('status', newValue);
   }
 
   ensureADiaAPI() {
-    this.status = 'initializing'
     if (window.__adia__ == undefined) {
       setTimeout(this.ensureADiaAPI.bind(this), this.loadingProbeInterval);
       return;
@@ -46,6 +59,9 @@ class ADia {
   }
 
   send() {
+    if (this.input == undefined) {
+      return;
+    }
     let newSource = this.input();
     if (this.#_source == newSource) {
       /* Do Nothing */
@@ -59,9 +75,6 @@ class ADia {
 
   go() {
     switch (this.status) {
-      case 'new':
-        this.ensureADiaAPI();
-        break;
       case 'idle':
         if (this.delay > 0) {
           clearTimeout(this.#_delayTimer);
@@ -80,19 +93,20 @@ class ADia {
   onResult(result) {
     if (result.version != undefined) {
       this.__version__ = result.version
-      this.status = 'idle';
-      this.initCallback(this)
-      return
-    }
-
-    this.cleanCallback();
-    if (result.error) {
-      this.errorCallback(result.error);
+      this.hook('init')
     }
     else {
-      this.successCallback(result.diagram);
+      this.hook('result', result)
+      if (result.error) {
+        this.hook('error', result.error)
+      }
+      else {
+        this.hook('success', result.diagram)
+      }
     }
     this.status = 'idle';
     this.go();
   }
 }
+
+window.aDia = new ADia();
diff --git a/webclinic/index.html b/webclinic/index.html
@@ -78,19 +78,22 @@
 let versionArea = document.getElementById('version');
 
 /* Create ADia instance */
-const aDia = new ADia({
-  delay: 10,  // ms
-  init: (aDia) => versionArea.innerText = `ADia version: ${aDia.__version__}`,
-  input: () => sourceArea.value,
-  clean: () => {
-    errorArea.value = '';
-    targetArea.value = '';
-  },
-  success: dia => targetArea.value = dia,
-  error: msg => errorArea.value = msg,
-  status: state => statusArea.innerText = state
+window.aDia.delay = 10
+window.aDia.addHook('init', (aDia) => {
+  versionArea.innerText = `ADia version: ${aDia.__version__}`
 });
 
+window.aDia.input =  () => sourceArea.value
+window.aDia.addHook('result', () => {
+  errorArea.value = '';
+  targetArea.value = '';
+});
+
+window.aDia.addHook('success', (aDia, dia) => targetArea.value = dia)
+window.aDia.addHook('error', (aDia, err) => errorArea.value = msg)
+window.aDia.addHook('status', (aDia, state) => statusArea.innerText = state)
+
+
 const go = aDia.go.bind(aDia);
 window.addEventListener('load', go);
 sourceArea.addEventListener('input', go);