[Libreoffice-commits] online.git: loleaflet/src

[Henry Castro (via logerrit)]

 loleaflet/src/layer/tile/TileLayer.js  |    5 ++++
 loleaflet/src/layer/vector/SVGGroup.js |   36 +++++++++++++++++++++++++++------
 loleaflet/src/map/Map.js               |    1 
 3 files changed, 36 insertions(+), 6 deletions(-)

New commits:
commit 56747ba5c6332b14d35ee54bef79a5f309f38fa9
Author:     Henry Castro <hcastro at collabora.com>
AuthorDate: Tue Jan 21 17:08:54 2020 -0400
Commit:     Henry Castro <hcastro at collabora.com>
CommitDate: Wed Jan 22 19:52:11 2020 +0100

    loleaflet: cache the selected graphic background
    
    Unfortunately, when drag and drop the selected graphic,
    the SVG background does not finish downloading to client side.
    In order to improve the selected graphic the SVG background is cached
    
    Change-Id: If2a88ab3df50b7defe52a7beda074563af20415b
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/87166
    Reviewed-by: Henry Castro <hcastro at collabora.com>
    Tested-by: Henry Castro <hcastro at collabora.com>

diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index a00acab4f..731f10a49 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -863,6 +863,10 @@ L.TileLayer = L.GridLayer.extend({
 	_onShapeSelectionContent: function (textMsg) {
 		textMsg = textMsg.substring('shapeselectioncontent:'.length + 1);
 		if (this._graphicMarker) {
+			var extraInfo = this._graphicSelection.extraInfo;
+			if (extraInfo.id) {
+				this._map._cacheSVG[extraInfo.id] = textMsg;
+			}
 			this._graphicMarker.removeEmbeddedSVG();
 			this._graphicMarker.addEmbeddedSVG(textMsg);
 		}
@@ -2731,6 +2735,7 @@ L.TileLayer = L.GridLayer.extend({
 			this._graphicMarker = L.svgGroup(this._graphicSelection, {
 				draggable: extraInfo.isDraggable,
 				dragConstraint: extraInfo.dragInfo,
+				svg: this._map._cacheSVG[extraInfo.id],
 				transform: true,
 				stroke: false,
 				fillOpacity: 0,
diff --git a/loleaflet/src/layer/vector/SVGGroup.js b/loleaflet/src/layer/vector/SVGGroup.js
index a44418df3..2373f1f85 100644
--- a/loleaflet/src/layer/vector/SVGGroup.js
+++ b/loleaflet/src/layer/vector/SVGGroup.js
@@ -21,6 +21,7 @@ L.SVGGroup = L.Layer.extend({
 		this.on('dragstart scalestart rotatestart', this._showEmbeddedSVG, this);
 		this.on('dragend scaleend rotateend', this._hideEmbeddedSVG, this);
 	},
+
 	setVisible: function (visible) {
 		if (this._svg != null) {
 			if (visible)
@@ -29,12 +30,23 @@ L.SVGGroup = L.Layer.extend({
 				this._svg.setAttribute('visibility', 'hidden');
 		}
 	},
-	addEmbeddedSVG: function (svgString) {
-		var parser = new DOMParser();
-		var doc = parser.parseFromString(svgString, 'image/svg+xml');
+
+	sizeSVG: function () {
 		var size = L.bounds(this._map.latLngToLayerPoint(this._bounds.getNorthWest()),
 			this._map.latLngToLayerPoint(this._bounds.getSouthEast())).getSize();
 
+		this._svg.setAttribute('width', size.x);
+		this._svg.setAttribute('height', size.y);
+	},
+
+	parseSVG: function (svgString) {
+		var parser = new DOMParser();
+		return parser.parseFromString(svgString, 'image/svg+xml');
+	},
+
+	addEmbeddedSVG: function (svgString) {
+		var doc = this.parseSVG(svgString);
+
 		if (doc.lastChild.localName !== 'svg' || this._dragStarted)
 			return;
 
@@ -53,9 +65,7 @@ L.SVGGroup = L.Layer.extend({
 		}
 
 		this._svg.setAttribute('opacity', 0);
-		this._svg.setAttribute('width', size.x);
-		this._svg.setAttribute('height', size.y);
-
+		this.sizeSVG();
 		this._update();
 	},
 
@@ -146,10 +156,23 @@ L.SVGGroup = L.Layer.extend({
 		this._renderer._initGroup(this);
 		this._renderer._initPath(this._rect);
 		this._renderer._addGroup(this);
+
 		if (this._path && this._rect._path) {
 			this._rect._map = this._map;
 			this._rect._renderer = this._renderer;
 			L.DomUtil.addClass(this._path, 'leaflet-control-buttons-disabled');
+
+			if (this.options.svg) {
+				var doc = this.parseSVG(this.options.svg);
+				if (doc && doc.lastChild.localName === 'svg') {
+					this._svg = this._path.appendChild(doc.lastChild);
+					this._svg.setAttribute('opacity', 0);
+					this._svg.setAttribute('pointer-events', 'none');
+					this.sizeSVG();
+				}
+				delete this.options.svg;
+			}
+
 			this._path.appendChild(this._rect._path);
 			this._dragShape = this._rect._path;
 
@@ -164,6 +187,7 @@ L.SVGGroup = L.Layer.extend({
 		this._rect._map = this._rect._renderer = null;
 		this.removeInteractiveTarget(this._rect._path);
 		L.DomUtil.remove(this._rect._path);
+		this.removeEmbeddedSVG();
 		this._renderer._removeGroup(this);
 	},
 
diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js
index 58eff38eb..3cd72c31c 100644
--- a/loleaflet/src/map/Map.js
+++ b/loleaflet/src/map/Map.js
@@ -72,6 +72,7 @@ L.Map = L.Evented.extend({
 		}
 
 		this._initEvents();
+		this._cacheSVG = [];
 
 		if (options.maxBounds) {
 			this.setMaxBounds(options.maxBounds);