@visactor/vrender-core 1.0.43 → 1.0.45

package/cjs/render/contributions/render/image-render.js

@@ -14,9 +14,81 @@ var __decorate = this && this.__decorate || function(decorators, target, key, de
 
 Object.defineProperty(exports, "__esModule", {
     value: !0
-}), exports.DefaultCanvasImageRender = void 0;
+}), exports.DefaultCanvasImageRender = exports.drawImageWithLayout = exports.shouldClipImageByLayout = exports.resolveImageRepeatMode = exports.resolveBackgroundParamsByImageSizing = exports.resolveImageMode = void 0;
 
-const inversify_lite_1 = require("../../../common/inversify-lite"), contribution_provider_1 = require("../../../common/contribution-provider"), theme_1 = require("../../../graphic/theme"), constants_1 = require("./contributions/constants"), constants_2 = require("../../../graphic/constants"), vutils_1 = require("@visactor/vutils"), rect_1 = require("../../../common/shape/rect"), base_render_1 = require("./base-render"), contributions_1 = require("./contributions"), loader_1 = require("../../../resource-loader/loader"), repeatStr = [ "", "repeat-x", "repeat-y", "repeat" ];
+const inversify_lite_1 = require("../../../common/inversify-lite"), contribution_provider_1 = require("../../../common/contribution-provider"), theme_1 = require("../../../graphic/theme"), constants_1 = require("./contributions/constants"), constants_2 = require("../../../graphic/constants"), vutils_1 = require("@visactor/vutils"), rect_1 = require("../../../common/shape/rect"), base_render_1 = require("./base-render"), contributions_1 = require("./contributions"), loader_1 = require("../../../resource-loader/loader"), base_contribution_render_1 = require("./contributions/base-contribution-render"), repeatStr = [ "", "repeat-x", "repeat-y", "repeat" ];
+
+function resolveImageMode({repeatX: repeatX = "no-repeat", repeatY: repeatY = "no-repeat", imageMode: imageMode}) {
+    const repeatMode = resolveImageRepeatMode(repeatX, repeatY);
+    return {
+        repeatMode: repeatMode,
+        sizingMode: "no-repeat" === repeatMode && null != imageMode ? imageMode : "fill"
+    };
+}
+
+exports.resolveImageMode = resolveImageMode;
+
+const IMAGE_MODE_TO_BACKGROUND_MODE = {
+    cover: "no-repeat-cover",
+    contain: "no-repeat-contain",
+    fill: "no-repeat-fill",
+    auto: "no-repeat-auto"
+};
+
+function resolveBackgroundParamsByImageSizing(sizingMode) {
+    return {
+        backgroundMode: IMAGE_MODE_TO_BACKGROUND_MODE[sizingMode],
+        backgroundFit: !1,
+        backgroundKeepAspectRatio: !1
+    };
+}
+
+function resolveImageRepeatMode(repeatX, repeatY) {
+    let repeat = 0;
+    return "repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), 
+    repeat ? repeatStr[repeat] : "no-repeat";
+}
+
+function shouldClipImageByLayout({repeatX: repeatX = "no-repeat", repeatY: repeatY = "no-repeat", imageMode: imageMode, imageScale: imageScale = 1, imageOffsetX: imageOffsetX = 0, imageOffsetY: imageOffsetY = 0, imagePosition: imagePosition = "top-left"}) {
+    const {repeatMode: repeatMode, sizingMode: sizingMode} = resolveImageMode({
+        repeatX: repeatX,
+        repeatY: repeatY,
+        imageMode: imageMode
+    });
+    return "no-repeat" === repeatMode && ("cover" === sizingMode || "auto" === sizingMode || 1 !== imageScale || 0 !== imageOffsetX || 0 !== imageOffsetY);
+}
+
+function drawImageWithLayout(context, data, x, y, width, height, {repeatX: repeatX = "no-repeat", repeatY: repeatY = "no-repeat", imageMode: imageMode, imageScale: imageScale = 1, imageOffsetX: imageOffsetX = 0, imageOffsetY: imageOffsetY = 0, imagePosition: imagePosition = "top-left"}) {
+    const {repeatMode: repeatMode, sizingMode: sizingMode} = resolveImageMode({
+        repeatX: repeatX,
+        repeatY: repeatY,
+        imageMode: imageMode
+    }), imageBackgroundParams = "no-repeat" === repeatMode ? resolveBackgroundParamsByImageSizing(sizingMode) : {
+        backgroundMode: repeatMode,
+        backgroundFit: !1,
+        backgroundKeepAspectRatio: !1
+    };
+    (0, base_contribution_render_1.drawBackgroundImage)(context, data, {
+        x1: x,
+        y1: y,
+        x2: x + width,
+        y2: y + height,
+        width: () => width,
+        height: () => height
+    }, {
+        backgroundMode: imageBackgroundParams.backgroundMode,
+        backgroundFit: imageBackgroundParams.backgroundFit,
+        backgroundKeepAspectRatio: imageBackgroundParams.backgroundKeepAspectRatio,
+        backgroundScale: imageScale,
+        backgroundOffsetX: imageOffsetX,
+        backgroundOffsetY: imageOffsetY,
+        backgroundPosition: imagePosition
+    });
+}
+
+exports.resolveBackgroundParamsByImageSizing = resolveBackgroundParamsByImageSizing, 
+exports.resolveImageRepeatMode = resolveImageRepeatMode, exports.shouldClipImageByLayout = shouldClipImageByLayout, 
+exports.drawImageWithLayout = drawImageWithLayout;
 
 let DefaultCanvasImageRender = class extends base_render_1.BaseRender {
     constructor(graphicRenderContributions) {
@@ -25,7 +97,7 @@ let DefaultCanvasImageRender = class extends base_render_1.BaseRender {
         this.init(graphicRenderContributions);
     }
     drawShape(image, context, x, y, drawContext, params, fillCb, strokeCb) {
-        const imageAttribute = (0, theme_1.getTheme)(image).image, {repeatX: repeatX = imageAttribute.repeatX, repeatY: repeatY = imageAttribute.repeatY, x: originX = imageAttribute.x, y: originY = imageAttribute.y, cornerRadius: cornerRadius = imageAttribute.cornerRadius, fillStrokeOrder: fillStrokeOrder = imageAttribute.fillStrokeOrder, cornerType: cornerType = imageAttribute.cornerType, image: url} = image.attribute, data = this.valid(image, imageAttribute, fillCb);
+        const imageAttribute = (0, theme_1.getTheme)(image).image, {repeatX: repeatX = imageAttribute.repeatX, repeatY: repeatY = imageAttribute.repeatY, x: originX = imageAttribute.x, y: originY = imageAttribute.y, cornerRadius: cornerRadius = imageAttribute.cornerRadius, fillStrokeOrder: fillStrokeOrder = imageAttribute.fillStrokeOrder, cornerType: cornerType = imageAttribute.cornerType, imageMode: imageMode = imageAttribute.imageMode, imageScale: imageScale = imageAttribute.imageScale, imageOffsetX: imageOffsetX = imageAttribute.imageOffsetX, imageOffsetY: imageOffsetY = imageAttribute.imageOffsetY, imagePosition: imagePosition = imageAttribute.imagePosition, image: url} = image.attribute, data = this.valid(image, imageAttribute, fillCb);
         if (!data) return;
         const {fVisible: fVisible, sVisible: sVisible, doFill: doFill, doStroke: doStroke} = data;
         if (!url || !image.resources) return;
@@ -33,30 +105,37 @@ let DefaultCanvasImageRender = class extends base_render_1.BaseRender {
         if ("success" !== res.state) return;
         const width = image.width, height = image.height;
         context.beginPath();
-        let needRestore = !1;
+        let needCornerClip = !1;
         0 === cornerRadius || (0, vutils_1.isArray)(cornerRadius) && cornerRadius.every((num => 0 === num)) ? context.rect(x, y, width, height) : ((0, 
         rect_1.createRectPath)(context, x, y, width, height, cornerRadius, "bevel" !== cornerType), 
-        needRestore = !0), context.setShadowBlendStyle && context.setShadowBlendStyle(image, image.attribute, imageAttribute);
+        needCornerClip = !0), context.setShadowBlendStyle && context.setShadowBlendStyle(image, image.attribute, imageAttribute);
         const _runFill = () => {
-            if (doFill) if (fillCb) fillCb(context, image.attribute, imageAttribute); else if (fVisible) {
-                context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
-                let repeat = 0;
-                if ("repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), 
-                repeat) {
-                    const pattern = context.createPattern(res.data, repeatStr[repeat]);
-                    context.fillStyle = pattern, context.translate(x, y, !0), context.fillRect(0, 0, width, height), 
-                    context.translate(-x, -y, !0);
-                } else context.drawImage(res.data, x, y, width, height);
-            }
+            doFill && (fillCb ? fillCb(context, image.attribute, imageAttribute) : fVisible && (context.setCommonStyle(image, image.attribute, x, y, imageAttribute), 
+            drawImageWithLayout(context, res.data, x, y, width, height, {
+                repeatX: repeatX,
+                repeatY: repeatY,
+                imageMode: imageMode,
+                imageScale: imageScale,
+                imageOffsetX: imageOffsetX,
+                imageOffsetY: imageOffsetY,
+                imagePosition: imagePosition
+            })));
         }, _runStroke = () => {
             doStroke && (strokeCb ? strokeCb(context, image.attribute, imageAttribute) : sVisible && (context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute), 
             context.stroke()));
-        };
-        fillStrokeOrder ? (_runStroke(), needRestore && (context.save(), context.clip()), 
+        }, needLayoutClip = shouldClipImageByLayout({
+            repeatX: repeatX,
+            repeatY: repeatY,
+            imageMode: imageMode,
+            imageScale: imageScale,
+            imageOffsetX: imageOffsetX,
+            imageOffsetY: imageOffsetY,
+            imagePosition: imagePosition
+        }), needClip = needCornerClip || needLayoutClip;
+        fillStrokeOrder ? (_runStroke(), needClip && (context.save(), context.clip()), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb), 
+        _runFill(), needClip && context.restore()) : (needClip && (context.save(), context.clip()), 
         this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb), 
-        _runFill(), needRestore && context.restore()) : (needRestore && (context.save(), 
-        context.clip()), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb), 
-        _runFill(), needRestore && context.restore(), _runStroke()), this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
+        _runFill(), needClip && context.restore(), _runStroke()), this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
     }
     draw(image, renderService, drawContext) {
         const {image: url} = image.attribute;

package/cjs/render/contributions/render/image-render.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/render/contributions/render/image-render.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,mEAA2E;AAE3E,iFAA6E;AAC7E,kDAAkD;AAclD,yDAAoE;AAEpE,0DAA+D;AAE/D,6CAAqD;AACrD,qDAA4D;AAC5D,+CAA2C;AAC3C,mDAA2G;AAC3G,4DAAiE;AAEjE,MAAM,SAAS,GAAG,CAAC,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;AAGlD,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,wBAAkB;IAI9D,YAGqB,0BAA2E;QAE9F,KAAK,EAAE,CAAC;QAFW,+BAA0B,GAA1B,0BAA0B,CAAiD;QALhG,eAAU,GAAW,6BAAiB,CAAC;QAQrC,IAAI,CAAC,oBAAoB,GAAG,CAAC,8CAA8B,EAAE,wDAAwC,CAAC,CAAC;QACvG,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IACxC,CAAC;IAED,SAAS,CACP,KAAa,EACb,OAAmB,EACnB,CAAS,EACT,CAAS,EACT,WAAyB,EACzB,MAAiC,EACjC,MAIY,EACZ,QAIY;QAGZ,MAAM,cAAc,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QAC7C,MAAM,EACJ,OAAO,GAAG,cAAc,CAAC,OAAO,EAChC,OAAO,GAAG,cAAc,CAAC,OAAO,EAChC,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,CAAC,EAC7B,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,CAAC,EAC7B,YAAY,GAAG,cAAc,CAAC,YAAY,EAC1C,eAAe,GAAG,cAAc,CAAC,eAAe,EAChD,UAAU,GAAG,cAAc,CAAC,UAAU,EACtC,KAAK,EAAE,GAAG,EACX,GAAG,KAAK,CAAC,SAAS,CAAC;QAEpB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC;QACvD,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QACD,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAEtD,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;YAC5B,OAAO;SACR;QACD,MAAM,GAAG,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACrC,IAAI,GAAG,CAAC,KAAK,KAAK,SAAS,EAAE;YAC3B,OAAO;SACR;QAED,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QAC1B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,OAAO,CAAC,SAAS,EAAE,CAAC;QAGpB,IAAI,WAAW,GAAG,KAAK,CAAC;QACxB,IAAI,YAAY,KAAK,CAAC,IAAI,CAAC,IAAA,gBAAO,EAAC,YAAY,CAAC,IAAe,YAAa,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE;YAErG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;SACnC;aAAM;YAEL,IAAA,qBAAc,EAAC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,KAAK,OAAO,CAAC,CAAC;YACnF,WAAW,GAAG,IAAI,CAAC;SACpB;QAGD,OAAO,CAAC,mBAAmB,IAAI,OAAO,CAAC,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;QAInG,MAAM,QAAQ,GAAG,GAAG,EAAE;YACpB,IAAI,MAAM,EAAE;gBACV,IAAI,MAAM,EAAE;oBACV,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;iBAClD;qBAAM,IAAI,QAAQ,EAAE;oBACnB,OAAO,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,cAAc,CAAC,CAAC;oBACrE,IAAI,MAAM,GAAG,CAAC,CAAC;oBACf,IAAI,OAAO,KAAK,QAAQ,EAAE;wBACxB,MAAM,IAAI,MAAM,CAAC;qBAClB;oBACD,IAAI,OAAO,KAAK,QAAQ,EAAE;wBACxB,MAAM,IAAI,MAAM,CAAC;qBAClB;oBACD,IAAI,MAAM,EAAE;wBACV,MAAM,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC;wBACnE,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC;wBAC5B,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;wBAC9B,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;wBACtC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;qBACjC;yBAAM;wBACL,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;qBAClD;iBACF;aACF;QACH,CAAC,CAAC;QAEF,MAAM,UAAU,GAAG,GAAG,EAAE;YACtB,IAAI,QAAQ,EAAE;gBACZ,IAAI,QAAQ,EAAE;oBACZ,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;iBACpD;qBAAM,IAAI,QAAQ,EAAE;oBACnB,OAAO,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,CAAC,EAAE,cAAc,CAAC,CAAC;oBACzF,OAAO,CAAC,MAAM,EAAE,CAAC;iBAClB;aACF;QACH,CAAC,CAAC;QAEF,IAAI,CAAC,eAAe,EAAE;YACpB,IAAI,WAAW,EAAE;gBACf,OAAO,CAAC,IAAI,EAAE,CAAC;gBACf,OAAO,CAAC,IAAI,EAAE,CAAC;aAChB;YACD,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;YACjH,QAAQ,EAAE,CAAC;YACX,IAAI,WAAW,EAAE;gBACf,OAAO,CAAC,OAAO,EAAE,CAAC;aACnB;YACD,UAAU,EAAE,CAAC;SACd;aAAM;YACL,UAAU,EAAE,CAAC;YACb,IAAI,WAAW,EAAE;gBACf,OAAO,CAAC,IAAI,EAAE,CAAC;gBACf,OAAO,CAAC,IAAI,EAAE,CAAC;aAChB;YACD,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;YACjH,QAAQ,EAAE,CAAC;YACX,IAAI,WAAW,EAAE;gBACf,OAAO,CAAC,OAAO,EAAE,CAAC;aACnB;SACF;QAED,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;IAClH,CAAC;IAED,IAAI,CAAC,KAAa,EAAE,aAA6B,EAAE,WAAyB;QAC1E,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;QAEvC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;YAC5B,OAAO;SACR;QACD,MAAM,GAAG,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAIrC,IAAI,GAAG,CAAC,KAAK,KAAK,SAAS,IAAI,IAAA,iBAAQ,EAAC,GAAG,CAAC,EAAE;YAC5C,uBAAc,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;YACxC,OAAO;SACR;aAAM,IAAI,GAAG,CAAC,KAAK,KAAK,SAAS,EAAE;YAClC,OAAO;SACR;QAED,MAAM,EAAE,OAAO,EAAE,GAAG,aAAa,CAAC,UAAU,CAAC;QAC7C,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO;SACR;QACD,MAAM,cAAc,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QAC7C,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC;IACxD,CAAC;CACF,CAAA;AAvKY,wBAAwB;IADpC,IAAA,2BAAU,GAAE;IAMR,WAAA,IAAA,uBAAM,EAAC,4CAAoB,CAAC,CAAA;IAC5B,WAAA,IAAA,sBAAK,EAAC,mCAAuB,CAAC,CAAA;;GANtB,wBAAwB,CAuKpC;AAvKY,4DAAwB","file":"image-render.js","sourcesContent":["import { inject, injectable, named } from '../../../common/inversify-lite';\n// eslint-disable-next-line @typescript-eslint/consistent-type-imports\nimport { ContributionProvider } from '../../../common/contribution-provider';\nimport { getTheme } from '../../../graphic/theme';\nimport type {\n  IGraphicAttribute,\n  IContext2d,\n  IMarkAttribute,\n  IImage,\n  IThemeAttribute,\n  IGraphicRender,\n  IImageRenderContribution,\n  IContributionProvider,\n  IDrawContext,\n  IGraphicRenderDrawParams,\n  IRenderService\n} from '../../../interface';\nimport { ImageRenderContribution } from './contributions/constants';\nimport { fillVisible, runFill } from './utils';\nimport { IMAGE_NUMBER_TYPE } from '../../../graphic/constants';\nimport { BaseRenderContributionTime } from '../../../common/enums';\nimport { isArray, isString } from '@visactor/vutils';\nimport { createRectPath } from '../../../common/shape/rect';\nimport { BaseRender } from './base-render';\nimport { defaultImageBackgroundRenderContribution, defaultImageRenderContribution } from './contributions';\nimport { ResourceLoader } from '../../../resource-loader/loader';\n\nconst repeatStr = ['', 'repeat-x', 'repeat-y', 'repeat'];\n\n@injectable()\nexport class DefaultCanvasImageRender extends BaseRender<IImage> implements IGraphicRender {\n  type: 'image';\n  numberType: number = IMAGE_NUMBER_TYPE;\n\n  constructor(\n    @inject(ContributionProvider)\n    @named(ImageRenderContribution)\n    protected readonly graphicRenderContributions: IContributionProvider<IImageRenderContribution>\n  ) {\n    super();\n    this.builtinContributions = [defaultImageRenderContribution, defaultImageBackgroundRenderContribution];\n    this.init(graphicRenderContributions);\n  }\n\n  drawShape(\n    image: IImage,\n    context: IContext2d,\n    x: number,\n    y: number,\n    drawContext: IDrawContext,\n    params?: IGraphicRenderDrawParams,\n    fillCb?: (\n      ctx: IContext2d,\n      markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n      themeAttribute: IThemeAttribute\n    ) => boolean,\n    strokeCb?: (\n      ctx: IContext2d,\n      markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n      themeAttribute: IThemeAttribute\n    ) => boolean\n  ) {\n    // const imageAttribute = graphicService.themeService.getCurrentTheme().imageAttribute;\n    const imageAttribute = getTheme(image).image;\n    const {\n      repeatX = imageAttribute.repeatX,\n      repeatY = imageAttribute.repeatY,\n      x: originX = imageAttribute.x,\n      y: originY = imageAttribute.y,\n      cornerRadius = imageAttribute.cornerRadius,\n      fillStrokeOrder = imageAttribute.fillStrokeOrder,\n      cornerType = imageAttribute.cornerType,\n      image: url\n    } = image.attribute;\n\n    const data = this.valid(image, imageAttribute, fillCb);\n    if (!data) {\n      return;\n    }\n    const { fVisible, sVisible, doFill, doStroke } = data;\n\n    if (!url || !image.resources) {\n      return;\n    }\n    const res = image.resources.get(url);\n    if (res.state !== 'success') {\n      return;\n    }\n\n    const width = image.width;\n    const height = image.height;\n    context.beginPath();\n\n    // deal with cornerRadius\n    let needRestore = false;\n    if (cornerRadius === 0 || (isArray(cornerRadius) && (<number[]>cornerRadius).every(num => num === 0))) {\n      // 不需要处理圆角\n      context.rect(x, y, width, height);\n    } else {\n      // context.beginPath();\n      createRectPath(context, x, y, width, height, cornerRadius, cornerType !== 'bevel');\n      needRestore = true;\n    }\n\n    // shadow\n    context.setShadowBlendStyle && context.setShadowBlendStyle(image, image.attribute, imageAttribute);\n    // context.beginPath();\n    // context.image(x, y, width, height);\n\n    const _runFill = () => {\n      if (doFill) {\n        if (fillCb) {\n          fillCb(context, image.attribute, imageAttribute);\n        } else if (fVisible) {\n          context.setCommonStyle(image, image.attribute, x, y, imageAttribute);\n          let repeat = 0;\n          if (repeatX === 'repeat') {\n            repeat |= 0b0001;\n          }\n          if (repeatY === 'repeat') {\n            repeat |= 0b0010;\n          }\n          if (repeat) {\n            const pattern = context.createPattern(res.data, repeatStr[repeat]);\n            context.fillStyle = pattern;\n            context.translate(x, y, true);\n            context.fillRect(0, 0, width, height);\n            context.translate(-x, -y, true);\n          } else {\n            context.drawImage(res.data, x, y, width, height);\n          }\n        }\n      }\n    };\n\n    const _runStroke = () => {\n      if (doStroke) {\n        if (strokeCb) {\n          strokeCb(context, image.attribute, imageAttribute);\n        } else if (sVisible) {\n          context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute);\n          context.stroke();\n        }\n      }\n    };\n\n    if (!fillStrokeOrder) {\n      if (needRestore) {\n        context.save();\n        context.clip();\n      }\n      this.beforeRenderStep(image, context, x, y, doFill, false, fVisible, false, imageAttribute, drawContext, fillCb);\n      _runFill();\n      if (needRestore) {\n        context.restore();\n      }\n      _runStroke();\n    } else {\n      _runStroke();\n      if (needRestore) {\n        context.save();\n        context.clip();\n      }\n      this.beforeRenderStep(image, context, x, y, doFill, false, fVisible, false, imageAttribute, drawContext, fillCb);\n      _runFill();\n      if (needRestore) {\n        context.restore();\n      }\n    }\n\n    this.afterRenderStep(image, context, x, y, doFill, false, fVisible, false, imageAttribute, drawContext, fillCb);\n  }\n\n  draw(image: IImage, renderService: IRenderService, drawContext: IDrawContext) {\n    const { image: url } = image.attribute;\n\n    if (!url || !image.resources) {\n      return;\n    }\n    const res = image.resources.get(url);\n    // if (res.state !== 'success') {\n    //   return;\n    // }\n    if (res.state === 'loading' && isString(url)) {\n      ResourceLoader.improveImageLoading(url);\n      return;\n    } else if (res.state !== 'success') {\n      return;\n    }\n\n    const { context } = renderService.drawParams;\n    if (!context) {\n      return;\n    }\n    const imageAttribute = getTheme(image).image;\n    this._draw(image, imageAttribute, false, drawContext);\n  }\n}\n"]}
+{"version":3,"sources":["../src/render/contributions/render/image-render.ts"],"names":[],"mappings":"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","file":"image-render.js","sourcesContent":["import { inject, injectable, named } from '../../../common/inversify-lite';\n// eslint-disable-next-line @typescript-eslint/consistent-type-imports\nimport { ContributionProvider } from '../../../common/contribution-provider';\nimport { getTheme } from '../../../graphic/theme';\nimport type {\n  IGraphicAttribute,\n  IContext2d,\n  IMarkAttribute,\n  BackgroundSizing,\n  BackgroundMode,\n  IImage,\n  IImageGraphicAttribute,\n  IThemeAttribute,\n  IGraphicRender,\n  IImageRenderContribution,\n  IContributionProvider,\n  IDrawContext,\n  IGraphicRenderDrawParams,\n  IRenderService\n} from '../../../interface';\nimport { ImageRenderContribution } from './contributions/constants';\nimport { IMAGE_NUMBER_TYPE } from '../../../graphic/constants';\nimport { isArray, isString } from '@visactor/vutils';\nimport { createRectPath } from '../../../common/shape/rect';\nimport { BaseRender } from './base-render';\nimport { defaultImageBackgroundRenderContribution, defaultImageRenderContribution } from './contributions';\nimport { ResourceLoader } from '../../../resource-loader/loader';\nimport { drawBackgroundImage } from './contributions/base-contribution-render';\n\nconst repeatStr = ['', 'repeat-x', 'repeat-y', 'repeat'];\n\nexport type IImageLayoutDrawParams = Pick<\n  IImageGraphicAttribute,\n  'repeatX' | 'repeatY' | 'imageMode' | 'imageScale' | 'imageOffsetX' | 'imageOffsetY' | 'imagePosition'\n>;\n\nexport function resolveImageMode({\n  repeatX = 'no-repeat',\n  repeatY = 'no-repeat',\n  imageMode\n}: Pick<IImageLayoutDrawParams, 'repeatX' | 'repeatY' | 'imageMode'>): {\n  repeatMode: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';\n  sizingMode: BackgroundSizing;\n} {\n  const repeatMode = resolveImageRepeatMode(repeatX, repeatY);\n\n  return {\n    repeatMode,\n    sizingMode: repeatMode === 'no-repeat' ? imageMode ?? 'fill' : 'fill'\n  };\n}\n\nconst IMAGE_MODE_TO_BACKGROUND_MODE: Record<BackgroundSizing, BackgroundMode> = {\n  cover: 'no-repeat-cover',\n  contain: 'no-repeat-contain',\n  fill: 'no-repeat-fill',\n  auto: 'no-repeat-auto'\n};\n\nexport function resolveBackgroundParamsByImageSizing(sizingMode: BackgroundSizing): {\n  backgroundMode: BackgroundMode;\n  backgroundFit: boolean;\n  backgroundKeepAspectRatio: boolean;\n} {\n  return {\n    backgroundMode: IMAGE_MODE_TO_BACKGROUND_MODE[sizingMode],\n    backgroundFit: false,\n    backgroundKeepAspectRatio: false\n  };\n}\n\nexport function resolveImageRepeatMode(\n  repeatX: IImageGraphicAttribute['repeatX'],\n  repeatY: IImageGraphicAttribute['repeatY']\n): 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' {\n  let repeat = 0;\n  if (repeatX === 'repeat') {\n    repeat |= 0b0001;\n  }\n  if (repeatY === 'repeat') {\n    repeat |= 0b0010;\n  }\n  return repeat ? (repeatStr[repeat] as 'repeat' | 'repeat-x' | 'repeat-y') : 'no-repeat';\n}\n\nexport function shouldClipImageByLayout({\n  repeatX = 'no-repeat',\n  repeatY = 'no-repeat',\n  imageMode,\n  imageScale = 1,\n  imageOffsetX = 0,\n  imageOffsetY = 0,\n  imagePosition = 'top-left'\n}: IImageLayoutDrawParams): boolean {\n  const { repeatMode, sizingMode } = resolveImageMode({\n    repeatX,\n    repeatY,\n    imageMode\n  });\n  return (\n    repeatMode === 'no-repeat' &&\n    (sizingMode === 'cover' || sizingMode === 'auto' || imageScale !== 1 || imageOffsetX !== 0 || imageOffsetY !== 0)\n  );\n}\n\nexport function drawImageWithLayout(\n  context: IContext2d,\n  data: any,\n  x: number,\n  y: number,\n  width: number,\n  height: number,\n  {\n    repeatX = 'no-repeat',\n    repeatY = 'no-repeat',\n    imageMode,\n    imageScale = 1,\n    imageOffsetX = 0,\n    imageOffsetY = 0,\n    imagePosition = 'top-left'\n  }: IImageLayoutDrawParams\n) {\n  const { repeatMode, sizingMode } = resolveImageMode({\n    repeatX,\n    repeatY,\n    imageMode\n  });\n  const imageBackgroundParams =\n    repeatMode === 'no-repeat'\n      ? resolveBackgroundParamsByImageSizing(sizingMode)\n      : {\n          backgroundMode: repeatMode,\n          backgroundFit: false,\n          backgroundKeepAspectRatio: false\n        };\n  drawBackgroundImage(\n    context,\n    data,\n    {\n      x1: x,\n      y1: y,\n      x2: x + width,\n      y2: y + height,\n      width: () => width,\n      height: () => height\n    } as any,\n    {\n      backgroundMode: imageBackgroundParams.backgroundMode,\n      backgroundFit: imageBackgroundParams.backgroundFit,\n      backgroundKeepAspectRatio: imageBackgroundParams.backgroundKeepAspectRatio,\n      backgroundScale: imageScale,\n      backgroundOffsetX: imageOffsetX,\n      backgroundOffsetY: imageOffsetY,\n      backgroundPosition: imagePosition\n    }\n  );\n}\n\n@injectable()\nexport class DefaultCanvasImageRender extends BaseRender<IImage> implements IGraphicRender {\n  type: 'image';\n  numberType: number = IMAGE_NUMBER_TYPE;\n\n  constructor(\n    @inject(ContributionProvider)\n    @named(ImageRenderContribution)\n    protected readonly graphicRenderContributions: IContributionProvider<IImageRenderContribution>\n  ) {\n    super();\n    this.builtinContributions = [defaultImageRenderContribution, defaultImageBackgroundRenderContribution];\n    this.init(graphicRenderContributions);\n  }\n\n  drawShape(\n    image: IImage,\n    context: IContext2d,\n    x: number,\n    y: number,\n    drawContext: IDrawContext,\n    params?: IGraphicRenderDrawParams,\n    fillCb?: (\n      ctx: IContext2d,\n      markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n      themeAttribute: IThemeAttribute\n    ) => boolean,\n    strokeCb?: (\n      ctx: IContext2d,\n      markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n      themeAttribute: IThemeAttribute\n    ) => boolean\n  ) {\n    // const imageAttribute = graphicService.themeService.getCurrentTheme().imageAttribute;\n    const imageAttribute = getTheme(image).image;\n    const {\n      repeatX = imageAttribute.repeatX,\n      repeatY = imageAttribute.repeatY,\n      x: originX = imageAttribute.x,\n      y: originY = imageAttribute.y,\n      cornerRadius = imageAttribute.cornerRadius,\n      fillStrokeOrder = imageAttribute.fillStrokeOrder,\n      cornerType = imageAttribute.cornerType,\n      imageMode = imageAttribute.imageMode,\n      imageScale = imageAttribute.imageScale,\n      imageOffsetX = imageAttribute.imageOffsetX,\n      imageOffsetY = imageAttribute.imageOffsetY,\n      imagePosition = imageAttribute.imagePosition,\n      image: url\n    } = image.attribute;\n\n    const data = this.valid(image, imageAttribute, fillCb);\n    if (!data) {\n      return;\n    }\n    const { fVisible, sVisible, doFill, doStroke } = data;\n\n    if (!url || !image.resources) {\n      return;\n    }\n    const res = image.resources.get(url);\n    if (res.state !== 'success') {\n      return;\n    }\n\n    const width = image.width;\n    const height = image.height;\n    context.beginPath();\n\n    // deal with cornerRadius\n    let needCornerClip = false;\n    if (cornerRadius === 0 || (isArray(cornerRadius) && (<number[]>cornerRadius).every(num => num === 0))) {\n      // 不需要处理圆角\n      context.rect(x, y, width, height);\n    } else {\n      // context.beginPath();\n      createRectPath(context, x, y, width, height, cornerRadius, cornerType !== 'bevel');\n      needCornerClip = true;\n    }\n\n    // shadow\n    context.setShadowBlendStyle && context.setShadowBlendStyle(image, image.attribute, imageAttribute);\n    // context.beginPath();\n    // context.image(x, y, width, height);\n\n    const _runFill = () => {\n      if (doFill) {\n        if (fillCb) {\n          fillCb(context, image.attribute, imageAttribute);\n        } else if (fVisible) {\n          context.setCommonStyle(image, image.attribute, x, y, imageAttribute);\n          drawImageWithLayout(context, res.data, x, y, width, height, {\n            repeatX,\n            repeatY,\n            imageMode,\n            imageScale,\n            imageOffsetX,\n            imageOffsetY,\n            imagePosition\n          });\n        }\n      }\n    };\n\n    const _runStroke = () => {\n      if (doStroke) {\n        if (strokeCb) {\n          strokeCb(context, image.attribute, imageAttribute);\n        } else if (sVisible) {\n          context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute);\n          context.stroke();\n        }\n      }\n    };\n\n    const needLayoutClip = shouldClipImageByLayout({\n      repeatX,\n      repeatY,\n      imageMode,\n      imageScale,\n      imageOffsetX,\n      imageOffsetY,\n      imagePosition\n    });\n    const needClip = needCornerClip || needLayoutClip;\n\n    if (!fillStrokeOrder) {\n      if (needClip) {\n        context.save();\n        context.clip();\n      }\n      this.beforeRenderStep(image, context, x, y, doFill, false, fVisible, false, imageAttribute, drawContext, fillCb);\n      _runFill();\n      if (needClip) {\n        context.restore();\n      }\n      _runStroke();\n    } else {\n      _runStroke();\n      if (needClip) {\n        context.save();\n        context.clip();\n      }\n      this.beforeRenderStep(image, context, x, y, doFill, false, fVisible, false, imageAttribute, drawContext, fillCb);\n      _runFill();\n      if (needClip) {\n        context.restore();\n      }\n    }\n\n    this.afterRenderStep(image, context, x, y, doFill, false, fVisible, false, imageAttribute, drawContext, fillCb);\n  }\n\n  draw(image: IImage, renderService: IRenderService, drawContext: IDrawContext) {\n    const { image: url } = image.attribute;\n\n    if (!url || !image.resources) {\n      return;\n    }\n    const res = image.resources.get(url);\n    // if (res.state !== 'success') {\n    //   return;\n    // }\n    if (res.state === 'loading' && isString(url)) {\n      ResourceLoader.improveImageLoading(url);\n      return;\n    } else if (res.state !== 'success') {\n      return;\n    }\n\n    const { context } = renderService.drawParams;\n    if (!context) {\n      return;\n    }\n    const imageAttribute = getTheme(image).image;\n    this._draw(image, imageAttribute, false, drawContext);\n  }\n}\n"]}