124
124
else {
125
125
text = text || '';
126
126
font = font || DEFAULT_FONT;
127
- var res = /^([0-9]*? )px$ /.exec(font);
128
- var fontSize = +( res && res[1]) || DEFAULT_FONT_SIZE;
127
+ var res = /(\d+ )px/.exec(font);
128
+ var fontSize = res && + res[1] || DEFAULT_FONT_SIZE;
129
129
var width = 0;
130
130
if (font.indexOf('mono') >= 0) {
131
131
width = fontSize * text.length;
578
578
function isPrimitive(obj) {
579
579
return obj[primitiveKey];
580
580
}
581
+ var MapPolyfill = (function () {
582
+ function MapPolyfill() {
583
+ this.data = {};
584
+ }
585
+ MapPolyfill.prototype["delete"] = function (key) {
586
+ var existed = this.has(key);
587
+ if (existed) {
588
+ delete this.data[key];
589
+ }
590
+ return existed;
591
+ };
592
+ MapPolyfill.prototype.has = function (key) {
593
+ return this.data.hasOwnProperty(key);
594
+ };
595
+ MapPolyfill.prototype.get = function (key) {
596
+ return this.data[key];
597
+ };
598
+ MapPolyfill.prototype.set = function (key, value) {
599
+ this.data[key] = value;
600
+ return this;
601
+ };
602
+ MapPolyfill.prototype.keys = function () {
603
+ return keys(this.data);
604
+ };
605
+ MapPolyfill.prototype.forEach = function (callback) {
606
+ var data = this.data;
607
+ for (var key in data) {
608
+ if (data.hasOwnProperty(key)) {
609
+ callback(data[key], key);
610
+ }
611
+ }
612
+ };
613
+ return MapPolyfill;
614
+ }());
615
+ var isNativeMapSupported = typeof Map === 'function';
616
+ function maybeNativeMap() {
617
+ return (isNativeMapSupported ? new Map() : new MapPolyfill());
618
+ }
581
619
var HashMap = (function () {
582
620
function HashMap(obj) {
583
- this.data = {};
584
621
var isArr = isArray(obj);
585
- this.data = {} ;
622
+ this.data = maybeNativeMap() ;
586
623
var thisMap = this;
587
624
(obj instanceof HashMap)
588
625
? obj.each(visit)
591
628
isArr ? thisMap.set(value, key) : thisMap.set(key, value);
592
629
}
593
630
}
631
+ HashMap.prototype.hasKey = function (key) {
632
+ return this.data.has(key);
633
+ };
594
634
HashMap.prototype.get = function (key) {
595
- return this.data.hasOwnProperty (key) ? this.data[key] : null ;
635
+ return this.data.get (key);
596
636
};
597
637
HashMap.prototype.set = function (key, value) {
598
- return (this.data[key] = value);
638
+ this.data.set(key, value);
639
+ return value;
599
640
};
600
641
HashMap.prototype.each = function (cb, context) {
601
- for (var key in this.data) {
602
- if (this.data.hasOwnProperty(key)) {
603
- cb.call(context, this.data[key], key);
604
- }
605
- }
642
+ this.data.forEach(function (value, key) {
643
+ cb.call(context, value, key);
644
+ });
606
645
};
607
646
HashMap.prototype.keys = function () {
608
- return keys(this.data);
647
+ var keys = this.data.keys();
648
+ return isNativeMapSupported
649
+ ? Array.from(keys)
650
+ : keys;
609
651
};
610
652
HashMap.prototype.removeKey = function (key) {
611
- delete this.data[key] ;
653
+ this.data["delete"](key) ;
612
654
};
613
655
return HashMap;
614
656
}());
4149
4191
var encodeBase64 = (function () {
4150
4192
if (env.hasGlobalWindow && isFunction(window.btoa)) {
4151
4193
return function (str) {
4152
- return window.btoa(unescape(str));
4194
+ return window.btoa(unescape(encodeURIComponent( str) ));
4153
4195
};
4154
4196
}
4155
4197
if (typeof Buffer !== 'undefined') {
7196
7238
function registerPainter(name, Ctor) {
7197
7239
painterCtors[name] = Ctor;
7198
7240
}
7199
- var version = '5.4.0 ';
7241
+ var version = '5.4.1 ';
7200
7242
7201
7243
var STYLE_MAGIC_KEY = '__zr_style_' + Math.round((Math.random() * 10));
7202
7244
var DEFAULT_COMMON_STYLE = {
@@ -14959,14 +15001,19 @@
14959
15001
if (clearColor && clearColor !== 'transparent') {
14960
15002
var clearColorGradientOrPattern = void 0;
14961
15003
if (isGradientObject(clearColor)) {
14962
- clearColorGradientOrPattern = clearColor.__canvasGradient
15004
+ var shouldCache = clearColor.global || (clearColor.__width === width
15005
+ && clearColor.__height === height);
15006
+ clearColorGradientOrPattern = shouldCache
15007
+ && clearColor.__canvasGradient
14963
15008
|| getCanvasGradient(ctx, clearColor, {
14964
15009
x: 0,
14965
15010
y: 0,
14966
15011
width: width,
14967
15012
height: height
14968
15013
});
14969
15014
clearColor.__canvasGradient = clearColorGradientOrPattern;
15015
+ clearColor.__width = width;
15016
+ clearColor.__height = height;
14970
15017
}
14971
15018
else if (isImagePatternObject(clearColor)) {
14972
15019
clearColor.scaleX = clearColor.scaleX || dpr;
16247
16294
}
16248
16295
};
16249
16296
}
16250
- var buitinShapesDef = {
16297
+ var builtinShapesDef = {
16251
16298
circle: [createAttrsConvert(['cx', 'cy', 'r'])],
16252
16299
polyline: [convertPolyShape, validatePolyShape],
16253
16300
polygon: [convertPolyShape, validatePolyShape]
16264
16311
function brushSVGPath(el, scope) {
16265
16312
var style = el.style;
16266
16313
var shape = el.shape;
16267
- var builtinShpDef = buitinShapesDef [el.type];
16314
+ var builtinShpDef = builtinShapesDef [el.type];
16268
16315
var attrs = {};
16269
16316
var needsAnimate = scope.animation;
16270
16317
var svgElType = 'path';
@@ -16280,11 +16327,12 @@
16280
16327
builtinShpDef[0](shape, attrs, mul);
16281
16328
}
16282
16329
else {
16330
+ var needBuildPath = !el.path || el.shapeChanged();
16283
16331
if (!el.path) {
16284
16332
el.createPathProxy();
16285
16333
}
16286
16334
var path = el.path;
16287
- if (el.shapeChanged() ) {
16335
+ if (needBuildPath ) {
16288
16336
path.beginPath();
16289
16337
el.buildPath(path, el.shape);
16290
16338
el.pathUpdated();
16504
16552
}
16505
16553
function setPattern(el, attrs, target, scope) {
16506
16554
var val = el.style[target];
16507
- var patternAttrs = {
16508
- 'patternUnits': 'userSpaceOnUse'
16509
- };
16555
+ var boundingRect = el.getBoundingRect();
16556
+ var patternAttrs = {};
16557
+ var repeat = val.repeat;
16558
+ var noRepeat = repeat === 'no-repeat';
16559
+ var repeatX = repeat === 'repeat-x';
16560
+ var repeatY = repeat === 'repeat-y';
16510
16561
var child;
16511
16562
if (isImagePattern(val)) {
16512
16563
var imageWidth_1 = val.imageWidth;
@@ -16531,16 +16582,28 @@
16531
16582
var setSizeToVNode_1 = function (vNode, img) {
16532
16583
if (vNode) {
16533
16584
var svgEl = vNode.elm;
16534
- var width = (vNode.attrs.width = imageWidth_1 || img.width);
16535
- var height = (vNode.attrs.height = imageHeight_1 || img.height);
16585
+ var width = imageWidth_1 || img.width;
16586
+ var height = imageHeight_1 || img.height;
16587
+ if (vNode.tag === 'pattern') {
16588
+ if (repeatX) {
16589
+ height = 1;
16590
+ width /= boundingRect.width;
16591
+ }
16592
+ else if (repeatY) {
16593
+ width = 1;
16594
+ height /= boundingRect.height;
16595
+ }
16596
+ }
16597
+ vNode.attrs.width = width;
16598
+ vNode.attrs.height = height;
16536
16599
if (svgEl) {
16537
16600
svgEl.setAttribute('width', width);
16538
16601
svgEl.setAttribute('height', height);
16539
16602
}
16540
16603
}
16541
16604
};
16542
16605
var createdImage = createOrUpdateImage(imageSrc, null, el, function (img) {
16543
- setSizeToVNode_1(patternVNode, img);
16606
+ noRepeat || setSizeToVNode_1(patternVNode, img);
16544
16607
setSizeToVNode_1(child, img);
16545
16608
});
16546
16609
if (createdImage && createdImage.width && createdImage.height) {
16564
16627
if (!child) {
16565
16628
return;
16566
16629
}
16567
- patternAttrs.patternTransform = getSRTTransformString(val);
16630
+ var patternWidth;
16631
+ var patternHeight;
16632
+ if (noRepeat) {
16633
+ patternWidth = patternHeight = 1;
16634
+ }
16635
+ else if (repeatX) {
16636
+ patternHeight = 1;
16637
+ patternWidth = patternAttrs.width / boundingRect.width;
16638
+ }
16639
+ else if (repeatY) {
16640
+ patternWidth = 1;
16641
+ patternHeight = patternAttrs.height / boundingRect.height;
16642
+ }
16643
+ else {
16644
+ patternAttrs.patternUnits = 'userSpaceOnUse';
16645
+ }
16646
+ if (patternWidth != null && !isNaN(patternWidth)) {
16647
+ patternAttrs.width = patternWidth;
16648
+ }
16649
+ if (patternHeight != null && !isNaN(patternHeight)) {
16650
+ patternAttrs.height = patternHeight;
16651
+ }
16652
+ var patternTransform = getSRTTransformString(val);
16653
+ patternTransform && (patternAttrs.patternTransform = patternTransform);
16568
16654
var patternVNode = createVNode('pattern', '', patternAttrs, [child]);
16569
16655
var patternKey = vNodeToString(patternVNode);
16570
16656
var patternCache = scope.patternCache;
@@ -16916,30 +17002,15 @@
16916
17002
SVGPainter.prototype.renderToVNode = function (opts) {
16917
17003
opts = opts || {};
16918
17004
var list = this.storage.getDisplayList(true);
16919
- var bgColor = this._backgroundColor;
16920
17005
var width = this._width;
16921
17006
var height = this._height;
16922
17007
var scope = createBrushScope(this._id);
16923
17008
scope.animation = opts.animation;
16924
17009
scope.willUpdate = opts.willUpdate;
16925
17010
scope.compress = opts.compress;
16926
17011
var children = [];
16927
- if (bgColor && bgColor !== 'none') {
16928
- var _a = normalizeColor(bgColor), color = _a.color, opacity = _a.opacity;
16929
- this._bgVNode = createVNode('rect', 'bg', {
16930
- width: width,
16931
- height: height,
16932
- x: '0',
16933
- y: '0',
16934
- id: '0',
16935
- fill: color,
16936
- 'fill-opacity': opacity
16937
- });
16938
- children.push(this._bgVNode);
16939
- }
16940
- else {
16941
- this._bgVNode = null;
16942
- }
17012
+ var bgVNode = this._bgVNode = createBackgroundVNode(width, height, this._backgroundColor, scope);
17013
+ bgVNode && children.push(bgVNode);
16943
17014
var mainVNode = !opts.compress
16944
17015
? (this._mainVNode = createVNode('g', 'main', {}, [])) : null;
16945
17016
this._paintList(list, scope, mainVNode ? mainVNode.children : children);
16968
17039
};
16969
17040
SVGPainter.prototype.setBackgroundColor = function (backgroundColor) {
16970
17041
this._backgroundColor = backgroundColor;
16971
- var bgVNode = this._bgVNode;
16972
- if (bgVNode && bgVNode.elm) {
16973
- var _a = normalizeColor(backgroundColor), color = _a.color, opacity = _a.opacity;
16974
- bgVNode.elm.setAttribute('fill', color);
16975
- if (opacity < 1) {
16976
- bgVNode.elm.setAttribute('fill-opacity', opacity);
16977
- }
16978
- }
16979
17042
};
16980
17043
SVGPainter.prototype.getSvgRoot = function () {
16981
17044
return this._mainVNode && this._mainVNode.elm;
@@ -17040,10 +17103,20 @@
17040
17103
viewportStyle.width = width + 'px';
17041
17104
viewportStyle.height = height + 'px';
17042
17105
}
17043
- var svgDom = this._svgDom;
17044
- if (svgDom) {
17045
- svgDom.setAttribute('width', width);
17046
- svgDom.setAttribute('height', height);
17106
+ if (!isPattern(this._backgroundColor)) {
17107
+ var svgDom = this._svgDom;
17108
+ if (svgDom) {
17109
+ svgDom.setAttribute('width', width);
17110
+ svgDom.setAttribute('height', height);
17111
+ }
17112
+ var bgEl = this._bgVNode && this._bgVNode.elm;
17113
+ if (bgEl) {
17114
+ bgEl.setAttribute('width', width);
17115
+ bgEl.setAttribute('height', height);
17116
+ }
17117
+ }
17118
+ else {
17119
+ this.refresh();
17047
17120
}
17048
17121
}
17049
17122
};
@@ -17071,13 +17144,13 @@
17071
17144
this._oldVNode = null;
17072
17145
};
17073
17146
SVGPainter.prototype.toDataURL = function (base64) {
17074
- var str = encodeURIComponent( this.renderToString() );
17147
+ var str = this.renderToString();
17075
17148
var prefix = 'data:image/svg+xml;';
17076
17149
if (base64) {
17077
17150
str = encodeBase64(str);
17078
17151
return str && prefix + 'base64,' + str;
17079
17152
}
17080
- return prefix + 'charset=UTF-8,' + str;
17153
+ return prefix + 'charset=UTF-8,' + encodeURIComponent( str) ;
17081
17154
};
17082
17155
return SVGPainter;
17083
17156
}());
17087
17160
logError('In SVG mode painter not support method "' + method + '"');
17088
17161
}
17089
17162
};
17163
+ }
17164
+ function createBackgroundVNode(width, height, backgroundColor, scope) {
17165
+ var bgVNode;
17166
+ if (backgroundColor && backgroundColor !== 'none') {
17167
+ bgVNode = createVNode('rect', 'bg', {
17168
+ width: width,
17169
+ height: height,
17170
+ x: '0',
17171
+ y: '0',
17172
+ id: '0'
17173
+ });
17174
+ if (isGradient(backgroundColor)) {
17175
+ setGradient({ fill: backgroundColor }, bgVNode.attrs, 'fill', scope);
17176
+ }
17177
+ else if (isPattern(backgroundColor)) {
17178
+ setPattern({
17179
+ style: {
17180
+ fill: backgroundColor
17181
+ },
17182
+ dirty: noop,
17183
+ getBoundingRect: function () { return ({ width: width, height: height }); }
17184
+ }, bgVNode.attrs, 'fill', scope);
17185
+ }
17186
+ else {
17187
+ var _a = normalizeColor(backgroundColor), color = _a.color, opacity = _a.opacity;
17188
+ bgVNode.attrs.fill = color;
17189
+ opacity < 1 && (bgVNode.attrs['fill-opacity'] = opacity);
17190
+ }
17191
+ }
17192
+ return bgVNode;
17090
17193
}
17091
17194
17092
17195
registerPainter('canvas', CanvasPainter);
0 commit comments