graph editor

DrawIOWrapper/README.md

@@ -1,24 +0,0 @@
-# DrawIOWrapper
-This is an example project, generated by AntOS Development Kit
-
-## Howto
-
-1. Open the project.apj file with AntOSDK (simply double Click on it)
-2. Modify the UI in *assets/scheme.html*
-3. Modify application code in *coffees/main.coffee*
-4. Modify CSS style in *css/main.css*
-5. Other files need to be copied: put in to assets
-
-## Set up build target
-
-Click **Menu> Build > Build Option** or simply hit **ALT-Y**
-
-In the build options dialog, add or remove files that need to be
-included into the build
-
-Click **Save**
-
-## Build application
-* To build: **Menu > Build > Build** or **ALT-C**
-* To build and run: **Menu > Build > Build and Run** or **CTRL-R**
-* To release: **Menu > Build > Build release** or **ALT-P**

DrawIOWrapper/assets/scheme.html

@@ -1,5 +0,0 @@
-<afx-app-window apptitle="DrawIOWrapper" width="600" height="500" data-id="DrawIOWrapper">
-    <afx-hbox >
-         <iframe src="https://www.draw.io" ></iframe> 
-    </afx-hbox>
-</afx-app-window>

DrawIOWrapper/build/debug/README.md

@@ -1,24 +0,0 @@
-# DrawIOWrapper
-This is an example project, generated by AntOS Development Kit
-
-## Howto
-
-1. Open the project.apj file with AntOSDK (simply double Click on it)
-2. Modify the UI in *assets/scheme.html*
-3. Modify application code in *coffees/main.coffee*
-4. Modify CSS style in *css/main.css*
-5. Other files need to be copied: put in to assets
-
-## Set up build target
-
-Click **Menu> Build > Build Option** or simply hit **ALT-Y**
-
-In the build options dialog, add or remove files that need to be
-included into the build
-
-Click **Save**
-
-## Build application
-* To build: **Menu > Build > Build** or **ALT-C**
-* To build and run: **Menu > Build > Build and Run** or **CTRL-R**
-* To release: **Menu > Build > Build release** or **ALT-P**

DrawIOWrapper/build/debug/main.js

@@ -1,15 +0,0 @@
-(function() {
-  var DrawIOWrapper;
-
-  DrawIOWrapper = class DrawIOWrapper extends this.OS.GUI.BaseApplication {
-    constructor(args) {
-      super("DrawIOWrapper", args);
-    }
-
-    main() {}
-
-  };
-
-  this.OS.register("DrawIOWrapper", DrawIOWrapper);
-
-}).call(this);

DrawIOWrapper/build/debug/package.json

@@ -1,13 +0,0 @@
-{
-    "app":"DrawIOWrapper",
-    "name":"DrawIOWrapper",
-    "description":"",
-    "info":{
-        "author": "",
-        "email": ""
-    },
-    "version":"0.0.1-a",
-    "category":"Other",
-    "iconclass":"fa fa-adn",
-    "mimes":["none"]
-}

DrawIOWrapper/build/debug/scheme.html

@@ -1,5 +0,0 @@
-<afx-app-window apptitle="DrawIOWrapper" width="600" height="500" data-id="DrawIOWrapper">
-    <afx-hbox >
-         <iframe src="https://www.draw.io" ></iframe> 
-    </afx-hbox>
-</afx-app-window>

DrawIOWrapper/coffees/main.coffee

@@ -1,7 +0,0 @@
-class DrawIOWrapper extends this.OS.GUI.BaseApplication
-    constructor: ( args ) ->
-        super "DrawIOWrapper", args
-    
-    main: () ->
-
-this.OS.register "DrawIOWrapper", DrawIOWrapper

DrawIOWrapper/package.json

@@ -1,13 +0,0 @@
-{
-    "app":"DrawIOWrapper",
-    "name":"DrawIOWrapper",
-    "description":"",
-    "info":{
-        "author": "",
-        "email": ""
-    },
-    "version":"0.0.1-a",
-    "category":"Other",
-    "iconclass":"fa fa-adn",
-    "mimes":["none"]
-}

DrawIOWrapper/project.apj

@@ -1,8 +0,0 @@
-{
-    "name": "DrawIOWrapper",
-    "root": "home://workspace/DrawIOWrapper",
-    "css": [],
-    "javascripts": [],
-    "coffees": ["coffees/main.coffee"],
-    "copies": ["assets/scheme.html", "package.json", "README.md"]
-}

GraphEditor/assets/scheme.html

@@ -9,6 +9,6 @@
                     <afx-button data-id="btn-reset" iconclass="fa fa-square-o"></afx-button>
                 </div>     
             </div>
-            <canvas data-id="offscreen" data-width="0" style="display:none" ></canvas>
+            <canvas data-id="offscreen" data-width="0" style="display:block;" ></canvas>
     </afx-hbox>
 </afx-app-window>

GraphEditor/build/debug/main.css

@@ -4,6 +4,7 @@ afx-app-window[data-id="graph_editor_win"] div[data-id="preview"]
     display: flex;
     align-items: center;
     justify-content: center;
+    background-color: white;
 }
 afx-app-window[data-id="graph_editor_win"] afx-button button
 {

GraphEditor/build/debug/package.json

@@ -7,7 +7,7 @@
         "email": "xsang.le@gmail.com",
         "licences": "GPLv3"
     },
-    "version":"0.0.4-a",
+    "version":"0.0.5-a",
     "category":"Office",
     "iconclass": "fa fa-sitemap",
     "mimes":["text/.*graphviz"]

GraphEditor/build/debug/scheme.html

@@ -9,6 +9,6 @@
                     <afx-button data-id="btn-reset" iconclass="fa fa-square-o"></afx-button>
                 </div>     
             </div>
-            <canvas data-id="offscreen" data-width="0" style="display:none" ></canvas>
+            <canvas data-id="offscreen" data-width="0" style="display:block;" ></canvas>
     </afx-hbox>
 </afx-app-window>

GraphEditor/coffees/main.coffee

@@ -15,76 +15,76 @@
 
 # You should have received a copy of the GNU General Public License
 #along with this program. If not, see https://www.gnu.org/licenses/.
-class GraphEditor extends this.OS.GUI.BaseApplication
+class GraphEditor extends this.OS.application.BaseApplication
     constructor: ( args ) ->
         super "GraphEditor", args
         
     main: () ->
-        me = @
+        
         #mermaid.initialize { startOnLoad: false }
         mermaid.initialize {
             theme: 'forest'
         }
-        @currfile = if @args and @args.length > 0 then @args[0].asFileHandler() else "Untitled".asFileHandler()
+        @currfile = if @args and @args.length > 0 then @args[0].path.asFileHandle() else "Untitled".asFileHandle()
         @currfile.dirty = false
         @datarea = @find "datarea"
         @preview = @find "preview"
         @btctn = @find "btn-container"
-        @.editor = ace.edit @datarea
+        ace.config.set("basePath", "/scripts/ace")
-        @.editor.setOptions {
+        @editor = ace.edit @datarea
+        @editor.setOptions {
             enableBasicAutocompletion: true,
             enableLiveAutocompletion: true,
-            fontSize: "10pt"
+            fontSize: "11pt"
         }
-        #@.editor.completers.push { getCompletions: ( editor, session, pos, prefix, callback ) -> }
         @editor.getSession().setUseWrapMode true
         @editor.session.setMode "ace/mode/text"
         @editor.setTheme "ace/theme/monokai"
-        @editor.on "input", () ->
+        @editor.on "input", () =>
-            if me.editormux
+            if @editormux
-                me.editormux = false
+                @editormux = false
                 return false
-            if not me.currfile.dirty
+            if not @currfile.dirty
-                me.currfile.dirty = true
+                @currfile.dirty = true
 
 
-        if not me.currfile.basename
+        if not @currfile.basename
-            me.editormux = true
+            @editormux = true
-            me.editor.setValue GraphEditor.dummymermaid
+            @editor.setValue GraphEditor.dummymermaid
-            me.renderSVG false
+            @renderSVG false
     
         
-        @editor.container.addEventListener "keydown", (e) ->
+        @editor.container.addEventListener "keydown", (e) =>
-            me.renderSVG true if e.keyCode is 13
+            @renderSVG true if e.keyCode is 13
         , true
         
-        @bindKey "CTRL-R", () -> me.renderSVG false
+        @bindKey "CTRL-R", () => @renderSVG false
-        @bindKey "ALT-G", () -> me.export "SVG"
+        @bindKey "ALT-G", () => @export "SVG"
-        @bindKey "ALT-P", () -> me.export "PNG"
+        @bindKey "ALT-P", () => @export "PNG"
-        @bindKey "ALT-N", () -> me.actionFile "#{me.name}-New"
+        @bindKey "ALT-N", () => @actionFile "#{@name}-New"
-        @bindKey "ALT-O", () -> me.actionFile "#{me.name}-Open"
+        @bindKey "ALT-O", () => @actionFile "#{@name}-Open"
-        @bindKey "CTRL-S", () -> me.actionFile "#{me.name}-Save"
+        @bindKey "CTRL-S", () => @actionFile "#{@name}-Save"
-        @bindKey "ALT-W", () -> me.actionFile "#{me.name}-Saveas"
+        @bindKey "ALT-W", () => @actionFile "#{@name}-Saveas"
-        @bindKey "CTRL-M", () -> me.svgToCanvas(()->)
+        @bindKey "CTRL-M", () => @svgToCanvas(()->)
 
-        @on "hboxchange", () ->
+        @on "hboxchange", () =>
-            me.editor.resize()
+            @editor.resize()
-            me.calibrate()
+            @calibrate()
-        @on "focus", () -> me.editor.focus()
+        @on "focus", () => @editor.focus()
-        (@find "btn-zoomin").set "onbtclick", (e) ->
+        (@find "btn-zoomin").onbtclick = (e) =>
-            me.pan.zoomIn() if me.pan
+            @pan.zoomIn() if @pan
-        (@find "btn-zoomout").set "onbtclick", (e) ->
+        (@find "btn-zoomout").onbtclick = (e) =>
-            me.pan.zoomOut() if me.pan
+            @pan.zoomOut() if @pan
-        (@find "btn-reset").set "onbtclick", (e) ->
+        (@find "btn-reset").onbtclick = (e) =>
-            me.pan.resetZoom() if me.pan
+            @pan.resetZoom() if @pan
         
         @open @currfile
    
     menu: () ->
-        me = @
+        
         menu = [{
                 text: "__(File)",
-                child: [
+                nodes: [
                     { text: "__(New)", dataid: "#{@name}-New", shortcut: "A-N" },
                     { text: "__(Open)", dataid: "#{@name}-Open", shortcut: "A-O" },
                     { text: "__(Save)", dataid: "#{@name}-Save", shortcut: "C-S" },
@@ -92,47 +92,53 @@ class GraphEditor extends this.OS.GUI.BaseApplication
                     { text: "__(Render)", dataid: "#{@name}-Render", shortcut: "C-R" },
                     { 
                         text: "__(Export as)",
-                        child: [
+                        nodes: [
                             { text: "SVG", shortcut: "A-G" },
                             { text: "PNG", shortcut: "A-P" }
                         ],
-                        onmenuselect: (e) -> me.export e.item.data.text
+                        onchildselect: (e) => @export e.data.item.data.text
                     },
                 ],
-                onmenuselect: (e) -> me.actionFile e.item.data.dataid
+                onchildselect: (e) => @actionFile e.data.item.data.dataid
             }]
         menu
     open: (file) ->
         return if file.path is "Untitled"
-        me = @
+        
         file.dirty = false
-        file.read (d) ->
+        file.read().then (d) =>
-            me.currfile = file
+            @currfile = file
-            me.editormux = true
+            @editormux = true
-            me.currfile.dirty = false
+            @currfile.dirty = false
-            me.editor.setValue d
+            @editor.setValue d
-            me.scheme.set "apptitle", "#{me.currfile.basename}"
+            @scheme.apptitle = "#{@currfile.basename}"
-            me.renderSVG false
+            @renderSVG false
+        .catch (e) => @error e.toString(), e
     save: (file) ->
-        me = @
+        
-        file.write "text/plain", (d) ->
+        file.write "text/plain"
-            return me.error __("Error saving file {0}", file.basename) if d.error
+        .then (d) =>
             file.dirty = false
             file.text = file.basename
-            me.scheme.set "apptitle", "#{me.currfile.basename}"
+            @scheme.apptitle = "#{@currfile.basename}"
+        .catch (e) => @error e.toString(), e
 
     actionFile: (e) ->
-        me = @
+        
-        saveas = () ->
+        saveas = () =>
-            me.openDialog "FileDiaLog", (d, n) ->
+            @openDialog "FileDialog",{title: __("Save as"), file: @currfile }
-                me.currfile.setPath "#{d}/#{n}"
+                .then (d) =>
-                me.save me.currfile
+                    @currfile.setPath "#{d.file.path}/#{d.name}"
-            , __("Save as"), { file: me.currfile }
+                    @save @currfile
+                .catch (e) => @error e.toString(), e
+            
         switch e
             when "#{@name}-Open"
-                @openDialog "FileDiaLog", ( d, f ) ->
+                @openDialog "FileDialog", { title: __("Open file")}
-                    me.open "#{d}/#{f}".asFileHandler()
+                    .then ( d, f ) =>
-                , __("Open file")
+                        @open d.file.path.asFileHandle()
+                    .catch (e) => @error e.toString(), e
+                
             when "#{@name}-Save"
                 @currfile.cache = @editor.getValue()
                 return @save @currfile if @currfile.basename
@@ -141,61 +147,63 @@ class GraphEditor extends this.OS.GUI.BaseApplication
                 @currfile.cache = @editor.getValue()
                 saveas()
             when "#{@name}-Render"
-                me.renderSVG false
+                @renderSVG false
             when "#{@name}-New"
-                @currfile = "Untitled".asFileHandler()
+                @currfile = "Untitled".asFileHandle()
                 @currfile.cache = ""
                 @currfile.dirty = false
                 @editormux = true
                 @editor.setValue("")
     
     export: (t) ->
-        me = @
+        @openDialog "FileDialog", {title: __("Export as"), file: @currfile }
-        me.openDialog "FileDiaLog", (d, n) ->
+        .then (d) =>
-            fp = "#{d}/#{n}".asFileHandler()
+            fp = "#{d.file.path}/#{d.name}".asFileHandle()
             try
                 switch t
                     when "SVG"
-                        fp.cache = me.svgtext()
+                        fp.cache = @svgtext()
-                        fp.write "text/plain", (r) ->
+                        fp.write "text/plain"
-                            return me.error __("Cannot export to {0}: {1}", t, r.error) if r.error
+                            .then (r) =>
-                            me.notify __("File exported")
+                                @notify __("File exported")
+                            .catch (e) => @error __("Cannot export to {0}: {1}", t, e.toString()), e
                     when "PNG"
                         # toDataURL("image/png")
-                        me.svgToCanvas (canvas) ->
+                        @svgToCanvas (canvas) =>
                             try
                                 fp.cache = canvas.toDataURL "image/png"
-                                fp.write "base64", (r) ->
+                                fp.write "base64"
-                                    return me.error __("Cannot export to {0}: {1}", t, r.error) if r.error
+                                    .then (r) =>
-                                    me.notify __("File exported")
+                                        @notify __("File exported")
+                                    .catch (e) => @error __("Cannot export to {0}: {1}", t, e.toString()), e
                             catch e
-                                me.error __("Cannot export to PNG in this browser: {0}", e.message)
+                                @error __("Cannot export to PNG in this browser: {0}", e.toString()), e
             catch e
-                me.error __("Cannot export: {0}", e.message)
+                @error __("Cannot export: {0}", e.message), e
-        , __("Export as"), { file: me.currfile }
+        .catch (e) => @error e.toString(), e
         
        
     renderSVG: (silent) ->
-        me = @
+        
         id = Math.floor(Math.random() * 100000) + 1
         #if silent
         #    mermaid.parseError = (e, h) ->
         #else
         #    mermaid.parseError = (e, h) ->
-        #        me.error e
+        #        @error e
         text = @editor.getValue()
         try
             mermaid.parse text
         catch e
-            me.error __("Syntax error: {0}", e.str) if not silent
+            @error __("Syntax error: {0}", e.toString()), e if not silent
             return
-        mermaid.render "c#{id}", text, (text, f) ->
+        mermaid.render "c#{id}", text, (text, f) =>
-            me.preview.innerHTML = text
+            @preview.innerHTML = text
-            $(me.preview).append me.btctn
+            $(@preview).append @btctn
-            me.calibrate()
+            @calibrate()
-            svg = $(me.preview).children("svg")[0]
+            svg = $(@preview).children("svg")[0]
-            $(svg).attr("style", "")
+            #$(svg).attr("style", "")
-            me.pan = svgPanZoom svg, {
+            @pan = svgPanZoom svg, {
                 zoomEnabled: true,
                 controlIconsEnabled: false,
                 fit: true,
@@ -203,15 +211,15 @@ class GraphEditor extends this.OS.GUI.BaseApplication
                 minZoom: 0.1
             }
             #rd $($.parseHTML text).
-        , me.preview
+        , @preview
 
     svgtext: () ->
         svg = $(@preview).children("svg")[0]
-        $("g.label",svg).each (i) ->
+        $("g.label",svg).each (i) =>
             $(@)
                 .css("font-family","Ubuntu")
                 .css("font-size", "13px")
-        $("text", svg).each (j) ->
+        $("text", svg).each (j) =>
             $(@)
                 .css("font-family","Ubuntu")
                 .css("font-size", "13px")
@@ -219,14 +227,13 @@ class GraphEditor extends this.OS.GUI.BaseApplication
         return serializer.serializeToString(svg)
     
     svgToCanvas: (f) ->
-        me = @
         img = new Image()
         svgStr = @svgtext()
         DOMURL = window.URL || window.webkitURL || window
         svgBlob = new Blob [svgStr], { type: 'image/svg+xml;charset=utf-8' }
         url = DOMURL.createObjectURL svgBlob
-        img.onload = () ->
+        img.onload = () =>
-            canvas = me.find "offscreen"
+            canvas = @find "offscreen"
             canvas.width = img.width
             canvas.height = img.height
             canvas.getContext("2d").drawImage img, 0, 0, img.width, img.height
@@ -243,20 +250,28 @@ class GraphEditor extends this.OS.GUI.BaseApplication
     cleanup: (evt) ->
         return unless @currfile
         return unless @currfile.dirty
-        me = @
         evt.preventDefault()
-        @.openDialog "YesNoDialog", (d) ->
+        @ask {title: __("Quit"), text: __("Quit without saving ?") }
+            .then (d) =>
                 if d
-                me.currfile.dirty = false
+                    @currfile.dirty = false
-                me.quit()
+                    @quit()
-        , __("Quit"), { text: __("Quit without saving ?") }
 
 GraphEditor.dummymermaid = """
-graph TD;
+classDiagram
-    A-->B;
+Class01 <|-- AveryLongClass : Cool
-    A-->C;
+Class03 *-- Class04
-    B-->D;
+Class05 o-- Class06
-    C-->D;
+Class07 .. Class08
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+Class08 <--> C2: Cool label
 """
 GraphEditor.dependencies = [
     "os://scripts/ace/ace.js"

GraphEditor/css/main.css

@@ -3,6 +3,7 @@ afx-app-window[data-id="graph_editor_win"] div[data-id="preview"]
     display: flex;
     align-items: center;
     justify-content: center;
+    background-color: white;
 }
 afx-app-window[data-id="graph_editor_win"] afx-button button
 {

GraphEditor/package.json

@@ -7,7 +7,7 @@
         "email": "xsang.le@gmail.com",
         "licences": "GPLv3"
     },
-    "version":"0.0.4-a",
+    "version":"0.0.5-a",
     "category":"Office",
     "iconclass": "fa fa-sitemap",
     "mimes":["text/.*graphviz"]

GraphEditor/project.json

@@ -2,7 +2,7 @@
 	"name": "GraphEditor",
 	"root": "home://workspace/antosdk-apps/GraphEditor",
 	"css": ["css/main.css"],
-	"javascripts": ["javascripts/svg-pan-zoom.js", "javascripts/mermaidAPI.min.js"],
+	"javascripts": ["javascripts/svg-pan-zoom.js", "javascripts/mermaid.min.js"],
 	"coffees": ["coffees/main.coffee"],
 	"copies": ["assets/scheme.html", "package.json", "README.md"]
 }

packages.json

@@ -44,6 +44,15 @@
 		"version": "0.0.2-a",
 		"download": "https://raw.githubusercontent.com/lxsang/antosdk-apps/master/Booklet/build/release/Booklet.zip"
 	},
+	{
+		"pkgname": "GraphEditor",
+		"name": "Graph Editor",
+		"description": "https://raw.githubusercontent.com/lxsang/antosdk-apps/master/GraphEditor/README.md",
+		"category": "Office",
+		"author": "Xuan Sang LE",
+		"version": "0.0.5-a",
+		"download": "https://raw.githubusercontent.com/lxsang/antosdk-apps/master/GraphEditor/build/release/GraphEditor.zip"
+	},
 	{
 		"pkgname": "LuaPlayground",
 		"name": "LuaPlayground",