@antv/g-plugin-image-loader - npm Package Compare versions

Comparing version 1.3.17 to 1.3.18

dist/ImagePool.d.ts

@@ -13,3 +13,3 @@ import { CanvasConfig, GradientType, LinearGradient, Pattern, RadialGradient } from '@antv/g-lite';
     constructor(canvasConfig: Partial<CanvasConfig>);
-    getImageSync(src: string, callback?: () => void): HTMLImageElement;
+    getImageSync(src: string, callback?: (img: HTMLImageElement) => void): HTMLImageElement;
     getOrCreateImage(src: string): Promise<HTMLImageElement>;
@@ -16,0 +16,0 @@ getOrCreatePatternSync(pattern: Pattern, context: CanvasRenderingContext2D, $offscreenCanvas: HTMLCanvasElement, dpr: number, callback: () => void): CanvasPattern;

dist/index.esm.js

@@ -15,5 +15,5 @@ import { __extends } from 'tslib';
         if (!this.imageCache[src]) {
-            this.getOrCreateImage(src).then(function () {
+            this.getOrCreateImage(src).then(function (img) {
                 if (callback) {
-                    callback();
+                    callback(img);
                 }
@@ -24,3 +24,3 @@ });
             if (callback) {
-                callback();
+                callback(this.imageCache[src]);
             }
@@ -159,5 +159,13 @@ }
     LoadImagePlugin.prototype.apply = function (context) {
-        // @ts-ignore
         var renderingService = context.renderingService, renderingContext = context.renderingContext, imagePool = context.imagePool;
         var canvas = renderingContext.root.ownerDocument.defaultView;
+        var calculateWithAspectRatio = function (object, imageWidth, imageHeight) {
+            var _a = object.parsedStyle, width = _a.width, height = _a.height;
+            if (width && !height) {
+                object.setAttribute('height', (imageHeight / imageWidth) * width);
+            }
+            else if (!width && height) {
+                object.setAttribute('width', (imageWidth / imageHeight) * height);
+            }
+        };
         var handleMounted = function (e) {
@@ -167,5 +175,9 @@ var object = e.target;
             if (nodeName === Shape.IMAGE) {
-                var img = attributes.img;
+                var img = attributes.img, keepAspectRatio_1 = attributes.keepAspectRatio;
                 if (isString(img)) {
-                    imagePool.getImageSync(img, function () {
+                    imagePool.getImageSync(img, function (_a) {
+                        var width = _a.width, height = _a.height;
+                        if (keepAspectRatio_1) {
+                            calculateWithAspectRatio(object, width, height);
+                        }
                         // set dirty rectangle flag
@@ -184,3 +196,7 @@ object.renderable.dirty = true;
                     if (isString(newValue)) {
-                        imagePool.getOrCreateImage(newValue).then(function () {
+                        imagePool.getOrCreateImage(newValue).then(function (_a) {
+                            var width = _a.width, height = _a.height;
+                            if (object.attributes.keepAspectRatio) {
+                                calculateWithAspectRatio(object, width, height);
+                            }
                             // set dirty rectangle flag
@@ -187,0 +203,0 @@ object.renderable.dirty = true;

dist/index.js

@@ -17,5 +17,5 @@ 'use strict';
         if (!this.imageCache[src]) {
-            this.getOrCreateImage(src).then(function () {
+            this.getOrCreateImage(src).then(function (img) {
                 if (callback) {
-                    callback();
+                    callback(img);
                 }
@@ -26,3 +26,3 @@ });
             if (callback) {
-                callback();
+                callback(this.imageCache[src]);
             }
@@ -161,5 +161,13 @@ }
     LoadImagePlugin.prototype.apply = function (context) {
-        // @ts-ignore
         var renderingService = context.renderingService, renderingContext = context.renderingContext, imagePool = context.imagePool;
         var canvas = renderingContext.root.ownerDocument.defaultView;
+        var calculateWithAspectRatio = function (object, imageWidth, imageHeight) {
+            var _a = object.parsedStyle, width = _a.width, height = _a.height;
+            if (width && !height) {
+                object.setAttribute('height', (imageHeight / imageWidth) * width);
+            }
+            else if (!width && height) {
+                object.setAttribute('width', (imageWidth / imageHeight) * height);
+            }
+        };
         var handleMounted = function (e) {
@@ -169,5 +177,9 @@ var object = e.target;
             if (nodeName === gLite.Shape.IMAGE) {
-                var img = attributes.img;
+                var img = attributes.img, keepAspectRatio_1 = attributes.keepAspectRatio;
                 if (util.isString(img)) {
-                    imagePool.getImageSync(img, function () {
+                    imagePool.getImageSync(img, function (_a) {
+                        var width = _a.width, height = _a.height;
+                        if (keepAspectRatio_1) {
+                            calculateWithAspectRatio(object, width, height);
+                        }
                         // set dirty rectangle flag
@@ -186,3 +198,7 @@ object.renderable.dirty = true;
                     if (util.isString(newValue)) {
-                        imagePool.getOrCreateImage(newValue).then(function () {
+                        imagePool.getOrCreateImage(newValue).then(function (_a) {
+                            var width = _a.width, height = _a.height;
+                            if (object.attributes.keepAspectRatio) {
+                                calculateWithAspectRatio(object, width, height);
+                            }
                             // set dirty rectangle flag
@@ -189,0 +205,0 @@ object.renderable.dirty = true;

dist/index.umd.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@antv/g-lite")):"function"==typeof define&&define.amd?define(["exports","@antv/g-lite"],e):e(((t="undefined"!=typeof globalThis?globalThis:t||self).G=t.G||{},t.G.ImageLoader={}),t.window.G)}(this,(function(t,e){"use strict";var n=function(t,e){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},n(t,e)};var r="undefined"!=typeof Float32Array?Float32Array:Array;Math.hypot||(Math.hypot=function(){for(var t=0,e=arguments.length;e--;)t+=arguments[e]*arguments[e];return Math.sqrt(t)});var a={}.toString,o=function(t,e){return a.call(t)==="[object "+e+"]"},i=function(t){return o(t,"String")},c=function(){function t(t){this.canvasConfig=t,this.imageCache={},this.gradientCache={},this.patternCache={}}return t.prototype.getImageSync=function(t,e){return this.imageCache[t]?e&&e():this.getOrCreateImage(t).then((function(){e&&e()})),this.imageCache[t]},t.prototype.getOrCreateImage=function(t){var n=this;if(this.imageCache[t])return Promise.resolve(this.imageCache[t]);var r=this.canvasConfig.createImage;return new Promise((function(a,o){var i;r?i=r(t):e.isBrowser&&(i=new window.Image),i&&(i.onload=function(){n.imageCache[t]=i,a(i)},i.onerror=function(t){o(t)},i.crossOrigin="Anonymous",i.src=t)}))},t.prototype.getOrCreatePatternSync=function(t,n,a,o,c){var u=this.generatePatternKey(t);if(u&&this.patternCache[u])return this.patternCache[u];var s,f=t.image,d=t.repetition,p=t.transform,g=!1;i(f)?s=this.getImageSync(f,c):a?(s=a,g=!0):s=f;var l,h=s&&n.createPattern(s,d);if(h){var y=void 0;y=p?e.parsedTransformToMat4(e.parseTransform(p),new e.DisplayObject({})):function(t){return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t}((l=new r(16),r!=Float32Array&&(l[1]=0,l[2]=0,l[3]=0,l[4]=0,l[6]=0,l[7]=0,l[8]=0,l[9]=0,l[11]=0,l[12]=0,l[13]=0,l[14]=0),l[0]=1,l[5]=1,l[10]=1,l[15]=1,l)),g&&function(t,e,n){var r=n[0],a=n[1],o=n[2];t[0]=e[0]*r,t[1]=e[1]*r,t[2]=e[2]*r,t[3]=e[3]*r,t[4]=e[4]*a,t[5]=e[5]*a,t[6]=e[6]*a,t[7]=e[7]*a,t[8]=e[8]*o,t[9]=e[9]*o,t[10]=e[10]*o,t[11]=e[11]*o,t[12]=e[12],t[13]=e[13],t[14]=e[14],t[15]=e[15]}(y,y,[1/o,1/o,1]),h.setTransform({a:y[0],b:y[1],c:y[4],d:y[5],e:y[12],f:y[13]})}return u&&h&&(this.patternCache[u]=h),h},t.prototype.getOrCreateGradient=function(t,n){var r=this.generateGradientKey(t),a=t.type,o=t.steps,i=t.width,c=t.height,u=t.cx,s=t.cy,f=t.size;if(this.gradientCache[r])return this.gradientCache[r];var d=null;if(a===e.GradientType.LinearGradient){var p=e.computeLinearGradient(i,c,t.angle);d=n.createLinearGradient(p.x1,p.y1,p.x2,p.y2)}else if(a===e.GradientType.RadialGradient){var g=e.computeRadialGradient(i,c,u,s,f),l=g.x,h=g.y;d=n.createRadialGradient(l,h,0,l,h,g.r)}return d&&(o.forEach((function(t){var n=t.offset;n.unit===e.UnitType.kPercentage&&(null==d||d.addColorStop(n.value/100,""+t.color))})),this.gradientCache[r]=d),this.gradientCache[r]},t.prototype.generateGradientKey=function(t){var e=t.width,n=t.height,r=t.steps,a=t.angle,o=t.cx,i=t.cy,c=t.size;return"gradient-".concat(t.type,"-").concat((null==a?void 0:""+a)||0,"-").concat((null==o?void 0:""+o)||0,"-").concat((null==i?void 0:""+i)||0,"-").concat((null==c?void 0:""+c)||0,"-").concat(e,"-").concat(n,"-").concat(r.map((function(t){var e=t.color;return"".concat(t.offset).concat(e)})).join("-"))},t.prototype.generatePatternKey=function(t){var e=t.image,n=t.repetition;return i(e)?"pattern-".concat(e,"-").concat(n):"rect"===e.nodeName?"pattern-".concat(e.entity,"-").concat(n):void 0},t}(),u=function(){function t(){}return t.prototype.apply=function(n){var r=n.renderingService,a=n.imagePool,o=n.renderingContext.root.ownerDocument.defaultView,c=function(t){var n=t.target;if(n.nodeName===e.Shape.IMAGE){var o=n.attributes.img;i(o)&&a.getImageSync(o,(function(){n.renderable.dirty=!0,r.dirtify()}))}},u=function(t){var n=t.target,o=t.newValue;n.nodeName===e.Shape.IMAGE&&"img"===t.attrName&&i(o)&&a.getOrCreateImage(o).then((function(){n.renderable.dirty=!0,r.dirtify()}))};r.hooks.init.tap(t.tag,(function(){o.addEventListener(e.ElementEvent.MOUNTED,c),o.addEventListener(e.ElementEvent.ATTR_MODIFIED,u)})),r.hooks.destroy.tap(t.tag,(function(){o.removeEventListener(e.ElementEvent.MOUNTED,c),o.removeEventListener(e.ElementEvent.ATTR_MODIFIED,u)}))},t.tag="LoadImage",t}(),s=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.name="image-loader",e}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+e+" is not a constructor or null");function r(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}(e,t),e.prototype.init=function(){this.context.imagePool=new c(this.context.config),this.addRenderingPlugin(new u)},e.prototype.destroy=function(){this.removeAllRenderingPlugins()},e}(e.AbstractRendererPlugin);t.ImagePool=c,t.Plugin=s}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@antv/g-lite")):"function"==typeof define&&define.amd?define(["exports","@antv/g-lite"],e):e(((t="undefined"!=typeof globalThis?globalThis:t||self).G=t.G||{},t.G.ImageLoader={}),t.window.G)}(this,(function(t,e){"use strict";var n=function(t,e){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},n(t,e)};var r="undefined"!=typeof Float32Array?Float32Array:Array;Math.hypot||(Math.hypot=function(){for(var t=0,e=arguments.length;e--;)t+=arguments[e]*arguments[e];return Math.sqrt(t)});var a={}.toString,i=function(t,e){return a.call(t)==="[object "+e+"]"},o=function(t){return i(t,"String")},c=function(){function t(t){this.canvasConfig=t,this.imageCache={},this.gradientCache={},this.patternCache={}}return t.prototype.getImageSync=function(t,e){return this.imageCache[t]?e&&e(this.imageCache[t]):this.getOrCreateImage(t).then((function(t){e&&e(t)})),this.imageCache[t]},t.prototype.getOrCreateImage=function(t){var n=this;if(this.imageCache[t])return Promise.resolve(this.imageCache[t]);var r=this.canvasConfig.createImage;return new Promise((function(a,i){var o;r?o=r(t):e.isBrowser&&(o=new window.Image),o&&(o.onload=function(){n.imageCache[t]=o,a(o)},o.onerror=function(t){i(t)},o.crossOrigin="Anonymous",o.src=t)}))},t.prototype.getOrCreatePatternSync=function(t,n,a,i,c){var u=this.generatePatternKey(t);if(u&&this.patternCache[u])return this.patternCache[u];var s,f=t.image,h=t.repetition,d=t.transform,p=!1;o(f)?s=this.getImageSync(f,c):a?(s=a,p=!0):s=f;var g,l=s&&n.createPattern(s,h);if(l){var y=void 0;y=d?e.parsedTransformToMat4(e.parseTransform(d),new e.DisplayObject({})):function(t){return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t}((g=new r(16),r!=Float32Array&&(g[1]=0,g[2]=0,g[3]=0,g[4]=0,g[6]=0,g[7]=0,g[8]=0,g[9]=0,g[11]=0,g[12]=0,g[13]=0,g[14]=0),g[0]=1,g[5]=1,g[10]=1,g[15]=1,g)),p&&function(t,e,n){var r=n[0],a=n[1],i=n[2];t[0]=e[0]*r,t[1]=e[1]*r,t[2]=e[2]*r,t[3]=e[3]*r,t[4]=e[4]*a,t[5]=e[5]*a,t[6]=e[6]*a,t[7]=e[7]*a,t[8]=e[8]*i,t[9]=e[9]*i,t[10]=e[10]*i,t[11]=e[11]*i,t[12]=e[12],t[13]=e[13],t[14]=e[14],t[15]=e[15]}(y,y,[1/i,1/i,1]),l.setTransform({a:y[0],b:y[1],c:y[4],d:y[5],e:y[12],f:y[13]})}return u&&l&&(this.patternCache[u]=l),l},t.prototype.getOrCreateGradient=function(t,n){var r=this.generateGradientKey(t),a=t.type,i=t.steps,o=t.width,c=t.height,u=t.cx,s=t.cy,f=t.size;if(this.gradientCache[r])return this.gradientCache[r];var h=null;if(a===e.GradientType.LinearGradient){var d=e.computeLinearGradient(o,c,t.angle);h=n.createLinearGradient(d.x1,d.y1,d.x2,d.y2)}else if(a===e.GradientType.RadialGradient){var p=e.computeRadialGradient(o,c,u,s,f),g=p.x,l=p.y;h=n.createRadialGradient(g,l,0,g,l,p.r)}return h&&(i.forEach((function(t){var n=t.offset;n.unit===e.UnitType.kPercentage&&(null==h||h.addColorStop(n.value/100,""+t.color))})),this.gradientCache[r]=h),this.gradientCache[r]},t.prototype.generateGradientKey=function(t){var e=t.width,n=t.height,r=t.steps,a=t.angle,i=t.cx,o=t.cy,c=t.size;return"gradient-".concat(t.type,"-").concat((null==a?void 0:""+a)||0,"-").concat((null==i?void 0:""+i)||0,"-").concat((null==o?void 0:""+o)||0,"-").concat((null==c?void 0:""+c)||0,"-").concat(e,"-").concat(n,"-").concat(r.map((function(t){var e=t.color;return"".concat(t.offset).concat(e)})).join("-"))},t.prototype.generatePatternKey=function(t){var e=t.image,n=t.repetition;return o(e)?"pattern-".concat(e,"-").concat(n):"rect"===e.nodeName?"pattern-".concat(e.entity,"-").concat(n):void 0},t}(),u=function(){function t(){}return t.prototype.apply=function(n){var r=n.renderingService,a=n.imagePool,i=n.renderingContext.root.ownerDocument.defaultView,c=function(t,e,n){var r=t.parsedStyle,a=r.width,i=r.height;a&&!i?t.setAttribute("height",n/e*a):!a&&i&&t.setAttribute("width",e/n*i)},u=function(t){var n=t.target,i=n.attributes;if(n.nodeName===e.Shape.IMAGE){var u=i.img,s=i.keepAspectRatio;o(u)&&a.getImageSync(u,(function(t){s&&c(n,t.width,t.height),n.renderable.dirty=!0,r.dirtify()}))}},s=function(t){var n=t.target,i=t.newValue;n.nodeName===e.Shape.IMAGE&&"img"===t.attrName&&o(i)&&a.getOrCreateImage(i).then((function(t){n.attributes.keepAspectRatio&&c(n,t.width,t.height),n.renderable.dirty=!0,r.dirtify()}))};r.hooks.init.tap(t.tag,(function(){i.addEventListener(e.ElementEvent.MOUNTED,u),i.addEventListener(e.ElementEvent.ATTR_MODIFIED,s)})),r.hooks.destroy.tap(t.tag,(function(){i.removeEventListener(e.ElementEvent.MOUNTED,u),i.removeEventListener(e.ElementEvent.ATTR_MODIFIED,s)}))},t.tag="LoadImage",t}(),s=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.name="image-loader",e}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+e+" is not a constructor or null");function r(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}(e,t),e.prototype.init=function(){this.context.imagePool=new c(this.context.config),this.addRenderingPlugin(new u)},e.prototype.destroy=function(){this.removeAllRenderingPlugins()},e}(e.AbstractRendererPlugin);t.ImagePool=c,t.Plugin=s}));
 //# sourceMappingURL=index.umd.min.js.map

dist/LoadImagePlugin.d.ts

 import type { RenderingPlugin, RenderingPluginContext } from '@antv/g-lite';
+import { ImagePool } from './ImagePool';
 export declare class LoadImagePlugin implements RenderingPlugin {
     static tag: string;
-    apply(context: RenderingPluginContext): void;
+    apply(context: RenderingPluginContext & {
+        imagePool: ImagePool;
+    }): void;
 }

package.json

 {
   "name": "@antv/g-plugin-image-loader",
-  "version": "1.3.17",
+  "version": "1.3.18",
   "description": "A G plugin for loading image",
@@ -38,3 +38,3 @@ "keywords": [
     "tslib": "^2.5.3",
-    "@antv/g-lite": "1.2.17"
+    "@antv/g-lite": "1.2.18"
   },
@@ -41,0 +41,0 @@ "publishConfig": {

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

163591

increased by4.9%

Lines of code

527

increased by7.33%

Dependency changes

• + Added@antv/g-lite@1.2.18(transitive)

• - Removed@antv/g-lite@1.2.17(transitive)

• Updated@antv/g-lite@1.2.18