fix OpenPage and GraphEditor bugs

GraphEditor/README.md

@@ -0,0 +1,24 @@
+# GraphEditor
+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**

GraphEditor/assets/scheme.html

@@ -0,0 +1,14 @@
+<afx-app-window data-id="graph_editor_win" apptitle="__(Graph editor)" width="650" height="500">
+    <afx-hbox>
+            <div data-id="datarea"></div>
+            <afx-resizer data-width="5" ></afx-resizer>
+            <div data-id="preview">
+                <div data-height="25" data-id="btn-container">
+                    <afx-button data-id="btn-zoomin" iconclass="fa fa-search-plus"></afx-button>
+                    <afx-button data-id="btn-zoomout" iconclass="fa fa-search-minus"></afx-button>
+                    <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>
+    </afx-hbox>
+</afx-app-window>

GraphEditor/build/debug/README.md

@@ -0,0 +1,24 @@
+# GraphEditor
+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**

GraphEditor/build/debug/main.css

@@ -0,0 +1,23 @@
+
+afx-app-window[data-id="graph_editor_win"] div[data-id="preview"]
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+afx-app-window[data-id="graph_editor_win"] afx-button button
+{
+    border-radius: 0;
+    padding-top:2px;
+    padding-bottom: 2px;
+}
+afx-app-window[data-id="graph_editor_win"] afx-resizer{
+    background-color: transparent;
+}
+afx-app-window[data-id="graph_editor_win"] div[data-id="btn-container"]{
+    background-color: transparent;
+    position: absolute;
+    bottom:10px;
+    right: 10px;
+    display: inline;
+}

GraphEditor/build/debug/package.json

@@ -0,0 +1,14 @@
+{
+    "app":"GraphEditor",
+    "name":"Graph Editor",
+    "description":"Create graph with dot language or mermaid",
+    "info":{
+        "author": "Xuan Sang LE",
+        "email": "xsang.le@gmail.com",
+        "licences": "GPLv3"
+    },
+    "version":"0.0.4-a",
+    "category":"Office",
+    "iconclass": "fa fa-sitemap",
+    "mimes":["text/.*graphviz"]
+}

GraphEditor/build/debug/scheme.html

@@ -0,0 +1,14 @@
+<afx-app-window data-id="graph_editor_win" apptitle="__(Graph editor)" width="650" height="500">
+    <afx-hbox>
+            <div data-id="datarea"></div>
+            <afx-resizer data-width="5" ></afx-resizer>
+            <div data-id="preview">
+                <div data-height="25" data-id="btn-container">
+                    <afx-button data-id="btn-zoomin" iconclass="fa fa-search-plus"></afx-button>
+                    <afx-button data-id="btn-zoomout" iconclass="fa fa-search-minus"></afx-button>
+                    <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>
+    </afx-hbox>
+</afx-app-window>

GraphEditor/coffees/main.coffee

@@ -0,0 +1,264 @@
+# Copyright 2017-2018 Xuan Sang LE <xsang.le AT gmail DOT com>
+
+# AnTOS Web desktop is is licensed under the GNU General Public
+# License v3.0, see the LICENCE file for more information
+
+# This program is free software: you can redistribute it and/or
+# modify it under the terms of the GNU General Public License as
+# published by the Free Software Foundation, either version 3 of 
+# the License, or (at your option) any later version.
+
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+# General Public License for more details.
+
+# 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
+    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.dirty = false
+        @datarea = @find "datarea"
+        @preview = @find "preview"
+        @btctn = @find "btn-container"
+        @.editor = ace.edit @datarea
+        @.editor.setOptions {
+            enableBasicAutocompletion: true,
+            enableLiveAutocompletion: true,
+            fontSize: "10pt"
+        }
+        #@.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", () ->
+            if me.editormux
+                me.editormux = false
+                return false
+            if not me.currfile.dirty
+                me.currfile.dirty = true
+
+
+        if not me.currfile.basename
+            me.editormux = true
+            me.editor.setValue GraphEditor.dummymermaid
+            me.renderSVG false
+    
+        
+        @editor.container.addEventListener "keydown", (e) ->
+            me.renderSVG true if e.keyCode is 13
+        , true
+        
+        @bindKey "CTRL-R", () -> me.renderSVG false
+        @bindKey "ALT-G", () -> me.export "SVG"
+        @bindKey "ALT-P", () -> me.export "PNG"
+        @bindKey "ALT-N", () -> me.actionFile "#{me.name}-New"
+        @bindKey "ALT-O", () -> me.actionFile "#{me.name}-Open"
+        @bindKey "CTRL-S", () -> me.actionFile "#{me.name}-Save"
+        @bindKey "ALT-W", () -> me.actionFile "#{me.name}-Saveas"
+        @bindKey "CTRL-M", () -> me.svgToCanvas(()->)
+
+        @on "hboxchange", () ->
+            me.editor.resize()
+            me.calibrate()
+        @on "focus", () -> me.editor.focus()
+        (@find "btn-zoomin").set "onbtclick", (e) ->
+            me.pan.zoomIn() if me.pan
+        (@find "btn-zoomout").set "onbtclick", (e) ->
+            me.pan.zoomOut() if me.pan
+        (@find "btn-reset").set "onbtclick", (e) ->
+            me.pan.resetZoom() if me.pan
+        
+        @open @currfile
+   
+    menu: () ->
+        me = @
+        menu = [{
+                text: "__(File)",
+                child: [
+                    { text: "__(New)", dataid: "#{@name}-New", shortcut: "A-N" },
+                    { text: "__(Open)", dataid: "#{@name}-Open", shortcut: "A-O" },
+                    { text: "__(Save)", dataid: "#{@name}-Save", shortcut: "C-S" },
+                    { text: "__(Save as)",dataid: "#{@name}-Saveas" , shortcut: "A-W" },
+                    { text: "__(Render)", dataid: "#{@name}-Render", shortcut: "C-R" },
+                    { 
+                        text: "__(Export as)",
+                        child: [
+                            { text: "SVG", shortcut: "A-G" },
+                            { text: "PNG", shortcut: "A-P" }
+                        ],
+                        onmenuselect: (e) -> me.export e.item.data.text
+                    },
+                ],
+                onmenuselect: (e) -> me.actionFile e.item.data.dataid
+            }]
+        menu
+    open: (file) ->
+        return if file.path is "Untitled"
+        me = @
+        file.dirty = false
+        file.read (d) ->
+            me.currfile = file
+            me.editormux = true
+            me.currfile.dirty = false
+            me.editor.setValue d
+            me.scheme.set "apptitle", "#{me.currfile.basename}"
+            me.renderSVG false
+    save: (file) ->
+        me = @
+        file.write "text/plain", (d) ->
+            return me.error __("Error saving file {0}", file.basename) if d.error
+            file.dirty = false
+            file.text = file.basename
+            me.scheme.set "apptitle", "#{me.currfile.basename}"
+
+    actionFile: (e) ->
+        me = @
+        saveas = () ->
+            me.openDialog "FileDiaLog", (d, n) ->
+                me.currfile.setPath "#{d}/#{n}"
+                me.save me.currfile
+            , __("Save as"), { file: me.currfile }
+        switch e
+            when "#{@name}-Open"
+                @openDialog "FileDiaLog", ( d, f ) ->
+                    me.open "#{d}/#{f}".asFileHandler()
+                , __("Open file")
+            when "#{@name}-Save"
+                @currfile.cache = @editor.getValue()
+                return @save @currfile if @currfile.basename
+                saveas()
+            when "#{@name}-Saveas"
+                @currfile.cache = @editor.getValue()
+                saveas()
+            when "#{@name}-Render"
+                me.renderSVG false
+            when "#{@name}-New"
+                @currfile = "Untitled".asFileHandler()
+                @currfile.cache = ""
+                @currfile.dirty = false
+                @editormux = true
+                @editor.setValue("")
+    
+    export: (t) ->
+        me = @
+        me.openDialog "FileDiaLog", (d, n) ->
+            fp = "#{d}/#{n}".asFileHandler()
+            try
+                switch t
+                    when "SVG"
+                        fp.cache = me.svgtext()
+                        fp.write "text/plain", (r) ->
+                            return me.error __("Cannot export to {0}: {1}", t, r.error) if r.error
+                            me.notify __("File exported")
+                    when "PNG"
+                        # toDataURL("image/png")
+                        me.svgToCanvas (canvas) ->
+                            try
+                                fp.cache = canvas.toDataURL "image/png"
+                                fp.write "base64", (r) ->
+                                    return me.error __("Cannot export to {0}: {1}", t, r.error) if r.error
+                                    me.notify __("File exported")
+                            catch e
+                                me.error __("Cannot export to PNG in this browser: {0}", e.message)
+            catch e
+                me.error __("Cannot export: {0}", e.message)
+        , __("Export as"), { file: me.currfile }
+        
+       
+    renderSVG: (silent) ->
+        me = @
+        id = Math.floor(Math.random() * 100000) + 1
+        #if silent
+        #    mermaid.parseError = (e, h) ->
+        #else
+        #    mermaid.parseError = (e, h) ->
+        #        me.error e
+        text = @editor.getValue()
+        try
+            mermaid.parse text
+        catch e
+            me.error __("Syntax error: {0}", e.str) if not silent
+            return
+        mermaid.render "c#{id}", text, (text, f) ->
+            me.preview.innerHTML = text
+            $(me.preview).append me.btctn
+            me.calibrate()
+            svg = $(me.preview).children("svg")[0]
+            $(svg).attr("style", "")
+            me.pan = svgPanZoom svg, {
+                zoomEnabled: true,
+                controlIconsEnabled: false,
+                fit: true,
+                center: true,
+                minZoom: 0.1
+            }
+            #rd $($.parseHTML text).
+        , me.preview
+
+    svgtext: () ->
+        svg = $(@preview).children("svg")[0]
+        $("g.label",svg).each (i) ->
+            $(@)
+                .css("font-family","Ubuntu")
+                .css("font-size", "13px")
+        $("text", svg).each (j) ->
+            $(@)
+                .css("font-family","Ubuntu")
+                .css("font-size", "13px")
+        serializer = new XMLSerializer()
+        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 = () ->
+            canvas = me.find "offscreen"
+            canvas.width = img.width
+            canvas.height = img.height
+            canvas.getContext("2d").drawImage img, 0, 0, img.width, img.height
+            f(canvas)
+        img.src = url
+        
+    calibrate: () ->
+        svg = ($ @preview).children("svg")[0]
+        if svg
+            prs = [$(@preview).width(), $(@preview).height()]
+            $(svg).attr "width", prs[0] + "px"
+            $(svg).attr "height", prs[1] + "px"
+
+    cleanup: (evt) ->
+        return unless @currfile
+        return unless @currfile.dirty
+        me = @
+        evt.preventDefault()
+        @.openDialog "YesNoDialog", (d) ->
+            if d
+                me.currfile.dirty = false
+                me.quit()
+        , __("Quit"), { text: __("Quit without saving ?") }
+
+GraphEditor.dummymermaid = """
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+"""
+GraphEditor.dependencies = [
+    "ace/ace"
+]
+this.OS.register "GraphEditor", GraphEditor

GraphEditor/css/main.css

@@ -0,0 +1,22 @@
+afx-app-window[data-id="graph_editor_win"] div[data-id="preview"]
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+afx-app-window[data-id="graph_editor_win"] afx-button button
+{
+    border-radius: 0;
+    padding-top:2px;
+    padding-bottom: 2px;
+}
+afx-app-window[data-id="graph_editor_win"] afx-resizer{
+    background-color: transparent;
+}
+afx-app-window[data-id="graph_editor_win"] div[data-id="btn-container"]{
+    background-color: transparent;
+    position: absolute;
+    bottom:10px;
+    right: 10px;
+    display: inline;
+}

GraphEditor/package.json

@@ -0,0 +1,14 @@
+{
+    "app":"GraphEditor",
+    "name":"Graph Editor",
+    "description":"Create graph with dot language or mermaid",
+    "info":{
+        "author": "Xuan Sang LE",
+        "email": "xsang.le@gmail.com",
+        "licences": "GPLv3"
+    },
+    "version":"0.0.4-a",
+    "category":"Office",
+    "iconclass": "fa fa-sitemap",
+    "mimes":["text/.*graphviz"]
+}

GraphEditor/project.apj

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

OpenPage/build/debug/OpenPage.md

@@ -0,0 +1,14 @@
+![](https://os.lxsang.me/repo/OpenPage/OpenPage.png)
+# OpenPage: ODT (Open Document Text) editor alpha
+**OpenPage** is an AntOS application developed in-browser using AntOSDK. It is a Pure Javascript based rich text editor compatible with Open Document Format.
+
+**Feature:**
+* Open, view and edit *.odt* documents
+* Offer various formatting style to text
+* Define and apply paragraph styles
+* Insert link, image
+* Embeded fonts
+* Save documents as ODF format so that it can be compatible with desktop applications like Open Office
+ 
+**Credit:**
+OpenPage is heavily based on the WebODF javascript library: https://webodf.org

OpenPage/build/debug/main.css

@@ -0,0 +1,109 @@
+
+@namespace office url(urn:oasis:names:tc:opendocument:xmlns:office:1.0);
+afx-app-window[data-id="OpenPage"] div[data-id="container"]
+{
+    overflow: auto;
+    margin:0px;
+    padding:0px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    text-align: center;
+    background-color: #f2f1f0;
+    /*position: relative;*/
+}
+
+/*
+@media screen, print, handheld, projection
+{
+    office|body{
+        display: inline !important;
+    }    
+}*/
+
+
+/*
+Fix annotation problem not showing
+*/
+/*
+afx-app-window[data-id="OpenPage"] document, afx-app-window[data-id="OpenPage"] office:body{
+    display: inline !important;
+}
+afx-app-window[data-id="OpenPage"] .annotationsPane{
+    right: 0 !important;
+    top: 0 !important;
+    position: absolute !important;
+}*/
+afx-app-window[data-id="OpenPage"] div[data-id="odfcanvas"]
+{
+    cursor: text;
+    margin:auto;
+    box-shadow: 1px 1px 3px 3px #9f9F9F;
+    /*added*/
+    transform-origin: top center;
+    -webkit-transform-origin: top center;
+    -moz-transform-origin: top center;
+    -o-transform-origin: top center;
+    overflow: hidden;
+}
+
+afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"]
+{
+    background-color: #f5f5f5;
+    border: 1px solid #eaeaea;
+    box-shadow: 3px 3px 3px #9f9F9F;
+}
+afx-app-window[data-id="OpenPage"] afx-hbox[data-id="status-bar"]
+{
+    background-color: #f5f5f5;
+    border: 1px solid #eaeaea;
+    box-shadow: -3px -3px 3px #9f9F9F;
+}
+afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button, afx-app-window[data-id="OpenPage"] afx-button[data-id="btzoomfix"] button
+{
+    border: 1px solid #f5f5f5;
+    background-color: transparent;
+    width:100%;
+    height: 100%;
+}
+
+afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button:hover, afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button.btactive, afx-app-window[data-id="OpenPage"] afx-button[data-id="btzoomfix"] button:hover
+{
+    border: 1px solid #759DC0;
+    background-color: transparent;
+    border-radius:5px;
+    color:#759DC0;
+}
+
+
+afx-app-window[data-id="HyperLinkDialog"] afx-label.header span
+{
+    font-weight: bold;
+}
+afx-app-window[data-id="FormatDialog"] afx-label.header
+{
+    padding-left: 5px;
+    border-bottom: 1px solid #a6a6a6;
+}
+afx-app-window[data-id="FormatDialog"] afx-label.header span
+{
+    font-weight: bold;
+}
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="aligmentbox"] afx-label span,
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="spacingbox"] afx-label span,
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="stylebox"] afx-label span,
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="font-box"] > div > afx-label  span
+{
+    display: block;
+    padding-top: 7px;
+}
+
+afx-app-window[data-id="FormatDialog"]  div[data-id="preview"]
+{
+    border: 1px solid #a6a6a6;
+}
+afx-app-window[data-id="FormatDialog"]  div[data-id="txtcolor"],
+afx-app-window[data-id="FormatDialog"]  div[data-id="bgcolor"]
+{
+    border:1px solid #a6a6a6;
+    display: block;
+}

OpenPage/build/debug/package.json

@@ -0,0 +1,13 @@
+{
+    "app":"OpenPage",
+    "name":"OpenPage",
+    "description":"Open Document Format (ODF) text editor using WebODF",
+    "info":{
+        "author": "Xuan Sang LE",
+        "email": "xsang.le@gmail.com"
+    },
+    "version":"0.0.2-a",
+    "category":"Other",
+    "icon":"icon.png",
+    "mimes":["application/vnd.oasis.opendocument.text"]
+}

OpenPage/build/debug/scheme.html

@@ -0,0 +1,47 @@
+<afx-app-window apptitle="Open Page" width="650" height="500" data-id="OpenPage">
+    <afx-hbox >
+        <afx-vbox>
+            <afx-hbox data-id="toolbox" data-height="28">
+                <div data-width="5"></div>
+                <afx-button data-width = "25" data-id="btundo"  iconclass = "fa fa-undo"></afx-button>
+                <afx-button data-width = "25" data-id="btredo"  iconclass = "fa fa-rotate-right" ></afx-button>
+                <afx-button data-width = "25" data-id="btbold" iconclass = "fa fa-bold"></afx-button>
+                <afx-button data-width = "25" data-id="btitalic" iconclass = "fa fa-italic"></afx-button>
+                <afx-button data-width = "25" data-id="btunderline" iconclass = "fa fa-underline"></afx-button>
+                <afx-button data-width = "25" data-id="btstrike" iconclass = "fa fa-strikethrough"></afx-button>
+                <afx-button data-width = "25" data-id="btnote" iconclass = "fa fa-sticky-note"></afx-button>
+                <afx-button data-width = "25" data-id="btlink" iconclass = "fa fa-link"></afx-button>
+                <afx-button data-width = "25" data-id="btunlink" iconclass = "fa fa-unlink"></afx-button>
+                <afx-button data-width = "25" data-id="btimage" iconclass = "fa fa-image"></afx-button>
+                <afx-button data-width = "25" data-id="btac" iconclass = "fa fa-align-center"></afx-button>
+                <afx-button data-width = "25" data-id="btal" iconclass = "fa fa-align-left" ></afx-button>
+                <afx-button data-width = "25" data-id="btar" iconclass = "fa fa-align-right"></afx-button>
+                <afx-button data-width = "25" data-id="btaj" iconclass = "fa fa-align-justify"></afx-button>
+                <afx-button data-width = "25" data-id="btindent" iconclass = "fa fa-indent"></afx-button>
+                <afx-button data-width = "25" data-id="btoutdent" iconclass = "fa fa-outdent"></afx-button>
+                <afx-button data-width = "25" data-id="btformat" iconclass = "fa fa-paint-brush"></afx-button>
+                <afx-list-view dropdown = "true" data-width="100" data-id="format-list"></afx-list-view>
+                <div data-width="5"></div>
+                <afx-nspinner data-width = "50" data-id="font-size" ></afx-nspinner>
+                <div data-width="5"></div>
+                <afx-list-view dropdown = "true" data-width="150" data-id="font-list"></afx-list-view>
+                <div data-width="5"></div>
+            </afx-hbox>
+            <div data-height="5"></div>
+            <div data-id="container">
+                <div data-id="odfcanvas"></div>
+            </div>
+            <div data-height="5"></div>
+            <afx-hbox data-id="status-bar" data-height="28">
+                <div></div>
+                <afx-button data-width = "25" data-id="btzoomfix" iconclass = "fa fa-arrows-alt"></afx-button>
+                <div data-width="5"></div>
+                <afx-slider data-id="slzoom" data-width="150" max="400"></afx-slider>
+                <div data-width="5"></div>
+                <afx-label data-id = "lbzoom" data-width="40"></afx-label>
+            </afx-hbox>
+            
+        </afx-vbox>
+        
+    </afx-hbox>
+</afx-app-window>

OpenPage/coffees/main.coffee

@@ -45,7 +45,7 @@ class OpenPage extends this.OS.GUI.BaseApplication
         me = @
         saveas = () ->
             me.openDialog "FileDiaLog", (d, n, p) ->
-                me.currfile.setPath "#{d}#{n}"
+                me.currfile.setPath "#{d}/#{n}"
                 me.save()
             , __("Save as"), { file: me.currfile }
         switch e
@@ -68,15 +68,14 @@ class OpenPage extends this.OS.GUI.BaseApplication
         @open blank, true
     open: (p,b) ->
         me = @
-        
         @pathAsDataURL(p)
             .then (r) ->
                 me.closeDocument() if me.editorSession
                 me.initCanvas()
-                OdfContainer = new odf.OdfContainer r.reader.result, (c) ->
+                OdfContainer = new odf.OdfContainer r.data, (c) ->
                     me.canvas.setOdfContainer c, false
                     return me.currfile  = "Untitled".asFileHandler() if b
-                    me.currfile.setPath p
+                    if me.currfile then me.currfile.setPath p else me.currfile = p.asFileHandler()
                     me.scheme.set "apptitle", me.currfile.basename
                     me.notify __("File {0} opened", p)
             .catch (e) ->
@@ -391,10 +390,19 @@ class OpenPage extends this.OS.GUI.BaseApplication
                 reader = new FileReader()
                 reader.onloadend = () ->
                     return error(p) if reader.readyState isnt 2
-                    resolve {reader: reader, fp: fp }
+                    resolve {data: reader.result, fp: fp }
                 reader.readAsDataURL blob
             , "binary"
+            ###
+            if not isText
                 
+            else
+                fp.read (data) ->
+                    # convert to base64
+                    b64 = btoa data
+                    dataurl = "data:#{fp.info.mime};base64," + b64
+                    resolve { reader: {result: dataurl}, fp:fp }
+            ###
     
     image: (e) ->
         me = @
@@ -406,12 +414,12 @@ class OpenPage extends this.OS.GUI.BaseApplication
                     hiddenImage.style.left = "-99999px"
                     document.body.appendChild hiddenImage
                     hiddenImage.onload =  () ->
-                        content = r.reader.result.substring(r.reader.result.indexOf(",") + 1)
+                        content = r.data.substring(r.data.indexOf(",") + 1)
                         #insert image
                         me.textController.removeCurrentSelection()
                         me.imageController.insertImage r.fp.info.mime, content, hiddenImage.width, hiddenImage.height
                         document.body.removeChild hiddenImage
-                    hiddenImage.src = r.reader.result
+                    hiddenImage.src = r.data
                 .catch () ->
                     me.error __("Couldnt load image {0}", p)
         , __("Select image file"), { mimes: ["image/.*"] }

OpenPage/package.json

@@ -6,7 +6,7 @@
         "author": "Xuan Sang LE",
         "email": "xsang.le@gmail.com"
     },
-    "version":"0.0.1-a",
+    "version":"0.0.2-a",
     "category":"Other",
     "icon":"icon.png",
     "mimes":["application/vnd.oasis.opendocument.text"]