@antv/g-plugin-svg-renderer - npm Package Compare versions

Comparing version 1.0.0-alpha.5 to 1.0.0-alpha.6

dist/index.d.ts

 import { ContainerModule } from 'inversify';
 import { ElementSVG } from './components/ElementSVG';
 export { ElementSVG };
+export * from './utils/dom';
 export declare const containerModule: ContainerModule;

dist/index.esm.js

@@ -1,2 +0,2 @@
-import { TextService, SHAPE, Camera, ContextService, SceneGraphService, Renderable, getEuler, fromRotationTranslationScale, world, RenderingPluginContribution } from '@antv/g';
+import { TextService, SHAPE, Camera, ContextService, RenderingContext, SceneGraphService, RENDER_REASON, Renderable, getEuler, fromRotationTranslationScale, world, RenderingPluginContribution } from '@antv/g';
 import { Component } from '@antv/g-ecs';
@@ -93,12 +93,16 @@ import { detect } from 'detect-browser';
 
-var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArrays = (undefined && undefined.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
 };
 
-var __spreadArray$1 = (undefined && undefined.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArrays$1 = (undefined && undefined.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
 };
@@ -142,7 +146,2 @@
 };
-var __spreadArray$2 = (undefined && undefined.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
-};
 
@@ -305,3 +304,3 @@ var ContainerModule = (function () {
 function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+  var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
 
@@ -739,15 +738,36 @@ if (_i == null) return;
     value: function apply($el, attributes) {
-      // @ts-ignore
       var path = attributes.path,
-          x = attributes.x,
-          y = attributes.y;
-      $el.setAttribute('d', this.formatPath(path)); // FIXME offset xy
+          _attributes$x = attributes.x,
+          x = _attributes$x === void 0 ? 0 : _attributes$x,
+          _attributes$y = attributes.y,
+          y = _attributes$y === void 0 ? 0 : _attributes$y;
+      $el.setAttribute('d', this.formatPath(path, x, y));
     }
   }, {
     key: "formatPath",
-    value: function formatPath(value) {
-      var newValue = value.map(function (path) {
-        return path.join(' ');
-      }).join('');
+    value: function formatPath(value, x, y) {
+      var newValue = value.map(function (params) {
+        var command = params[0];
 
+        switch (command) {
+          case 'M':
+            return "M ".concat(params[1] - x, ",").concat(params[2] - y);
+
+          case 'L':
+            return "L ".concat(params[1] - x, ",").concat(params[2] - y);
+
+          case 'Q':
+            return "Q ".concat(params[1] - x, " ").concat(params[2] - y, ",").concat(params[3] - x, " ").concat(params[4] - y);
+
+          case 'C':
+            return "C ".concat(params[1] - x, " ").concat(params[2] - y, ",").concat(params[3] - x, " ").concat(params[4] - y, ",").concat(params[5] - x, " ").concat(params[6] - y);
+
+          case 'A':
+            return "A ".concat(params[1], " ").concat(params[2], " ").concat(params[3], " ").concat(params[4], " ").concat(params[5], " ").concat(params[6] - x, " ").concat(params[7] - y);
+
+          case 'Z':
+            return 'Z';
+        }
+      }).join(' ');
+
       if (~newValue.indexOf('NaN')) {
@@ -1412,3 +1432,3 @@ return '';
   return document.createElementNS('http://www.w3.org/2000/svg', type);
-} // /**
+}
 
@@ -1428,2 +1448,3 @@ var _SHAPE_TO_TAGS, _class, _temp;
   stroke: 'stroke',
+  clipPath: 'clip-path',
   r: 'r',
@@ -1460,2 +1481,3 @@ rx: 'rx',
 };
+var CLIP_PATH_PREFIX = 'clip-path-';
 var SVGRendererPlugin = SVGRendererPlugin_1 = (_temp = _class = /*#__PURE__*/function () {
@@ -1467,4 +1489,6 @@ function SVGRendererPlugin() {
     this.contextService = void 0;
+    this.renderingContext = void 0;
     this.sceneGraphService = void 0;
     this.elementRendererFactory = void 0;
+    this.$def = void 0;
   }
@@ -1477,30 +1501,12 @@
 
-      renderingService.hooks.mounted.tap(SVGRendererPlugin_1.tag, function (object) {
-        var entity = object.getEntity(); // create svg element
+      renderingService.hooks.init.tap(SVGRendererPlugin_1.tag, function () {
+        var _this$contextService$;
 
-        var svgElement = entity.addComponent(ElementSVG);
-        var type = SHAPE_TO_TAGS[object.nodeType];
-
-        if (type) {
-          var $groupEl;
-          var $el = createSVGElement(type);
-          $el.id = entity.getName();
-
-          if (type !== 'g') {
-            $groupEl = createSVGElement('g');
-            $groupEl.appendChild($el);
-          } else {
-            $groupEl = $el;
-          }
-
-          svgElement.$el = $el;
-          svgElement.$groupEl = $groupEl;
-
-          var $parentGroupEl = object.parentNode && object.parentNode.getEntity().getComponent(ElementSVG).$groupEl || _this.contextService.getContext();
-
-          if ($parentGroupEl) {
-            $parentGroupEl.appendChild($groupEl);
-          }
-        }
+        _this.$def = createSVGElement('defs');
+        (_this$contextService$ = _this.contextService.getContext()) === null || _this$contextService$ === void 0 ? void 0 : _this$contextService$.appendChild(_this.$def);
       });
+      renderingService.hooks.mounted.tap(SVGRendererPlugin_1.tag, function (object) {
+        // create SVG DOM Node
+        _this.createSVGDom(object, _this.contextService.getContext());
+      });
       renderingService.hooks.unmounted.tap(SVGRendererPlugin_1.tag, function (object) {
@@ -1510,44 +1516,26 @@ object.getEntity().removeComponent(ElementSVG, true);
       renderingService.hooks.render.tap(SVGRendererPlugin_1.tag, function (object) {
-        var _entity$getComponent, _entity$getComponent2;
-
         var $namespace = _this.contextService.getDomElement();
 
         if ($namespace) {
-          // @ts-ignore
-          _this.applyTransform($namespace, _this.camera.getOrthoMatrix());
-        }
+          var _entity$getComponent, _entity$getComponent2;
 
-        var entity = object.getEntity();
-        var $el = (_entity$getComponent = entity.getComponent(ElementSVG)) === null || _entity$getComponent === void 0 ? void 0 : _entity$getComponent.$el;
-        var $groupEl = (_entity$getComponent2 = entity.getComponent(ElementSVG)) === null || _entity$getComponent2 === void 0 ? void 0 : _entity$getComponent2.$groupEl;
+          if (_this.renderingContext.renderReasons.has(RENDER_REASON.CameraChanged)) {
+            // @ts-ignore
+            _this.applyTransform($namespace, _this.camera.getOrthoMatrix());
+          }
 
-        if ($el && $groupEl) {
-          var nodeType = object.nodeType,
-              attributes = object.attributes; // apply local RTS transformation to <group> wrapper
+          var entity = object.getEntity();
+          var $el = (_entity$getComponent = entity.getComponent(ElementSVG)) === null || _entity$getComponent === void 0 ? void 0 : _entity$getComponent.$el;
+          var $groupEl = (_entity$getComponent2 = entity.getComponent(ElementSVG)) === null || _entity$getComponent2 === void 0 ? void 0 : _entity$getComponent2.$groupEl;
 
-          _this.applyTransform($groupEl, object.getLocalTransform());
+          if ($el && $groupEl) {
+            // apply local RTS transformation to <group> wrapper
+            _this.applyTransform($groupEl, object.getLocalTransform());
 
-          $el.setAttribute('fill', 'none');
+            _this.reorderChildren($groupEl, object.children || []); // finish rendering, clear dirty flag
 
-          if (nodeType === SHAPE.Image) {
-            $el.setAttribute('preserveAspectRatio', 'none');
-          } // apply attributes
 
-
-          for (var name in attributes) {
-            _this.updateAttribute(entity, name, "".concat(attributes[name]));
-          } // generate path
-
-
-          var elementRenderer = _this.elementRendererFactory(nodeType);
-
-          if (elementRenderer) {
-            elementRenderer.apply($el, attributes);
+            var renderable = entity.getComponent(Renderable);
+            renderable.dirty = false;
           }
-
-          _this.reorderChildren($groupEl, object.children || []); // finish rendering, clear dirty flag
-
-
-          var renderable = entity.getComponent(Renderable);
-          renderable.dirty = false;
         }
@@ -1619,2 +1607,33 @@ });
   }, {
+    key: "applyAttributes",
+    value: function applyAttributes(object) {
+      var _entity$getComponent3, _entity$getComponent4;
+
+      var entity = object.getEntity();
+      var $el = (_entity$getComponent3 = entity.getComponent(ElementSVG)) === null || _entity$getComponent3 === void 0 ? void 0 : _entity$getComponent3.$el;
+      var $groupEl = (_entity$getComponent4 = entity.getComponent(ElementSVG)) === null || _entity$getComponent4 === void 0 ? void 0 : _entity$getComponent4.$groupEl;
+
+      if ($el && $groupEl) {
+        var nodeName = object.nodeName,
+            attributes = object.attributes;
+        $el.setAttribute('fill', 'none');
+
+        if (nodeName === SHAPE.Image) {
+          $el.setAttribute('preserveAspectRatio', 'none');
+        } // apply attributes
+
+
+        for (var name in attributes) {
+          this.updateAttribute(entity, name, attributes[name]);
+        } // generate path
+
+
+        var elementRenderer = this.elementRendererFactory(nodeName);
+
+        if (elementRenderer) {
+          elementRenderer.apply($el, attributes);
+        }
+      }
+    }
+  }, {
     key: "updateAttribute",
@@ -1625,12 +1644,81 @@ value: function updateAttribute(entity, name, value) {
         if (name === 'visibility') {
-          var _entity$getComponent3, _entity$getComponent4;
+          var _entity$getComponent5, _entity$getComponent6;
 
-          (_entity$getComponent3 = entity.getComponent(ElementSVG)) === null || _entity$getComponent3 === void 0 ? void 0 : (_entity$getComponent4 = _entity$getComponent3.$groupEl) === null || _entity$getComponent4 === void 0 ? void 0 : _entity$getComponent4.setAttribute(SVG_ATTR_MAP[name], "".concat(value));
+          (_entity$getComponent5 = entity.getComponent(ElementSVG)) === null || _entity$getComponent5 === void 0 ? void 0 : (_entity$getComponent6 = _entity$getComponent5.$groupEl) === null || _entity$getComponent6 === void 0 ? void 0 : _entity$getComponent6.setAttribute(SVG_ATTR_MAP[name], "".concat(value));
+        } else if (name === 'clipPath') {
+          var clipPath = value;
+
+          if (clipPath) {
+            var _clipPath$getEntity$g, _entity$getComponent7, _entity$getComponent8;
+
+            var clipPathId = CLIP_PATH_PREFIX + clipPath.getEntity().getName();
+            var existed = this.$def.querySelector("#".concat(clipPathId));
+
+            if (!existed) {
+              // create <clipPath> dom node, append it to <defs>
+              var $clipPath = createSVGElement('clipPath');
+              $clipPath.id = clipPathId;
+              this.$def.appendChild($clipPath); // <clipPath><circle /></clipPath>
+
+              this.createSVGDom(clipPath, $clipPath, true);
+            }
+
+            var $groupEl = (_clipPath$getEntity$g = clipPath.getEntity().getComponent(ElementSVG)) === null || _clipPath$getEntity$g === void 0 ? void 0 : _clipPath$getEntity$g.$groupEl;
+
+            if ($groupEl) {
+              // apply local RTS transformation to <group> wrapper
+              this.applyTransform($groupEl, clipPath.getLocalTransform());
+            } // apply attributes
+
+
+            this.applyAttributes(clipPath);
+            (_entity$getComponent7 = entity.getComponent(ElementSVG)) === null || _entity$getComponent7 === void 0 ? void 0 : (_entity$getComponent8 = _entity$getComponent7.$el) === null || _entity$getComponent8 === void 0 ? void 0 : _entity$getComponent8.setAttribute('clip-path', "url(#".concat(clipPathId, ")"));
+          } else {
+            var _entity$getComponent9, _entity$getComponent10;
+
+            // remove clip path
+            (_entity$getComponent9 = entity.getComponent(ElementSVG)) === null || _entity$getComponent9 === void 0 ? void 0 : (_entity$getComponent10 = _entity$getComponent9.$el) === null || _entity$getComponent10 === void 0 ? void 0 : _entity$getComponent10.removeAttribute('clip-path');
+          }
         } else {
-          var _entity$getComponent5, _entity$getComponent6;
+          var _entity$getComponent11, _entity$getComponent12;
 
-          (_entity$getComponent5 = entity.getComponent(ElementSVG)) === null || _entity$getComponent5 === void 0 ? void 0 : (_entity$getComponent6 = _entity$getComponent5.$el) === null || _entity$getComponent6 === void 0 ? void 0 : _entity$getComponent6.setAttribute(SVG_ATTR_MAP[name], "".concat(value));
+          (_entity$getComponent11 = entity.getComponent(ElementSVG)) === null || _entity$getComponent11 === void 0 ? void 0 : (_entity$getComponent12 = _entity$getComponent11.$el) === null || _entity$getComponent12 === void 0 ? void 0 : _entity$getComponent12.setAttribute(SVG_ATTR_MAP[name], "".concat(value));
         }
       }
     }
+  }, {
+    key: "createSVGDom",
+    value: function createSVGDom(object, root) {
+      var noWrapWithGroup = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      var entity = object.getEntity(); // create svg element
+
+      var svgElement = entity.addComponent(ElementSVG);
+      var type = SHAPE_TO_TAGS[object.nodeName];
+
+      if (type) {
+        var _object$parentNode$ge;
+
+        var $groupEl;
+        var $el = createSVGElement(type);
+        $el.id = entity.getName();
+
+        if (type !== 'g' && !noWrapWithGroup) {
+          $groupEl = createSVGElement('g');
+          $groupEl.appendChild($el);
+        } else {
+          $groupEl = $el;
+        }
+
+        svgElement.$el = $el;
+        svgElement.$groupEl = $groupEl;
+        var $parentGroupEl = object.parentNode && ((_object$parentNode$ge = object.parentNode.getEntity().getComponent(ElementSVG)) === null || _object$parentNode$ge === void 0 ? void 0 : _object$parentNode$ge.$groupEl) || root;
+
+        if ($parentGroupEl) {
+          $parentGroupEl.appendChild($groupEl);
+        } // apply attributes at first time
+
+
+        this.applyAttributes(object);
+      }
+    }
   }]);
@@ -1645,2 +1733,4 @@
 
+__decorate([inject(RenderingContext), __metadata("design:type", Object)], SVGRendererPlugin.prototype, "renderingContext", void 0);
+
 __decorate([inject(SceneGraphService), __metadata("design:type", SceneGraphService)], SVGRendererPlugin.prototype, "sceneGraphService", void 0);
@@ -1686,2 +1776,2 @@
 
-export { ElementSVG, containerModule };
+export { ElementSVG, containerModule, createSVGElement };

dist/index.js

@@ -97,12 +97,16 @@ 'use strict';
 
-var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArrays = (undefined && undefined.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
 };
 
-var __spreadArray$1 = (undefined && undefined.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArrays$1 = (undefined && undefined.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
 };
@@ -146,7 +150,2 @@
 };
-var __spreadArray$2 = (undefined && undefined.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
-};
 
@@ -309,3 +308,3 @@ var ContainerModule = (function () {
 function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+  var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
 
@@ -743,15 +742,36 @@ if (_i == null) return;
     value: function apply($el, attributes) {
-      // @ts-ignore
       var path = attributes.path,
-          x = attributes.x,
-          y = attributes.y;
-      $el.setAttribute('d', this.formatPath(path)); // FIXME offset xy
+          _attributes$x = attributes.x,
+          x = _attributes$x === void 0 ? 0 : _attributes$x,
+          _attributes$y = attributes.y,
+          y = _attributes$y === void 0 ? 0 : _attributes$y;
+      $el.setAttribute('d', this.formatPath(path, x, y));
     }
   }, {
     key: "formatPath",
-    value: function formatPath(value) {
-      var newValue = value.map(function (path) {
-        return path.join(' ');
-      }).join('');
+    value: function formatPath(value, x, y) {
+      var newValue = value.map(function (params) {
+        var command = params[0];
 
+        switch (command) {
+          case 'M':
+            return "M ".concat(params[1] - x, ",").concat(params[2] - y);
+
+          case 'L':
+            return "L ".concat(params[1] - x, ",").concat(params[2] - y);
+
+          case 'Q':
+            return "Q ".concat(params[1] - x, " ").concat(params[2] - y, ",").concat(params[3] - x, " ").concat(params[4] - y);
+
+          case 'C':
+            return "C ".concat(params[1] - x, " ").concat(params[2] - y, ",").concat(params[3] - x, " ").concat(params[4] - y, ",").concat(params[5] - x, " ").concat(params[6] - y);
+
+          case 'A':
+            return "A ".concat(params[1], " ").concat(params[2], " ").concat(params[3], " ").concat(params[4], " ").concat(params[5], " ").concat(params[6] - x, " ").concat(params[7] - y);
+
+          case 'Z':
+            return 'Z';
+        }
+      }).join(' ');
+
       if (~newValue.indexOf('NaN')) {
@@ -1416,3 +1436,3 @@ return '';
   return document.createElementNS('http://www.w3.org/2000/svg', type);
-} // /**
+}
 
@@ -1432,2 +1452,3 @@ var _SHAPE_TO_TAGS, _class, _temp;
   stroke: 'stroke',
+  clipPath: 'clip-path',
   r: 'r',
@@ -1464,2 +1485,3 @@ rx: 'rx',
 };
+var CLIP_PATH_PREFIX = 'clip-path-';
 var SVGRendererPlugin = SVGRendererPlugin_1 = (_temp = _class = /*#__PURE__*/function () {
@@ -1471,4 +1493,6 @@ function SVGRendererPlugin() {
     this.contextService = void 0;
+    this.renderingContext = void 0;
     this.sceneGraphService = void 0;
     this.elementRendererFactory = void 0;
+    this.$def = void 0;
   }
@@ -1481,30 +1505,12 @@
 
-      renderingService.hooks.mounted.tap(SVGRendererPlugin_1.tag, function (object) {
-        var entity = object.getEntity(); // create svg element
+      renderingService.hooks.init.tap(SVGRendererPlugin_1.tag, function () {
+        var _this$contextService$;
 
-        var svgElement = entity.addComponent(ElementSVG);
-        var type = SHAPE_TO_TAGS[object.nodeType];
-
-        if (type) {
-          var $groupEl;
-          var $el = createSVGElement(type);
-          $el.id = entity.getName();
-
-          if (type !== 'g') {
-            $groupEl = createSVGElement('g');
-            $groupEl.appendChild($el);
-          } else {
-            $groupEl = $el;
-          }
-
-          svgElement.$el = $el;
-          svgElement.$groupEl = $groupEl;
-
-          var $parentGroupEl = object.parentNode && object.parentNode.getEntity().getComponent(ElementSVG).$groupEl || _this.contextService.getContext();
-
-          if ($parentGroupEl) {
-            $parentGroupEl.appendChild($groupEl);
-          }
-        }
+        _this.$def = createSVGElement('defs');
+        (_this$contextService$ = _this.contextService.getContext()) === null || _this$contextService$ === void 0 ? void 0 : _this$contextService$.appendChild(_this.$def);
       });
+      renderingService.hooks.mounted.tap(SVGRendererPlugin_1.tag, function (object) {
+        // create SVG DOM Node
+        _this.createSVGDom(object, _this.contextService.getContext());
+      });
       renderingService.hooks.unmounted.tap(SVGRendererPlugin_1.tag, function (object) {
@@ -1514,44 +1520,26 @@ object.getEntity().removeComponent(ElementSVG, true);
       renderingService.hooks.render.tap(SVGRendererPlugin_1.tag, function (object) {
-        var _entity$getComponent, _entity$getComponent2;
-
         var $namespace = _this.contextService.getDomElement();
 
         if ($namespace) {
-          // @ts-ignore
-          _this.applyTransform($namespace, _this.camera.getOrthoMatrix());
-        }
+          var _entity$getComponent, _entity$getComponent2;
 
-        var entity = object.getEntity();
-        var $el = (_entity$getComponent = entity.getComponent(ElementSVG)) === null || _entity$getComponent === void 0 ? void 0 : _entity$getComponent.$el;
-        var $groupEl = (_entity$getComponent2 = entity.getComponent(ElementSVG)) === null || _entity$getComponent2 === void 0 ? void 0 : _entity$getComponent2.$groupEl;
+          if (_this.renderingContext.renderReasons.has(g.RENDER_REASON.CameraChanged)) {
+            // @ts-ignore
+            _this.applyTransform($namespace, _this.camera.getOrthoMatrix());
+          }
 
-        if ($el && $groupEl) {
-          var nodeType = object.nodeType,
-              attributes = object.attributes; // apply local RTS transformation to <group> wrapper
+          var entity = object.getEntity();
+          var $el = (_entity$getComponent = entity.getComponent(ElementSVG)) === null || _entity$getComponent === void 0 ? void 0 : _entity$getComponent.$el;
+          var $groupEl = (_entity$getComponent2 = entity.getComponent(ElementSVG)) === null || _entity$getComponent2 === void 0 ? void 0 : _entity$getComponent2.$groupEl;
 
-          _this.applyTransform($groupEl, object.getLocalTransform());
+          if ($el && $groupEl) {
+            // apply local RTS transformation to <group> wrapper
+            _this.applyTransform($groupEl, object.getLocalTransform());
 
-          $el.setAttribute('fill', 'none');
+            _this.reorderChildren($groupEl, object.children || []); // finish rendering, clear dirty flag
 
-          if (nodeType === g.SHAPE.Image) {
-            $el.setAttribute('preserveAspectRatio', 'none');
-          } // apply attributes
 
-
-          for (var name in attributes) {
-            _this.updateAttribute(entity, name, "".concat(attributes[name]));
-          } // generate path
-
-
-          var elementRenderer = _this.elementRendererFactory(nodeType);
-
-          if (elementRenderer) {
-            elementRenderer.apply($el, attributes);
+            var renderable = entity.getComponent(g.Renderable);
+            renderable.dirty = false;
           }
-
-          _this.reorderChildren($groupEl, object.children || []); // finish rendering, clear dirty flag
-
-
-          var renderable = entity.getComponent(g.Renderable);
-          renderable.dirty = false;
         }
@@ -1623,2 +1611,33 @@ });
   }, {
+    key: "applyAttributes",
+    value: function applyAttributes(object) {
+      var _entity$getComponent3, _entity$getComponent4;
+
+      var entity = object.getEntity();
+      var $el = (_entity$getComponent3 = entity.getComponent(ElementSVG)) === null || _entity$getComponent3 === void 0 ? void 0 : _entity$getComponent3.$el;
+      var $groupEl = (_entity$getComponent4 = entity.getComponent(ElementSVG)) === null || _entity$getComponent4 === void 0 ? void 0 : _entity$getComponent4.$groupEl;
+
+      if ($el && $groupEl) {
+        var nodeName = object.nodeName,
+            attributes = object.attributes;
+        $el.setAttribute('fill', 'none');
+
+        if (nodeName === g.SHAPE.Image) {
+          $el.setAttribute('preserveAspectRatio', 'none');
+        } // apply attributes
+
+
+        for (var name in attributes) {
+          this.updateAttribute(entity, name, attributes[name]);
+        } // generate path
+
+
+        var elementRenderer = this.elementRendererFactory(nodeName);
+
+        if (elementRenderer) {
+          elementRenderer.apply($el, attributes);
+        }
+      }
+    }
+  }, {
     key: "updateAttribute",
@@ -1629,12 +1648,81 @@ value: function updateAttribute(entity, name, value) {
         if (name === 'visibility') {
-          var _entity$getComponent3, _entity$getComponent4;
+          var _entity$getComponent5, _entity$getComponent6;
 
-          (_entity$getComponent3 = entity.getComponent(ElementSVG)) === null || _entity$getComponent3 === void 0 ? void 0 : (_entity$getComponent4 = _entity$getComponent3.$groupEl) === null || _entity$getComponent4 === void 0 ? void 0 : _entity$getComponent4.setAttribute(SVG_ATTR_MAP[name], "".concat(value));
+          (_entity$getComponent5 = entity.getComponent(ElementSVG)) === null || _entity$getComponent5 === void 0 ? void 0 : (_entity$getComponent6 = _entity$getComponent5.$groupEl) === null || _entity$getComponent6 === void 0 ? void 0 : _entity$getComponent6.setAttribute(SVG_ATTR_MAP[name], "".concat(value));
+        } else if (name === 'clipPath') {
+          var clipPath = value;
+
+          if (clipPath) {
+            var _clipPath$getEntity$g, _entity$getComponent7, _entity$getComponent8;
+
+            var clipPathId = CLIP_PATH_PREFIX + clipPath.getEntity().getName();
+            var existed = this.$def.querySelector("#".concat(clipPathId));
+
+            if (!existed) {
+              // create <clipPath> dom node, append it to <defs>
+              var $clipPath = createSVGElement('clipPath');
+              $clipPath.id = clipPathId;
+              this.$def.appendChild($clipPath); // <clipPath><circle /></clipPath>
+
+              this.createSVGDom(clipPath, $clipPath, true);
+            }
+
+            var $groupEl = (_clipPath$getEntity$g = clipPath.getEntity().getComponent(ElementSVG)) === null || _clipPath$getEntity$g === void 0 ? void 0 : _clipPath$getEntity$g.$groupEl;
+
+            if ($groupEl) {
+              // apply local RTS transformation to <group> wrapper
+              this.applyTransform($groupEl, clipPath.getLocalTransform());
+            } // apply attributes
+
+
+            this.applyAttributes(clipPath);
+            (_entity$getComponent7 = entity.getComponent(ElementSVG)) === null || _entity$getComponent7 === void 0 ? void 0 : (_entity$getComponent8 = _entity$getComponent7.$el) === null || _entity$getComponent8 === void 0 ? void 0 : _entity$getComponent8.setAttribute('clip-path', "url(#".concat(clipPathId, ")"));
+          } else {
+            var _entity$getComponent9, _entity$getComponent10;
+
+            // remove clip path
+            (_entity$getComponent9 = entity.getComponent(ElementSVG)) === null || _entity$getComponent9 === void 0 ? void 0 : (_entity$getComponent10 = _entity$getComponent9.$el) === null || _entity$getComponent10 === void 0 ? void 0 : _entity$getComponent10.removeAttribute('clip-path');
+          }
         } else {
-          var _entity$getComponent5, _entity$getComponent6;
+          var _entity$getComponent11, _entity$getComponent12;
 
-          (_entity$getComponent5 = entity.getComponent(ElementSVG)) === null || _entity$getComponent5 === void 0 ? void 0 : (_entity$getComponent6 = _entity$getComponent5.$el) === null || _entity$getComponent6 === void 0 ? void 0 : _entity$getComponent6.setAttribute(SVG_ATTR_MAP[name], "".concat(value));
+          (_entity$getComponent11 = entity.getComponent(ElementSVG)) === null || _entity$getComponent11 === void 0 ? void 0 : (_entity$getComponent12 = _entity$getComponent11.$el) === null || _entity$getComponent12 === void 0 ? void 0 : _entity$getComponent12.setAttribute(SVG_ATTR_MAP[name], "".concat(value));
         }
       }
     }
+  }, {
+    key: "createSVGDom",
+    value: function createSVGDom(object, root) {
+      var noWrapWithGroup = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      var entity = object.getEntity(); // create svg element
+
+      var svgElement = entity.addComponent(ElementSVG);
+      var type = SHAPE_TO_TAGS[object.nodeName];
+
+      if (type) {
+        var _object$parentNode$ge;
+
+        var $groupEl;
+        var $el = createSVGElement(type);
+        $el.id = entity.getName();
+
+        if (type !== 'g' && !noWrapWithGroup) {
+          $groupEl = createSVGElement('g');
+          $groupEl.appendChild($el);
+        } else {
+          $groupEl = $el;
+        }
+
+        svgElement.$el = $el;
+        svgElement.$groupEl = $groupEl;
+        var $parentGroupEl = object.parentNode && ((_object$parentNode$ge = object.parentNode.getEntity().getComponent(ElementSVG)) === null || _object$parentNode$ge === void 0 ? void 0 : _object$parentNode$ge.$groupEl) || root;
+
+        if ($parentGroupEl) {
+          $parentGroupEl.appendChild($groupEl);
+        } // apply attributes at first time
+
+
+        this.applyAttributes(object);
+      }
+    }
   }]);
@@ -1649,2 +1737,4 @@
 
+__decorate([inject(g.RenderingContext), __metadata("design:type", Object)], SVGRendererPlugin.prototype, "renderingContext", void 0);
+
 __decorate([inject(g.SceneGraphService), __metadata("design:type", g.SceneGraphService)], SVGRendererPlugin.prototype, "sceneGraphService", void 0);
@@ -1692,1 +1782,2 @@
 exports.containerModule = containerModule;
+exports.createSVGElement = createSVGElement;

dist/SVGRendererPlugin.d.ts

@@ -8,8 +8,12 @@ import { RenderingService, RenderingPlugin, SHAPE } from '@antv/g';
     private contextService;
+    private renderingContext;
     private sceneGraphService;
     private elementRendererFactory;
+    private $def;
     apply(renderingService: RenderingService): void;
     private reorderChildren;
     private applyTransform;
+    private applyAttributes;
     private updateAttribute;
+    private createSVGDom;
 }

dist/utils/dom.d.ts

 export declare function createSVGElement(type: string): SVGElement;
-/**
- * 将 dom 元素移动到父元素下的指定位置
- * @param {SVGElement} element     dom 元素
- * @param {number}     targetIndex 目标位置(从 0 开始)
- */
-export declare function moveTo(element: SVGElement, targetIndex: number): void;

package.json

 {
   "name": "@antv/g-plugin-svg-renderer",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "description": "A G plugin of renderer implementation with SVG",
@@ -35,3 +35,3 @@ "main": "dist/index.js",
   "dependencies": {
-    "@antv/g": "^1.0.0-alpha.4",
+    "@antv/g": "^1.0.0-alpha.5",
     "@antv/g-ecs": "^1.0.0-alpha.3",
@@ -50,3 +50,3 @@ "detect-browser": "^5.0.0"
   },
-  "gitHead": "08ccbc9def3a4f70cf0b24f715bb444512c3f326"
+  "gitHead": "c977f1c582f0f29d2eb20568a4cab8f795f8d283"
 }

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

Worsened metrics

Total package byte prevSize

117594

decreased by-56.37%

Number of package files

17

decreased by-80.9%

Lines of code

3122

decreased by-31.83%

Dependency changes

• Updated@antv/g@^1.0.0-alpha.5