abstract-image - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

lib-cjs/exporters/react-svg-export-image.js

@@ -8,8 +8,9 @@ "use strict";
     var cb = callbacks || {};
-    return (React.createElement("svg", { width: image.size.width + "px", height: image.size.height + "px", viewBox: [0, 0, image.size.width, image.size.height].join(" "), onClick: _callback(cb.onClick), onDoubleClick: _callback(cb.onDoubleClick), onMouseMove: _callback(cb.onMouseMove), onContextMenu: _callback(cb.onContextMenu) }, R.unnest(R.addIndex(R.map)(
+    var id = Math.random().toString();
+    return (React.createElement("svg", { id: id, width: image.size.width + "px", height: image.size.height + "px", viewBox: [0, 0, image.size.width, image.size.height].join(" "), onClick: _callback(cb.onClick, id), onDoubleClick: _callback(cb.onDoubleClick, id), onMouseMove: _callback(cb.onMouseMove, id), onContextMenu: _callback(cb.onContextMenu, id) }, R.unnest(R.addIndex(R.map)(
     // tslint:disable-next-line:no-any
-    function (c, i) { return _visit(i.toString(), c); }, image.components))));
+    function (c, i) { return _visit(i.toString(), c, id); }, image.components))));
 }
 exports.createReactSvg = createReactSvg;
-function _callback(callback) {
+function _callback(callback, rootId) {
     if (!callback) {
@@ -23,7 +24,24 @@ return undefined;
         var mousePoint = AbstractImage.createPoint(offsetX, offsetY);
-        var id = e.target && e.target.id;
-        callback(id !== "" ? id : undefined, mousePoint);
+        var id = getIdAttr(e.target, rootId);
+        callback(id && id !== "" ? id : undefined, mousePoint);
     };
 }
-function _visit(key, component) {
+function makeIdAttr(id, rootId) {
+    if (!id) {
+        return undefined;
+    }
+    return "ai" + rootId + "%" + id;
+}
+function getIdAttr(target, rootId) {
+    if (!target || target.id === rootId) {
+        return undefined;
+    }
+    var id = target.id;
+    var parts = id.split("%");
+    if (parts.length !== 2 || parts[0] !== "ai" + rootId) {
+        return getIdAttr(target.parentElement || undefined, rootId);
+    }
+    return parts[1];
+}
+function _visit(key, component, rootId) {
     switch (component.type) {
@@ -34,3 +52,3 @@ case "group":
                 // tslint:disable-next-line:no-any
-                function (c, i) { return _visit(i.toString(), c); }, component.children)))
+                function (c, i) { return _visit(i.toString(), c, rootId); }, component.children)))
             ];
@@ -41,3 +59,3 @@ case "binaryimage":
                     return [
-                        React.createElement("g", { key: key, id: component.id, dangerouslySetInnerHTML: {
+                        React.createElement("g", { key: key, id: makeIdAttr(component.id, rootId), dangerouslySetInnerHTML: {
                                 __html: component.data.reduce(function (a, b) { return a + String.fromCharCode(b); }, "")
@@ -51,3 +69,3 @@ } })
             return [
-                React.createElement("line", { id: component.id, key: key, x1: component.start.x, y1: component.start.y, x2: component.end.x, y2: component.end.y, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor) })
+                React.createElement("line", { id: makeIdAttr(component.id, rootId), key: key, x1: component.start.x, y1: component.start.y, x2: component.end.x, y2: component.end.y, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor) })
             ];
@@ -96,3 +114,3 @@ case "text":
             return [
-                React.createElement("ellipse", { id: component.id, key: key, cx: cx, cy: cy, rx: rx, ry: ry, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), opacity: colorToOpacity(component.fillColor), fill: colorToRgb(component.fillColor) })
+                React.createElement("ellipse", { id: makeIdAttr(component.id, rootId), key: key, cx: cx, cy: cy, rx: rx, ry: ry, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), opacity: colorToOpacity(component.fillColor), fill: colorToRgb(component.fillColor) })
             ];
@@ -104,3 +122,3 @@ case "polyline":
             return [
-                React.createElement("polyline", { id: component.id, key: key, points: linePoints, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), fill: "none" })
+                React.createElement("polyline", { id: makeIdAttr(component.id, rootId), key: key, points: linePoints, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), fill: "none" })
             ];
@@ -112,7 +130,7 @@ case "polygon":
             return [
-                React.createElement("polygon", { id: component.id, key: key, points: points, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), opacity: colorToOpacity(component.fillColor), fill: colorToRgb(component.fillColor) })
+                React.createElement("polygon", { id: makeIdAttr(component.id, rootId), key: key, points: points, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), opacity: colorToOpacity(component.fillColor), fill: colorToRgb(component.fillColor) })
             ];
         case "rectangle":
             return [
-                React.createElement("rect", { id: component.id, key: key, x: component.topLeft.x, y: component.topLeft.y, width: Math.abs(component.bottomRight.x - component.topLeft.x), height: Math.abs(component.bottomRight.y - component.topLeft.y), stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), opacity: colorToOpacity(component.fillColor), fill: colorToRgb(component.fillColor) })
+                React.createElement("rect", { id: makeIdAttr(component.id, rootId), key: key, x: component.topLeft.x, y: component.topLeft.y, width: Math.abs(component.bottomRight.x - component.topLeft.x), height: Math.abs(component.bottomRight.y - component.topLeft.y), stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), opacity: colorToOpacity(component.fillColor), fill: colorToRgb(component.fillColor) })
             ];
@@ -119,0 +137,0 @@ default:

lib-esm/exporters/react-svg-export-image.js

@@ -6,7 +6,8 @@ import * as R from "ramda";
     var cb = callbacks || {};
-    return (React.createElement("svg", { width: image.size.width + "px", height: image.size.height + "px", viewBox: [0, 0, image.size.width, image.size.height].join(" "), onClick: _callback(cb.onClick), onDoubleClick: _callback(cb.onDoubleClick), onMouseMove: _callback(cb.onMouseMove), onContextMenu: _callback(cb.onContextMenu) }, R.unnest(R.addIndex(R.map)(
+    var id = Math.random().toString();
+    return (React.createElement("svg", { id: id, width: image.size.width + "px", height: image.size.height + "px", viewBox: [0, 0, image.size.width, image.size.height].join(" "), onClick: _callback(cb.onClick, id), onDoubleClick: _callback(cb.onDoubleClick, id), onMouseMove: _callback(cb.onMouseMove, id), onContextMenu: _callback(cb.onContextMenu, id) }, R.unnest(R.addIndex(R.map)(
     // tslint:disable-next-line:no-any
-    function (c, i) { return _visit(i.toString(), c); }, image.components))));
+    function (c, i) { return _visit(i.toString(), c, id); }, image.components))));
 }
-function _callback(callback) {
+function _callback(callback, rootId) {
     if (!callback) {
@@ -20,7 +21,24 @@ return undefined;
         var mousePoint = AbstractImage.createPoint(offsetX, offsetY);
-        var id = e.target && e.target.id;
-        callback(id !== "" ? id : undefined, mousePoint);
+        var id = getIdAttr(e.target, rootId);
+        callback(id && id !== "" ? id : undefined, mousePoint);
     };
 }
-function _visit(key, component) {
+function makeIdAttr(id, rootId) {
+    if (!id) {
+        return undefined;
+    }
+    return "ai" + rootId + "%" + id;
+}
+function getIdAttr(target, rootId) {
+    if (!target || target.id === rootId) {
+        return undefined;
+    }
+    var id = target.id;
+    var parts = id.split("%");
+    if (parts.length !== 2 || parts[0] !== "ai" + rootId) {
+        return getIdAttr(target.parentElement || undefined, rootId);
+    }
+    return parts[1];
+}
+function _visit(key, component, rootId) {
     switch (component.type) {
@@ -31,3 +49,3 @@ case "group":
                 // tslint:disable-next-line:no-any
-                function (c, i) { return _visit(i.toString(), c); }, component.children)))
+                function (c, i) { return _visit(i.toString(), c, rootId); }, component.children)))
             ];
@@ -38,3 +56,3 @@ case "binaryimage":
                     return [
-                        React.createElement("g", { key: key, id: component.id, dangerouslySetInnerHTML: {
+                        React.createElement("g", { key: key, id: makeIdAttr(component.id, rootId), dangerouslySetInnerHTML: {
                                 __html: component.data.reduce(function (a, b) { return a + String.fromCharCode(b); }, "")
@@ -48,3 +66,3 @@ } })
             return [
-                React.createElement("line", { id: component.id, key: key, x1: component.start.x, y1: component.start.y, x2: component.end.x, y2: component.end.y, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor) })
+                React.createElement("line", { id: makeIdAttr(component.id, rootId), key: key, x1: component.start.x, y1: component.start.y, x2: component.end.x, y2: component.end.y, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor) })
             ];
@@ -93,3 +111,3 @@ case "text":
             return [
-                React.createElement("ellipse", { id: component.id, key: key, cx: cx, cy: cy, rx: rx, ry: ry, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), opacity: colorToOpacity(component.fillColor), fill: colorToRgb(component.fillColor) })
+                React.createElement("ellipse", { id: makeIdAttr(component.id, rootId), key: key, cx: cx, cy: cy, rx: rx, ry: ry, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), opacity: colorToOpacity(component.fillColor), fill: colorToRgb(component.fillColor) })
             ];
@@ -101,3 +119,3 @@ case "polyline":
             return [
-                React.createElement("polyline", { id: component.id, key: key, points: linePoints, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), fill: "none" })
+                React.createElement("polyline", { id: makeIdAttr(component.id, rootId), key: key, points: linePoints, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), fill: "none" })
             ];
@@ -109,7 +127,7 @@ case "polygon":
             return [
-                React.createElement("polygon", { id: component.id, key: key, points: points, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), opacity: colorToOpacity(component.fillColor), fill: colorToRgb(component.fillColor) })
+                React.createElement("polygon", { id: makeIdAttr(component.id, rootId), key: key, points: points, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), opacity: colorToOpacity(component.fillColor), fill: colorToRgb(component.fillColor) })
             ];
         case "rectangle":
             return [
-                React.createElement("rect", { id: component.id, key: key, x: component.topLeft.x, y: component.topLeft.y, width: Math.abs(component.bottomRight.x - component.topLeft.x), height: Math.abs(component.bottomRight.y - component.topLeft.y), stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), opacity: colorToOpacity(component.fillColor), fill: colorToRgb(component.fillColor) })
+                React.createElement("rect", { id: makeIdAttr(component.id, rootId), key: key, x: component.topLeft.x, y: component.topLeft.y, width: Math.abs(component.bottomRight.x - component.topLeft.x), height: Math.abs(component.bottomRight.y - component.topLeft.y), stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), opacity: colorToOpacity(component.fillColor), fill: colorToRgb(component.fillColor) })
             ];
@@ -116,0 +134,0 @@ default:

package.json

 {
   "name": "abstract-image",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Dynamically create images using code or JSX and render to any format",
@@ -5,0 +5,0 @@ "repository": "https://github.com/dividab/abstract-visuals/packages/abstract-image",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

146850

increased by2.11%

Lines of code

1946

increased by1.88%

No dependency changes