From 53ff84d0d36d24abc43df9cd9c9d69bb834edbc9 Mon Sep 17 00:00:00 2001 From: plainheart Date: Mon, 17 May 2021 10:30:52 +0800 Subject: [PATCH 1/4] fix(pattern): remove non-required properties from PatternObject and fix some type issues. --- src/canvas/Layer.ts | 4 ++-- src/canvas/Painter.ts | 1 - src/canvas/graphic.ts | 1 - src/graphic/Path.ts | 2 +- src/graphic/Pattern.ts | 8 ++++---- 5 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/canvas/Layer.ts b/src/canvas/Layer.ts index 6d3586b3b..e1ac30577 100644 --- a/src/canvas/Layer.ts +++ b/src/canvas/Layer.ts @@ -5,7 +5,7 @@ import CanvasPainter from './Painter'; import { GradientObject, InnerGradientObject } from '../graphic/Gradient'; import { ZRCanvasRenderingContext } from '../core/types'; import Eventful from '../core/Eventful'; -import Element, { ElementEventCallback } from '../Element'; +import { ElementEventCallback } from '../Element'; import { getCanvasGradient } from './helper'; import { createCanvasPattern } from './graphic'; import Displayable from '../graphic/Displayable'; @@ -353,7 +353,7 @@ export default class Layer extends Eventful { } i++; } - } while (hasIntersections) + } while (hasIntersections); this._paintRects = mergedRepaintRects; diff --git a/src/canvas/Painter.ts b/src/canvas/Painter.ts index c6096a10c..88365c2b9 100644 --- a/src/canvas/Painter.ts +++ b/src/canvas/Painter.ts @@ -12,7 +12,6 @@ import Storage from '../Storage'; import { brush, BrushScope, brushSingle } from './graphic'; import { PainterBase } from '../PainterBase'; import BoundingRect from '../core/BoundingRect'; -import Element from '../Element'; import IncrementalDisplayable from '../graphic/IncrementalDisplayable'; import Path from '../graphic/Path'; import { REDARAW_BIT } from '../graphic/constants'; diff --git a/src/canvas/graphic.ts b/src/canvas/graphic.ts index 55a43f321..2c6dca236 100644 --- a/src/canvas/graphic.ts +++ b/src/canvas/graphic.ts @@ -14,7 +14,6 @@ import { DEFAULT_FONT } from '../contain/text'; import { MatrixArray } from '../core/matrix'; import { map } from '../core/util'; import { normalizeLineDash } from '../graphic/helper/dashStyle'; -import Element from '../Element'; import IncrementalDisplayable from '../graphic/IncrementalDisplayable'; import { REDARAW_BIT, SHAPE_CHANGED_BIT } from '../graphic/constants'; diff --git a/src/graphic/Path.ts b/src/graphic/Path.ts index d3b11376d..7c2bfbbca 100644 --- a/src/graphic/Path.ts +++ b/src/graphic/Path.ts @@ -7,7 +7,7 @@ import Displayable, { DisplayableProps, import Element, { ElementAnimateConfig } from '../Element'; import PathProxy from '../core/PathProxy'; import * as pathContain from '../contain/path'; -import Pattern, { PatternObject } from './Pattern'; +import { PatternObject } from './Pattern'; import { Dictionary, PropType, MapToType } from '../core/types'; import BoundingRect from '../core/BoundingRect'; import { LinearGradientObject } from './LinearGradient'; diff --git a/src/graphic/Pattern.ts b/src/graphic/Pattern.ts index 1805a2b3e..45c42a114 100644 --- a/src/graphic/Pattern.ts +++ b/src/graphic/Pattern.ts @@ -5,16 +5,16 @@ type CanvasPatternRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' export interface PatternObject { id?: number - type: 'pattern' + type?: 'pattern' image: ImageLike | string /** * svg element can only be used in svg renderer currently. * svgWidth, svgHeight defines width and height used for pattern. */ - svgElement: SVGElement - svgWidth: number - svgHeight: number + svgElement?: SVGElement + svgWidth?: number + svgHeight?: number repeat: CanvasPatternRepeat From d30bcf75748ffb40cec43794fddcf89c88660258 Mon Sep 17 00:00:00 2001 From: plainheart Date: Mon, 17 May 2021 12:56:52 +0800 Subject: [PATCH 2/4] fix(pattern): split PatternObject to CanvasPatternObject & SVGPatternObject. --- src/canvas/graphic.ts | 10 +++++----- src/export.ts | 8 +++++++- src/graphic/Pattern.ts | 34 +++++++++++++++++++++----------- src/svg/helper/PatternManager.ts | 12 +++++------ 4 files changed, 40 insertions(+), 24 deletions(-) diff --git a/src/canvas/graphic.ts b/src/canvas/graphic.ts index 2c6dca236..838ec1ff5 100644 --- a/src/canvas/graphic.ts +++ b/src/canvas/graphic.ts @@ -1,7 +1,7 @@ import Displayable, { DEFAULT_COMMON_STYLE } from '../graphic/Displayable'; import PathProxy from '../core/PathProxy'; import { GradientObject } from '../graphic/Gradient'; -import { PatternObject } from '../graphic/Pattern'; +import { CanvasPatternObject, InnerCanvasPatternObject, PatternObject } from '../graphic/Pattern'; import { LinearGradientObject } from '../graphic/LinearGradient'; import { RadialGradientObject } from '../graphic/RadialGradient'; import { ZRCanvasRenderingContext } from '../core/types'; @@ -58,10 +58,10 @@ function doStrokePath(ctx: CanvasRenderingContext2D, style: PathStyleProps) { export function createCanvasPattern( this: void, ctx: CanvasRenderingContext2D, - pattern: PatternObject, + pattern: CanvasPatternObject, el: {dirty: () => void} ): CanvasPattern { - const image = createOrUpdateImage(pattern.image, pattern.__image, el); + const image = createOrUpdateImage(pattern.image, (pattern as InnerCanvasPatternObject).__image, el); if (isImageReady(image)) { const canvasPattern = ctx.createPattern(image, pattern.repeat || 'repeat'); if ( @@ -132,14 +132,14 @@ function brushPath(ctx: CanvasRenderingContext2D, el: Path, style: PathStyleProp if (hasFillPattern) { // Pattern might be null if image not ready (even created from dataURI) fillPattern = (el.__dirty || !el.__canvasFillPattern) - ? createCanvasPattern(ctx, fill as PatternObject, el) + ? createCanvasPattern(ctx, fill as CanvasPatternObject, el) : el.__canvasFillPattern; el.__canvasFillPattern = fillPattern; } if (hasStrokePattern) { // Pattern might be null if image not ready (even created from dataURI) strokePattern = (el.__dirty || !el.__canvasStrokePattern) - ? createCanvasPattern(ctx, stroke as PatternObject, el) + ? createCanvasPattern(ctx, stroke as CanvasPatternObject, el) : el.__canvasStrokePattern; el.__canvasStrokePattern = fillPattern; } diff --git a/src/export.ts b/src/export.ts index e02a6f178..2474611ae 100644 --- a/src/export.ts +++ b/src/export.ts @@ -49,7 +49,13 @@ export {default as Trochoid, TrochoidProps, TrochoidShape} from './graphic/shape export {default as LinearGradient, LinearGradientObject} from './graphic/LinearGradient'; export {default as RadialGradient, RadialGradientObject} from './graphic/RadialGradient'; -export {default as Pattern, PatternObject} from './graphic/Pattern'; +export { + default as Pattern, + PatternObjectBase, + PatternObject, + CanvasPatternObject, + SVGPatternObject +} from './graphic/Pattern'; export {default as BoundingRect, RectLike} from './core/BoundingRect'; export {default as OrientedBoundingRect} from './core/OrientedBoundingRect'; diff --git a/src/graphic/Pattern.ts b/src/graphic/Pattern.ts index 45c42a114..da746220f 100644 --- a/src/graphic/Pattern.ts +++ b/src/graphic/Pattern.ts @@ -2,32 +2,42 @@ import { ImageLike } from '../core/types'; type CanvasPatternRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' -export interface PatternObject { - id?: number - +export interface PatternObjectBase { + // type is now unused, so make it optional type?: 'pattern' image: ImageLike | string - /** - * svg element can only be used in svg renderer currently. - * svgWidth, svgHeight defines width and height used for pattern. - */ - svgElement?: SVGElement - svgWidth?: number - svgHeight?: number - - repeat: CanvasPatternRepeat x?: number y?: number rotation?: number scaleX?: number scaleY?: number +} +export interface CanvasPatternObject extends PatternObjectBase { + repeat?: CanvasPatternRepeat +} + +export interface InnerCanvasPatternObject extends CanvasPatternObject { // Cached image. Which is created in the canvas painter. __image?: ImageLike } +export interface SVGPatternObject extends PatternObjectBase { + // id is now only used by SVG renderer + id?: number + /** + * svg element can only be used in svg renderer currently. + * svgWidth, svgHeight defines width and height used for pattern. + */ + svgElement?: SVGElement + svgWidth?: number + svgHeight?: number +} + +export type PatternObject = CanvasPatternObject | SVGPatternObject + class Pattern { type: 'pattern' diff --git a/src/svg/helper/PatternManager.ts b/src/svg/helper/PatternManager.ts index b4e12e11b..524b791f5 100644 --- a/src/svg/helper/PatternManager.ts +++ b/src/svg/helper/PatternManager.ts @@ -6,15 +6,15 @@ import Definable from './Definable'; import * as zrUtil from '../../core/util'; import Displayable from '../../graphic/Displayable'; -import {PatternObject} from '../../graphic/Pattern'; +import {PatternObject, SVGPatternObject} from '../../graphic/Pattern'; import {createOrUpdateImage} from '../../graphic/helper/image'; import WeakMap from '../../core/WeakMap'; function isPattern(value: PatternObject | string): value is PatternObject { - return value && (!!(value as PatternObject).image || !!(value as PatternObject).svgElement); + return value && (!!(value as PatternObject).image || !!(value as SVGPatternObject).svgElement); } -const patternDomMap = new WeakMap(); +const patternDomMap = new WeakMap(); /** * Manages SVG pattern elements. @@ -76,7 +76,7 @@ export default class PatternManager extends Definable { * * @param pattern zr pattern instance */ - add(pattern: PatternObject): SVGElement { + add(pattern: SVGPatternObject): SVGElement { if (!isPattern(pattern)) { return; } @@ -103,7 +103,7 @@ export default class PatternManager extends Definable { * * @param pattern zr pattern instance or color string */ - update(pattern: PatternObject | string) { + update(pattern: SVGPatternObject | string) { if (!isPattern(pattern)) { return; } @@ -122,7 +122,7 @@ export default class PatternManager extends Definable { * @param pattern zr pattern instance * @param patternDom DOM to update */ - updateDom(pattern: PatternObject, patternDom: SVGElement) { + updateDom(pattern: SVGPatternObject, patternDom: SVGElement) { const svgElement = pattern.svgElement; if (svgElement instanceof SVGElement) { From 3c2fb9ad5bc84d8097698b9b8bd982c7f425085d Mon Sep 17 00:00:00 2001 From: plainheart Date: Mon, 17 May 2021 14:53:23 +0800 Subject: [PATCH 3/4] fix(pattern): rename `CanvasPatternObject` to `ImagePatternObject`. --- src/canvas/graphic.ts | 10 +++++----- src/graphic/Pattern.ts | 10 +++++----- src/svg/helper/PatternManager.ts | 5 ----- 3 files changed, 10 insertions(+), 15 deletions(-) diff --git a/src/canvas/graphic.ts b/src/canvas/graphic.ts index 838ec1ff5..6f2806fc2 100644 --- a/src/canvas/graphic.ts +++ b/src/canvas/graphic.ts @@ -1,7 +1,7 @@ import Displayable, { DEFAULT_COMMON_STYLE } from '../graphic/Displayable'; import PathProxy from '../core/PathProxy'; import { GradientObject } from '../graphic/Gradient'; -import { CanvasPatternObject, InnerCanvasPatternObject, PatternObject } from '../graphic/Pattern'; +import { ImagePatternObject, InnerImagePatternObject, PatternObject } from '../graphic/Pattern'; import { LinearGradientObject } from '../graphic/LinearGradient'; import { RadialGradientObject } from '../graphic/RadialGradient'; import { ZRCanvasRenderingContext } from '../core/types'; @@ -58,10 +58,10 @@ function doStrokePath(ctx: CanvasRenderingContext2D, style: PathStyleProps) { export function createCanvasPattern( this: void, ctx: CanvasRenderingContext2D, - pattern: CanvasPatternObject, + pattern: ImagePatternObject, el: {dirty: () => void} ): CanvasPattern { - const image = createOrUpdateImage(pattern.image, (pattern as InnerCanvasPatternObject).__image, el); + const image = createOrUpdateImage(pattern.image, (pattern as InnerImagePatternObject).__image, el); if (isImageReady(image)) { const canvasPattern = ctx.createPattern(image, pattern.repeat || 'repeat'); if ( @@ -132,14 +132,14 @@ function brushPath(ctx: CanvasRenderingContext2D, el: Path, style: PathStyleProp if (hasFillPattern) { // Pattern might be null if image not ready (even created from dataURI) fillPattern = (el.__dirty || !el.__canvasFillPattern) - ? createCanvasPattern(ctx, fill as CanvasPatternObject, el) + ? createCanvasPattern(ctx, fill as ImagePatternObject, el) : el.__canvasFillPattern; el.__canvasFillPattern = fillPattern; } if (hasStrokePattern) { // Pattern might be null if image not ready (even created from dataURI) strokePattern = (el.__dirty || !el.__canvasStrokePattern) - ? createCanvasPattern(ctx, stroke as CanvasPatternObject, el) + ? createCanvasPattern(ctx, stroke as ImagePatternObject, el) : el.__canvasStrokePattern; el.__canvasStrokePattern = fillPattern; } diff --git a/src/graphic/Pattern.ts b/src/graphic/Pattern.ts index da746220f..c3821abf3 100644 --- a/src/graphic/Pattern.ts +++ b/src/graphic/Pattern.ts @@ -1,6 +1,6 @@ import { ImageLike } from '../core/types'; -type CanvasPatternRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' +type ImagePatternRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' export interface PatternObjectBase { // type is now unused, so make it optional @@ -15,11 +15,11 @@ export interface PatternObjectBase { scaleY?: number } -export interface CanvasPatternObject extends PatternObjectBase { - repeat?: CanvasPatternRepeat +export interface ImagePatternObject extends PatternObjectBase { + repeat?: ImagePatternRepeat } -export interface InnerCanvasPatternObject extends CanvasPatternObject { +export interface InnerImagePatternObject extends ImagePatternObject { // Cached image. Which is created in the canvas painter. __image?: ImageLike } @@ -36,7 +36,7 @@ export interface SVGPatternObject extends PatternObjectBase { svgHeight?: number } -export type PatternObject = CanvasPatternObject | SVGPatternObject +export type PatternObject = ImagePatternObject | SVGPatternObject class Pattern { diff --git a/src/svg/helper/PatternManager.ts b/src/svg/helper/PatternManager.ts index 524b791f5..81c166a33 100644 --- a/src/svg/helper/PatternManager.ts +++ b/src/svg/helper/PatternManager.ts @@ -216,8 +216,3 @@ export default class PatternManager extends Definable { } } - -type CachedImageObj = { - width: number, - height: number -}; From 81ffaf64bf96cbd534480446eef6c8f784d599a4 Mon Sep 17 00:00:00 2001 From: plainheart Date: Mon, 17 May 2021 15:11:03 +0800 Subject: [PATCH 4/4] fix(pattern): remove `image` property from `SVGPatternObject` and change `PatternObject` to `ImagePatternObject` in canvas painter. --- src/canvas/Layer.ts | 10 ++++----- src/canvas/Painter.ts | 8 ++++---- src/canvas/graphic.ts | 6 +++--- src/export.ts | 2 +- src/graphic/Pattern.ts | 10 ++++----- src/svg/helper/PatternManager.ts | 35 ++++++++++++++++---------------- 6 files changed, 35 insertions(+), 36 deletions(-) diff --git a/src/canvas/Layer.ts b/src/canvas/Layer.ts index e1ac30577..24a79c1de 100644 --- a/src/canvas/Layer.ts +++ b/src/canvas/Layer.ts @@ -1,6 +1,6 @@ import * as util from '../core/util'; import {devicePixelRatio} from '../config'; -import { PatternObject } from '../graphic/Pattern'; +import { ImagePatternObject } from '../graphic/Pattern'; import CanvasPainter from './Painter'; import { GradientObject, InnerGradientObject } from '../graphic/Gradient'; import { ZRCanvasRenderingContext } from '../core/types'; @@ -40,7 +40,7 @@ function createDom(id: string, painter: CanvasPainter, dpr: number) { export interface LayerConfig { // 每次清空画布的颜色 - clearColor?: string | GradientObject | PatternObject + clearColor?: string | GradientObject | ImagePatternObject // 是否开启动态模糊 motionBlur?: boolean // 在开启动态模糊的时候使用,与上一帧混合的alpha值,值越大尾迹越明显 @@ -63,7 +63,7 @@ export default class Layer extends Eventful { /** * 每次清空画布的颜色 */ - clearColor: string | GradientObject | PatternObject + clearColor: string | GradientObject | ImagePatternObject /** * 是否开启动态模糊 */ @@ -397,7 +397,7 @@ export default class Layer extends Eventful { */ clear( clearAll?: boolean, - clearColor?: string | GradientObject | PatternObject, + clearColor?: string | GradientObject | ImagePatternObject, repaintRects?: BoundingRect[] ) { const dom = this.dom; @@ -488,7 +488,7 @@ export default class Layer extends Eventful { } // Iterface of refresh - refresh: (clearColor?: string | GradientObject | PatternObject) => void + refresh: (clearColor?: string | GradientObject | ImagePatternObject) => void // Interface of renderToCanvas in getRenderedCanvas renderToCanvas: (ctx: CanvasRenderingContext2D) => void diff --git a/src/canvas/Painter.ts b/src/canvas/Painter.ts index 88365c2b9..3ac431452 100644 --- a/src/canvas/Painter.ts +++ b/src/canvas/Painter.ts @@ -7,7 +7,7 @@ import env from '../core/env'; import Displayable from '../graphic/Displayable'; import { WXCanvasRenderingContext, ZRCanvasRenderingContext } from '../core/types'; import { GradientObject } from '../graphic/Gradient'; -import { PatternObject } from '../graphic/Pattern'; +import { ImagePatternObject } from '../graphic/Pattern'; import Storage from '../Storage'; import { brush, BrushScope, brushSingle } from './graphic'; import { PainterBase } from '../PainterBase'; @@ -110,7 +110,7 @@ export default class CanvasPainter implements PainterBase { private _redrawId: number - private _backgroundColor: string | GradientObject | PatternObject + private _backgroundColor: string | GradientObject | ImagePatternObject constructor(root: HTMLElement, storage: Storage, opts: CanvasPainterOption, id: number) { @@ -789,7 +789,7 @@ export default class CanvasPainter implements PainterBase { layer.clear(); } - setBackgroundColor(backgroundColor: string | GradientObject | PatternObject) { + setBackgroundColor(backgroundColor: string | GradientObject | ImagePatternObject) { this._backgroundColor = backgroundColor; util.each(this._layers, layer => { @@ -919,7 +919,7 @@ export default class CanvasPainter implements PainterBase { * Get canvas which has all thing rendered */ getRenderedCanvas(opts?: { - backgroundColor?: string | GradientObject | PatternObject + backgroundColor?: string | GradientObject | ImagePatternObject pixelRatio?: number }) { opts = opts || {}; diff --git a/src/canvas/graphic.ts b/src/canvas/graphic.ts index 6f2806fc2..834725cef 100644 --- a/src/canvas/graphic.ts +++ b/src/canvas/graphic.ts @@ -1,7 +1,7 @@ import Displayable, { DEFAULT_COMMON_STYLE } from '../graphic/Displayable'; import PathProxy from '../core/PathProxy'; import { GradientObject } from '../graphic/Gradient'; -import { ImagePatternObject, InnerImagePatternObject, PatternObject } from '../graphic/Pattern'; +import { ImagePatternObject, InnerImagePatternObject } from '../graphic/Pattern'; import { LinearGradientObject } from '../graphic/LinearGradient'; import { RadialGradientObject } from '../graphic/RadialGradient'; import { ZRCanvasRenderingContext } from '../core/types'; @@ -103,8 +103,8 @@ function brushPath(ctx: CanvasRenderingContext2D, el: Path, style: PathStyleProp const hasFillGradient = hasFill && !!(fill as GradientObject).colorStops; const hasStrokeGradient = hasStroke && !!(stroke as GradientObject).colorStops; - const hasFillPattern = hasFill && !!(fill as PatternObject).image; - const hasStrokePattern = hasStroke && !!(stroke as PatternObject).image; + const hasFillPattern = hasFill && !!(fill as ImagePatternObject).image; + const hasStrokePattern = hasStroke && !!(stroke as ImagePatternObject).image; let fillGradient; let strokeGradient; diff --git a/src/export.ts b/src/export.ts index 2474611ae..0e68eee69 100644 --- a/src/export.ts +++ b/src/export.ts @@ -53,7 +53,7 @@ export { default as Pattern, PatternObjectBase, PatternObject, - CanvasPatternObject, + ImagePatternObject, SVGPatternObject } from './graphic/Pattern'; export {default as BoundingRect, RectLike} from './core/BoundingRect'; diff --git a/src/graphic/Pattern.ts b/src/graphic/Pattern.ts index c3821abf3..188b6ce21 100644 --- a/src/graphic/Pattern.ts +++ b/src/graphic/Pattern.ts @@ -3,11 +3,10 @@ import { ImageLike } from '../core/types'; type ImagePatternRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' export interface PatternObjectBase { + id?: number // type is now unused, so make it optional type?: 'pattern' - image: ImageLike | string - x?: number y?: number rotation?: number @@ -16,6 +15,7 @@ export interface PatternObjectBase { } export interface ImagePatternObject extends PatternObjectBase { + image: ImageLike | string repeat?: ImagePatternRepeat } @@ -25,8 +25,6 @@ export interface InnerImagePatternObject extends ImagePatternObject { } export interface SVGPatternObject extends PatternObjectBase { - // id is now only used by SVG renderer - id?: number /** * svg element can only be used in svg renderer currently. * svgWidth, svgHeight defines width and height used for pattern. @@ -48,7 +46,7 @@ class Pattern { */ svgElement: SVGElement - repeat: CanvasPatternRepeat + repeat: ImagePatternRepeat x: number y: number @@ -56,7 +54,7 @@ class Pattern { scaleX: number scaleY: number - constructor(image: ImageLike | string, repeat: CanvasPatternRepeat) { + constructor(image: ImageLike | string, repeat: ImagePatternRepeat) { // Should do nothing more in this constructor. Because gradient can be // declard by `color: {image: ...}`, where this constructor will not be called. this.image = image; diff --git a/src/svg/helper/PatternManager.ts b/src/svg/helper/PatternManager.ts index 81c166a33..1f1f74e3b 100644 --- a/src/svg/helper/PatternManager.ts +++ b/src/svg/helper/PatternManager.ts @@ -6,15 +6,15 @@ import Definable from './Definable'; import * as zrUtil from '../../core/util'; import Displayable from '../../graphic/Displayable'; -import {PatternObject, SVGPatternObject} from '../../graphic/Pattern'; +import {PatternObject, ImagePatternObject, SVGPatternObject} from '../../graphic/Pattern'; import {createOrUpdateImage} from '../../graphic/helper/image'; import WeakMap from '../../core/WeakMap'; function isPattern(value: PatternObject | string): value is PatternObject { - return value && (!!(value as PatternObject).image || !!(value as SVGPatternObject).svgElement); + return value && (!!(value as ImagePatternObject).image || !!(value as SVGPatternObject).svgElement); } -const patternDomMap = new WeakMap(); +const patternDomMap = new WeakMap(); /** * Manages SVG pattern elements. @@ -76,7 +76,7 @@ export default class PatternManager extends Definable { * * @param pattern zr pattern instance */ - add(pattern: SVGPatternObject): SVGElement { + add(pattern: PatternObject): SVGElement { if (!isPattern(pattern)) { return; } @@ -103,7 +103,7 @@ export default class PatternManager extends Definable { * * @param pattern zr pattern instance or color string */ - update(pattern: SVGPatternObject | string) { + update(pattern: PatternObject | string) { if (!isPattern(pattern)) { return; } @@ -122,23 +122,23 @@ export default class PatternManager extends Definable { * @param pattern zr pattern instance * @param patternDom DOM to update */ - updateDom(pattern: SVGPatternObject, patternDom: SVGElement) { - const svgElement = pattern.svgElement; + updateDom(pattern: PatternObject, patternDom: SVGElement) { + const svgElement = (pattern as SVGPatternObject).svgElement; if (svgElement instanceof SVGElement) { if (svgElement.parentNode !== patternDom) { patternDom.innerHTML = ''; patternDom.appendChild(svgElement); - patternDom.setAttribute('width', pattern.svgWidth + ''); - patternDom.setAttribute('height', pattern.svgHeight + ''); + patternDom.setAttribute('width', (pattern as SVGPatternObject).svgWidth + ''); + patternDom.setAttribute('height', (pattern as SVGPatternObject).svgHeight + ''); } } else { let img: SVGElement; const prevImage = patternDom.getElementsByTagName('image'); if (prevImage.length) { - if (pattern.image) { + if ((pattern as ImagePatternObject).image) { // Update img = prevImage[0]; } @@ -148,21 +148,22 @@ export default class PatternManager extends Definable { return; } } - else if (pattern.image) { + else if ((pattern as ImagePatternObject).image) { // Create img = this.createElement('image'); } if (img) { let imageSrc; - if (typeof pattern.image === 'string') { - imageSrc = pattern.image; + const patternImage = (pattern as ImagePatternObject).image; + if (typeof patternImage === 'string') { + imageSrc = patternImage; } - else if (pattern.image instanceof HTMLImageElement) { - imageSrc = pattern.image.src; + else if (patternImage instanceof HTMLImageElement) { + imageSrc = patternImage.src; } - else if (pattern.image instanceof HTMLCanvasElement) { - imageSrc = pattern.image.toDataURL(); + else if (patternImage instanceof HTMLCanvasElement) { + imageSrc = patternImage.toDataURL(); } if (imageSrc) {