From 4b4f70d301d9af637498ec50159d44ef795f3ead Mon Sep 17 00:00:00 2001
From: Luis Leiva <lleiva@sciling.com>
Date: Sun, 26 May 2019 19:59:32 +0300
Subject: [PATCH] Added serializer plugin

---
 jquery.sketchable.serializer.js | 76 ++++++++++++++++++++++++++++++++
 sketchable.serializer.js        | 77 +++++++++++++++++++++++++++++++++
 2 files changed, 153 insertions(+)
 create mode 100644 jquery.sketchable.serializer.js
 create mode 100644 sketchable.serializer.js

diff --git a/jquery.sketchable.serializer.js b/jquery.sketchable.serializer.js
new file mode 100644
index 0000000..bdcdc72
--- /dev/null
+++ b/jquery.sketchable.serializer.js
@@ -0,0 +1,76 @@
+/*!
+ * Serializer plugin for Sketchable | v1.0 | Luis A. Leiva | MIT license
+ */
+
+/* eslint-env browser */
+/* global jQuery */
+;(function($) {
+
+  // Custom namespace ID, for private data bindind.
+  var namespace = 'sketchable';
+  /**
+   * Serializer plugin constructor for jQuery Sketchable instances.
+   * @param {jQuery} $instance - jQuery sketchable instance.
+   * @namespace $.fn.sketchable.plugins.serializer
+   */
+  $.fn.sketchable.plugins.serializer = function($instance) {
+    // Access the instance configuration.
+    var config = $instance.sketchable('config');
+
+    // Expose public API: all jQuery sketchable instances will have these methods.
+    $.extend($.fn.sketchable.api, {
+      // Namespace methods to avoid collisions with other plugins.
+      serializer: {
+        /**
+         * Save canvas data as JSON string.
+         * @return {string} serialized canvas data.
+         * @memberof $.fn.sketchable.plugins.serializer
+         * @example
+         * var contents = jqueryElem.sketchable('serializer.save');
+         */
+        save: function(contents) {
+          var data = $(this).data(namespace);
+          // Save only the required properties.
+          // Also avoid circular JSON references.
+          return JSON.stringify({
+            strokes: data.strokes,
+            options: data.options,
+            actions: data.sketch.callStack,
+          });
+        },
+        /**
+         * Load canvas data from JSON string.
+         * @return {jQuery} jQuery sketchable element.
+         * @memberof $.fn.sketchable.plugins.serializer
+         * @example
+         * jqueryElem.sketchable('serializer.load', jsonStr);
+         */
+        load: function(jsonStr) {
+          var data = $(this).data(namespace);
+
+          var origData = JSON.parse(jsonStr);
+          var mySketch = data.sketch;
+          for (var i = 0; i < origData.actions.length; i++) {
+            var entry = origData.actions[i];
+            if (entry.property && typeof entry.value !== 'object') {
+              // Update graphics properties.
+              mySketch.data[entry.property] = entry.value;
+            } else if (entry.method) {
+              mySketch[entry.method].apply(mySketch, entry.args);
+            } else {
+              console.warn('Unknown call:', entry);
+            }
+          }
+          // Update required properties.
+          data.callStack = origData.actions.slice();
+          data.strokes = origData.strokes.slice();
+          data.options = origData.options;
+
+          return $instance;
+        },
+      },
+    });
+
+  };
+
+})(jQuery);
diff --git a/sketchable.serializer.js b/sketchable.serializer.js
new file mode 100644
index 0000000..5876f56
--- /dev/null
+++ b/sketchable.serializer.js
@@ -0,0 +1,77 @@
+/*!
+ * Serializer plugin for Sketchable | v1.0 | Luis A. Leiva | MIT license
+ */
+
+// XXX: Requires `sketchable.utils.js` to be loaded first.
+
+/* eslint-env browser */
+/* global Event, dataBind, deepExtend */
+;(function(window) {
+
+  // Custom namespace ID, for private data bindind.
+  var namespace = 'sketchable';
+  /**
+   * Serializer plugin constructor for Sketchable instances.
+   * @param {Sketchable} instance - Sketchable element.
+   * @namespace Sketchable.plugins.serializer
+   */
+  Sketchable.prototype.plugins.serializer = function(instance) {
+    // Access the instance configuration.
+    var config = instance.config();
+
+    // Expose public API: all Sketchable instances will have these methods.
+    deepExtend(instance, {
+      // Namespace methods to avoid collisions with other plugins.
+      serializer: {
+        /**
+         * Save canvas data as JSON string.
+         * @return {string} serialized canvas data.
+         * @memberof Sketchable.plugins.serializer
+         * @example
+         * var contents = sketchableInstance.serializer.save();
+         */
+        save: function() {
+          var data = dataBind(instance.elem)[namespace];
+          // Save only the required properties.
+          // Also avoid circular JSON references.
+          return JSON.stringify({
+            options: data.options,
+            strokes: data.strokes,
+            actions: data.sketch.callStack,
+          });
+        },
+        /**
+         * Load canvas from JSON string.
+         * @return {Sketchable} Sketchable element.
+         * @memberof Sketchable.plugins.serializer
+         * @example
+         * sketchableInstance.serializer.load(jsonStr);
+         */
+        load: function(jsonStr) {
+          var data = dataBind(instance.elem)[namespace];
+
+          var origData = JSON.parse(jsonStr);
+          var mySketch = data.sketch;
+          for (var i = 0; i < origData.actions.length; i++) {
+            var entry = origData.actions[i];
+            if (entry.property && typeof entry.value !== 'object') {
+              // Update graphics properties.
+              mySketch.data[entry.property] = entry.value;
+            } else if (entry.method) {
+              mySketch[entry.method].apply(mySketch, entry.args);
+            } else {
+              console.warn('Unknown call:', entry);
+            }
+          }
+          // Update required properties.
+          data.sketch.callStack = origData.actions.slice();
+          data.strokes = origData.strokes.slice();
+          data.options = origData.options;
+
+          return instance;
+        },
+      },
+    });
+  };
+
+})(this);