add libfabric and ImageEditor

ImageEditor/README.md

@@ -0,0 +1,22 @@
+# Image Editor
+Full featured image editor using HTML5 Canvas.
+
+This application is a wrapper of the [TOAST UI Image editor](https://github.com/nhn/tui.image-editor).
+
+**Features:**
+
+* Load image to canvas
+* Undo/Redo (With shortcut)
+* Crop
+* Flip
+* Rotation
+* Free drawing
+* Line drawing
+* Shape
+* Icon
+* Text
+* Mask Filter
+* Image Filter
+
+## Changes log
+* v0.1.0-a: First release

ImageEditor/assets/scheme.html

@@ -0,0 +1,10 @@
+<afx-app-window apptitle="Image Editor" width="600" height="600" data-id="ImageEditor">
+    <afx-hbox>
+        <div data-width="2"></div>
+        <afx-vbox>
+            <div data-id="stage"></div>
+            <div data-height="2"></div>
+        </afx-vbox>
+        <div data-width="2"></div>
+    </afx-hbox>
+</afx-app-window>

ImageEditor/build/debug/README.md

@@ -0,0 +1,22 @@
+# Image Editor
+Full featured image editor using HTML5 Canvas.
+
+This application is a wrapper of the [TOAST UI Image editor](https://github.com/nhn/tui.image-editor).
+
+**Features:**
+
+* Load image to canvas
+* Undo/Redo (With shortcut)
+* Crop
+* Flip
+* Rotation
+* Free drawing
+* Line drawing
+* Shape
+* Icon
+* Text
+* Mask Filter
+* Image Filter
+
+## Changes log
+* v0.1.0-a: First release

ImageEditor/build/debug/main.js

@@ -0,0 +1 @@
+(function(){var i;(i=class extends this.OS.application.BaseApplication{constructor(i){super("ImageEditor",i),this.currfile=void 0,this.args&&this.args.length>0&&this.args[0].path&&(this.currfile=i[0].path.asFileHandle())}main(){var i;return this.stage=this.find("stage"),this.stage.id=this.eid,i={path:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",name:"Blank"},this.currfile&&(i={path:this.currfile.getlink(),name:this.currfile.filename},this.scheme.apptitle=this.currfile.path),this.editor=new tui.ImageEditor(this.stage,{cssMaxWidth:700,cssMaxHeight:500,usageStatistics:!1,includeUI:{initMenu:"filter",menuBarPosition:"bottom",loadImage:i}}),this.on("resize",()=>this.editor.ui.resizeEditor()),this.editor.ui.resizeEditor(),this.bindKey("ALT-O",()=>this.actionFile("open")),this.bindKey("CTRL-S",()=>this.actionFile("save")),this.bindKey("ALT-W",()=>this.actionFile("saveas"))}open(){if(this.currfile)return this.editor.loadImageFromURL(this.currfile.getlink(),this.currfile.filename).then(i=>(this.scheme.apptitle=this.currfile.path,this.editor.ui.resizeEditor({imageSize:{oldWidth:i.oldWidth,oldHeight:i.oldHeight,newWidth:i.newWidth,newHeight:i.newHeight}})))}save(){if(this.currfile)return this.currfile.cache=this.editor.toDataURL(),this.currfile.write("base64").then(i=>i.error?this.error(__("Error saving file {0}: {1}",this.currfile.basename,i.error)):this.notify(__("File saved: {0}",this.currfile.path))).catch(i=>this.error(__("Unable to save file: {0}",this.currfile.path),i))}cleanup(){if(this.editor)return this.editor.destroy()}menu(){return[{text:"__(File)",nodes:[{text:"__(Open)",dataid:"open",shortcut:"A-O"},{text:"__(Save)",dataid:"save",shortcut:"C-S"},{text:"__(Save as)",dataid:"saveas",shortcut:"A-W"}],onchildselect:i=>this.actionFile(i.data.item.data.dataid)}]}actionFile(i){switch(i){case"open":return this.openDialog("FileDialog",{title:__("Open file"),mimes:["image/.*"]}).then(i=>(this.currfile=i.file.path.asFileHandle(),this.open()));case"save":return this.save();case"saveas":return this.openDialog("FileDialog",{title:__("Save as"),file:this.currfile}).then(i=>{var e;return e=i.file.path.asFileHandle(),"file"===i.file.type&&(e=e.parent()),this.currfile=`${e.path}/${i.name}`.asFileHandle(),this.save()})}}}).dependencies=["pkg://libfabric/main.js","pkg://ImageEditor/tui-image-ed-bundle.min.js"],this.OS.register("ImageEditor",i)}).call(this);

ImageEditor/build/debug/package.json

@@ -0,0 +1,16 @@
+{
+    "pkgname": "ImageEditor",
+    "app":"ImageEditor",
+    "name":"Image editor",
+    "description":"AntOS wrapper of the tui.image-editor",
+    "info":{
+        "author": "Xuan Sang LE",
+        "email": "mrsang@iohub.dev"
+    },
+    "version":"0.1.0-a",
+    "category":"Graphics",
+    "iconclass":"fa fa-camera-retro",
+    "mimes":["image/.*"],
+    "dependencies":["libfabric@4.4.0-r"],
+    "locale": {}
+}

ImageEditor/build/debug/scheme.html

@@ -0,0 +1,10 @@
+<afx-app-window apptitle="Image Editor" width="600" height="600" data-id="ImageEditor">
+    <afx-hbox>
+        <div data-width="2"></div>
+        <afx-vbox>
+            <div data-id="stage"></div>
+            <div data-height="2"></div>
+        </afx-vbox>
+        <div data-width="2"></div>
+    </afx-hbox>
+</afx-app-window>

ImageEditor/coffees/main.coffee

@@ -0,0 +1,110 @@
+class ImageEditor extends this.OS.application.BaseApplication
+    constructor: ( args ) ->
+        super "ImageEditor", args
+        @currfile = undefined
+        @currfile = args[0].path.asFileHandle() if @args and @args.length > 0 and @args[0].path
+    
+    main: () ->
+        @stage = @find("stage")
+        @stage.id = @eid
+        img_data = {
+            path: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
+            name: 'Blank'
+        }
+        
+        if @currfile
+            img_data = {
+                path: @currfile.getlink(),
+                name: @currfile.filename
+            }
+            @scheme.apptitle = @currfile.path
+        
+        
+        @editor = new tui.ImageEditor(@stage, {
+            cssMaxWidth: 700, 
+            cssMaxHeight: 500,
+            usageStatistics: false,
+            includeUI: {
+            initMenu: 'filter',
+            menuBarPosition: 'bottom',
+            loadImage: img_data
+
+            },
+        })
+        @on "resize", () =>
+            @editor.ui.resizeEditor()
+        @editor.ui.resizeEditor()
+        
+        @bindKey "ALT-O", () => @actionFile "open"
+        @bindKey "CTRL-S", () => @actionFile "save"
+        @bindKey "ALT-W", () => @actionFile "saveas"
+    
+    open: () ->
+        return unless @currfile
+        @editor.loadImageFromURL(@currfile.getlink(), @currfile.filename)
+        .then (r) =>
+            @scheme.apptitle = @currfile.path
+            @editor.ui.resizeEditor {
+                imageSize: {
+                    oldWidth: r.oldWidth,
+                    oldHeight: r.oldHeight,
+                    newWidth: r.newWidth,
+                    newHeight: r.newHeight
+                },
+            }
+    
+    save: () ->
+        return unless @currfile
+        @currfile.cache = @editor.toDataURL()
+        @currfile.write "base64"
+        .then (d) =>
+                return @error __("Error saving file {0}: {1}", @currfile.basename, d.error) if d.error
+                @notify __("File saved: {0}", @currfile.path)
+            .catch (e) => @error __("Unable to save file: {0}", @currfile.path), e
+    
+    cleanup: () ->
+        @editor.destroy() if @editor
+    
+    menu: () ->
+        menu = [{
+                text: "__(File)",
+                nodes: [
+                    { text: "__(Open)", dataid: "open", shortcut: "A-O" },
+                    { text: "__(Save)", dataid: "save", shortcut: "C-S" },
+                    { text: "__(Save as)", dataid: "saveas", shortcut: "A-W" }
+                ],
+                onchildselect: (e) => @actionFile e.data.item.data.dataid
+            }]
+        menu
+
+    actionFile: (e) ->
+        switch e
+            when "open"
+                @openDialog("FileDialog", {
+                    title: __("Open file"),
+                    mimes: ["image/.*"]
+                })
+                .then (f) =>
+                    @currfile = f.file.path.asFileHandle()
+                    @open()
+
+            when "save"
+                return @save()
+                
+            when "saveas"
+                @openDialog("FileDialog", {
+                    title: __("Save as"),
+                    file: @currfile
+                })
+                .then (f) =>
+                    d = f.file.path.asFileHandle()
+                    d = d.parent() if f.file.type is "file"
+                    @currfile = "#{d.path}/#{f.name}".asFileHandle()
+                    @save()
+                
+ImageEditor.dependencies = [
+    "pkg://libfabric/main.js",
+    "pkg://ImageEditor/tui-image-ed-bundle.min.js"
+]
+
+this.OS.register "ImageEditor", ImageEditor

ImageEditor/css/main.css

@@ -0,0 +1,3 @@
+afx-app-window[data-id="ImageEditor"] .tui-image-editor-header-buttons{
+    display: none;
+}

ImageEditor/package.json

@@ -0,0 +1,16 @@
+{
+    "pkgname": "ImageEditor",
+    "app":"ImageEditor",
+    "name":"Image editor",
+    "description":"AntOS wrapper of the tui.image-editor",
+    "info":{
+        "author": "Xuan Sang LE",
+        "email": "mrsang@iohub.dev"
+    },
+    "version":"0.1.0-a",
+    "category":"Graphics",
+    "iconclass":"fa fa-camera-retro",
+    "mimes":["image/.*"],
+    "dependencies":["libfabric@4.4.0-r"],
+    "locale": {}
+}

ImageEditor/project.json

@@ -0,0 +1,12 @@
+{
+    "name": "ImageEditor",
+    "css": ["css/tui-image-ed-bundle.min.css", "css/main.css"],
+    "javascripts": [
+    ],
+    "coffees": ["coffees/main.coffee"],
+    "copies": [
+        "javascripts/tui-image-ed-bundle.min.js",
+        "assets/scheme.html", "package.json",
+        "README.md"
+    ]
+}

libfabric/README.md

@@ -0,0 +1,13 @@
+# libfabric
+
+This package is a wrapper of the **Fabric.js** library v-4.4.0.
+
+
+Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.
+
+Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes — rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects with the mouse; modify their properties — color, transparency, z-index, etc. You can also manipulate these objects altogether — grouping them with a simple mouse selection.
+
+## Non-Technical Introduction to Fabric
+Fabric.js allows you to easily create simple shapes like rectangles, circles, triangles and other polygons or more complex shapes made up of many paths, onto the HTML <canvas> element on a webpage using JavaScript. Fabric.js will then allow you to manipulate the size, position and rotation of these objects with a mouse. It’s also possible to change some of the attributes of these objects such as their color, transparency, depth position on the webpage or selecting groups of these objects using the Fabric.js library. Fabric.js will also allow you to convert an SVG image into JavaScript data that can be used for putting it onto the <canvas> element.
+
+More information on the library: [https://github.com/fabricjs/fabric.js](https://github.com/fabricjs/fabric.js)

libfabric/package.json

@@ -0,0 +1,15 @@
+{
+    "pkgname": "libfabric",
+    "name":"Fabric.js library",
+    "description":"Fabric.js is a framework that makes it easy to work with HTML5 canvas element",
+    "info":{
+        "author": "",
+        "email": ""
+    },
+    "version":"4.4.0-r",
+    "category":"Library",
+    "iconclass":"fa fa-cog",
+    "mimes":["none"],
+    "dependencies":[],
+    "locale": {}
+}

libfabric/project.json

@@ -0,0 +1,7 @@
+{
+    "name": "libfabric",
+    "css": [],
+    "javascripts": [],
+    "coffees": [],
+    "copies": ["main.js","package.json", "README.md"]
+}

packages.json

@@ -139,6 +139,16 @@
 		"dependencies": [],
 		"download": "https://raw.githubusercontent.com/lxsang/antosdk-apps/master/GraphEditor/build/release/GraphEditor.zip"
 	},
+	{
+		"pkgname": "ImageEditor",
+		"name": "Image editor",
+		"description": "https://raw.githubusercontent.com/lxsang/antosdk-apps/master/ImageEditor/README.md",
+		"category": "Graphics",
+		"author": "Xuan Sang LE",
+		"version": "0.1.0-a",
+		"dependencies": ["libfabric@4.4.0-r"],
+		"download": "https://raw.githubusercontent.com/lxsang/antosdk-apps/master/ImageEditor/build/release/ImageEditor.zip"
+	},
 	{
 		"pkgname": "Katex",
 		"name": "Katex",
@@ -149,6 +159,16 @@
 		"dependencies": [],
 		"download": "https://raw.githubusercontent.com/lxsang/antosdk-apps/master/Katex/build/release/Katex.zip"
 	},
+	{
+		"pkgname": "libfabric",
+		"name": "Fabric.js library",
+		"description": "https://raw.githubusercontent.com/lxsang/antosdk-apps/master/libfabric/README.md",
+		"category": "Library",
+		"author": "",
+		"version": "4.4.0-r",
+		"dependencies": [],
+		"download": "https://raw.githubusercontent.com/lxsang/antosdk-apps/master/libfabric/build/release/libfabric.zip"
+	},
 	{
 		"pkgname": "libjpeg",
 		"name": "libjpeg",