From 109eb54927816094612e9b8b5a7916000e4d2a95 Mon Sep 17 00:00:00 2001 From: Luis Leiva Date: Mon, 22 Jul 2019 16:59:39 +0300 Subject: [PATCH] Redraw canvas upon setting strokes data --- src/jquery.sketchable.js | 90 ++++++++++++++++++++++++++++++++++++---- src/sketchable.js | 72 ++++++++++++++++++++++++++++++-- 2 files changed, 150 insertions(+), 12 deletions(-) diff --git a/src/jquery.sketchable.js b/src/jquery.sketchable.js index 4cddd8a..c478c40 100644 --- a/src/jquery.sketchable.js +++ b/src/jquery.sketchable.js @@ -1,5 +1,5 @@ /*! - * jQuery sketchable | v2.2 | Luis A. Leiva | MIT license + * jQuery sketchable | v2.3 | Luis A. Leiva | MIT license * A jQuery plugin for the jSketch drawing library. */ @@ -130,6 +130,7 @@ return this.each(function() { var elem = $(this), data = elem.data(namespace); data.strokes = arr; + redraw(elem); }); } else { // getter var data = $(this).data(namespace); @@ -273,7 +274,7 @@ * @namespace $.fn.sketchable * @param {string|object} method - Method to invoke, or a configuration object. * @return {object} jQuery - * @version 2.2 + * @version 2.3 * @author Luis A. Leiva * @license MIT license * @example @@ -587,15 +588,19 @@ var coords = data.coords[idx]; var last = coords[coords.length - 1]; if (last) { - var brush = data.sketch; + var lineColor, lineWidth; if (data.sketch.isDrawing) { - // Style for regular, pendown strokes. - brush.lineStyle(options.graphics.strokeStyle, options.graphics.lineWidth); - } else if (options.mouseupMovements.visible !== false) { - // Style for penup strokes. - brush.lineStyle(options.mouseupMovements.strokeStyle || '#DDD', options.mouseupMovements.lineWidth || 1); + // Style for regular, pendown strokes. + lineColor = options.strokeStyle; + lineWidth = options.lineWidth; + } else if (options.mouseupMovements) { + // Style for penup strokes. + lineColor = options.mouseupMovements.strokeStyle || '#DDD'; + lineWidth = options.mouseupMovements.lineWidth || 1; } - brush.line(last[0], last[1], p.x, p.y).stroke(); + data.sketch.lineStyle(lineColor, lineWidth) + .line(last[0], last[1], p.x, p.y) + .stroke(); } saveMousePos(idx, data, p); @@ -650,4 +655,71 @@ } }; + /** + * Redraw canvas according to stored strokes data. + * @return {object} jQuery + * @memberof $.fn.sketchable + * @private + */ + function redraw(elem) { + var data = elem.data(namespace), + options = data.options, + sketch = data.sketch; + + // Clear current canvas content, since strokes content may have changed. + sketch.clear(); + + for (var s = 0; s < data.strokes.length; s++) { + var stroke = data.strokes[s]; + for (var t = 0; t < stroke.length; t++) { + var currPt = stroke[t]; + var nextPt = stroke[t + 1]; + + // By default, assume all strokes are pendown strokes. + var isDrawing = true; + if (currPt.length > 3) { + isDrawing = currPt[3] === 1; + } + + // Skip penup strokes, if specified. + if (!isDrawing && !options.mouseupMovements) { + break; + } + + if (t === 0) { + sketch.beginPath(); + // Draw first point of stroke. + if (options.graphics.firstPointSize > 0) { + sketch.beginFill(lineColor) + .fillCircle(currPt[0], currPt[1], options.graphics.firstPointSize) + .endFill(); + } + } + + // Connect consecutive points with lines. + if (nextPt) { + var lineColor, lineWidth; + if (isDrawing) { + // Style for regular, pendown strokes. + lineColor = options.strokeStyle; + lineWidth = options.lineWidth; + } else if (options.mouseupMovements) { + // Style for penup strokes. + lineColor = options.mouseupMovements.strokeStyle || '#DDD'; + lineWidth = options.mouseupMovements.lineWidth || 1; + } + + sketch.lineStyle(lineColor, lineWidth) + .line(currPt[0], currPt[1], nextPt[0], nextPt[1]) + .stroke(); + } + + // Flag stroke change. + if (t === stroke.length - 1) { + sketch.closePath(); + } + } + } + } + })(jQuery); diff --git a/src/sketchable.js b/src/sketchable.js index ad05dca..4d91b5f 100644 --- a/src/sketchable.js +++ b/src/sketchable.js @@ -1,5 +1,5 @@ /*! - * Sketchable | v2.2 | Luis A. Leiva | MIT license + * Sketchable | v2.3 | Luis A. Leiva | MIT license * A plugin for the jSketch drawing library. */ @@ -21,7 +21,7 @@ * @param {object} [options] - Configuration (default: {@link Sketchable#defaults}). * @class * @global - * @version 2.2 + * @version 2.3 * @author Luis A. Leiva * @license MIT * @example @@ -160,6 +160,7 @@ if (arr) { // setter data.strokes = arr; + redraw(elem); return this; } else { // getter return data.strokes; @@ -425,6 +426,7 @@ */ function postProcess(elem, options) { if (!options) options = dataBind(elem)[namespace].options; + if (options.cssCursors) { // Visually indicate whether this element is interactive or not. elem.style.cursor = options.interactive ? 'pointer' : 'not-allowed'; @@ -591,7 +593,7 @@ if (data.sketch.isDrawing) { // Style for regular, pendown strokes. brush.lineStyle(options.graphics.strokeStyle, options.graphics.lineWidth); - } else if (options.mouseupMovements.visible !== false) { + } else if (options.mouseupMovements) { // Style for penup strokes. brush.lineStyle(options.mouseupMovements.strokeStyle || '#DDD', options.mouseupMovements.lineWidth || 1); } @@ -651,6 +653,70 @@ e.preventDefault(); }; + /** + * @ignore + */ + function redraw(elem) { + var data = dataBind(elem)[namespace], + options = data.options, + sketch = data.sketch; + + // First of all, clear current canvas content. + sketch.clear(); + + for (var s = 0; s < data.strokes.length; s++) { + var stroke = data.strokes[s]; + for (var t = 0; t < stroke.length; t++) { + var currPt = stroke[t]; + var nextPt = stroke[t + 1]; + + // By default, assume all strokes are pendown strokes. + var isDrawing = true; + if (currPt.length > 3) { + isDrawing = currPt[3] === 1; + } + + // Skip penup strokes, if specified. + if (!isDrawing && !options.mouseupMovements) { + break; + } + + if (t === 0) { + sketch.beginPath(); + // Draw first point of stroke. + if (options.graphics.firstPointSize > 0) { + sketch.beginFill(lineColor) + .fillCircle(currPt[0], currPt[1], options.graphics.firstPointSize) + .endFill(); + } + } + + // Connect consecutive points with lines. + if (nextPt) { + var lineColor, lineWidth; + if (isDrawing) { + // Style for regular, pendown strokes. + lineColor = options.strokeStyle; + lineWidth = options.lineWidth; + } else if (options.mouseupMovements) { + // Style for penup strokes. + lineColor = options.mouseupMovements.strokeStyle || '#DDD'; + lineWidth = options.mouseupMovements.lineWidth || 1; + } + + sketch.lineStyle(lineColor, lineWidth) + .line(currPt[0], currPt[1], nextPt[0], nextPt[1]) + .stroke(); + } + + // Flag stroke change. + if (t === stroke.length - 1) { + sketch.closePath(); + } + } + } + } + // Expose. window.Sketchable = Sketchable;