From 800003347bd0530e5f4190692c8aacba07e1e8f3 Mon Sep 17 00:00:00 2001
From: viliusle <www.viliusl@gmail.com>
Date: Sat, 7 Nov 2020 21:16:16 +0200
Subject: [PATCH] example with imprt/export JSON

---
 examples/open-edit-save.html | 39 ++++++++++++++++++++++++++++++++----
 src/js/main.js               |  6 ++++++
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/examples/open-edit-save.html b/examples/open-edit-save.html
index 6010606..8ec8d55 100644
--- a/examples/open-edit-save.html
+++ b/examples/open-edit-save.html
@@ -6,11 +6,18 @@
 <div style="height:20vh;margin:10px;">
 	Click on image to edit.
 	<br /><br />
-	<button onclick="my_update()">Update</button>
-	<button onclick="my_save()">Save</button>
+	<button onclick="open_image()">Open image</button>
+	<button onclick="update_image()">Update image</button>
+	<button onclick="save_image()">Save image</button>
+	OR
+	<button onclick="open_json()">Open JSON</button>
+	<button onclick="save_json()">Save JSON</button>
 	<br /><br />
 	
 	<img style="max-height:100%" id="testImage" alt="" src="../images/logo-colors.png" onclick="open_image(this)"  />
+
+	<textarea rows="8" style="width:500px;" id="testJson"></textarea>
+
 </div>
 
 <script>
@@ -20,6 +27,8 @@
  * @param {string|image} image image or image id
  */
 function open_image(image){
+	if(image == undefined)
+		image = document.getElementById('testImage');
 	if(typeof image == 'string'){
 		image = document.getElementById(image);
 	}
@@ -37,7 +46,20 @@ function open_image(image){
 	Layers.insert(new_layer);
 }
 
-function my_save(){
+function open_json(){
+	var miniPaint = document.getElementById('myFrame').contentWindow;
+	var miniPaint_FileOpen = miniPaint.FileOpen;
+
+	window.fetch("../images/test-collection.json").then(function(response) {
+		return response.json();
+	}).then(function(json) {
+		miniPaint_FileOpen.load_json(json, false);
+	}).catch(function(ex) {
+		alert('Sorry, image could not be loaded.');
+	});
+}
+
+function save_image(){
 	var Layers = document.getElementById('myFrame').contentWindow.Layers;
 	var tempCanvas = document.createElement("canvas");
 	var tempCtx = tempCanvas.getContext("2d");
@@ -61,7 +83,16 @@ function my_save(){
 	}
 }
 
-function my_update(){
+function save_json(){
+	var miniPaint = document.getElementById('myFrame').contentWindow;
+	var miniPaint_FileSave = miniPaint.FileSave;
+
+	var data_json = miniPaint_FileSave.export_as_json();
+
+	document.getElementById('testJson').value = data_json;
+}
+
+function update_image(){
 	var target = document.getElementById('testImage');
 	
 	var Layers = document.getElementById('myFrame').contentWindow.Layers;
diff --git a/src/js/main.js b/src/js/main.js
index b30fa25..b2be959 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -18,6 +18,8 @@ import Base_gui_class from './core/base-gui.js';
 import Base_layers_class from './core/base-layers.js';
 import Base_tools_class from './core/base-tools.js';
 import Base_state_class from './core/base-state.js';
+import File_open_class from './modules/file/open.js';
+import File_save_class from './modules/file/save.js';
 
 window.addEventListener('load', function (e) {
 	//initiate app
@@ -25,11 +27,15 @@ window.addEventListener('load', function (e) {
 	var Base_tools = new Base_tools_class(true);
 	var GUI = new Base_gui_class();
 	var Base_state = new Base_state_class();
+	var File_open = new File_open_class();
+	var File_save = new File_save_class();
 
 	//register as global for quick or external access
 	window.Layers = Layers;
 	window.AppConfig = config;
 	window.State = Base_state;	// window.State.save();
+	window.FileOpen = File_open;
+	window.FileSave = File_save;
 
 	//render all
 	GUI.load_modules();