diff --git a/images/icons/circle.svg b/images/icons/circle.svg
deleted file mode 100644
index c818c91..0000000
--- a/images/icons/circle.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
diff --git a/images/icons/line.svg b/images/icons/line.svg
deleted file mode 100644
index 614a3f9..0000000
--- a/images/icons/line.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
diff --git a/images/icons/rectangle.svg b/images/icons/rectangle.svg
deleted file mode 100644
index c6211a5..0000000
--- a/images/icons/rectangle.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
diff --git a/images/icons/shape.svg b/images/icons/shape.svg
new file mode 100644
index 0000000..a8d06d4
--- /dev/null
+++ b/images/icons/shape.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/images/test-collection.json b/images/test-collection.json
index 68767a5..8439b18 100644
--- a/images/test-collection.json
+++ b/images/test-collection.json
@@ -3,242 +3,28 @@
"width": 1000,
"height": 700,
"about": "Image data with multi-layers. Can be opened using miniPaint - https://github.com/viliusle/miniPaint",
- "date": "2020-10-25",
- "version": "4.2.5",
- "layer_active": 7
+ "date": "2021-01-02",
+ "version": "4.5.0",
+ "layer_active": 1
},
"layers": [
{
"id": 1,
"parent_id": 0,
- "name": "Line",
- "type": "line",
- "link": null,
- "x": 405,
- "y": 338,
- "width": 24,
- "width_original": null,
- "height": -227,
- "height_original": null,
- "visible": true,
- "is_vector": true,
- "hide_selection_if_active": false,
- "opacity": 100,
- "order": 30,
- "composition": "source-over",
- "rotate": null,
- "data": null,
- "params": {
- "size": 5,
- "type": {
- "value": "Simple",
- "values": [
- "Simple",
- "Arrow"
- ]
- }
- },
- "status": null,
- "color": "#008000",
- "filters": [],
- "render_function": [
- "line",
- "render"
- ]
- },
- {
- "id": 2,
- "parent_id": 0,
- "name": "Line (arrow)",
- "type": "line",
- "link": null,
- "x": 490,
- "y": 113,
- "width": -26,
- "width_original": null,
- "height": 228,
- "height_original": null,
- "visible": true,
- "is_vector": true,
- "hide_selection_if_active": false,
- "opacity": 100,
- "order": 29,
- "composition": "source-over",
- "rotate": null,
- "data": null,
- "params": {
- "size": 5,
- "type": {
- "value": "Arrow",
- "values": [
- "Simple",
- "Arrow"
- ]
- }
- },
- "status": null,
- "color": "#606060",
- "filters": [],
- "render_function": [
- "line",
- "render"
- ]
- },
- {
- "id": 3,
- "parent_id": 0,
- "name": "Rectangle (opacity)",
- "type": "rectangle",
- "link": null,
- "x": 527,
- "y": 191,
- "width": 40,
- "width_original": null,
- "height": 150,
- "height_original": null,
- "visible": true,
- "is_vector": true,
- "hide_selection_if_active": false,
- "opacity": 50,
- "order": 28,
- "composition": "source-over",
- "rotate": -15,
- "data": null,
- "params": {
- "size": 1,
- "fill": true,
- "square": false
- },
- "status": null,
- "color": "#e01a1a",
- "filters": [],
- "render_function": [
- "rectangle",
- "render"
- ]
- },
- {
- "id": 4,
- "parent_id": 0,
- "name": "Rectangle",
- "type": "rectangle",
- "link": null,
- "x": 610,
- "y": 240,
- "width": 50,
- "width_original": null,
- "height": 100,
- "height_original": null,
- "visible": true,
- "is_vector": true,
- "hide_selection_if_active": false,
- "opacity": 100,
- "order": 27,
- "composition": "source-over",
- "rotate": 0,
- "data": null,
- "params": {
- "size": 4,
- "fill": false,
- "square": false
- },
- "status": null,
- "color": "#1b1bd8",
- "filters": [],
- "render_function": [
- "rectangle",
- "render"
- ]
- },
- {
- "id": 5,
- "parent_id": 0,
- "name": "Circle (filled)",
- "type": "circle",
- "link": null,
- "x": 690,
- "y": 110,
- "width": 50,
- "width_original": null,
- "height": 100,
- "height_original": null,
- "visible": true,
- "is_vector": true,
- "hide_selection_if_active": false,
- "opacity": 100,
- "order": 26,
- "composition": "source-over",
- "rotate": 0,
- "data": {
- "center_x": 927,
- "center_y": 28
- },
- "params": {
- "size": 1,
- "fill": true,
- "circle": false
- },
- "status": null,
- "color": "#c80000",
- "filters": [],
- "render_function": [
- "circle",
- "render"
- ]
- },
- {
- "id": 6,
- "parent_id": 0,
- "name": "Circle",
- "type": "circle",
- "link": null,
- "x": 690,
- "y": 240,
- "width": 50,
- "width_original": null,
- "height": 100,
- "height_original": null,
- "visible": true,
- "is_vector": true,
- "hide_selection_if_active": false,
- "opacity": 100,
- "order": 25,
- "composition": "source-over",
- "rotate": 0,
- "data": {
- "center_x": 1007,
- "center_y": 44
- },
- "params": {
- "size": 5,
- "fill": false,
- "circle": false
- },
- "status": null,
- "color": "#008000",
- "filters": [],
- "render_function": [
- "circle",
- "render"
- ]
- },
- {
- "id": 7,
- "parent_id": 0,
"name": "Image",
"type": "image",
"link": {},
"x": 50,
"y": 100,
"width": 300,
- "height": 239,
"width_original": 400,
+ "height": 239,
"height_original": 380,
"visible": true,
"is_vector": false,
"hide_selection_if_active": false,
"opacity": 100,
- "order": 24,
+ "order": 1,
"composition": "source-over",
"rotate": 0,
"data": null,
@@ -248,7 +34,7 @@
"filters": [
{
"id": 592629679,
- "name": "drop-shadow",
+ "name": "shadow",
"params": {
"x": 10,
"y": 10,
@@ -260,12 +46,12 @@
"render_function": null
},
{
- "id": 8,
+ "id": 2,
"parent_id": 0,
"name": "Text",
"type": "text",
"link": null,
- "x": 50,
+ "x": 49,
"y": 25,
"width": 522,
"width_original": null,
@@ -275,7 +61,7 @@
"is_vector": true,
"hide_selection_if_active": false,
"opacity": 100,
- "order": 23,
+ "order": 2,
"composition": "source-over",
"rotate": null,
"data": null,
@@ -316,89 +102,13 @@
]
},
{
- "id": 9,
- "parent_id": 0,
- "name": "Gradient (radial)",
- "type": "gradient",
- "link": null,
- "x": 757,
- "y": 137,
- "width": 46,
- "width_original": null,
- "height": 10,
- "height_original": null,
- "visible": true,
- "is_vector": true,
- "hide_selection_if_active": false,
- "opacity": 100,
- "order": 22,
- "composition": "source-over",
- "rotate": null,
- "data": {
- "center_x": 486,
- "center_y": 504
- },
- "params": {
- "color_1": "#008000",
- "color_2": "#ffffff",
- "alpha": 0,
- "radial": true,
- "radial_power": 50
- },
- "status": null,
- "color": "#40ff40",
- "filters": [],
- "render_function": [
- "gradient",
- "render"
- ]
- },
- {
- "id": 10,
- "parent_id": 0,
- "name": "Gradient (linear)",
- "type": "gradient",
- "link": null,
- "x": 999,
- "y": 394,
- "width": -147,
- "width_original": null,
- "height": 33,
- "height_original": null,
- "visible": true,
- "is_vector": false,
- "hide_selection_if_active": false,
- "opacity": 100,
- "order": 21,
- "composition": "source-over",
- "rotate": null,
- "data": {
- "center_x": 1185,
- "center_y": 540
- },
- "params": {
- "color_1": "#008000",
- "color_2": "#ffffff",
- "alpha": 0,
- "radial": false,
- "radial_power": 50
- },
- "status": null,
- "color": "#c4f5b2",
- "filters": [],
- "render_function": [
- "gradient",
- "render"
- ]
- },
- {
- "id": 11,
+ "id": 3,
"parent_id": 0,
"name": "Text (hidden)",
"type": "text",
"link": null,
- "x": 581,
- "y": 35,
+ "x": 580,
+ "y": 34,
"width": 326,
"width_original": null,
"height": 34,
@@ -407,7 +117,7 @@
"is_vector": true,
"hide_selection_if_active": false,
"opacity": 100,
- "order": 20,
+ "order": 3,
"composition": "source-over",
"rotate": null,
"data": null,
@@ -448,268 +158,13 @@
]
},
{
- "id": 12,
- "parent_id": 0,
- "name": "Borders",
- "type": "borders",
- "link": null,
- "x": 0,
- "y": 0,
- "width": 1000,
- "width_original": null,
- "height": 700,
- "height_original": null,
- "visible": true,
- "is_vector": false,
- "hide_selection_if_active": false,
- "opacity": 100,
- "order": 19,
- "composition": "source-over",
- "rotate": 0,
- "data": null,
- "params": {
- "size": 7,
- "shadow": false
- },
- "status": null,
- "color": "#02740f",
- "filters": [],
- "render_function": [
- "borders",
- "render"
- ]
- },
- {
- "id": 13,
- "parent_id": 0,
- "name": "Rectangle (radius)",
- "type": "rectangle",
- "link": null,
- "x": 610,
- "y": 110,
- "width": 50,
- "width_original": null,
- "height": 100,
- "height_original": null,
- "visible": true,
- "is_vector": true,
- "hide_selection_if_active": false,
- "opacity": 100,
- "order": 18,
- "composition": "source-over",
- "rotate": 0,
- "data": null,
- "params": {
- "size": 1,
- "radius": 999,
- "fill": true,
- "square": false
- },
- "status": null,
- "color": "#6b6b6b",
- "filters": [],
- "render_function": [
- "rectangle",
- "render"
- ]
- },
- {
- "id": 14,
- "parent_id": 0,
- "name": "Rectangle",
- "type": "rectangle",
- "link": null,
- "x": 525,
- "y": 109,
- "width": 40,
- "width_original": null,
- "height": 200,
- "height_original": null,
- "visible": true,
- "is_vector": true,
- "hide_selection_if_active": false,
- "opacity": 100,
- "order": 17,
- "composition": "source-over",
- "rotate": 10,
- "data": null,
- "params": {
- "size": 1,
- "fill": true,
- "square": false
- },
- "status": null,
- "color": "#55b955",
- "filters": [],
- "render_function": [
- "rectangle",
- "render"
- ]
- },
- {
- "id": 15,
- "parent_id": 0,
- "name": "Brush",
- "type": "brush",
- "link": null,
- "x": 60,
- "y": 370,
- "width": 82,
- "width_original": null,
- "height": 49,
- "height_original": null,
- "visible": true,
- "is_vector": true,
- "hide_selection_if_active": true,
- "opacity": 100,
- "order": 16,
- "composition": "source-over",
- "rotate": null,
- "data": [
- [
- [0,48,4],[0,38,4],[1,28,4],[4,18,4],[7,10,4],[8,6,4],[8,0,4],[10,2,4],[14,10,4],[16,14,4],
- [19,19,4],[21,20,4],[24,22,4],[25,22,4],[27,22,4],[31,22,4],[34,20,4],[41,13,4],[45,8,4],
- [49,5,4],[52,3,4],[53,2,4],[54,2,4],[55,2,4],[59,5,4],[61,15,4],[62,21,4],[62,25,4],[62,26,4],
- [62,26,4]
- ],
- [
- [8,52,4],[23,49,4],[38,46,4],[53,43,4],[63,39,4],[70,37,4],[74,36,4],[76,36,4]
- ]
- ],
- "params": {
- "size": 4,
- "pressure": false
- },
- "status": null,
- "color": "#008000",
- "filters": [],
- "render_function": [
- "brush",
- "render"
- ]
- },
- {
- "id": 16,
- "parent_id": 0,
- "name": "Brush (pressure)",
- "type": "brush",
- "link": null,
- "x": 180,
- "y": 370,
- "width": 82,
- "width_original": null,
- "height": 49,
- "height_original": null,
- "visible": true,
- "is_vector": true,
- "hide_selection_if_active": true,
- "opacity": 100,
- "order": 15,
- "composition": "source-over",
- "rotate": null,
- "data": [
- [
- [0,48,4],[0,38,4],[1,28,4],[4,18,4],[7,10,4],[8,6,4],[8,0,4],[10,2,4],[14,10,4],[16,14,4],
- [19,19,4],[21,20,4],[24,22,4],[25,22,4],[27,22,4],[31,22,4],[34,20,4],[41,13,4],[45,8,3],
- [49,5,3],[52,3,3],[53,2,3],[54,2,2],[55,2,2],[59,5,2],[61,15,2],[62,21,1],[62,25,1],[62,26,1],
- [62,26,1]
- ],
- [
- [8,52,1],[23,49,2],[38,46,3],[53,43,4],[63,39,5],[70,37,4],[74,36,3],[76,36,2]
- ]
- ],
- "params": {
- "size": 4,
- "pressure": true
- },
- "status": null,
- "color": "#008000",
- "filters": [],
- "render_function": [
- "brush",
- "render"
- ]
- },
- {
- "id": 17,
- "parent_id": 0,
- "name": "Pencil (antialiasing)",
- "type": "pencil",
- "link": null,
- "x": 60,
- "y": 450,
- "width": 53,
- "width_original": null,
- "height": 43,
- "height_original": null,
- "visible": true,
- "is_vector": true,
- "hide_selection_if_active": true,
- "opacity": 100,
- "order": 14,
- "composition": "source-over",
- "rotate": null,
- "data": [
- [0,39],[4,31],[8,19],[11,15],[13,13],[14,16],[16,21],[18,26],[19,28],[21,28],[26,21],[37,7],[42,1],
- [43,0],[43,5],[43,9],[44,13],[45,16],[46,19],[46,21],[46,21],null,[12,43],[20,41],[28,39],[37,35],
- [42,33],[46,31],[47,31],[49,30],[51,29],[53,28],[53,28]
- ],
- "params": {
- "antialiasing": true,
- "size": 2
- },
- "status": null,
- "color": "#ff0000",
- "filters": [],
- "render_function": [
- "pencil",
- "render"
- ]
- },
- {
- "id": 18,
- "parent_id": 0,
- "name": "Pencil",
- "type": "pencil",
- "link": null,
- "x": 180,
- "y": 450,
- "width": 40,
- "width_original": null,
- "height": 35,
- "height_original": null,
- "visible": true,
- "is_vector": true,
- "hide_selection_if_active": true,
- "opacity": 100,
- "order": 13,
- "composition": "source-over",
- "rotate": null,
- "data": [
- [0,28],[1,21],[5,13],[7,11],[7,10],[9,14],[11,20],[12,23],[12,24],[13,24],[17,22],[25,13],[33,3],[35,0],
- [35,4],[35,9],[34,15],[34,17],[34,18],[34,18],null,[5,35],[17,32],[27,29],[31,28],[36,27],[38,26],
- [39,26],[40,26],[40,26]
- ],
- "params": {
- "antialiasing": false,
- "size": 2
- },
- "status": null,
- "color": "#ff0000",
- "filters": [],
- "render_function": [
- "pencil",
- "render"
- ]
- },
- {
- "id": 19,
+ "id": 4,
"parent_id": 0,
"name": "Text types",
"type": "text",
"link": null,
- "x": 300,
- "y": 370,
+ "x": 650,
+ "y": 100,
"width": 300,
"width_original": null,
"height": 213,
@@ -718,7 +173,7 @@
"is_vector": true,
"hide_selection_if_active": false,
"opacity": 100,
- "order": 12,
+ "order": 4,
"composition": "source-over",
"rotate": null,
"data": [
@@ -874,13 +329,13 @@
]
},
{
- "id": 20,
+ "id": 5,
"parent_id": 0,
"name": "Text - center",
"type": "text",
"link": null,
- "x": 300,
- "y": 591.5,
+ "x": 650,
+ "y": 309.5,
"width": 300,
"width_original": null,
"height": 41,
@@ -889,7 +344,7 @@
"is_vector": true,
"hide_selection_if_active": false,
"opacity": 100,
- "order": 11,
+ "order": 5,
"composition": "source-over",
"rotate": null,
"data": [
@@ -922,13 +377,13 @@
]
},
{
- "id": 21,
+ "id": 6,
"parent_id": 0,
"name": "Text - right",
"type": "text",
"link": null,
- "x": 300,
- "y": 633.5,
+ "x": 650,
+ "y": 350,
"width": 300,
"width_original": null,
"height": 43,
@@ -937,7 +392,7 @@
"is_vector": true,
"hide_selection_if_active": false,
"opacity": 100,
- "order": 10,
+ "order": 6,
"composition": "source-over",
"rotate": null,
"data": [
@@ -970,22 +425,22 @@
]
},
{
- "id": 22,
+ "id": 7,
"parent_id": 0,
"name": "Text - wrap",
"type": "text",
"link": null,
- "x": 50,
- "y": 520,
+ "x": 400,
+ "y": 270,
"width": 230,
"width_original": null,
- "height": 162,
+ "height": 116,
"height_original": null,
"visible": true,
"is_vector": true,
"hide_selection_if_active": false,
"opacity": 100,
- "order": 9,
+ "order": 7,
"composition": "source-over",
"rotate": null,
"data": [
@@ -998,7 +453,7 @@
"family": "Verdana",
"leading": 4
},
- "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum, ipsum sed bibendum posuere, eros erat blandit justo, quis convallis augue ipsum nec ligula."
+ "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum, ipsum sed bibendum posuere, eros erat blandit justo."
}
]
],
@@ -1017,12 +472,1082 @@
"text",
"render"
]
+ },
+ {
+ "id": 8,
+ "parent_id": 0,
+ "name": "Line",
+ "type": "line",
+ "link": null,
+ "x": 50,
+ "y": 600,
+ "width": 30,
+ "width_original": null,
+ "height": -200,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 8,
+ "composition": "source-over",
+ "rotate": null,
+ "data": null,
+ "params": {
+ "size": 5
+ },
+ "status": null,
+ "color": "#008000",
+ "filters": [],
+ "render_function": [
+ "line",
+ "render"
+ ]
+ },
+ {
+ "id": 9,
+ "parent_id": 0,
+ "name": "Arrow",
+ "type": "arrow",
+ "link": null,
+ "x": 130,
+ "y": 400,
+ "width": -30,
+ "width_original": null,
+ "height": 200,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 9,
+ "composition": "source-over",
+ "rotate": null,
+ "data": null,
+ "params": {
+ "size": 5
+ },
+ "status": null,
+ "color": "#606060",
+ "filters": [],
+ "render_function": [
+ "arrow",
+ "render"
+ ]
+ },
+ {
+ "id": 10,
+ "parent_id": 0,
+ "name": "Rectangle (opacity)",
+ "type": "rectangle",
+ "link": null,
+ "x": 177,
+ "y": 445,
+ "width": 30,
+ "width_original": null,
+ "height": 150,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 50,
+ "order": 10,
+ "composition": "source-over",
+ "rotate": -15,
+ "data": null,
+ "params": {
+ "fill": true,
+ "square": false,
+ "border_size": 1,
+ "border": false,
+ "border_color": "#e01a1a",
+ "fill_color": "#e01a1a"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "rectangle",
+ "render"
+ ]
+ },
+ {
+ "id": 11,
+ "parent_id": 0,
+ "name": "Rectangle",
+ "type": "rectangle",
+ "link": null,
+ "x": 260,
+ "y": 500,
+ "width": 50,
+ "width_original": null,
+ "height": 100,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 11,
+ "composition": "source-over",
+ "rotate": 0,
+ "data": null,
+ "params": {
+ "fill": false,
+ "square": false,
+ "border_size": 4,
+ "border": true,
+ "border_color": "#1b1bd8",
+ "fill_color": "#1b1bd8"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "rectangle",
+ "render"
+ ]
+ },
+ {
+ "id": 12,
+ "parent_id": 0,
+ "name": "Ellipse",
+ "type": "ellipse",
+ "link": null,
+ "x": 330,
+ "y": 400,
+ "width": 50,
+ "width_original": null,
+ "height": 90,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 12,
+ "composition": "source-over",
+ "rotate": 0,
+ "data": {
+ "center_x": 927,
+ "center_y": 28
+ },
+ "params": {
+ "fill": true,
+ "circle": false,
+ "border_size": 1,
+ "border": false,
+ "border_color": "#c80000",
+ "fill_color": "#c80000"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "ellipse",
+ "render"
+ ]
+ },
+ {
+ "id": 14,
+ "parent_id": 0,
+ "name": "Gradient (radial)",
+ "type": "gradient",
+ "link": null,
+ "x": 915,
+ "y": 40,
+ "width": 20,
+ "width_original": null,
+ "height": 20,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 14,
+ "composition": "source-over",
+ "rotate": null,
+ "data": {
+ "center_x": 486,
+ "center_y": 504
+ },
+ "params": {
+ "color_1": "#008000",
+ "color_2": "#ffffff",
+ "alpha": 0,
+ "radial": true,
+ "radial_power": 50
+ },
+ "status": null,
+ "color": "#40ff40",
+ "filters": [],
+ "render_function": [
+ "gradient",
+ "render"
+ ]
+ },
+ {
+ "id": 15,
+ "parent_id": 0,
+ "name": "Gradient (linear)",
+ "type": "gradient",
+ "link": null,
+ "x": 985,
+ "y": 56,
+ "width": -100,
+ "width_original": null,
+ "height": 50,
+ "height_original": null,
+ "visible": true,
+ "is_vector": false,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 15,
+ "composition": "source-over",
+ "rotate": null,
+ "data": {
+ "center_x": 1185,
+ "center_y": 540
+ },
+ "params": {
+ "color_1": "#008000",
+ "color_2": "#ffffff",
+ "alpha": 0,
+ "radial": false,
+ "radial_power": 50
+ },
+ "status": null,
+ "color": "#c4f5b2",
+ "filters": [],
+ "render_function": [
+ "gradient",
+ "render"
+ ]
+ },
+ {
+ "id": 16,
+ "parent_id": 0,
+ "name": "Borders",
+ "type": "borders",
+ "link": null,
+ "x": 0,
+ "y": 0,
+ "width": 1000,
+ "width_original": null,
+ "height": 700,
+ "height_original": null,
+ "visible": true,
+ "is_vector": false,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 16,
+ "composition": "source-over",
+ "rotate": 0,
+ "data": null,
+ "params": {
+ "size": 7,
+ "shadow": false
+ },
+ "status": null,
+ "color": "#02740f",
+ "filters": [],
+ "render_function": [
+ "borders",
+ "render"
+ ]
+ },
+ {
+ "id": 17,
+ "parent_id": 0,
+ "name": "Rectangle (radius)",
+ "type": "rectangle",
+ "link": null,
+ "x": 260,
+ "y": 400,
+ "width": 50,
+ "width_original": null,
+ "height": 90,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 17,
+ "composition": "source-over",
+ "rotate": 0,
+ "data": null,
+ "params": {
+ "radius": 999,
+ "fill": true,
+ "square": false,
+ "border_size": 1,
+ "border": false,
+ "border_color": "#6b6b6b",
+ "fill_color": "#6b6b6b"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "rectangle",
+ "render"
+ ]
+ },
+ {
+ "id": 18,
+ "parent_id": 0,
+ "name": "Rectangle",
+ "type": "rectangle",
+ "link": null,
+ "x": 177,
+ "y": 400,
+ "width": 30,
+ "width_original": null,
+ "height": 150,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 18,
+ "composition": "source-over",
+ "rotate": 10,
+ "data": null,
+ "params": {
+ "fill": true,
+ "square": false,
+ "border_size": 1,
+ "border": false,
+ "border_color": "#55b955",
+ "fill_color": "#55b955"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "rectangle",
+ "render"
+ ]
+ },
+ {
+ "id": 19,
+ "parent_id": 0,
+ "name": "Brush",
+ "type": "brush",
+ "link": null,
+ "x": 410,
+ "y": 120,
+ "width": 82,
+ "width_original": null,
+ "height": 49,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": true,
+ "opacity": 100,
+ "order": 19,
+ "composition": "source-over",
+ "rotate": null,
+ "data": [
+ [
+ [0,48,4],[0,38,4],[1,28,4],[4,18,4],[7,10,4],[8,6,4],[8,0,4],[10,2,4],[14,10,4],[16,14,4],
+ [19,19,4],[21,20,4],[24,22,4],[25,22,4],[27,22,4],[31,22,4],[34,20,4],[41,13,4],[45,8,4],
+ [49,5,4],[52,3,4],[53,2,4],[54,2,4],[55,2,4],[59,5,4],[61,15,4],[62,21,4],[62,25,4],[62,26,4],
+ [62,26,4]
+ ],
+ [
+ [8,52,4],[23,49,4],[38,46,4],[53,43,4],[63,39,4],[70,37,4],[74,36,4],[76,36,4]
+ ]
+ ],
+ "params": {
+ "size": 4,
+ "pressure": false
+ },
+ "status": null,
+ "color": "#008000",
+ "filters": [],
+ "render_function": [
+ "brush",
+ "render"
+ ]
+ },
+ {
+ "id": 20,
+ "parent_id": 0,
+ "name": "Brush (pressure)",
+ "type": "brush",
+ "link": null,
+ "x": 530,
+ "y": 120,
+ "width": 82,
+ "width_original": null,
+ "height": 49,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": true,
+ "opacity": 100,
+ "order": 20,
+ "composition": "source-over",
+ "rotate": null,
+ "data": [
+ [
+ [0,48,4],[0,38,4],[1,28,4],[4,18,4],[7,10,4],[8,6,4],[8,0,4],[10,2,4],[14,10,4],[16,14,4],
+ [19,19,4],[21,20,4],[24,22,4],[25,22,4],[27,22,4],[31,22,4],[34,20,4],[41,13,4],[45,8,3],
+ [49,5,3],[52,3,3],[53,2,3],[54,2,2],[55,2,2],[59,5,2],[61,15,2],[62,21,1],[62,25,1],[62,26,1],
+ [62,26,1]
+ ],
+ [
+ [8,52,1],[23,49,2],[38,46,3],[53,43,4],[63,39,5],[70,37,4],[74,36,3],[76,36,2]
+ ]
+ ],
+ "params": {
+ "size": 4,
+ "pressure": true
+ },
+ "status": null,
+ "color": "#008000",
+ "filters": [],
+ "render_function": [
+ "brush",
+ "render"
+ ]
+ },
+ {
+ "id": 21,
+ "parent_id": 0,
+ "name": "Pencil (antialiasing)",
+ "type": "pencil",
+ "link": null,
+ "x": 410,
+ "y": 200,
+ "width": 53,
+ "width_original": null,
+ "height": 43,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": true,
+ "opacity": 100,
+ "order": 21,
+ "composition": "source-over",
+ "rotate": null,
+ "data": [
+ [0,39],[4,31],[8,19],[11,15],[13,13],[14,16],[16,21],[18,26],[19,28],[21,28],[26,21],[37,7],[42,1],
+ [43,0],[43,5],[43,9],[44,13],[45,16],[46,19],[46,21],[46,21],null,[12,43],[20,41],[28,39],[37,35],
+ [42,33],[46,31],[47,31],[49,30],[51,29],[53,28],[53,28]
+ ],
+ "params": {
+ "antialiasing": true,
+ "size": 2
+ },
+ "status": null,
+ "color": "#ff0000",
+ "filters": [],
+ "render_function": [
+ "pencil",
+ "render"
+ ]
+ },
+ {
+ "id": 22,
+ "parent_id": 0,
+ "name": "Pencil",
+ "type": "pencil",
+ "link": null,
+ "x": 530,
+ "y": 200,
+ "width": 40,
+ "width_original": null,
+ "height": 35,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": true,
+ "opacity": 100,
+ "order": 22,
+ "composition": "source-over",
+ "rotate": null,
+ "data": [
+ [0,28],[1,21],[5,13],[7,11],[7,10],[9,14],[11,20],[12,23],[12,24],[13,24],[17,22],[25,13],[33,3],[35,0],
+ [35,4],[35,9],[34,15],[34,17],[34,18],[34,18],null,[5,35],[17,32],[27,29],[31,28],[36,27],[38,26],
+ [39,26],[40,26],[40,26]
+ ],
+ "params": {
+ "antialiasing": false,
+ "size": 2
+ },
+ "status": null,
+ "color": "#ff0000",
+ "filters": [],
+ "render_function": [
+ "pencil",
+ "render"
+ ]
+ },
+ {
+ "id": 23,
+ "parent_id": 0,
+ "name": "Cylinder",
+ "type": "cylinder",
+ "link": null,
+ "x": 411,
+ "y": 400,
+ "width": 48,
+ "width_original": null,
+ "height": 70,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 23,
+ "composition": "source-over",
+ "rotate": 0,
+ "data": null,
+ "params": {
+ "border_size": 4,
+ "border": true,
+ "fill": true,
+ "border_color": "#555555",
+ "fill_color": "#aaaaaa"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "cylinder",
+ "render"
+ ]
+ },
+ {
+ "id": 24,
+ "parent_id": 0,
+ "name": "Heart",
+ "type": "heart",
+ "link": null,
+ "x": 830,
+ "y": 541,
+ "width": 70,
+ "width_original": null,
+ "height": 58,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 24,
+ "composition": "source-over",
+ "rotate": 0,
+ "data": null,
+ "params": {
+ "border_size": 4,
+ "border": true,
+ "fill": true,
+ "border_color": "#555555",
+ "fill_color": "#aaaaaa"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "heart",
+ "render"
+ ]
+ },
+ {
+ "id": 25,
+ "parent_id": 0,
+ "name": "Hexagon",
+ "type": "hexagon",
+ "link": null,
+ "x": 480,
+ "y": 400,
+ "width": 70,
+ "width_original": null,
+ "height": 70,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 25,
+ "composition": "source-over",
+ "rotate": 0,
+ "data": null,
+ "params": {
+ "border_size": 4,
+ "border": true,
+ "fill": true,
+ "border_color": "#555555",
+ "fill_color": "#aaaaaa"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "hexagon",
+ "render"
+ ]
+ },
+ {
+ "id": 26,
+ "parent_id": 0,
+ "name": "Pentagon",
+ "type": "pentagon",
+ "link": null,
+ "x": 480,
+ "y": 530,
+ "width": 70,
+ "width_original": null,
+ "height": 70,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 26,
+ "composition": "source-over",
+ "rotate": 0,
+ "data": null,
+ "params": {
+ "border_size": 4,
+ "border": true,
+ "fill": true,
+ "border_color": "#555555",
+ "fill_color": "#aaaaaa"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "pentagon",
+ "render"
+ ]
+ },
+ {
+ "id": 27,
+ "parent_id": 0,
+ "name": "Parallelogram",
+ "type": "parallelogram",
+ "link": null,
+ "x": 570,
+ "y": 400,
+ "width": 70,
+ "width_original": null,
+ "height": 50,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 27,
+ "composition": "source-over",
+ "rotate": 0,
+ "data": null,
+ "params": {
+ "border_size": 4,
+ "border": true,
+ "fill": true,
+ "border_color": "#555555",
+ "fill_color": "#aaaaaa"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "parallelogram",
+ "render"
+ ]
+ },
+ {
+ "id": 28,
+ "parent_id": 0,
+ "name": "Trapezoid",
+ "type": "trapezoid",
+ "link": null,
+ "x": 570,
+ "y": 558,
+ "width": 70,
+ "width_original": null,
+ "height": 40,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 28,
+ "composition": "source-over",
+ "rotate": 0,
+ "data": null,
+ "params": {
+ "border_size": 4,
+ "border": true,
+ "fill": true,
+ "border_color": "#555555",
+ "fill_color": "#aaaaaa"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "trapezoid",
+ "render"
+ ]
+ },
+ {
+ "id": 29,
+ "parent_id": 0,
+ "name": "Plus",
+ "type": "plus",
+ "link": null,
+ "x": 650,
+ "y": 400,
+ "width": 70,
+ "width_original": null,
+ "height": 70,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 29,
+ "composition": "source-over",
+ "rotate": 0,
+ "data": null,
+ "params": {
+ "border_size": 4,
+ "border": true,
+ "fill": true,
+ "border_color": "#555555",
+ "fill_color": "#aaaaaa"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "plus",
+ "render"
+ ]
+ },
+ {
+ "id": 30,
+ "parent_id": 0,
+ "name": "Right_triangle",
+ "type": "right_triangle",
+ "link": null,
+ "x": 740,
+ "y": 400,
+ "width": 70,
+ "width_original": null,
+ "height": 70,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 30,
+ "composition": "source-over",
+ "rotate": 0,
+ "data": null,
+ "params": {
+ "border_size": 4,
+ "border": true,
+ "fill": true,
+ "border_color": "#555555",
+ "fill_color": "#aaaaaa"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "right_triangle",
+ "render"
+ ]
+ },
+ {
+ "id": 31,
+ "parent_id": 0,
+ "name": "Triangle",
+ "type": "triangle",
+ "link": null,
+ "x": 740,
+ "y": 528,
+ "width": 81,
+ "width_original": null,
+ "height": 70,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 31,
+ "composition": "source-over",
+ "rotate": 0,
+ "data": null,
+ "params": {
+ "border_size": 4,
+ "border": true,
+ "fill": true,
+ "border_color": "#555555",
+ "fill_color": "#aaaaaa"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "triangle",
+ "render"
+ ]
+ },
+ {
+ "id": 32,
+ "parent_id": 0,
+ "name": "Romb",
+ "type": "romb",
+ "link": null,
+ "x": 410,
+ "y": 536,
+ "width": 50,
+ "width_original": null,
+ "height": 63,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 32,
+ "composition": "source-over",
+ "rotate": 0,
+ "data": null,
+ "params": {
+ "border_size": 4,
+ "border": true,
+ "fill": true,
+ "border_color": "#555555",
+ "fill_color": "#aaaaaa"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "romb",
+ "render"
+ ]
+ },
+ {
+ "id": 34,
+ "parent_id": 0,
+ "name": "Star",
+ "type": "star",
+ "link": null,
+ "x": 320,
+ "y": 529,
+ "width": 70,
+ "width_original": null,
+ "height": 70,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 34,
+ "composition": "source-over",
+ "rotate": 0,
+ "data": null,
+ "params": {
+ "border_size": 4,
+ "border": true,
+ "fill": true,
+ "border_color": "#555555",
+ "fill_color": "#aaaaaa"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "star",
+ "render"
+ ]
+ },
+ {
+ "id": 35,
+ "parent_id": 0,
+ "name": "Star-24",
+ "type": "star24",
+ "link": null,
+ "x": 830,
+ "y": 400,
+ "width": 70,
+ "width_original": null,
+ "height": 70,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 35,
+ "composition": "source-over",
+ "rotate": 0,
+ "data": null,
+ "params": {
+ "border_size": 4,
+ "border": true,
+ "fill": true,
+ "border_color": "#555555",
+ "fill_color": "#aaaaaa"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "star24",
+ "render"
+ ]
+ },
+ {
+ "id": 39,
+ "parent_id": 0,
+ "name": "Plus (borders)",
+ "type": "plus",
+ "link": null,
+ "x": 660,
+ "y": 466,
+ "width": 50,
+ "width_original": null,
+ "height": 50,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 39,
+ "composition": "source-over",
+ "rotate": 0,
+ "data": null,
+ "params": {
+ "border_size": 4,
+ "border": true,
+ "fill": false,
+ "border_color": "#555555",
+ "fill_color": "#aaaaaa"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "plus",
+ "render"
+ ]
+ },
+ {
+ "id": 40,
+ "parent_id": 0,
+ "name": "Plus (filled)",
+ "type": "plus",
+ "link": null,
+ "x": 660,
+ "y": 516,
+ "width": 50,
+ "width_original": null,
+ "height": 50,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 40,
+ "composition": "source-over",
+ "rotate": 0,
+ "data": null,
+ "params": {
+ "border_size": 4,
+ "border": false,
+ "fill": true,
+ "border_color": "#555555",
+ "fill_color": "#aaaaaa"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "plus",
+ "render"
+ ]
+ },
+ {
+ "id": 41,
+ "parent_id": 0,
+ "name": "Plus (rotated)",
+ "type": "plus",
+ "link": null,
+ "x": 660,
+ "y": 565,
+ "width": 50,
+ "width_original": null,
+ "height": 50,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 41,
+ "composition": "source-over",
+ "rotate": 47,
+ "data": null,
+ "params": {
+ "border_size": 4,
+ "border": true,
+ "fill": true,
+ "border_color": "#555555",
+ "fill_color": "#aaaaaa"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "plus",
+ "render"
+ ]
+ },
+ {
+ "id": 42,
+ "parent_id": 0,
+ "name": "Human",
+ "type": "human",
+ "link": null,
+ "x": 925,
+ "y": 400,
+ "width": 35,
+ "width_original": null,
+ "height": 100,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": false,
+ "opacity": 100,
+ "order": 42,
+ "composition": "source-over",
+ "rotate": 0,
+ "data": null,
+ "params": {
+ "border_size": 4,
+ "border": true,
+ "fill": true,
+ "border_color": "#555555",
+ "fill_color": "#aaaaaa"
+ },
+ "status": null,
+ "color": null,
+ "filters": [],
+ "render_function": [
+ "human",
+ "render"
+ ]
}
],
"data": [
{
- "id": 7,
+ "id": 1,
"data": "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!-- Created with Inkscape (http://www.inkscape.org/) --%3E%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' version='1.0' width='400' height='380' id='svg2'%3E%3Cdefs id='defs5' /%3E%3Cpath d='M 151.34904,307.20455 L 264.34904,307.20455 C 264.34904,291.14096 263.2021,287.95455 236.59904,287.95455 C 240.84904,275.20455 258.12424,244.35808 267.72404,244.35808 C 276.21707,244.35808 286.34904,244.82592 286.34904,264.20455 C 286.34904,286.20455 323.37171,321.67547 332.34904,307.20455 C 345.72769,285.63897 309.34904,292.21514 309.34904,240.20455 C 309.34904,169.05135 350.87417,179.18071 350.87417,139.20455 C 350.87417,119.20455 345.34904,116.50374 345.34904,102.20455 C 345.34904,83.30695 361.99717,84.403577 358.75805,68.734879 C 356.52061,57.911656 354.76962,49.23199 353.46516,36.143889 C 352.53959,26.857305 352.24452,16.959398 342.59855,17.357382 C 331.26505,17.824992 326.96549,37.77419 309.34904,39.204549 C 291.76851,40.631991 276.77834,24.238028 269.97404,26.579549 C 263.22709,28.901334 265.34904,47.204549 269.34904,60.204549 C 275.63588,80.636771 289.34904,107.20455 264.34904,111.20455 C 239.34904,115.20455 196.34904,119.20455 165.34904,160.20455 C 134.34904,201.20455 135.49342,249.3212 123.34904,264.20455 C 82.590696,314.15529 40.823919,293.64625 40.823919,335.20455 C 40.823919,353.81019 72.349045,367.20455 77.349045,361.20455 C 82.349045,355.20455 34.863764,337.32587 87.995492,316.20455 C 133.38711,298.16014 137.43914,294.47663 151.34904,307.20455 z ' style='fill:%23a70d0d;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' id='path1891' /%3E%3C/svg%3E%0A"
}
]
-}
\ No newline at end of file
+}
diff --git a/src/css/layout.css b/src/css/layout.css
index fe413f7..5545b8d 100644
--- a/src/css/layout.css
+++ b/src/css/layout.css
@@ -286,10 +286,8 @@ body .sp-preview{
.sidebar_left .erase:after{ background-image: url('images/icons/erase.svg'); }
.sidebar_left .magic_erase:after{ background-image: url('images/icons/magic_erase.svg'); }
.sidebar_left .fill:after{ background-image: url('images/icons/fill.svg'); }
-.sidebar_left .line:after{ background-image: url('images/icons/line.svg'); }
-.sidebar_left .rectangle:after{ background-image: url('images/icons/rectangle.svg'); }
-.sidebar_left .circle:after{ background-image: url('images/icons/circle.svg'); }
.sidebar_left .media:after{ background-image: url('images/icons/media.svg'); }
+.sidebar_left .shape:after{ background-image: url('../../images/icons/shape.svg'); }
.sidebar_left .text:after{
background-image: url('images/icons/text.svg');
background-size: 16px auto;
diff --git a/src/js/actions/activate-tool.js b/src/js/actions/activate-tool.js
index b246b7c..3b8d7e5 100644
--- a/src/js/actions/activate-tool.js
+++ b/src/js/actions/activate-tool.js
@@ -24,14 +24,13 @@ export class Activate_tool_action extends Base_action {
if (this.key !== this.old_key || this.ignore_same_tool) {
//reset last
- document.querySelector('#tools_container .' + this.old_key)
- .classList.remove("active");
+ document.querySelector('#tools_container .' + this.old_key).classList.remove("active");
//send exit event to old previous tool
if (config.TOOL.on_leave != undefined) {
var moduleKey = config.TOOL.name;
var functionName = config.TOOL.on_leave;
- this.tool_leave_actions = app.GUI.GUI_tools.tools_modules[moduleKey][functionName]();
+ this.tool_leave_actions = app.GUI.GUI_tools.tools_modules[moduleKey].object[functionName]();
if (this.tool_leave_actions) {
for (let action of this.tool_leave_actions) {
await action.do();
@@ -70,7 +69,7 @@ export class Activate_tool_action extends Base_action {
if (config.TOOL.on_activate != undefined) {
var moduleKey = config.TOOL.name;
var functionName = config.TOOL.on_activate;
- this.tool_activate_actions = app.GUI.GUI_tools.tools_modules[moduleKey][functionName]();
+ this.tool_activate_actions = app.GUI.GUI_tools.tools_modules[moduleKey].object[functionName]();
if (this.tool_activate_actions) {
for (let action of this.tool_activate_actions) {
await action.do();
diff --git a/src/js/actions/stop-animation.js b/src/js/actions/stop-animation.js
index 40db6d2..7dcda6c 100644
--- a/src/js/actions/stop-animation.js
+++ b/src/js/actions/stop-animation.js
@@ -13,7 +13,7 @@ export class Stop_animation_action extends Base_action {
async do() {
super.do();
- const animation_tool = app.GUI.GUI_tools.tools_modules.animation;
+ const animation_tool = app.GUI.GUI_tools.tools_modules.animation.object;
var params = animation_tool.getParams();
if (animation_tool.intervalID == null)
return;
@@ -36,7 +36,7 @@ export class Stop_animation_action extends Base_action {
async undo() {
super.undo();
- const animation_tool = app.GUI.GUI_tools.tools_modules.animation;
+ const animation_tool = app.GUI.GUI_tools.tools_modules.animation.object;
var params = animation_tool.getParams();
if (animation_tool.intervalID == null)
return;
diff --git a/src/js/config.js b/src/js/config.js
index f5efd89..3b8d3c7 100644
--- a/src/js/config.js
+++ b/src/js/config.js
@@ -81,13 +81,11 @@ config.TOOLS = [
},
{
name: 'selection',
- title: 'Selection',
attributes: {},
on_leave: 'on_leave',
},
{
name: 'brush',
- title: 'Brush',
attributes: {
size: 4,
pressure: false,
@@ -95,7 +93,6 @@ config.TOOLS = [
},
{
name: 'pencil',
- title: 'Pencil',
on_update: 'on_params_update',
attributes: {
antialiasing: true,
@@ -104,14 +101,12 @@ config.TOOLS = [
},
{
name: 'pick_color',
- title: 'Pick Color',
attributes: {
global: false,
},
},
{
name: 'erase',
- title: 'Erase',
on_update: 'on_params_update',
attributes: {
size: 30,
@@ -130,7 +125,6 @@ config.TOOLS = [
},
{
name: 'fill',
- title: 'Fill',
attributes: {
power: 5,
anti_aliasing: false,
@@ -138,35 +132,52 @@ config.TOOLS = [
},
},
{
- name: 'line',
- title: 'Line',
+ name: 'shape',
+ on_activate: 'on_activate',
attributes: {
- size: 1,
- type: {
- value: 'Simple',
- values: ['Simple', 'Arrow'],
- },
+ size: 3,
+ stroke: '#00aa00',
+ },
+ },
+ {
+ name: 'line',
+ visible: false,
+ attributes: {
+ size: 4,
+ },
+ },
+ {
+ name: 'arrow',
+ visible: false,
+ attributes: {
+ size: 4,
},
},
{
name: 'rectangle',
- title: 'Rectangle',
+ visible: false,
attributes: {
- size: 1,
+ border_size: 4,
+ border: false,
+ fill: true,
+ border_color: '#555555',
+ fill_color: '#aaaaaa',
radius: {
value: 0,
min: 0,
},
- fill: true,
square: false,
},
},
{
- name: 'circle',
- title: 'Circle',
+ name: 'ellipse',
+ visible: false,
attributes: {
- size: 1,
+ border_size: 4,
+ border: false,
fill: true,
+ border_color: '#555555',
+ fill_color: '#aaaaaa',
circle: false,
},
},
@@ -178,9 +189,152 @@ config.TOOLS = [
size: 30,
},
},
+ {
+ name: 'triangle',
+ visible: false,
+ attributes: {
+ border_size: 4,
+ border: false,
+ fill: true,
+ border_color: '#555555',
+ fill_color: '#aaaaaa',
+ },
+ },
+ {
+ name: 'right_triangle',
+ visible: false,
+ attributes: {
+ border_size: 4,
+ border: false,
+ fill: true,
+ border_color: '#555555',
+ fill_color: '#aaaaaa',
+ },
+ },
+ {
+ name: 'romb',
+ visible: false,
+ attributes: {
+ border_size: 4,
+ border: false,
+ fill: true,
+ border_color: '#555555',
+ fill_color: '#aaaaaa',
+ },
+ },
+ {
+ name: 'parallelogram',
+ visible: false,
+ attributes: {
+ border_size: 4,
+ border: false,
+ fill: true,
+ border_color: '#555555',
+ fill_color: '#aaaaaa',
+ },
+ },
+ {
+ name: 'trapezoid',
+ visible: false,
+ attributes: {
+ border_size: 4,
+ border: false,
+ fill: true,
+ border_color: '#555555',
+ fill_color: '#aaaaaa',
+ },
+ },
+ {
+ name: 'plus',
+ visible: false,
+ attributes: {
+ border_size: 4,
+ border: false,
+ fill: true,
+ border_color: '#555555',
+ fill_color: '#aaaaaa',
+ },
+ },
+ {
+ name: 'pentagon',
+ visible: false,
+ attributes: {
+ border_size: 4,
+ border: false,
+ fill: true,
+ border_color: '#555555',
+ fill_color: '#aaaaaa',
+ },
+ },
+ {
+ name: 'hexagon',
+ visible: false,
+ attributes: {
+ border_size: 4,
+ border: false,
+ fill: true,
+ border_color: '#555555',
+ fill_color: '#aaaaaa',
+ },
+ },
+ {
+ name: 'star',
+ visible: false,
+ attributes: {
+ border_size: 4,
+ border: false,
+ fill: true,
+ border_color: '#555555',
+ fill_color: '#aaaaaa',
+ },
+ },
+ {
+ name: 'star24',
+ title: '24-Points star',
+ visible: false,
+ attributes: {
+ border_size: 4,
+ border: false,
+ fill: true,
+ border_color: '#555555',
+ fill_color: '#aaaaaa',
+ },
+ },
+ {
+ name: 'heart',
+ visible: false,
+ attributes: {
+ border_size: 4,
+ border: false,
+ fill: true,
+ border_color: '#555555',
+ fill_color: '#aaaaaa',
+ },
+ },
+ {
+ name: 'cylinder',
+ visible: false,
+ attributes: {
+ border_size: 4,
+ border: true,
+ fill: true,
+ border_color: '#555555',
+ fill_color: '#aaaaaa',
+ },
+ },
+ {
+ name: 'human',
+ visible: false,
+ attributes: {
+ border_size: 4,
+ border: true,
+ fill: true,
+ border_color: '#555555',
+ fill_color: '#aaaaaa',
+ },
+ },
{
name: 'text',
- title: 'Text',
on_update: 'on_params_update',
attributes: {
font: {
@@ -227,7 +381,6 @@ config.TOOLS = [
},
{
name: 'gradient',
- title: 'Gradient',
attributes: {
color_1: '#008000',
color_2: '#ffffff',
@@ -238,7 +391,6 @@ config.TOOLS = [
},
{
name: 'clone',
- title: 'Clone tool',
attributes: {
size: 30,
anti_aliasing: true,
@@ -250,7 +402,6 @@ config.TOOLS = [
},
{
name: 'crop',
- title: 'Crop',
on_update: 'on_params_update',
on_leave: 'on_leave',
attributes: {
@@ -259,7 +410,6 @@ config.TOOLS = [
},
{
name: 'blur',
- title: 'Blur tool',
attributes: {
size: 30,
strength: 1,
@@ -267,14 +417,12 @@ config.TOOLS = [
},
{
name: 'sharpen',
- title: 'Sharpen tool',
attributes: {
size: 30,
},
},
{
name: 'desaturate',
- title: 'Desaturate',
attributes: {
size: 50,
anti_aliasing: true,
@@ -291,7 +439,6 @@ config.TOOLS = [
},
{
name: 'animation',
- title: 'Play animation',
on_activate: 'on_activate',
on_update: 'on_params_update',
on_leave: 'on_leave',
diff --git a/src/js/core/base-layers.js b/src/js/core/base-layers.js
index 2d3566a..98ca403 100644
--- a/src/js/core/base-layers.js
+++ b/src/js/core/base-layers.js
@@ -197,8 +197,8 @@ class Base_layers_class {
var render_class = config.TOOL.name;
var render_function = 'render_overlay';
- if(typeof this.Base_gui.GUI_tools.tools_modules[render_class][render_function] != "undefined") {
- this.Base_gui.GUI_tools.tools_modules[render_class][render_function](this.ctx);
+ if(typeof this.Base_gui.GUI_tools.tools_modules[render_class].object[render_function] != "undefined") {
+ this.Base_gui.GUI_tools.tools_modules[render_class].object[render_function](this.ctx);
}
}
@@ -307,7 +307,7 @@ class Base_layers_class {
var render_function = object.render_function[1];
if(typeof this.Base_gui.GUI_tools.tools_modules[render_class] != "undefined") {
- this.Base_gui.GUI_tools.tools_modules[render_class][render_function](ctx, object, is_preview);
+ this.Base_gui.GUI_tools.tools_modules[render_class].object[render_function](ctx, object, is_preview);
}
else{
this.render_success = false;
diff --git a/src/js/core/base-selection.js b/src/js/core/base-selection.js
index 788258b..9ec9beb 100644
--- a/src/js/core/base-selection.js
+++ b/src/js/core/base-selection.js
@@ -78,7 +78,7 @@ class Base_selection_class {
document.addEventListener('touchstart', (event) => {
this.is_drag = false;
this.is_touch = true;
- if (!e.target.closest('#main_wrapper'))
+ if (!event.target.closest('#main_wrapper'))
return;
this.is_drag = true;
this.selected_object_actions(event);
diff --git a/src/js/core/base-tools.js b/src/js/core/base-tools.js
index 37e7d01..73b397d 100644
--- a/src/js/core/base-tools.js
+++ b/src/js/core/base-tools.js
@@ -6,6 +6,8 @@
import config from './../config.js';
import Base_layers_class from './base-layers.js';
import Base_gui_class from './base-gui.js';
+import app from "../app";
+import Helper_class from "../libs/helpers";
/**
* Base tools class, can be used for extending on tools like brush, provides various helping methods.
@@ -15,6 +17,7 @@ class Base_tools_class {
constructor(save_mouse) {
this.Base_layers = new Base_layers_class();
this.Base_gui = new Base_gui_class();
+ this.Helper = new Helper_class();
this.is_drag = false;
this.mouse_last_click_pos = [false, false];
this.mouse_click_pos = [false, false];
@@ -307,5 +310,199 @@ class Base_tools_class {
return response;
}
+ draw_shape(ctx, x, y, width, height, coords, is_demo) {
+ if(is_demo !== false) {
+ ctx.fillStyle = '#aaa';
+ ctx.strokeStyle = '#555';
+ ctx.lineWidth = 2;
+ }
+ ctx.lineJoin = "round";
+
+ ctx.beginPath();
+ for(var i in coords){
+ if(coords[i] === null){
+ ctx.closePath();
+ ctx.fill();
+ ctx.stroke();
+ ctx.beginPath();
+ continue;
+ }
+
+ //coords in 100x100 box
+ var pos_x = x + coords[i][0] * width / 100;
+ var pos_y = y + coords[i][1] * height / 100;
+
+ if(i == '0')
+ ctx.moveTo(pos_x, pos_y);
+ else
+ ctx.lineTo(pos_x, pos_y);
+ }
+ ctx.closePath();
+
+ ctx.fill();
+ ctx.stroke();
+ }
+
+ default_events(){
+ var _this = this;
+
+ //mouse events
+ document.addEventListener('mousedown', function (event) {
+ _this.default_dragStart(event);
+ });
+ document.addEventListener('mousemove', function (event) {
+ _this.default_dragMove(event);
+ });
+ document.addEventListener('mouseup', function (event) {
+ _this.default_dragEnd(event);
+ });
+
+ // collect touch events
+ document.addEventListener('touchstart', function (event) {
+ _this.default_dragStart(event);
+ });
+ document.addEventListener('touchmove', function (event) {
+ _this.default_dragMove(event);
+ });
+ document.addEventListener('touchend', function (event) {
+ _this.default_dragEnd(event);
+ });
+ }
+
+ default_dragStart(event) {
+ if (config.TOOL.name != this.name)
+ return;
+ this.mousedown(event);
+ }
+
+ default_dragMove(event) {
+ if (config.TOOL.name != this.name)
+ return;
+ this.mousemove(event);
+ }
+
+ default_dragEnd(event) {
+ if (config.TOOL.name != this.name)
+ return;
+ this.mouseup(event);
+ }
+
+ shape_mousedown(e) {
+ var mouse = this.get_mouse_info(e);
+ if (mouse.valid == false || mouse.click_valid == false)
+ return;
+
+ //register new object - current layer is not ours or params changed
+ this.layer = {
+ type: this.name,
+ params: this.clone(this.getParams()),
+ status: 'draft',
+ render_function: [this.name, 'render'],
+ x: Math.round(mouse.x),
+ y: Math.round(mouse.y),
+ color: null,
+ is_vector: true
+ };
+ app.State.do_action(
+ new app.Actions.Bundle_action('new_'+this.name+'_layer', 'New '+this.Helper.ucfirst(this.name)+' Layer', [
+ new app.Actions.Insert_layer_action(this.layer)
+ ])
+ );
+ }
+
+ shape_mousemove(e) {
+ var mouse = this.get_mouse_info(e);
+ var params = this.getParams();
+
+ if (mouse.is_drag == false)
+ return;
+ if (mouse.valid == false || mouse.click_valid == false) {
+ return;
+ }
+
+ var mouse_x = Math.round(mouse.x);
+ var mouse_y = Math.round(mouse.y);
+ var click_x = Math.round(mouse.click_x);
+ var click_y = Math.round(mouse.click_y);
+ var x = Math.min(mouse_x, click_x);
+ var y = Math.min(mouse_y, click_y);
+ var width = Math.abs(mouse_x - click_x);
+ var height = Math.abs(mouse_y - click_y);
+
+ if (e.ctrlKey == true || e.metaKey) {
+ if (width < height * this.best_ratio) {
+ width = height * this.best_ratio;
+ }
+ else {
+ height = width / this.best_ratio;
+ }
+ if (mouse_x < click_x) {
+ x = click_x - width;
+ }
+ if (mouse_y < click_y) {
+ y = click_y - height;
+ }
+ }
+
+ //more data
+ config.layer.x = x;
+ config.layer.y = y;
+ config.layer.width = width;
+ config.layer.height = height;
+ this.Base_layers.render();
+ }
+
+ shape_mouseup(e) {
+ var mouse = this.get_mouse_info(e);
+ var params = this.getParams();
+
+ if (mouse.valid == false || mouse.click_valid == false) {
+ config.layer.status = null;
+ return;
+ }
+
+ var mouse_x = Math.round(mouse.x);
+ var mouse_y = Math.round(mouse.y);
+ var click_x = Math.round(mouse.click_x);
+ var click_y = Math.round(mouse.click_y);
+ var x = Math.min(mouse_x, click_x);
+ var y = Math.min(mouse_y, click_y);
+ var width = Math.abs(mouse_x - click_x);
+ var height = Math.abs(mouse_y - click_y);
+
+ if (e.ctrlKey == true || e.metaKey) {
+ if (width < height * this.best_ratio) {
+ width = height * this.best_ratio;
+ }
+ else {
+ height = width / this.best_ratio;
+ }
+ if (mouse_x < click_x) {
+ x = click_x - width;
+ }
+ if (mouse_y < click_y) {
+ y = click_y - height;
+ }
+ }
+
+ if (width == 0 && height == 0) {
+ //same coordinates - cancel
+ app.State.scrap_last_action();
+ return;
+ }
+
+ //more data
+ app.State.do_action(
+ new app.Actions.Update_layer_action(config.layer.id, {
+ x,
+ y,
+ width,
+ height,
+ status: null
+ }),
+ { merge_with_history: 'new_'+this.name+'_layer' }
+ );
+ }
+
}
export default Base_tools_class;
diff --git a/src/js/core/gui/gui-details.js b/src/js/core/gui/gui-details.js
index 0eb2bd8..44922fc 100644
--- a/src/js/core/gui/gui-details.js
+++ b/src/js/core/gui/gui-details.js
@@ -137,6 +137,10 @@ class GUI_details_class {
document.getElementById('text_detail_params').style.display = 'block';
document.getElementById('detail_color').closest('.row').style.display = 'none';
}
+ else if (config.layer != undefined && (config.layer.color === null || config.layer.type == 'image')) {
+ //hide color
+ document.getElementById('detail_color').closest('.row').style.display = 'none';
+ }
else {
document.getElementById('text_detail_params').style.display = 'none';
document.getElementById('detail_color').closest('.row').style.display = 'block';
diff --git a/src/js/core/gui/gui-tools.js b/src/js/core/gui/gui-tools.js
index 9f9aad1..af99355 100644
--- a/src/js/core/gui/gui-tools.js
+++ b/src/js/core/gui/gui-tools.js
@@ -40,11 +40,30 @@ class GUI_tools_class {
plugins_context.keys().forEach(function (key) {
if (key.indexOf('Base' + '/') < 0) {
var moduleKey = key.replace('./', '').replace('.js', '');
+ var full_key = moduleKey;
+ if (moduleKey.indexOf('/') > -1) {
+ var parts = moduleKey.split("/");
+ moduleKey = parts[parts.length - 1];
+ }
+
var classObj = plugins_context(key);
- _this.tools_modules[moduleKey] = new classObj.default(ctx);
+ var object = new classObj.default(ctx);
+
+ var title = _this.Helper.ucfirst(object.name);
+ title = title.replace(/_/, ' ');
+
+ _this.tools_modules[moduleKey] = {
+ key: moduleKey,
+ full_key: full_key,
+ name: object.name,
+ title: title,
+ object: object,
+ };
//init events once
- _this.tools_modules[moduleKey].load();
+ if(typeof object.load != "undefined") {
+ object.load();
+ }
}
});
}
@@ -59,8 +78,8 @@ class GUI_tools_class {
var target_id = "tools_container";
var _this = this;
var saved_tool = this.Helper.getCookie('active_tool');
- if(saved_tool == 'media') {
- //bringing this backby default gives bad UX
+ if(saved_tool == 'media' || saved_tool == 'shape') {
+ //bringing this back by default gives bad UX
saved_tool = null
}
if (saved_tool != null) {
@@ -70,16 +89,23 @@ class GUI_tools_class {
//left menu
for (var i in config.TOOLS) {
var item = config.TOOLS[i];
+ if(item.title)
+ var title = item.title;
+ else
+ var title = this.Helper.ucfirst(item.name).replace(/_/, ' ');
var itemDom = document.createElement('span');
itemDom.id = item.name;
- itemDom.title = item.title;
+ itemDom.title = title;
if (item.name == this.active_tool) {
itemDom.className = 'item trn active ' + item.name;
}
else {
itemDom.className = 'item trn ' + item.name;
}
+ if(item.visible === false){
+ itemDom.style.display = 'none';
+ }
//event
itemDom.addEventListener('click', function (event) {
@@ -195,7 +221,7 @@ class GUI_tools_class {
//send event
var moduleKey = actionData.name;
var functionName = actionData.on_update;
- this.tools_modules[moduleKey][functionName]({ key: id, value: new_value });
+ this.tools_modules[moduleKey].object[functionName]({ key: id, value: new_value });
}
});
@@ -255,7 +281,7 @@ class GUI_tools_class {
//send event
var moduleKey = actionData.name;
var functionName = actionData.on_update;
- this.tools_modules[moduleKey][functionName]({ key: id, value: value });
+ this.tools_modules[moduleKey].object[functionName]({ key: id, value: value });
}
});
@@ -292,7 +318,7 @@ class GUI_tools_class {
//send event
var moduleKey = actionData.name;
var functionName = actionData.on_update;
- this.tools_modules[moduleKey][functionName]({ key: event.target.id, value: event.target.value });
+ this.tools_modules[moduleKey].object[functionName]({ key: event.target.id, value: event.target.value });
}
});
@@ -322,7 +348,7 @@ class GUI_tools_class {
//send event
var moduleKey = actionData.name;
var functionName = actionData.on_update;
- this.tools_modules[moduleKey][functionName]({ key: id, value: value });
+ this.tools_modules[moduleKey].object[functionName]({ key: id, value: value });
}
});
diff --git a/src/js/modules/effects/browser.js b/src/js/modules/effects/browser.js
index 88a56a9..c1f7e0d 100644
--- a/src/js/modules/effects/browser.js
+++ b/src/js/modules/effects/browser.js
@@ -33,6 +33,9 @@ class Effects_browser_class extends Base_tools_class {
html += '' + title + '
';
html += '';
}
+ for (var i = 0; i < 4; i++) {
+ html += '';
+ }
var settings = {
title: 'Effects browser',
diff --git a/src/js/modules/file/open.js b/src/js/modules/file/open.js
index ee6a968..248d52e 100644
--- a/src/js/modules/file/open.js
+++ b/src/js/modules/file/open.js
@@ -413,6 +413,8 @@ class File_open_class {
if (json.info.version == undefined) {
json.info.version = "3";
}
+
+ //migration
if (json.info.version < "4") {
//convert from v3 to v4
for (var i in json.layers) {
@@ -444,6 +446,40 @@ class File_open_class {
);
}
}
+ if(json.info.version < "4.5.0"){
+ //migrate "rectangle", "circle" and "line" types to "shape"
+ for (var i in json.layers) {
+ var old_type = json.layers[i].type;
+
+ if(old_type == 'line' && json.layers[i].params.type.value == "Arrow"){
+ //migrate line (type=arrow) to arrow.
+ json.layers[i].type = 'arrow';
+ delete json.layers[i].params.type;
+ json.layers[i].render_function = ["arrow", "render"];
+ }
+ if(old_type == 'rectangle' || old_type == 'circle'){
+ //migrate params
+ json.layers[i].params.border_size = json.layers[i].params.size;
+ delete json.layers[i].params.size;
+
+ if(json.layers[i].params.fill == true){
+ json.layers[i].params.border = false;
+ }
+ else{
+ json.layers[i].params.border = true;
+ }
+ json.layers[i].params.border_color = json.layers[i].color;
+ json.layers[i].params.fill_color = json.layers[i].color;
+
+ json.layers[i].color = null;
+ }
+ if(old_type == 'circle'){
+ //rename circle to ellipse
+ json.layers[i].type = 'ellipse';
+ json.layers[i].render_function = ["ellipse", "render"];
+ }
+ }
+ }
const actions = [];
diff --git a/src/js/tools/blur.js b/src/js/tools/blur.js
index e265455..d8ccf75 100644
--- a/src/js/tools/blur.js
+++ b/src/js/tools/blur.js
@@ -19,56 +19,19 @@ class Blur_class extends Base_tools_class {
this.started = false;
}
- dragStart(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
- return;
- _this.mousedown(event);
+ load() {
+ this.default_events();
}
- dragMove(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
+ default_dragMove(event) {
+ if (config.TOOL.name != this.name)
return;
- _this.mousemove(event);
+ this.mousemove(event);
//mouse cursor
- var mouse = _this.get_mouse_info(event);
- var params = _this.getParams();
- _this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
- }
-
- dragEnd(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
- return;
- _this.mouseup(event);
- }
-
- load() {
- var _this = this;
-
- //mouse events
- document.addEventListener('mousedown', function (event) {
- _this.dragStart(event);
- });
- document.addEventListener('mousemove', function (event) {
- _this.dragMove(event);
- });
- document.addEventListener('mouseup', function (event) {
- _this.dragEnd(event);
- });
-
- // collect touch events
- document.addEventListener('touchstart', function (event) {
- _this.dragStart(event);
- });
- document.addEventListener('touchmove', function (event) {
- _this.dragMove(event);
- });
- document.addEventListener('touchend', function (event) {
- _this.dragEnd(event);
- });
+ var mouse = this.get_mouse_info(event);
+ var params = this.getParams();
+ this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
}
mousedown(e) {
diff --git a/src/js/tools/bulge_pinch.js b/src/js/tools/bulge_pinch.js
index fd5b607..412a597 100644
--- a/src/js/tools/bulge_pinch.js
+++ b/src/js/tools/bulge_pinch.js
@@ -20,55 +20,18 @@ class BulgePinch_class extends Base_tools_class {
this.started = false;
}
- dragStart(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
- return;
- _this.mousedown(event);
+ load() {
+ this.default_events();
}
- dragMove(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
+ default_dragMove(event) {
+ if (config.TOOL.name != this.name)
return;
//mouse cursor
- var mouse = _this.get_mouse_info(event);
- var params = _this.getParams();
- _this.show_mouse_cursor(mouse.x, mouse.y, params.radius, 'circle');
- }
-
- dragEnd(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
- return;
- _this.mouseup(event);
- }
-
- load() {
- var _this = this;
-
- //mouse events
- document.addEventListener('mousedown', function (event) {
- _this.dragStart(event);
- });
- document.addEventListener('mousemove', function (event) {
- _this.dragMove(event);
- });
- document.addEventListener('mouseup', function (event) {
- _this.dragEnd(event);
- });
-
- // collect touch events
- document.addEventListener('touchstart', function (event) {
- _this.dragStart(event);
- });
- document.addEventListener('touchmove', function (event) {
- _this.dragMove(event);
- });
- document.addEventListener('touchend', function (event) {
- _this.dragEnd(event);
- });
+ var mouse = this.get_mouse_info(event);
+ var params = this.getParams();
+ this.show_mouse_cursor(mouse.x, mouse.y, params.radius, 'circle');
}
mousedown(e) {
diff --git a/src/js/tools/clone.js b/src/js/tools/clone.js
index fb2ff1a..7b79410 100644
--- a/src/js/tools/clone.js
+++ b/src/js/tools/clone.js
@@ -20,44 +20,6 @@ class Clone_class extends Base_tools_class {
this.pressTimer = null;
}
- dragStart(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
- return;
- _this.mousedown(event);
-
- var mouse = this.get_mouse_info(event);
- if (mouse.valid == true) {
- this.pressTimer = window.setTimeout(function() {
- //long press success
- _this.mouseLongClick();
- }, 2000);
- }
- }
-
- dragMove(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
- return;
- _this.mousemove(event);
-
- //mouse cursor
- var mouse = _this.get_mouse_info(event);
- var params = _this.getParams();
- _this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
-
- clearTimeout(this.pressTimer);
- }
-
- dragEnd(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
- return;
- _this.mouseup(event);
-
- clearTimeout(this.pressTimer);
- }
-
load() {
var _this = this;
var is_touch = false;
@@ -96,6 +58,44 @@ class Clone_class extends Base_tools_class {
});
}
+ dragStart(event) {
+ var _this = this;
+ if (config.TOOL.name != _this.name)
+ return;
+ _this.mousedown(event);
+
+ var mouse = this.get_mouse_info(event);
+ if (mouse.valid == true) {
+ this.pressTimer = window.setTimeout(function() {
+ //long press success
+ _this.mouseLongClick();
+ }, 2000);
+ }
+ }
+
+ dragMove(event) {
+ var _this = this;
+ if (config.TOOL.name != _this.name)
+ return;
+ _this.mousemove(event);
+
+ //mouse cursor
+ var mouse = _this.get_mouse_info(event);
+ var params = _this.getParams();
+ _this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
+
+ clearTimeout(this.pressTimer);
+ }
+
+ dragEnd(event) {
+ var _this = this;
+ if (config.TOOL.name != _this.name)
+ return;
+ _this.mouseup(event);
+
+ clearTimeout(this.pressTimer);
+ }
+
on_params_update() {
var params = this.getParams();
var strict_element = document.getElementById('strict');
diff --git a/src/js/tools/crop.js b/src/js/tools/crop.js
index 60639bc..f3760fd 100644
--- a/src/js/tools/crop.js
+++ b/src/js/tools/crop.js
@@ -36,54 +36,21 @@ class Crop_class extends Base_tools_class {
this.Base_selection = new Base_selection_class(ctx, sel_config, this.name);
}
- dragStart(event) {
+ load() {
+ this.default_events();
+ }
+
+ default_dragStart(event) {
this.is_mousedown_canvas = false;
if (config.TOOL.name != this.name)
return;
if (!event.target.closest('#main_wrapper'))
return;
+
this.is_mousedown_canvas = true;
this.mousedown(event);
}
- dragMove(event) {
- if (config.TOOL.name != this.name)
- return;
- this.mousemove(event);
- }
-
- dragEnd(event) {
- if (config.TOOL.name != this.name)
- return;
- this.mouseup(event);
- }
-
- load() {
- var _this = this;
-
- //mouse events
- document.addEventListener('mousedown', function (event) {
- _this.dragStart(event);
- });
- document.addEventListener('mousemove', function (event) {
- _this.dragMove(event);
- });
- document.addEventListener('mouseup', function (event) {
- _this.dragEnd(event);
- });
-
- // collect touch events
- document.addEventListener('touchstart', function (event) {
- _this.dragStart(event);
- });
- document.addEventListener('touchmove', function (event) {
- _this.dragMove(event);
- });
- document.addEventListener('touchend', function (event) {
- _this.dragEnd(event);
- });
- }
-
mousedown(e) {
var mouse = this.get_mouse_info(e);
if (this.Base_selection.is_drag == false || mouse.valid == false || mouse.click_valid == false)
diff --git a/src/js/tools/desaturate.js b/src/js/tools/desaturate.js
index 5531ac0..f32a12c 100644
--- a/src/js/tools/desaturate.js
+++ b/src/js/tools/desaturate.js
@@ -19,56 +19,19 @@ class Desaturate_class extends Base_tools_class {
this.started = false;
}
- dragStart(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
- return;
- _this.mousedown(event);
+ load() {
+ this.default_events();
}
- dragMove(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
+ default_dragMove(event) {
+ if (config.TOOL.name != this.name)
return;
- _this.mousemove(event);
+ this.mousemove(event);
//mouse cursor
- var mouse = _this.get_mouse_info(event);
- var params = _this.getParams();
- _this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
- }
-
- dragEnd(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
- return;
- _this.mouseup(event);
- }
-
- load() {
- var _this = this;
-
- //mouse events
- document.addEventListener('mousedown', function (event) {
- _this.dragStart(event);
- });
- document.addEventListener('mousemove', function (event) {
- _this.dragMove(event);
- });
- document.addEventListener('mouseup', function (event) {
- _this.dragEnd(event);
- });
-
- // collect touch events
- document.addEventListener('touchstart', function (event) {
- _this.dragStart(event);
- });
- document.addEventListener('touchmove', function (event) {
- _this.dragMove(event);
- });
- document.addEventListener('touchend', function (event) {
- _this.dragEnd(event);
- });
+ var mouse = this.get_mouse_info(event);
+ var params = this.getParams();
+ this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
}
mousedown(e) {
diff --git a/src/js/tools/erase.js b/src/js/tools/erase.js
index 5391a88..f67059c 100644
--- a/src/js/tools/erase.js
+++ b/src/js/tools/erase.js
@@ -16,59 +16,22 @@ class Erase_class extends Base_tools_class {
this.started = false;
}
- dragStart(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
- return;
- _this.mousedown(event);
+ load() {
+ this.default_events();
}
- dragMove(event, is_touch) {
- var _this = this;
- if (config.TOOL.name != _this.name)
+ default_dragMove(event, is_touch) {
+ if (config.TOOL.name != this.name)
return;
- _this.mousemove(event, is_touch);
+ this.mousemove(event, is_touch);
//mouse cursor
- var mouse = _this.get_mouse_info(event);
- var params = _this.getParams();
+ var mouse = this.get_mouse_info(event);
+ var params = this.getParams();
if (params.circle == true)
- _this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
+ this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
else
- _this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'rect');
- }
-
- dragEnd(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
- return;
- _this.mouseup(event);
- }
-
- load() {
- var _this = this;
-
- //mouse events
- document.addEventListener('mousedown', function (event) {
- _this.dragStart(event);
- });
- document.addEventListener('mousemove', function (event) {
- _this.dragMove(event, false);
- });
- document.addEventListener('mouseup', function (event) {
- _this.dragEnd(event);
- });
-
- // collect touch events
- document.addEventListener('touchstart', function (event) {
- _this.dragStart(event);
- });
- document.addEventListener('touchmove', function (event) {
- _this.dragMove(event, true);
- });
- document.addEventListener('touchend', function (event) {
- _this.dragEnd(event);
- });
+ this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'rect');
}
on_params_update() {
diff --git a/src/js/tools/gradient.js b/src/js/tools/gradient.js
index 719c251..e050dad 100644
--- a/src/js/tools/gradient.js
+++ b/src/js/tools/gradient.js
@@ -15,51 +15,8 @@ class Gradient_class extends Base_tools_class {
this.layer = {};
}
- dragStart(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
- return;
- _this.mousedown(event);
- }
-
- dragMove(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
- return;
- _this.mousemove(event);
- }
-
- dragEnd(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
- return;
- _this.mouseup(event);
- }
-
load() {
- var _this = this;
-
- //mouse events
- document.addEventListener('mousedown', function (event) {
- _this.dragStart(event);
- });
- document.addEventListener('mousemove', function (event) {
- _this.dragMove(event);
- });
- document.addEventListener('mouseup', function (event) {
- _this.dragEnd(event);
- });
-
- // collect touch events
- document.addEventListener('touchstart', function (event) {
- _this.dragStart(event);
- });
- document.addEventListener('touchmove', function (event) {
- _this.dragMove(event);
- });
- document.addEventListener('touchend', function (event) {
- _this.dragEnd(event);
- });
+ this.default_events();
}
mousedown(e) {
diff --git a/src/js/tools/pencil.js b/src/js/tools/pencil.js
index c3dc2f9..84f70e3 100644
--- a/src/js/tools/pencil.js
+++ b/src/js/tools/pencil.js
@@ -13,57 +13,20 @@ class Pencil_class extends Base_tools_class {
this.params_hash = false;
}
- dragStart(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
- return;
- _this.mousedown(event);
+ load() {
+ this.default_events();
}
dragMove(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
+ if (config.TOOL.name != this.name)
return;
- _this.mousemove(event);
+ this.mousemove(event);
//mouse cursor
- var mouse = _this.get_mouse_info(event);
- var params = _this.getParams();
+ var mouse = this.get_mouse_info(event);
+ var params = this.getParams();
if (params.antialiasing == true)
- _this.show_mouse_cursor(mouse.x, mouse.y, params.size || 1, 'circle');
- }
-
- dragEnd(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
- return;
- _this.mouseup(event);
- }
-
- load() {
- var _this = this;
-
- //mouse events
- document.addEventListener('mousedown', function (event) {
- _this.dragStart(event);
- });
- document.addEventListener('mousemove', function (event) {
- _this.dragMove(event);
- });
- document.addEventListener('mouseup', function (event) {
- _this.dragEnd(event);
- });
-
- // collect touch events
- document.addEventListener('touchstart', function (event) {
- _this.dragStart(event);
- });
- document.addEventListener('touchmove', function (event) {
- _this.dragMove(event);
- });
- document.addEventListener('touchend', function (event) {
- _this.dragEnd(event);
- });
+ this.show_mouse_cursor(mouse.x, mouse.y, params.size || 1, 'circle');
}
mousedown(e) {
diff --git a/src/js/tools/select.js b/src/js/tools/select.js
index c212816..4c73015 100644
--- a/src/js/tools/select.js
+++ b/src/js/tools/select.js
@@ -43,25 +43,6 @@ class Select_tool_class extends Base_tools_class {
}
}
- dragStart(event) {
- if (config.TOOL.name != this.name)
- return;
- this.mousedown(event);
- }
-
- dragMove(event) {
- if (config.TOOL.name != this.name)
- return;
- this.mousemove(event);
- }
-
- dragEnd(event) {
- if (config.TOOL.name != this.name)
- return;
- this.mouseup(event);
- this.Base_layers.render();
- }
-
load() {
var _this = this;
@@ -140,6 +121,25 @@ class Select_tool_class extends Base_tools_class {
});
}
+ dragStart(event) {
+ if (config.TOOL.name != this.name)
+ return;
+ this.mousedown(event);
+ }
+
+ dragMove(event) {
+ if (config.TOOL.name != this.name)
+ return;
+ this.mousemove(event);
+ }
+
+ dragEnd(event) {
+ if (config.TOOL.name != this.name)
+ return;
+ this.mouseup(event);
+ this.Base_layers.render();
+ }
+
async mousedown(e) {
var mouse = this.get_mouse_info(e);
if (mouse.valid == false || mouse.click_valid == false)
diff --git a/src/js/tools/selection.js b/src/js/tools/selection.js
index 6d38f14..6d4f777 100644
--- a/src/js/tools/selection.js
+++ b/src/js/tools/selection.js
@@ -50,27 +50,6 @@ class Selection_class extends Base_tools_class {
this.GUI_tools = new GUI_tools_class();
}
- dragStart(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
- return;
- _this.mousedown(event);
- }
-
- dragMove(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
- return;
- _this.mousemove(event);
- }
-
- dragEnd(event) {
- var _this = this;
- if (config.TOOL.name != _this.name)
- return;
- _this.mouseup(event);
- }
-
load() {
var _this = this;
@@ -119,6 +98,27 @@ class Selection_class extends Base_tools_class {
}, false);
}
+ dragStart(event) {
+ var _this = this;
+ if (config.TOOL.name != _this.name)
+ return;
+ _this.mousedown(event);
+ }
+
+ dragMove(event) {
+ var _this = this;
+ if (config.TOOL.name != _this.name)
+ return;
+ _this.mousemove(event);
+ }
+
+ dragEnd(event) {
+ var _this = this;
+ if (config.TOOL.name != _this.name)
+ return;
+ _this.mouseup(event);
+ }
+
mousedown(e) {
var mouse = this.get_mouse_info(e);
var layer = config.layer;
diff --git a/src/js/tools/shape.js b/src/js/tools/shape.js
new file mode 100644
index 0000000..843dd5d
--- /dev/null
+++ b/src/js/tools/shape.js
@@ -0,0 +1,113 @@
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import Dialog_class from './../libs/popup.js';
+import GUI_tools_class from './../core/gui/gui-tools.js';
+
+class Shape_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.GUI_tools = new GUI_tools_class();
+ this.POP = new Dialog_class();
+ this.ctx = ctx;
+ this.name = 'shape';
+ this.layer = {};
+ this.preview_width = 150;
+ this.preview_height = 120;
+ }
+
+ load() {
+
+ }
+
+ on_activate() {
+ this.show_shapes();
+ }
+
+ async show_shapes(){
+ var _this = this;
+ var html = '';
+
+ var data = this.get_shapes();
+
+ for (var i in data) {
+ html += '';
+ html += '
';
+ html += '
' + data[i].title + '
';
+ html += '