@visactor/vtable-gantt 1.19.10-alpha.0 → 1.19.10-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/index.d.ts +1 -1
- package/cjs/index.js +1 -1
- package/cjs/index.js.map +1 -1
- package/dist/vtable-gantt.js +118 -1434
- package/dist/vtable-gantt.min.js +2 -2
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/es/index.js.map +1 -1
- package/package.json +5 -5
package/dist/vtable-gantt.js
CHANGED
|
@@ -645,15 +645,7 @@
|
|
|
645
645
|
const VGlobal = Symbol.for("VGlobal");
|
|
646
646
|
const DEFAULT_TEXT_FONT_FAMILY$2 = "PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol";
|
|
647
647
|
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
const RenderService = Symbol.for("RenderService");
|
|
651
|
-
|
|
652
|
-
class Application {
|
|
653
|
-
get renderService() {
|
|
654
|
-
return this._renderService || (this._renderService = container.get(RenderService)), this._renderService;
|
|
655
|
-
}
|
|
656
|
-
}
|
|
648
|
+
class Application {}
|
|
657
649
|
const application = new Application();
|
|
658
650
|
|
|
659
651
|
let idx = 0;
|
|
@@ -4700,8 +4692,7 @@
|
|
|
4700
4692
|
y1: 0,
|
|
4701
4693
|
strokeBoundsBuffer: 0,
|
|
4702
4694
|
cornerRadius: 0,
|
|
4703
|
-
cornerType: "round"
|
|
4704
|
-
drawStrokeWhenZeroWH: !1
|
|
4695
|
+
cornerType: "round"
|
|
4705
4696
|
});
|
|
4706
4697
|
Object.assign(Object.assign({}, DefaultAttribute), {
|
|
4707
4698
|
width: 0,
|
|
@@ -4710,8 +4701,7 @@
|
|
|
4710
4701
|
y1: 0,
|
|
4711
4702
|
cornerRadius: 0,
|
|
4712
4703
|
length: 0,
|
|
4713
|
-
cornerType: "round"
|
|
4714
|
-
drawStrokeWhenZeroWH: !1
|
|
4704
|
+
cornerType: "round"
|
|
4715
4705
|
});
|
|
4716
4706
|
const DefaultSymbolAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
|
|
4717
4707
|
symbolType: "circle",
|
|
@@ -4938,34 +4928,6 @@
|
|
|
4938
4928
|
}
|
|
4939
4929
|
return c;
|
|
4940
4930
|
}
|
|
4941
|
-
static processColorStops(colorStops) {
|
|
4942
|
-
if (!colorStops || 0 === colorStops.length) return [];
|
|
4943
|
-
if (colorStops.some(item => item.length)) {
|
|
4944
|
-
const stops = colorStops.map(item => ({
|
|
4945
|
-
color: item.value,
|
|
4946
|
-
offset: item.length ? parseFloat(item.length.value) / 100 : -1
|
|
4947
|
-
}));
|
|
4948
|
-
stops[0].offset < 0 && (stops[0].offset = 0), stops[stops.length - 1].offset < 0 && (stops[stops.length - 1].offset = 1);
|
|
4949
|
-
for (let i = 1; i < stops.length - 1; i++) if (stops[i].offset < 0) {
|
|
4950
|
-
const prevWithOffsetIdx = i - 1;
|
|
4951
|
-
let nextWithOffsetIdx = i + 1;
|
|
4952
|
-
for (; nextWithOffsetIdx < stops.length && stops[nextWithOffsetIdx].offset < 0;) nextWithOffsetIdx++;
|
|
4953
|
-
const startOffset = stops[prevWithOffsetIdx].offset,
|
|
4954
|
-
endOffset = stops[nextWithOffsetIdx].offset,
|
|
4955
|
-
unspecCount = nextWithOffsetIdx - prevWithOffsetIdx;
|
|
4956
|
-
for (let j = 1; j < unspecCount; j++) stops[prevWithOffsetIdx + j].offset = startOffset + (endOffset - startOffset) * j / unspecCount;
|
|
4957
|
-
i = nextWithOffsetIdx - 1;
|
|
4958
|
-
}
|
|
4959
|
-
return stops;
|
|
4960
|
-
}
|
|
4961
|
-
return colorStops.map((item, index) => {
|
|
4962
|
-
const offset = colorStops.length > 1 ? index / (colorStops.length - 1) : 0;
|
|
4963
|
-
return {
|
|
4964
|
-
color: item.value,
|
|
4965
|
-
offset: offset
|
|
4966
|
-
};
|
|
4967
|
-
});
|
|
4968
|
-
}
|
|
4969
4931
|
static ParseConic(datum) {
|
|
4970
4932
|
const {
|
|
4971
4933
|
orientation: orientation,
|
|
@@ -4979,7 +4941,10 @@
|
|
|
4979
4941
|
y: .5,
|
|
4980
4942
|
startAngle: sa,
|
|
4981
4943
|
endAngle: sa + pi2,
|
|
4982
|
-
stops:
|
|
4944
|
+
stops: colorStops.map(item => ({
|
|
4945
|
+
color: item.value,
|
|
4946
|
+
offset: parseFloat(item.length.value) / 100
|
|
4947
|
+
}))
|
|
4983
4948
|
};
|
|
4984
4949
|
}
|
|
4985
4950
|
static ParseRadial(datum) {
|
|
@@ -4994,7 +4959,10 @@
|
|
|
4994
4959
|
y1: .5,
|
|
4995
4960
|
r0: 0,
|
|
4996
4961
|
r1: 1,
|
|
4997
|
-
stops:
|
|
4962
|
+
stops: colorStops.map(item => ({
|
|
4963
|
+
color: item.value,
|
|
4964
|
+
offset: parseFloat(item.length.value) / 100
|
|
4965
|
+
}))
|
|
4998
4966
|
};
|
|
4999
4967
|
}
|
|
5000
4968
|
static ParseLinear(datum) {
|
|
@@ -5016,7 +4984,10 @@
|
|
|
5016
4984
|
y0: y0,
|
|
5017
4985
|
x1: x1,
|
|
5018
4986
|
y1: y1,
|
|
5019
|
-
stops:
|
|
4987
|
+
stops: colorStops.map(item => ({
|
|
4988
|
+
color: item.value,
|
|
4989
|
+
offset: parseFloat(item.length.value) / 100
|
|
4990
|
+
}))
|
|
5020
4991
|
};
|
|
5021
4992
|
}
|
|
5022
4993
|
}
|
|
@@ -5212,9 +5183,6 @@
|
|
|
5212
5183
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
5213
5184
|
};
|
|
5214
5185
|
let ATextMeasure = class {
|
|
5215
|
-
constructor() {
|
|
5216
|
-
this.id = "ATextMeasure";
|
|
5217
|
-
}
|
|
5218
5186
|
configure(service, env) {
|
|
5219
5187
|
this.canvas = service.canvas, this.context = service.context, service.bindTextMeasure(this);
|
|
5220
5188
|
}
|
|
@@ -5607,13 +5575,11 @@
|
|
|
5607
5575
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
5608
5576
|
};
|
|
5609
5577
|
const TextMeasureContribution = Symbol.for("TextMeasureContribution");
|
|
5610
|
-
let DefaultTextMeasureContribution = class extends ATextMeasure {
|
|
5611
|
-
constructor() {
|
|
5612
|
-
super(...arguments), this.id = "DefaultTextMeasureContribution";
|
|
5613
|
-
}
|
|
5614
|
-
};
|
|
5578
|
+
let DefaultTextMeasureContribution = class extends ATextMeasure {};
|
|
5615
5579
|
DefaultTextMeasureContribution = __decorate$16([injectable()], DefaultTextMeasureContribution);
|
|
5616
5580
|
|
|
5581
|
+
const container = new Container$2();
|
|
5582
|
+
|
|
5617
5583
|
const CanvasFactory = Symbol.for("CanvasFactory");
|
|
5618
5584
|
const Context2dFactory = Symbol.for("Context2dFactory");
|
|
5619
5585
|
|
|
@@ -6190,17 +6156,13 @@
|
|
|
6190
6156
|
return this.tryInitCanvas(), this._context;
|
|
6191
6157
|
}
|
|
6192
6158
|
constructor(contributions) {
|
|
6193
|
-
this.contributions = contributions, this.configured = !1, this.global = application.global, this.
|
|
6159
|
+
this.contributions = contributions, this.configured = !1, this.global = application.global, this.global.hooks.onSetEnv.tap("graphic-util", (lastEnv, env, global) => {
|
|
6194
6160
|
this.configured = !1, this.configure(global, env);
|
|
6195
6161
|
});
|
|
6196
6162
|
}
|
|
6197
6163
|
get textMeasure() {
|
|
6198
6164
|
return this._textMeasure || this.configure(this.global, this.global.env), this._textMeasure;
|
|
6199
6165
|
}
|
|
6200
|
-
getTextMeasureInstance(textMeasureId) {
|
|
6201
|
-
if (!textMeasureId) return this.textMeasure;
|
|
6202
|
-
return this._textMeasureMap.get(textMeasureId) || this.textMeasure;
|
|
6203
|
-
}
|
|
6204
6166
|
configure(global, env) {
|
|
6205
6167
|
this.configured || (this.contributions.getContributions().forEach(contribution => {
|
|
6206
6168
|
contribution.configure(this, env);
|
|
@@ -6213,7 +6175,7 @@
|
|
|
6213
6175
|
}
|
|
6214
6176
|
}
|
|
6215
6177
|
bindTextMeasure(tm) {
|
|
6216
|
-
this._textMeasure
|
|
6178
|
+
this._textMeasure = tm;
|
|
6217
6179
|
}
|
|
6218
6180
|
measureText(text, tc, method = "native") {
|
|
6219
6181
|
var _a;
|
|
@@ -9393,7 +9355,7 @@
|
|
|
9393
9355
|
});
|
|
9394
9356
|
}
|
|
9395
9357
|
setAttributes(params, forceUpdateTag = !1, context) {
|
|
9396
|
-
|
|
9358
|
+
(params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context);
|
|
9397
9359
|
}
|
|
9398
9360
|
_setAttributes(params, forceUpdateTag = !1, context) {
|
|
9399
9361
|
const keys = Object.keys(params);
|
|
@@ -10218,8 +10180,8 @@
|
|
|
10218
10180
|
function strokeVisible(opacity, strokeOpacity) {
|
|
10219
10181
|
return opacity * strokeOpacity > 0;
|
|
10220
10182
|
}
|
|
10221
|
-
function rectStrokeVisible(opacity, strokeOpacity, width, height
|
|
10222
|
-
return
|
|
10183
|
+
function rectStrokeVisible(opacity, strokeOpacity, width, height) {
|
|
10184
|
+
return opacity * strokeOpacity > 0 && 0 !== width && 0 !== height;
|
|
10223
10185
|
}
|
|
10224
10186
|
function intersect(x0, y0, x1, y1, x2, y2, x3, y3) {
|
|
10225
10187
|
const x10 = x1 - x0,
|
|
@@ -10810,7 +10772,7 @@
|
|
|
10810
10772
|
this.cache.layoutData.lines.forEach(item => {
|
|
10811
10773
|
mergedText += item.str;
|
|
10812
10774
|
});
|
|
10813
|
-
return (Array.isArray(text) ? text.join("") : text)
|
|
10775
|
+
return (Array.isArray(text) ? text.join("") : text) !== mergedText;
|
|
10814
10776
|
}
|
|
10815
10777
|
return "vertical" === attribute.direction && this.cache.verticalList && this.cache.verticalList[0] ? this.cache.verticalList[0].map(item => item.text).join("") !== attribute.text.toString() : null != this.clipedText && this.clipedText !== attribute.text.toString();
|
|
10816
10778
|
}
|
|
@@ -10909,7 +10871,7 @@
|
|
|
10909
10871
|
return fontSize ? .1 * fontSize : 0;
|
|
10910
10872
|
}
|
|
10911
10873
|
updateHorizontalMultilineAABBBounds(text) {
|
|
10912
|
-
var _a
|
|
10874
|
+
var _a;
|
|
10913
10875
|
const textTheme = this.getGraphicTheme(),
|
|
10914
10876
|
attribute = this.attribute,
|
|
10915
10877
|
{
|
|
@@ -10936,7 +10898,7 @@
|
|
|
10936
10898
|
const bbox = this.cache.layoutData.bbox;
|
|
10937
10899
|
return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
|
|
10938
10900
|
}
|
|
10939
|
-
const textMeasure = application.graphicUtil.
|
|
10901
|
+
const textMeasure = application.graphicUtil.textMeasure,
|
|
10940
10902
|
layoutData = new CanvasTextLayout(fontFamily, {
|
|
10941
10903
|
fontSize: fontSize,
|
|
10942
10904
|
fontWeight: fontWeight,
|
|
@@ -10954,7 +10916,7 @@
|
|
|
10954
10916
|
return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
|
|
10955
10917
|
}
|
|
10956
10918
|
updateWrapAABBBounds(text) {
|
|
10957
|
-
var _a, _b, _c
|
|
10919
|
+
var _a, _b, _c;
|
|
10958
10920
|
const textTheme = this.getGraphicTheme(),
|
|
10959
10921
|
{
|
|
10960
10922
|
fontFamily = textTheme.fontFamily,
|
|
@@ -10980,7 +10942,7 @@
|
|
|
10980
10942
|
const bbox = this.cache.layoutData.bbox;
|
|
10981
10943
|
return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
|
|
10982
10944
|
}
|
|
10983
|
-
const textMeasure = application.graphicUtil.
|
|
10945
|
+
const textMeasure = application.graphicUtil.textMeasure,
|
|
10984
10946
|
textOptions = {
|
|
10985
10947
|
fontSize: fontSize,
|
|
10986
10948
|
fontWeight: fontWeight,
|
|
@@ -11012,7 +10974,7 @@
|
|
|
11012
10974
|
if ("" !== str && "" === clip.str || clip.wordBreaked) {
|
|
11013
10975
|
if (ellipsis) {
|
|
11014
10976
|
const clipEllipsis = textMeasure.clipTextWithSuffix(str, textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
|
|
11015
|
-
clip.str = null !== (
|
|
10977
|
+
clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
|
|
11016
10978
|
} else clip.str = "", clip.width = 0;
|
|
11017
10979
|
needCut = !1;
|
|
11018
10980
|
}
|
|
@@ -11075,9 +11037,9 @@
|
|
|
11075
11037
|
return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
|
|
11076
11038
|
}
|
|
11077
11039
|
updateVerticalMultilineAABBBounds(text) {
|
|
11078
|
-
var _a, _b
|
|
11040
|
+
var _a, _b;
|
|
11079
11041
|
const textTheme = this.getGraphicTheme(),
|
|
11080
|
-
textMeasure = application.graphicUtil.
|
|
11042
|
+
textMeasure = application.graphicUtil.textMeasure;
|
|
11081
11043
|
let width;
|
|
11082
11044
|
const attribute = this.attribute,
|
|
11083
11045
|
{
|
|
@@ -11098,7 +11060,7 @@
|
|
|
11098
11060
|
} = attribute;
|
|
11099
11061
|
if (!verticalMode) {
|
|
11100
11062
|
const t = textAlign;
|
|
11101
|
-
textAlign = null !== (
|
|
11063
|
+
textAlign = null !== (_a = Text.baselineMapAlign[textBaseline]) && void 0 !== _a ? _a : "left", textBaseline = null !== (_b = Text.alignMapBaseline[t]) && void 0 !== _b ? _b : "top";
|
|
11102
11064
|
}
|
|
11103
11065
|
if (width = 0, !this.shouldUpdateShape() && this.cache) {
|
|
11104
11066
|
this.cache.verticalList.forEach(item => {
|
|
@@ -11212,7 +11174,7 @@
|
|
|
11212
11174
|
return isArray$9(text) ? !text.every(t => null == t || "" === t) : null != text && "" !== text;
|
|
11213
11175
|
}
|
|
11214
11176
|
updateMultilineAABBBounds(text) {
|
|
11215
|
-
var _a, _b, _c, _d
|
|
11177
|
+
var _a, _b, _c, _d;
|
|
11216
11178
|
const textTheme = this.getGraphicTheme(),
|
|
11217
11179
|
{
|
|
11218
11180
|
fontFamily = textTheme.fontFamily,
|
|
@@ -11236,7 +11198,7 @@
|
|
|
11236
11198
|
const bbox = this.cache.layoutData.bbox;
|
|
11237
11199
|
return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
|
|
11238
11200
|
}
|
|
11239
|
-
const textMeasure = application.graphicUtil.
|
|
11201
|
+
const textMeasure = application.graphicUtil.textMeasure,
|
|
11240
11202
|
layoutObj = new CanvasTextLayout(fontFamily, {
|
|
11241
11203
|
fontSize: fontSize,
|
|
11242
11204
|
fontWeight: fontWeight,
|
|
@@ -11265,7 +11227,7 @@
|
|
|
11265
11227
|
if ("" !== str && "" === clip.str) {
|
|
11266
11228
|
if (ellipsis) {
|
|
11267
11229
|
const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
|
|
11268
|
-
clip.str = null !== (
|
|
11230
|
+
clip.str = null !== (_c = clipEllipsis.str) && void 0 !== _c ? _c : "", clip.width = null !== (_d = clipEllipsis.width) && void 0 !== _d ? _d : 0;
|
|
11269
11231
|
} else clip.str = "", clip.width = 0;
|
|
11270
11232
|
needCut = !1;
|
|
11271
11233
|
}
|
|
@@ -12369,7 +12331,7 @@
|
|
|
12369
12331
|
case "right":
|
|
12370
12332
|
deltaX = -aabbBounds.width();
|
|
12371
12333
|
}
|
|
12372
|
-
return
|
|
12334
|
+
return aabbBounds.translate(deltaX, deltaY), application.graphicService.updateTempAABBBounds(aabbBounds), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, richtextTheme, aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, application.graphicService.transformAABBBounds(attribute, aabbBounds, richtextTheme, !1, this), 0 === aabbBounds.width() && 0 === aabbBounds.height() && aabbBounds.clear(), aabbBounds;
|
|
12373
12335
|
}
|
|
12374
12336
|
needUpdateTags(keys) {
|
|
12375
12337
|
return super.needUpdateTags(keys, RICHTEXT_UPDATE_TAG_KEY);
|
|
@@ -14131,7 +14093,7 @@
|
|
|
14131
14093
|
doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.fill()));
|
|
14132
14094
|
}
|
|
14133
14095
|
_runStroke(arc, context, x, y, arcAttribute, doStroke, isFullStroke, sVisible, strokeCb) {
|
|
14134
|
-
doStroke && isFullStroke && (strokeCb
|
|
14096
|
+
doStroke && isFullStroke && (strokeCb || sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()));
|
|
14135
14097
|
}
|
|
14136
14098
|
draw(arc, renderService, drawContext, params) {
|
|
14137
14099
|
const arcAttribute = getTheme(arc, null == params ? void 0 : params.theme).arc;
|
|
@@ -14863,8 +14825,7 @@
|
|
|
14863
14825
|
y1: y1,
|
|
14864
14826
|
x: originX = rectAttribute.x,
|
|
14865
14827
|
y: originY = rectAttribute.y,
|
|
14866
|
-
fillStrokeOrder = rectAttribute.fillStrokeOrder
|
|
14867
|
-
drawStrokeWhenZeroWH = rectAttribute.drawStrokeWhenZeroWH
|
|
14828
|
+
fillStrokeOrder = rectAttribute.fillStrokeOrder
|
|
14868
14829
|
} = rect.attribute;
|
|
14869
14830
|
let {
|
|
14870
14831
|
width: width,
|
|
@@ -14872,7 +14833,7 @@
|
|
|
14872
14833
|
} = rect.attribute;
|
|
14873
14834
|
width = (null != width ? width : x1 - originX) || 0, height = (null != height ? height : y1 - originY) || 0;
|
|
14874
14835
|
const fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
|
|
14875
|
-
sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height
|
|
14836
|
+
sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height),
|
|
14876
14837
|
doFill = runFill(fill, background),
|
|
14877
14838
|
doStroke = runStroke(stroke, lineWidth);
|
|
14878
14839
|
if (!rect.valid || !visible) return;
|
|
@@ -15790,6 +15751,7 @@
|
|
|
15790
15751
|
decorator(target, key, paramIndex);
|
|
15791
15752
|
};
|
|
15792
15753
|
};
|
|
15754
|
+
const RenderService = Symbol.for("RenderService");
|
|
15793
15755
|
let DefaultRenderService = class {
|
|
15794
15756
|
constructor(drawContribution) {
|
|
15795
15757
|
this.drawContribution = drawContribution;
|
|
@@ -16678,6 +16640,8 @@
|
|
|
16678
16640
|
application.transformUtil = transformUtil;
|
|
16679
16641
|
const graphicService = container.get(GraphicService);
|
|
16680
16642
|
application.graphicService = graphicService;
|
|
16643
|
+
const renderService = container.get(RenderService);
|
|
16644
|
+
application.renderService = renderService;
|
|
16681
16645
|
const layerService = container.get(LayerService);
|
|
16682
16646
|
application.layerService = layerService;
|
|
16683
16647
|
|
|
@@ -16930,13 +16894,13 @@
|
|
|
16930
16894
|
this._skipRender > 1 && this.renderNextFrame(), this._skipRender = 0;
|
|
16931
16895
|
} else this._skipRender = 1;
|
|
16932
16896
|
}, this.beforeRender = stage => {
|
|
16933
|
-
this.
|
|
16897
|
+
this._beforeRender && this._beforeRender(stage);
|
|
16934
16898
|
}, this.afterClearScreen = drawParams => {
|
|
16935
16899
|
this._afterClearScreen && this._afterClearScreen(drawParams);
|
|
16936
16900
|
}, this.afterClearRect = drawParams => {
|
|
16937
16901
|
this._afterClearRect && this._afterClearRect(drawParams);
|
|
16938
16902
|
}, this.afterRender = stage => {
|
|
16939
|
-
this.renderCount++, this.
|
|
16903
|
+
this.renderCount++, this._afterRender && this._afterRender(stage), this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage)), this._afterNextRenderCbs = null, this.tickedBeforeRender = !1;
|
|
16940
16904
|
}, this.afterTickCb = () => {
|
|
16941
16905
|
this.tickedBeforeRender = !0, "rendering" !== this.state && this.renderNextFrame();
|
|
16942
16906
|
}, this.params = params, this.theme = new Theme(), this.hooks = {
|
|
@@ -16944,7 +16908,7 @@
|
|
|
16944
16908
|
afterRender: new SyncHook(["stage"]),
|
|
16945
16909
|
afterClearScreen: new SyncHook(["stage"]),
|
|
16946
16910
|
afterClearRect: new SyncHook(["stage"])
|
|
16947
|
-
}, this.global = application.global, !this.global.env && isBrowserEnv() && this.global.setEnv("browser"), this.window = container.get(VWindow), this.renderService = container.get(RenderService), this.pluginService = container.get(PluginService), this.layerService = container.get(LayerService), this.graphicService = container.get(GraphicService), this.pluginService.active(this, params), this.
|
|
16911
|
+
}, this.global = application.global, !this.global.env && isBrowserEnv() && this.global.setEnv("browser"), this.window = container.get(VWindow), this.renderService = container.get(RenderService), this.pluginService = container.get(PluginService), this.layerService = container.get(LayerService), this.graphicService = container.get(GraphicService), this.pluginService.active(this, params), this.window.create({
|
|
16948
16912
|
width: params.width,
|
|
16949
16913
|
height: params.height,
|
|
16950
16914
|
viewBox: params.viewBox,
|
|
@@ -16955,7 +16919,7 @@
|
|
|
16955
16919
|
canvas: params.canvas
|
|
16956
16920
|
}), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
|
|
16957
16921
|
main: !0
|
|
16958
|
-
})), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender),
|
|
16922
|
+
})), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this.hooks.afterClearScreen.tap("constructor", this.afterClearScreen), this.hooks.afterClearRect.tap("constructor", this.afterClearRect), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this._afterClearScreen = params.afterClearScreen, this._afterClearRect = params.afterClearRect, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
|
|
16959
16923
|
tickRenderMode: "effect"
|
|
16960
16924
|
}), this.optmize(params.optimize), params.background && isString$6(this._background) && this._background.includes("/") && this.setAttributes({
|
|
16961
16925
|
background: this._background
|
|
@@ -17070,16 +17034,10 @@
|
|
|
17070
17034
|
options.enableView3dTransform && this.enableView3dTransform();
|
|
17071
17035
|
}
|
|
17072
17036
|
setBeforeRender(cb) {
|
|
17073
|
-
this.
|
|
17074
|
-
}
|
|
17075
|
-
removeBeforeRender(cb) {
|
|
17076
|
-
this._beforeRenderList = this._beforeRenderList.filter(c => c !== cb);
|
|
17037
|
+
this._beforeRender = cb;
|
|
17077
17038
|
}
|
|
17078
17039
|
setAfterRender(cb) {
|
|
17079
|
-
this.
|
|
17080
|
-
}
|
|
17081
|
-
removeAfterRender(cb) {
|
|
17082
|
-
this._afterRenderList = this._afterRenderList.filter(c => c !== cb);
|
|
17040
|
+
this._afterRender = cb;
|
|
17083
17041
|
}
|
|
17084
17042
|
afterNextRender(cb) {
|
|
17085
17043
|
this._afterNextRenderCbs || (this._afterNextRenderCbs = []), this._afterNextRenderCbs.push(cb);
|
|
@@ -23777,7 +23735,6 @@
|
|
|
23777
23735
|
return this.getEndProps();
|
|
23778
23736
|
}
|
|
23779
23737
|
stop() {}
|
|
23780
|
-
release() {}
|
|
23781
23738
|
}
|
|
23782
23739
|
class WaitStep extends Step {
|
|
23783
23740
|
constructor(type, props, duration, easing) {
|
|
@@ -23785,6 +23742,8 @@
|
|
|
23785
23742
|
}
|
|
23786
23743
|
onStart() {
|
|
23787
23744
|
super.onStart();
|
|
23745
|
+
}
|
|
23746
|
+
onFirstRun() {
|
|
23788
23747
|
const fromProps = this.getFromProps();
|
|
23789
23748
|
this.target.setAttributes(fromProps);
|
|
23790
23749
|
}
|
|
@@ -23993,9 +23952,7 @@
|
|
|
23993
23952
|
this.status !== AnimateStatus.END && this.onEnd(), this.status = AnimateStatus.END, this.target && ("start" === type ? this.target.setAttributes(this._startProps) : "end" === type ? this.target.setAttributes(this._endProps) : type && this.target.setAttributes(type));
|
|
23994
23953
|
}
|
|
23995
23954
|
release() {
|
|
23996
|
-
this.status = AnimateStatus.END, this._onRemove && this._onRemove.forEach(cb => cb()), this._onStart = [], this._onFrame = [], this._onEnd = [], this._onRemove = []
|
|
23997
|
-
step.release();
|
|
23998
|
-
});
|
|
23955
|
+
this.status = AnimateStatus.END, this._onRemove && this._onRemove.forEach(cb => cb()), this._onStart = [], this._onFrame = [], this._onEnd = [], this._onRemove = [];
|
|
23999
23956
|
}
|
|
24000
23957
|
getDuration() {
|
|
24001
23958
|
return this._duration;
|
|
@@ -24069,10 +24026,6 @@
|
|
|
24069
24026
|
getLoop() {
|
|
24070
24027
|
return this._loopCount;
|
|
24071
24028
|
}
|
|
24072
|
-
forEachStep(cb) {
|
|
24073
|
-
let step = this._firstStep;
|
|
24074
|
-
for (; step;) cb(step), step = step.next;
|
|
24075
|
-
}
|
|
24076
24029
|
}
|
|
24077
24030
|
|
|
24078
24031
|
const performanceRAF = new PerformanceRAF();
|
|
@@ -24305,9 +24258,6 @@
|
|
|
24305
24258
|
constructor(target) {
|
|
24306
24259
|
this._animates = [], this._startCallbacks = [], this._endCallbacks = [], this._started = !1, this._activeCount = 0, this._target = target;
|
|
24307
24260
|
}
|
|
24308
|
-
get started() {
|
|
24309
|
-
return this._started;
|
|
24310
|
-
}
|
|
24311
24261
|
onStart(cb) {
|
|
24312
24262
|
cb ? (this._startCallbacks.push(cb), this._started && this._activeCount > 0 && cb()) : this._startCallbacks.forEach(cb => {
|
|
24313
24263
|
cb();
|
|
@@ -24448,14 +24398,14 @@
|
|
|
24448
24398
|
return delayAfterValue > 0 && (totalDelay += delayAfterValue), totalDelay > 0 && animate.wait(totalDelay), loop && loop > 0 && animate.loop(loop), bounce && animate.bounce(!0), animate;
|
|
24449
24399
|
}
|
|
24450
24400
|
_handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic) {
|
|
24451
|
-
var _a, _b, _c, _d
|
|
24401
|
+
var _a, _b, _c, _d;
|
|
24452
24402
|
if (custom && customType) {
|
|
24453
24403
|
const customParams = Object.assign({
|
|
24454
|
-
width:
|
|
24455
|
-
height:
|
|
24404
|
+
width: graphic.stage.width,
|
|
24405
|
+
height: graphic.stage.height,
|
|
24456
24406
|
group: this._target.parent
|
|
24457
24407
|
}, this.resolveValue(customParameters, graphic)),
|
|
24458
|
-
objOptions = isFunction$7(options) ? options.call(null, null !== (
|
|
24408
|
+
objOptions = isFunction$7(options) ? options.call(null, null !== (_b = customParams && (null === (_a = customParams.data) || void 0 === _a ? void 0 : _a[0])) && void 0 !== _b ? _b : null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, customParams) : options;
|
|
24459
24409
|
customParams.options = objOptions, customParams.controlOptions = controlOptions, 1 === customType ? this.createCustomAnimation(animate, custom, from, props, duration, easing, customParams) : 2 === customType && this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
|
|
24460
24410
|
} else "to" === type ? animate.to(props, duration, easing) : "from" === type && animate.from(props, duration, easing);
|
|
24461
24411
|
}
|
|
@@ -24675,7 +24625,7 @@
|
|
|
24675
24625
|
reApplyState(state) {
|
|
24676
24626
|
var _a;
|
|
24677
24627
|
const stateInfo = null === (_a = this.stateList) || void 0 === _a ? void 0 : _a.find(stateInfo => stateInfo.state === state);
|
|
24678
|
-
if (stateInfo
|
|
24628
|
+
if (stateInfo) {
|
|
24679
24629
|
const stateList = this.stateList.slice();
|
|
24680
24630
|
stateInfo.executor.stop(), this.stateList = stateList, stateInfo.executor.execute(stateInfo.animationConfig);
|
|
24681
24631
|
}
|
|
@@ -24818,45 +24768,6 @@
|
|
|
24818
24768
|
this._animator && this._animator.stop();
|
|
24819
24769
|
}
|
|
24820
24770
|
}
|
|
24821
|
-
class AStageAnimate extends ACustomAnimate {
|
|
24822
|
-
constructor(customFrom, customTo, duration, easing, params) {
|
|
24823
|
-
super(customFrom, customTo, duration, easing, params), this.willCallBeforeStageRender = !0, this.willCallAfterStageRender = !0, this._beforeStageRender = () => {
|
|
24824
|
-
if (!this.willCallBeforeStageRender) return;
|
|
24825
|
-
this.willCallBeforeStageRender = !1;
|
|
24826
|
-
const stage = this.target.stage,
|
|
24827
|
-
canvas = stage.window.getContext().canvas.nativeCanvas,
|
|
24828
|
-
outputCanvas = this.beforeStageRender(stage, canvas);
|
|
24829
|
-
outputCanvas && this.renderToStage(stage, outputCanvas);
|
|
24830
|
-
}, this._afterStageRender = () => {
|
|
24831
|
-
if (!this.willCallAfterStageRender) return;
|
|
24832
|
-
this.willCallAfterStageRender = !1;
|
|
24833
|
-
const stage = this.target.stage,
|
|
24834
|
-
canvas = stage.window.getContext().canvas.nativeCanvas,
|
|
24835
|
-
outputCanvas = this.afterStageRender(stage, canvas);
|
|
24836
|
-
outputCanvas && this.renderToStage(stage, outputCanvas);
|
|
24837
|
-
}, this.props = {};
|
|
24838
|
-
}
|
|
24839
|
-
beforeStageRender(stage, canvas) {
|
|
24840
|
-
return !1;
|
|
24841
|
-
}
|
|
24842
|
-
afterStageRender(stage, canvas) {
|
|
24843
|
-
return !1;
|
|
24844
|
-
}
|
|
24845
|
-
onFirstRun() {
|
|
24846
|
-
super.onFirstRun(), this.target.stage.setBeforeRender(this._beforeStageRender), this.target.stage.setAfterRender(this._afterStageRender), this.target.stage.disableDirtyBounds();
|
|
24847
|
-
}
|
|
24848
|
-
stop() {
|
|
24849
|
-
super.stop(), this.target.stage.removeBeforeRender(this._beforeStageRender), this.target.stage.removeAfterRender(this._afterStageRender);
|
|
24850
|
-
}
|
|
24851
|
-
onUpdate(end, ratio, out) {
|
|
24852
|
-
super.onUpdate(end, ratio, out), this.willCallBeforeStageRender = !0, this.willCallAfterStageRender = !0;
|
|
24853
|
-
}
|
|
24854
|
-
renderToStage(stage, canvas) {
|
|
24855
|
-
const stageCanvas = stage.window.getContext().canvas.nativeCanvas,
|
|
24856
|
-
ctx = stageCanvas.getContext("2d");
|
|
24857
|
-
return !!ctx && (ctx.clearRect(0, 0, stageCanvas.width, stageCanvas.height), ctx.drawImage(canvas, 0, 0), stageCanvas);
|
|
24858
|
-
}
|
|
24859
|
-
}
|
|
24860
24771
|
|
|
24861
24772
|
class ComponentAnimator {
|
|
24862
24773
|
constructor(component) {
|
|
@@ -25239,7 +25150,7 @@
|
|
|
25239
25150
|
}
|
|
25240
25151
|
class GrowAngleIn extends GrowAngleBase {
|
|
25241
25152
|
onBind() {
|
|
25242
|
-
var _a, _b
|
|
25153
|
+
var _a, _b;
|
|
25243
25154
|
super.onBind();
|
|
25244
25155
|
const {
|
|
25245
25156
|
from: from,
|
|
@@ -25248,7 +25159,7 @@
|
|
|
25248
25159
|
fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
|
|
25249
25160
|
this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
|
|
25250
25161
|
const finalAttribute = this.target.getFinalAttribute();
|
|
25251
|
-
finalAttribute && this.target.setAttributes(finalAttribute),
|
|
25162
|
+
finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs), this.determineUpdateFunction();
|
|
25252
25163
|
}
|
|
25253
25164
|
}
|
|
25254
25165
|
class GrowAngleOut extends GrowAngleBase {
|
|
@@ -25856,7 +25767,7 @@
|
|
|
25856
25767
|
}
|
|
25857
25768
|
class GrowRadiusIn extends GrowPointsBase {
|
|
25858
25769
|
onBind() {
|
|
25859
|
-
var _a, _b
|
|
25770
|
+
var _a, _b;
|
|
25860
25771
|
super.onBind();
|
|
25861
25772
|
const {
|
|
25862
25773
|
from: from,
|
|
@@ -25865,7 +25776,7 @@
|
|
|
25865
25776
|
fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
|
|
25866
25777
|
this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
|
|
25867
25778
|
const finalAttribute = this.target.getFinalAttribute();
|
|
25868
|
-
finalAttribute && this.target.setAttributes(finalAttribute),
|
|
25779
|
+
finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs);
|
|
25869
25780
|
}
|
|
25870
25781
|
}
|
|
25871
25782
|
class GrowRadiusOut extends GrowPointsBase {
|
|
@@ -25980,7 +25891,7 @@
|
|
|
25980
25891
|
super(from, to, duration, easing, params);
|
|
25981
25892
|
}
|
|
25982
25893
|
onBind() {
|
|
25983
|
-
var _a, _b
|
|
25894
|
+
var _a, _b;
|
|
25984
25895
|
super.onBind();
|
|
25985
25896
|
const {
|
|
25986
25897
|
from: from,
|
|
@@ -25989,7 +25900,7 @@
|
|
|
25989
25900
|
fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
|
|
25990
25901
|
this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
|
|
25991
25902
|
const finalAttribute = this.target.getFinalAttribute();
|
|
25992
|
-
finalAttribute && this.target.setAttributes(finalAttribute),
|
|
25903
|
+
finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs);
|
|
25993
25904
|
}
|
|
25994
25905
|
onEnd(cb) {
|
|
25995
25906
|
super.onEnd(cb);
|
|
@@ -27773,1271 +27684,8 @@
|
|
|
27773
27684
|
}
|
|
27774
27685
|
}
|
|
27775
27686
|
|
|
27776
|
-
class DisappearAnimateBase extends AStageAnimate {
|
|
27777
|
-
constructor(from, to, duration, easing, params) {
|
|
27778
|
-
super(from, to, duration, easing, params), this.webglCanvas = null, this.gl = null, this.program = null, this.currentAnimationRatio = 0, this.animationTime = 0;
|
|
27779
|
-
}
|
|
27780
|
-
onUpdate(end, ratio, out) {
|
|
27781
|
-
super.onUpdate(end, ratio, out), this.currentAnimationRatio = ratio, this.animationTime = ratio * Math.PI * 2;
|
|
27782
|
-
}
|
|
27783
|
-
getAnimationTime() {
|
|
27784
|
-
return this.currentAnimationRatio > 0 ? this.animationTime : Date.now() / 1e3;
|
|
27785
|
-
}
|
|
27786
|
-
getDurationFromParent() {
|
|
27787
|
-
return this.duration || 1e3;
|
|
27788
|
-
}
|
|
27789
|
-
initWebGL(canvas) {
|
|
27790
|
-
try {
|
|
27791
|
-
if (this.webglCanvas = vglobal.createCanvas({
|
|
27792
|
-
width: canvas.width,
|
|
27793
|
-
height: canvas.height,
|
|
27794
|
-
dpr: vglobal.devicePixelRatio
|
|
27795
|
-
}), !this.webglCanvas) return (void 0), !1;
|
|
27796
|
-
this.webglCanvas.style.width = canvas.style.width || `${canvas.width}px`, this.webglCanvas.style.height = canvas.style.height || `${canvas.height}px`;
|
|
27797
|
-
let glContext = null;
|
|
27798
|
-
try {
|
|
27799
|
-
glContext = this.webglCanvas.getContext("webgl"), glContext || (glContext = this.webglCanvas.getContext("experimental-webgl"));
|
|
27800
|
-
} catch (e) {
|
|
27801
|
-
}
|
|
27802
|
-
if (this.gl = glContext, !this.gl) return (void 0), !1;
|
|
27803
|
-
const shaders = this.getShaderSources();
|
|
27804
|
-
return this.program = this.createShaderProgram(shaders.vertex, shaders.fragment), null !== this.program;
|
|
27805
|
-
} catch (error) {
|
|
27806
|
-
return !1;
|
|
27807
|
-
}
|
|
27808
|
-
}
|
|
27809
|
-
createShaderProgram(vertexSource, fragmentSource) {
|
|
27810
|
-
if (!this.gl) return null;
|
|
27811
|
-
const vertexShader = this.createShader(this.gl.VERTEX_SHADER, vertexSource),
|
|
27812
|
-
fragmentShader = this.createShader(this.gl.FRAGMENT_SHADER, fragmentSource);
|
|
27813
|
-
if (!vertexShader || !fragmentShader) return null;
|
|
27814
|
-
const program = this.gl.createProgram();
|
|
27815
|
-
return program ? (this.gl.attachShader(program, vertexShader), this.gl.attachShader(program, fragmentShader), this.gl.linkProgram(program), this.gl.getProgramParameter(program, this.gl.LINK_STATUS) ? program : (null)) : null;
|
|
27816
|
-
}
|
|
27817
|
-
createShader(type, source) {
|
|
27818
|
-
if (!this.gl) return null;
|
|
27819
|
-
const shader = this.gl.createShader(type);
|
|
27820
|
-
return shader ? (this.gl.shaderSource(shader, source), this.gl.compileShader(shader), this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS) ? shader : (this.gl.deleteShader(shader), null)) : null;
|
|
27821
|
-
}
|
|
27822
|
-
setupWebGLState(canvas) {
|
|
27823
|
-
this.gl && this.webglCanvas && (this.webglCanvas.width === canvas.width && this.webglCanvas.height === canvas.height || (this.webglCanvas.width = canvas.width, this.webglCanvas.height = canvas.height), this.gl.viewport(0, 0, this.webglCanvas.width, this.webglCanvas.height), this.gl.clearColor(0, 0, 0, 0), this.gl.clear(this.gl.COLOR_BUFFER_BIT));
|
|
27824
|
-
}
|
|
27825
|
-
createFullScreenQuad() {
|
|
27826
|
-
if (!this.gl) return null;
|
|
27827
|
-
const vertices = new Float32Array([-1, -1, 0, 1, 1, -1, 1, 1, -1, 1, 0, 0, 1, 1, 1, 0]),
|
|
27828
|
-
vertexBuffer = this.gl.createBuffer();
|
|
27829
|
-
return this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer), this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW), vertexBuffer;
|
|
27830
|
-
}
|
|
27831
|
-
createTextureFromCanvas(canvas) {
|
|
27832
|
-
if (!this.gl) return null;
|
|
27833
|
-
const texture = this.gl.createTexture();
|
|
27834
|
-
return this.gl.activeTexture(this.gl.TEXTURE0), this.gl.bindTexture(this.gl.TEXTURE_2D, texture), this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, canvas), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR), texture;
|
|
27835
|
-
}
|
|
27836
|
-
setupVertexAttributes() {
|
|
27837
|
-
if (!this.gl || !this.program) return;
|
|
27838
|
-
const positionLocation = this.gl.getAttribLocation(this.program, "a_position"),
|
|
27839
|
-
texCoordLocation = this.gl.getAttribLocation(this.program, "a_texCoord");
|
|
27840
|
-
this.gl.enableVertexAttribArray(positionLocation), this.gl.vertexAttribPointer(positionLocation, 2, this.gl.FLOAT, !1, 16, 0), this.gl.enableVertexAttribArray(texCoordLocation), this.gl.vertexAttribPointer(texCoordLocation, 2, this.gl.FLOAT, !1, 16, 8);
|
|
27841
|
-
}
|
|
27842
|
-
createOutputCanvas(canvas) {
|
|
27843
|
-
const outputCanvas = vglobal.createCanvas({
|
|
27844
|
-
width: canvas.width,
|
|
27845
|
-
height: canvas.height,
|
|
27846
|
-
dpr: vglobal.devicePixelRatio
|
|
27847
|
-
}),
|
|
27848
|
-
ctx = outputCanvas.getContext("2d");
|
|
27849
|
-
return ctx ? (ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.drawImage(canvas, 0, 0), {
|
|
27850
|
-
canvas: outputCanvas,
|
|
27851
|
-
ctx: ctx
|
|
27852
|
-
}) : null;
|
|
27853
|
-
}
|
|
27854
|
-
getShaderSources() {
|
|
27855
|
-
return null;
|
|
27856
|
-
}
|
|
27857
|
-
applyWebGLEffect(canvas) {
|
|
27858
|
-
return null;
|
|
27859
|
-
}
|
|
27860
|
-
applyCanvas2DEffect(canvas) {
|
|
27861
|
-
return null;
|
|
27862
|
-
}
|
|
27863
|
-
supportsWebGL() {
|
|
27864
|
-
return null !== this.getShaderSources();
|
|
27865
|
-
}
|
|
27866
|
-
supportsCanvas2D() {
|
|
27867
|
-
return this.applyCanvas2DEffect !== DisappearAnimateBase.prototype.applyCanvas2DEffect;
|
|
27868
|
-
}
|
|
27869
|
-
release() {
|
|
27870
|
-
super.release(), this.gl && (this.program && (this.gl.deleteProgram(this.program), this.program = null), this.gl = null), this.webglCanvas && (this.webglCanvas = null), this.currentAnimationRatio = 0, this.animationTime = 0;
|
|
27871
|
-
}
|
|
27872
|
-
afterStageRender(stage, canvas) {
|
|
27873
|
-
let result = null;
|
|
27874
|
-
if (this.supportsWebGL() && (this.gl || this.initWebGL(canvas) || (void 0), this.gl)) {
|
|
27875
|
-
if (result = this.applyWebGLEffect(canvas), result) return result;
|
|
27876
|
-
}
|
|
27877
|
-
if (this.supportsCanvas2D()) {
|
|
27878
|
-
if (result = this.applyCanvas2DEffect(canvas), result) return result;
|
|
27879
|
-
}
|
|
27880
|
-
return this.supportsWebGL() || this.supportsCanvas2D() || (void 0), canvas;
|
|
27881
|
-
}
|
|
27882
|
-
}
|
|
27883
|
-
|
|
27884
|
-
class Canvas2DEffectBase extends DisappearAnimateBase {
|
|
27885
|
-
constructor(from, to, duration, easing, params) {
|
|
27886
|
-
super(from, to, duration, easing, params);
|
|
27887
|
-
}
|
|
27888
|
-
getShaderSources() {
|
|
27889
|
-
return null;
|
|
27890
|
-
}
|
|
27891
|
-
applyWebGLEffect(canvas) {
|
|
27892
|
-
return null;
|
|
27893
|
-
}
|
|
27894
|
-
}
|
|
27895
|
-
class HybridEffectBase extends DisappearAnimateBase {
|
|
27896
|
-
constructor(from, to, duration, easing, params) {
|
|
27897
|
-
super(from, to, duration, easing, params);
|
|
27898
|
-
}
|
|
27899
|
-
getShaderSources() {
|
|
27900
|
-
return null;
|
|
27901
|
-
}
|
|
27902
|
-
applyWebGLEffect(canvas) {
|
|
27903
|
-
return null;
|
|
27904
|
-
}
|
|
27905
|
-
applyCanvas2DEffect(canvas) {
|
|
27906
|
-
return null;
|
|
27907
|
-
}
|
|
27908
|
-
supportsWebGL() {
|
|
27909
|
-
return this.getShaderSources !== HybridEffectBase.prototype.getShaderSources && null !== this.getShaderSources();
|
|
27910
|
-
}
|
|
27911
|
-
supportsCanvas2D() {
|
|
27912
|
-
return this.applyCanvas2DEffect !== HybridEffectBase.prototype.applyCanvas2DEffect;
|
|
27913
|
-
}
|
|
27914
|
-
afterStageRender(stage, canvas) {
|
|
27915
|
-
var _a, _b;
|
|
27916
|
-
let result = null;
|
|
27917
|
-
if (!1 !== (null === (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.options) || void 0 === _b ? void 0 : _b.useWebGL)) {
|
|
27918
|
-
if (this.supportsWebGL() && (this.gl || this.initWebGL(canvas) || (void 0), this.gl)) {
|
|
27919
|
-
if (result = this.applyWebGLEffect(canvas), result) return result;
|
|
27920
|
-
}
|
|
27921
|
-
if (this.supportsCanvas2D()) {
|
|
27922
|
-
if (result = this.applyCanvas2DEffect(canvas), result) return result;
|
|
27923
|
-
}
|
|
27924
|
-
} else if (this.supportsCanvas2D()) {
|
|
27925
|
-
if (result = this.applyCanvas2DEffect(canvas), result) return result;
|
|
27926
|
-
} else ;
|
|
27927
|
-
return this.supportsWebGL() || this.supportsCanvas2D() || (void 0), canvas;
|
|
27928
|
-
}
|
|
27929
|
-
}
|
|
27930
|
-
|
|
27931
|
-
class ImageProcessUtils {
|
|
27932
|
-
static createTempCanvas(width, height, dpr) {
|
|
27933
|
-
return vglobal.createCanvas({
|
|
27934
|
-
width: width,
|
|
27935
|
-
height: height,
|
|
27936
|
-
dpr: dpr || vglobal.devicePixelRatio
|
|
27937
|
-
});
|
|
27938
|
-
}
|
|
27939
|
-
static cloneImageData(imageData) {
|
|
27940
|
-
const clonedData = new Uint8ClampedArray(imageData.data);
|
|
27941
|
-
return new ImageData(clonedData, imageData.width, imageData.height);
|
|
27942
|
-
}
|
|
27943
|
-
static lerp(start, end, t) {
|
|
27944
|
-
return start * (1 - t) + end * t;
|
|
27945
|
-
}
|
|
27946
|
-
static smoothstep(edge0, edge1, x) {
|
|
27947
|
-
const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));
|
|
27948
|
-
return t * t * (3 - 2 * t);
|
|
27949
|
-
}
|
|
27950
|
-
static distance(x1, y1, x2, y2) {
|
|
27951
|
-
const dx = x2 - x1,
|
|
27952
|
-
dy = y2 - y1;
|
|
27953
|
-
return Math.sqrt(dx * dx + dy * dy);
|
|
27954
|
-
}
|
|
27955
|
-
static normalizeAngle(angle) {
|
|
27956
|
-
return (angle + Math.PI) / (2 * Math.PI);
|
|
27957
|
-
}
|
|
27958
|
-
static pixelNoise(x, y, pixelSize) {
|
|
27959
|
-
if (pixelSize <= 0) return 0;
|
|
27960
|
-
const gridX = Math.floor(x / pixelSize) * pixelSize,
|
|
27961
|
-
gridY = Math.floor(y / pixelSize) * pixelSize,
|
|
27962
|
-
n = 43758.5453 * Math.sin(12.9898 * gridX + 78.233 * gridY);
|
|
27963
|
-
return n - Math.floor(n);
|
|
27964
|
-
}
|
|
27965
|
-
static generateNoiseTexture(width, height) {
|
|
27966
|
-
const data = new Uint8Array(width * height);
|
|
27967
|
-
for (let i = 0; i < data.length; i++) data[i] = Math.floor(256 * Math.random());
|
|
27968
|
-
return data;
|
|
27969
|
-
}
|
|
27970
|
-
static applyCSSFilter(canvas, filter) {
|
|
27971
|
-
const outputCanvas = this.createTempCanvas(canvas.width, canvas.height),
|
|
27972
|
-
ctx = outputCanvas.getContext("2d");
|
|
27973
|
-
return ctx ? (ctx.filter = filter, ctx.drawImage(canvas, 0, 0), ctx.filter = "none", outputCanvas) : canvas;
|
|
27974
|
-
}
|
|
27975
|
-
static extractChannel(imageData, channelIndex) {
|
|
27976
|
-
const {
|
|
27977
|
-
data: data,
|
|
27978
|
-
width: width,
|
|
27979
|
-
height: height
|
|
27980
|
-
} = imageData,
|
|
27981
|
-
channelData = new Uint8ClampedArray(data.length);
|
|
27982
|
-
for (let i = 0; i < data.length; i += 4) channelData[i] = 0, channelData[i + 1] = 0, channelData[i + 2] = 0, channelData[i + 3] = data[i + 3], channelIndex >= 0 && channelIndex <= 2 && (channelData[i + channelIndex] = data[i + channelIndex]);
|
|
27983
|
-
return new ImageData(channelData, width, height);
|
|
27984
|
-
}
|
|
27985
|
-
static blendImageData(imageData1, imageData2, ratio) {
|
|
27986
|
-
const {
|
|
27987
|
-
data: data1,
|
|
27988
|
-
width: width,
|
|
27989
|
-
height: height
|
|
27990
|
-
} = imageData1,
|
|
27991
|
-
{
|
|
27992
|
-
data: data2
|
|
27993
|
-
} = imageData2,
|
|
27994
|
-
result = new Uint8ClampedArray(data1.length);
|
|
27995
|
-
for (let i = 0; i < data1.length; i += 4) result[i] = Math.round(this.lerp(data1[i], data2[i], ratio)), result[i + 1] = Math.round(this.lerp(data1[i + 1], data2[i + 1], ratio)), result[i + 2] = Math.round(this.lerp(data1[i + 2], data2[i + 2], ratio)), result[i + 3] = Math.round(this.lerp(data1[i + 3], data2[i + 3], ratio));
|
|
27996
|
-
return new ImageData(result, width, height);
|
|
27997
|
-
}
|
|
27998
|
-
static getLuminance(r, g, b) {
|
|
27999
|
-
return .299 * r + .587 * g + .114 * b;
|
|
28000
|
-
}
|
|
28001
|
-
static applySepiaToPixel(r, g, b) {
|
|
28002
|
-
return [Math.min(255, .393 * r + .769 * g + .189 * b), Math.min(255, .349 * r + .686 * g + .168 * b), Math.min(255, .272 * r + .534 * g + .131 * b)];
|
|
28003
|
-
}
|
|
28004
|
-
static calculateDynamicStrength(baseStrength, animationTime) {
|
|
28005
|
-
return baseStrength * (animationTime / (2 * Math.PI));
|
|
28006
|
-
}
|
|
28007
|
-
}
|
|
28008
|
-
class ShaderLibrary {}
|
|
28009
|
-
ShaderLibrary.STANDARD_VERTEX_SHADER = "\n attribute vec2 a_position;\n attribute vec2 a_texCoord;\n varying vec2 v_texCoord;\n\n void main() {\n gl_Position = vec4(a_position, 0.0, 1.0);\n v_texCoord = a_texCoord;\n }\n ", ShaderLibrary.SHADER_FUNCTIONS = "\n // 亮度计算函数\n float luminance(vec3 color) {\n return dot(color, vec3(0.299, 0.587, 0.114));\n }\n\n // 褐色调函数\n vec3 sepia(vec3 color) {\n float r = color.r * 0.393 + color.g * 0.769 + color.b * 0.189;\n float g = color.r * 0.349 + color.g * 0.686 + color.b * 0.168;\n float b = color.r * 0.272 + color.g * 0.534 + color.b * 0.131;\n return vec3(r, g, b);\n }\n\n // 线性插值函数\n float lerp(float a, float b, float t) {\n return a * (1.0 - t) + b * t;\n }\n\n\n // 简单噪声函数\n float pixelNoise(vec2 coord, float pixelSize) {\n vec2 gridCoord = floor(coord / pixelSize) * pixelSize;\n return fract(sin(dot(gridCoord, vec2(12.9898, 78.233))) * 43758.5453123);\n }\n\n // 动态强度计算\n float calculateDynamicStrength(float baseStrength, float time) {\n return baseStrength * (time / 6.28318531); // 2π\n }\n ";
|
|
28010
|
-
|
|
28011
|
-
class Dissolve extends HybridEffectBase {
|
|
28012
|
-
constructor(from, to, duration, easing, params) {
|
|
28013
|
-
var _a, _b, _c, _d;
|
|
28014
|
-
super(from, to, duration, easing, params), this.noiseData = null;
|
|
28015
|
-
const rawNoiseScale = null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.noiseScale,
|
|
28016
|
-
clampedNoiseScale = void 0 !== rawNoiseScale ? Math.max(0, Math.floor(rawNoiseScale)) : 8;
|
|
28017
|
-
this.dissolveConfig = {
|
|
28018
|
-
dissolveType: (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.dissolveType) || "outward",
|
|
28019
|
-
useWebGL: void 0 === (null === (_c = null == params ? void 0 : params.options) || void 0 === _c ? void 0 : _c.useWebGL) || params.options.useWebGL,
|
|
28020
|
-
noiseScale: clampedNoiseScale,
|
|
28021
|
-
fadeEdge: void 0 === (null === (_d = null == params ? void 0 : params.options) || void 0 === _d ? void 0 : _d.fadeEdge) || params.options.fadeEdge
|
|
28022
|
-
};
|
|
28023
|
-
}
|
|
28024
|
-
getShaderSources() {
|
|
28025
|
-
return {
|
|
28026
|
-
vertex: ShaderLibrary.STANDARD_VERTEX_SHADER,
|
|
28027
|
-
fragment: `\n precision mediump float;\n uniform sampler2D u_texture;\n uniform sampler2D u_noiseTexture;\n uniform float u_time;\n uniform int u_dissolveType;\n uniform vec2 u_resolution;\n uniform float u_noiseScale;\n uniform bool u_fadeEdge;\n varying vec2 v_texCoord;\n\n ${ShaderLibrary.SHADER_FUNCTIONS}\n\n // 向外溶解函数\n float outwardDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n vec2 center = vec2(0.5, 0.5);\n float distFromCenter = length(uv - center);\n float maxDist = length(vec2(0.5, 0.5));\n\n // 归一化距离 (0为中心,1为边缘)\n float normalizedDist = distFromCenter / maxDist;\n\n // 向外溶解:从边缘开始溶解,time控制溶解进度\n // 增加安全边距,确保动画结束时完全溶解\n float edgeThreshold = 1.2 - time * 1.5;\n\n // 当pixelSize > 0时添加颗粒效果\n if (pixelSize > 0.0) {\n // 添加基于像素大小的噪声,让边缘呈现颗粒状\n vec2 pixelCoord = uv * resolution; // 转换为像素坐标\n float noiseValue = pixelNoise(pixelCoord, pixelSize);\n float noiseInfluence = (noiseValue - 0.5) * 0.4; // 增强噪声影响\n edgeThreshold += noiseInfluence;\n return normalizedDist > edgeThreshold ? 0.0 : 1.0;\n } else {\n // 平滑溶解:根据fadeEdge决定是否使用渐变\n if (u_fadeEdge) {\n // 柔和边缘:返回渐变值\n float fadeWidth = 0.15; // 渐变宽度\n return 1.0 - smoothstep(edgeThreshold - fadeWidth, edgeThreshold, normalizedDist);\n } else {\n // 硬边缘:返回0或1\n return normalizedDist > edgeThreshold ? 0.0 : 1.0;\n }\n }\n }\n\n // 向内溶解函数\n float inwardDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n vec2 center = vec2(0.5, 0.5);\n float distFromCenter = length(uv - center);\n float maxDist = length(vec2(0.5, 0.5));\n\n float normalizedDist = distFromCenter / maxDist;\n\n // 向内溶解:从中心开始溶解,time控制溶解进度\n // 增加系数,确保动画结束时完全溶解\n float centerThreshold = time * 1.4;\n\n // 当pixelSize > 0时添加颗粒效果\n if (pixelSize > 0.0) {\n vec2 pixelCoord = uv * resolution;\n float noiseValue = pixelNoise(pixelCoord, pixelSize);\n float noiseInfluence = (noiseValue - 0.5) * 0.4;\n centerThreshold += noiseInfluence;\n return normalizedDist < centerThreshold ? 0.0 : 1.0;\n } else {\n // 平滑溶解:根据fadeEdge决定是否使用渐变\n if (u_fadeEdge) {\n // 柔和边缘:返回渐变值\n float fadeWidth = 0.15; // 渐变宽度\n return smoothstep(centerThreshold, centerThreshold + fadeWidth, normalizedDist);\n } else {\n // 硬边缘:返回0或1\n return normalizedDist < centerThreshold ? 0.0 : 1.0;\n }\n }\n }\n\n // 径向溶解函数\n float radialDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n vec2 center = vec2(0.5, 0.5);\n float angle = atan(uv.y - center.y, uv.x - center.x);\n float normalizedAngle = (angle + 3.14159) / (2.0 * 3.14159);\n\n // 径向溶解:按角度顺序溶解,time控制溶解进度\n // 增加系数,确保动画结束时完全溶解\n float angleThreshold = time * 1.2;\n\n // 当pixelSize > 0时添加颗粒效果\n if (pixelSize > 0.0) {\n vec2 pixelCoord = uv * resolution;\n float noiseValue = pixelNoise(pixelCoord, pixelSize);\n float noiseInfluence = (noiseValue - 0.5) * 0.3;\n angleThreshold += noiseInfluence;\n return normalizedAngle < angleThreshold ? 0.0 : 1.0;\n } else {\n // 平滑溶解:根据fadeEdge决定是否使用渐变\n if (u_fadeEdge) {\n // 柔和边缘:返回渐变值\n float fadeWidth = 0.08; // 渐变宽度\n return smoothstep(angleThreshold, angleThreshold + fadeWidth, normalizedAngle);\n } else {\n // 硬边缘:返回0或1\n return normalizedAngle < angleThreshold ? 0.0 : 1.0;\n }\n }\n }\n\n // 从左到右溶解函数\n float leftToRightDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n // 左到右溶解:从x=0开始向x=1溶解\n float dissolvePosition = time * 1.2; // 增加系数确保完全溶解\n\n // 当pixelSize > 0时添加颗粒效果\n if (pixelSize > 0.0) {\n vec2 pixelCoord = uv * resolution;\n float noiseValue = pixelNoise(pixelCoord, pixelSize);\n float noiseInfluence = (noiseValue - 0.5) * 0.3;\n dissolvePosition += noiseInfluence;\n return uv.x < dissolvePosition ? 0.0 : 1.0;\n } else {\n // 平滑溶解:根据fadeEdge决定是否使用渐变\n if (u_fadeEdge) {\n // 柔和边缘:返回渐变值\n float fadeWidth = 0.08; // 渐变宽度\n return smoothstep(dissolvePosition, dissolvePosition + fadeWidth, uv.x);\n } else {\n // 硬边缘:返回0或1\n return uv.x < dissolvePosition ? 0.0 : 1.0;\n }\n }\n }\n\n // 从右到左溶解函数\n float rightToLeftDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n // 右到左溶解:从x=1开始向x=0溶解\n float dissolvePosition = 1.0 - time * 1.2; // 增加系数确保完全溶解\n\n // 当pixelSize > 0时添加颗粒效果\n if (pixelSize > 0.0) {\n vec2 pixelCoord = uv * resolution;\n float noiseValue = pixelNoise(pixelCoord, pixelSize);\n float noiseInfluence = (noiseValue - 0.5) * 0.3;\n dissolvePosition += noiseInfluence;\n return uv.x > dissolvePosition ? 0.0 : 1.0;\n } else {\n // 平滑溶解:根据fadeEdge决定是否使用渐变\n if (u_fadeEdge) {\n // 柔和边缘:返回渐变值\n float fadeWidth = 0.08; // 渐变宽度\n return smoothstep(dissolvePosition - fadeWidth, dissolvePosition, uv.x);\n } else {\n // 硬边缘:返回0或1\n return uv.x > dissolvePosition ? 0.0 : 1.0;\n }\n }\n }\n\n // 从上到下溶解函数\n float topToBottomDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n // 上到下溶解:从y=0开始向y=1溶解\n float dissolvePosition = time * 1.2; // 增加系数确保完全溶解\n\n // 当pixelSize > 0时添加颗粒效果\n if (pixelSize > 0.0) {\n vec2 pixelCoord = uv * resolution;\n float noiseValue = pixelNoise(pixelCoord, pixelSize);\n float noiseInfluence = (noiseValue - 0.5) * 0.3;\n dissolvePosition += noiseInfluence;\n return uv.y < dissolvePosition ? 0.0 : 1.0;\n } else {\n // 平滑溶解:根据fadeEdge决定是否使用渐变\n if (u_fadeEdge) {\n // 柔和边缘:返回渐变值\n float fadeWidth = 0.08; // 渐变宽度\n return smoothstep(dissolvePosition, dissolvePosition + fadeWidth, uv.y);\n } else {\n // 硬边缘:返回0或1\n return uv.y < dissolvePosition ? 0.0 : 1.0;\n }\n }\n }\n\n // 从下到上溶解函数\n float bottomToTopDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n // 下到上溶解:从y=1开始向y=0溶解\n float dissolvePosition = 1.0 - time * 1.2; // 增加系数确保完全溶解\n\n // 当pixelSize > 0时添加颗粒效果\n if (pixelSize > 0.0) {\n vec2 pixelCoord = uv * resolution;\n float noiseValue = pixelNoise(pixelCoord, pixelSize);\n float noiseInfluence = (noiseValue - 0.5) * 0.3;\n dissolvePosition += noiseInfluence;\n return uv.y > dissolvePosition ? 0.0 : 1.0;\n } else {\n // 平滑溶解:根据fadeEdge决定是否使用渐变\n if (u_fadeEdge) {\n // 柔和边缘:返回渐变值\n float fadeWidth = 0.08; // 渐变宽度\n return smoothstep(dissolvePosition - fadeWidth, dissolvePosition, uv.y);\n } else {\n // 硬边缘:返回0或1\n return uv.y > dissolvePosition ? 0.0 : 1.0;\n }\n }\n }\n\n void main() {\n vec2 uv = v_texCoord;\n vec4 texColor = texture2D(u_texture, uv);\n\n float alpha = 1.0;\n\n // 根据溶解类型选择对应的溶解函数\n if (u_dissolveType == 0) {\n alpha = outwardDissolve(uv, u_time, u_noiseScale, u_resolution);\n } else if (u_dissolveType == 1) {\n alpha = inwardDissolve(uv, u_time, u_noiseScale, u_resolution);\n } else if (u_dissolveType == 2) {\n alpha = radialDissolve(uv, u_time, u_noiseScale, u_resolution);\n } else if (u_dissolveType == 3) {\n alpha = leftToRightDissolve(uv, u_time, u_noiseScale, u_resolution);\n } else if (u_dissolveType == 4) {\n alpha = rightToLeftDissolve(uv, u_time, u_noiseScale, u_resolution);\n } else if (u_dissolveType == 5) {\n alpha = topToBottomDissolve(uv, u_time, u_noiseScale, u_resolution);\n } else if (u_dissolveType == 6) {\n alpha = bottomToTopDissolve(uv, u_time, u_noiseScale, u_resolution);\n }\n\n gl_FragColor = vec4(texColor.rgb, texColor.a * alpha);\n }\n `
|
|
28028
|
-
};
|
|
28029
|
-
}
|
|
28030
|
-
applyWebGLEffect(canvas) {
|
|
28031
|
-
if (!this.gl || !this.program || !this.webglCanvas) return canvas;
|
|
28032
|
-
this.setupWebGLState(canvas);
|
|
28033
|
-
const texture = this.createTextureFromCanvas(canvas);
|
|
28034
|
-
if (!texture) return canvas;
|
|
28035
|
-
this.noiseData || (this.noiseData = ImageProcessUtils.generateNoiseTexture(256, 256));
|
|
28036
|
-
const noiseTexture = this.gl.createTexture();
|
|
28037
|
-
this.gl.activeTexture(this.gl.TEXTURE1), this.gl.bindTexture(this.gl.TEXTURE_2D, noiseTexture), this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.LUMINANCE, 256, 256, 0, this.gl.LUMINANCE, this.gl.UNSIGNED_BYTE, this.noiseData), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.REPEAT), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.REPEAT), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
|
|
28038
|
-
const vertexBuffer = this.createFullScreenQuad();
|
|
28039
|
-
return vertexBuffer ? (this.gl.useProgram(this.program), this.setupVertexAttributes(), this.setUniforms(), this.gl.enable(this.gl.BLEND), this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA), this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4), this.gl.deleteTexture(texture), this.gl.deleteTexture(noiseTexture), this.gl.deleteBuffer(vertexBuffer), this.webglCanvas) : canvas;
|
|
28040
|
-
}
|
|
28041
|
-
setUniforms() {
|
|
28042
|
-
if (!this.gl || !this.program || !this.webglCanvas) return;
|
|
28043
|
-
const textureLocation = this.gl.getUniformLocation(this.program, "u_texture"),
|
|
28044
|
-
noiseTextureLocation = this.gl.getUniformLocation(this.program, "u_noiseTexture"),
|
|
28045
|
-
timeLocation = this.gl.getUniformLocation(this.program, "u_time"),
|
|
28046
|
-
dissolveTypeLocation = this.gl.getUniformLocation(this.program, "u_dissolveType"),
|
|
28047
|
-
resolutionLocation = this.gl.getUniformLocation(this.program, "u_resolution"),
|
|
28048
|
-
noiseScaleLocation = this.gl.getUniformLocation(this.program, "u_noiseScale"),
|
|
28049
|
-
fadeEdgeLocation = this.gl.getUniformLocation(this.program, "u_fadeEdge");
|
|
28050
|
-
this.gl.uniform1i(textureLocation, 0), this.gl.uniform1i(noiseTextureLocation, 1), this.gl.uniform1f(timeLocation, this.currentAnimationRatio), this.gl.uniform2f(resolutionLocation, this.webglCanvas.width, this.webglCanvas.height), this.gl.uniform1f(noiseScaleLocation, this.dissolveConfig.noiseScale), this.gl.uniform1i(fadeEdgeLocation, this.dissolveConfig.fadeEdge ? 1 : 0);
|
|
28051
|
-
this.gl.uniform1i(dissolveTypeLocation, {
|
|
28052
|
-
outward: 0,
|
|
28053
|
-
inward: 1,
|
|
28054
|
-
radial: 2,
|
|
28055
|
-
leftToRight: 3,
|
|
28056
|
-
rightToLeft: 4,
|
|
28057
|
-
topToBottom: 5,
|
|
28058
|
-
bottomToTop: 6
|
|
28059
|
-
}[this.dissolveConfig.dissolveType] || 0);
|
|
28060
|
-
}
|
|
28061
|
-
applyCanvas2DEffect(canvas) {
|
|
28062
|
-
const outputCanvas = this.createOutputCanvas(canvas);
|
|
28063
|
-
if (!outputCanvas) return canvas;
|
|
28064
|
-
const {
|
|
28065
|
-
canvas: outputCanvasElement,
|
|
28066
|
-
ctx: ctx
|
|
28067
|
-
} = outputCanvas,
|
|
28068
|
-
imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
|
|
28069
|
-
progress = this.currentAnimationRatio;
|
|
28070
|
-
let dissolvedImageData;
|
|
28071
|
-
switch (this.dissolveConfig.dissolveType) {
|
|
28072
|
-
case "outward":
|
|
28073
|
-
dissolvedImageData = this.applyOutwardDissolve(imageData, progress);
|
|
28074
|
-
break;
|
|
28075
|
-
case "inward":
|
|
28076
|
-
dissolvedImageData = this.applyInwardDissolve(imageData, progress);
|
|
28077
|
-
break;
|
|
28078
|
-
case "radial":
|
|
28079
|
-
dissolvedImageData = this.applyRadialDissolve(imageData, progress);
|
|
28080
|
-
break;
|
|
28081
|
-
case "leftToRight":
|
|
28082
|
-
dissolvedImageData = this.applyLeftToRightDissolve(imageData, progress);
|
|
28083
|
-
break;
|
|
28084
|
-
case "rightToLeft":
|
|
28085
|
-
dissolvedImageData = this.applyRightToLeftDissolve(imageData, progress);
|
|
28086
|
-
break;
|
|
28087
|
-
case "topToBottom":
|
|
28088
|
-
dissolvedImageData = this.applyTopToBottomDissolve(imageData, progress);
|
|
28089
|
-
break;
|
|
28090
|
-
case "bottomToTop":
|
|
28091
|
-
dissolvedImageData = this.applyBottomToTopDissolve(imageData, progress);
|
|
28092
|
-
break;
|
|
28093
|
-
default:
|
|
28094
|
-
dissolvedImageData = imageData;
|
|
28095
|
-
}
|
|
28096
|
-
return ctx.putImageData(dissolvedImageData, 0, 0), outputCanvasElement;
|
|
28097
|
-
}
|
|
28098
|
-
applyOutwardDissolve(imageData, progress) {
|
|
28099
|
-
const {
|
|
28100
|
-
data: data,
|
|
28101
|
-
width: width,
|
|
28102
|
-
height: height
|
|
28103
|
-
} = imageData,
|
|
28104
|
-
result = new Uint8ClampedArray(data.length);
|
|
28105
|
-
result.set(data);
|
|
28106
|
-
const centerX = width / 2,
|
|
28107
|
-
centerY = height / 2,
|
|
28108
|
-
maxDist = Math.sqrt(centerX * centerX + centerY * centerY),
|
|
28109
|
-
pixelSize = this.dissolveConfig.noiseScale;
|
|
28110
|
-
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
28111
|
-
const dx = x - centerX,
|
|
28112
|
-
dy = y - centerY,
|
|
28113
|
-
normalizedDist = Math.sqrt(dx * dx + dy * dy) / maxDist;
|
|
28114
|
-
let dissolveThreshold = 1.2 - 1.4 * progress,
|
|
28115
|
-
alpha = 1;
|
|
28116
|
-
if (pixelSize > 0) {
|
|
28117
|
-
dissolveThreshold += .4 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedDist > dissolveThreshold ? 0 : 1;
|
|
28118
|
-
} else if (this.dissolveConfig.fadeEdge) {
|
|
28119
|
-
const fadeStart = dissolveThreshold - .15;
|
|
28120
|
-
alpha = normalizedDist < fadeStart ? 1 : normalizedDist > dissolveThreshold ? 0 : 1 - (normalizedDist - fadeStart) / (dissolveThreshold - fadeStart);
|
|
28121
|
-
} else alpha = normalizedDist > dissolveThreshold ? 0 : 1;
|
|
28122
|
-
const index = 4 * (y * width + x);
|
|
28123
|
-
result[index + 3] = Math.floor(result[index + 3] * alpha);
|
|
28124
|
-
}
|
|
28125
|
-
return new ImageData(result, width, height);
|
|
28126
|
-
}
|
|
28127
|
-
applyInwardDissolve(imageData, progress) {
|
|
28128
|
-
const {
|
|
28129
|
-
data: data,
|
|
28130
|
-
width: width,
|
|
28131
|
-
height: height
|
|
28132
|
-
} = imageData,
|
|
28133
|
-
result = new Uint8ClampedArray(data.length);
|
|
28134
|
-
result.set(data);
|
|
28135
|
-
const centerX = width / 2,
|
|
28136
|
-
centerY = height / 2,
|
|
28137
|
-
maxDist = Math.sqrt(centerX * centerX + centerY * centerY),
|
|
28138
|
-
pixelSize = this.dissolveConfig.noiseScale;
|
|
28139
|
-
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
28140
|
-
const dx = x - centerX,
|
|
28141
|
-
dy = y - centerY,
|
|
28142
|
-
normalizedDist = Math.sqrt(dx * dx + dy * dy) / maxDist;
|
|
28143
|
-
let dissolveThreshold = 1.4 * progress,
|
|
28144
|
-
alpha = 1;
|
|
28145
|
-
if (pixelSize > 0) {
|
|
28146
|
-
dissolveThreshold += .4 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedDist < dissolveThreshold ? 0 : 1;
|
|
28147
|
-
} else if (this.dissolveConfig.fadeEdge) {
|
|
28148
|
-
const fadeEnd = dissolveThreshold + .15;
|
|
28149
|
-
alpha = normalizedDist < dissolveThreshold ? 0 : normalizedDist > fadeEnd ? 1 : (normalizedDist - dissolveThreshold) / (fadeEnd - dissolveThreshold);
|
|
28150
|
-
} else alpha = normalizedDist < dissolveThreshold ? 0 : 1;
|
|
28151
|
-
const index = 4 * (y * width + x);
|
|
28152
|
-
result[index + 3] = Math.floor(result[index + 3] * alpha);
|
|
28153
|
-
}
|
|
28154
|
-
return new ImageData(result, width, height);
|
|
28155
|
-
}
|
|
28156
|
-
applyRadialDissolve(imageData, progress) {
|
|
28157
|
-
const {
|
|
28158
|
-
data: data,
|
|
28159
|
-
width: width,
|
|
28160
|
-
height: height
|
|
28161
|
-
} = imageData,
|
|
28162
|
-
result = new Uint8ClampedArray(data.length);
|
|
28163
|
-
result.set(data);
|
|
28164
|
-
const centerX = width / 2,
|
|
28165
|
-
centerY = height / 2,
|
|
28166
|
-
pixelSize = this.dissolveConfig.noiseScale;
|
|
28167
|
-
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
28168
|
-
const dx = x - centerX,
|
|
28169
|
-
dy = y - centerY,
|
|
28170
|
-
normalizedAngle = (Math.atan2(dy, dx) + Math.PI) / (2 * Math.PI);
|
|
28171
|
-
let dissolveThreshold = 1.2 * progress,
|
|
28172
|
-
alpha = 1;
|
|
28173
|
-
if (pixelSize > 0) {
|
|
28174
|
-
dissolveThreshold += .3 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedAngle < dissolveThreshold ? 0 : 1;
|
|
28175
|
-
} else if (this.dissolveConfig.fadeEdge) {
|
|
28176
|
-
const fadeEnd = dissolveThreshold + .08;
|
|
28177
|
-
alpha = normalizedAngle < dissolveThreshold ? 0 : normalizedAngle > fadeEnd ? 1 : (normalizedAngle - dissolveThreshold) / (fadeEnd - dissolveThreshold);
|
|
28178
|
-
} else alpha = normalizedAngle < dissolveThreshold ? 0 : 1;
|
|
28179
|
-
const index = 4 * (y * width + x);
|
|
28180
|
-
result[index + 3] = Math.floor(result[index + 3] * alpha);
|
|
28181
|
-
}
|
|
28182
|
-
return new ImageData(result, width, height);
|
|
28183
|
-
}
|
|
28184
|
-
applyLeftToRightDissolve(imageData, progress) {
|
|
28185
|
-
const {
|
|
28186
|
-
data: data,
|
|
28187
|
-
width: width,
|
|
28188
|
-
height: height
|
|
28189
|
-
} = imageData,
|
|
28190
|
-
result = new Uint8ClampedArray(data.length);
|
|
28191
|
-
result.set(data);
|
|
28192
|
-
const pixelSize = this.dissolveConfig.noiseScale;
|
|
28193
|
-
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
28194
|
-
const normalizedX = x / width;
|
|
28195
|
-
let dissolveThreshold = 1.2 * progress,
|
|
28196
|
-
alpha = 1;
|
|
28197
|
-
if (pixelSize > 0) {
|
|
28198
|
-
dissolveThreshold += .3 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedX < dissolveThreshold ? 0 : 1;
|
|
28199
|
-
} else if (this.dissolveConfig.fadeEdge) {
|
|
28200
|
-
const fadeEnd = dissolveThreshold + .08;
|
|
28201
|
-
alpha = normalizedX < dissolveThreshold ? 0 : normalizedX > fadeEnd ? 1 : (normalizedX - dissolveThreshold) / (fadeEnd - dissolveThreshold);
|
|
28202
|
-
} else alpha = normalizedX < dissolveThreshold ? 0 : 1;
|
|
28203
|
-
const index = 4 * (y * width + x);
|
|
28204
|
-
result[index + 3] = Math.floor(result[index + 3] * alpha);
|
|
28205
|
-
}
|
|
28206
|
-
return new ImageData(result, width, height);
|
|
28207
|
-
}
|
|
28208
|
-
applyRightToLeftDissolve(imageData, progress) {
|
|
28209
|
-
const {
|
|
28210
|
-
data: data,
|
|
28211
|
-
width: width,
|
|
28212
|
-
height: height
|
|
28213
|
-
} = imageData,
|
|
28214
|
-
result = new Uint8ClampedArray(data.length);
|
|
28215
|
-
result.set(data);
|
|
28216
|
-
const pixelSize = this.dissolveConfig.noiseScale;
|
|
28217
|
-
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
28218
|
-
const normalizedX = x / width;
|
|
28219
|
-
let dissolveThreshold = 1 - 1.2 * progress,
|
|
28220
|
-
alpha = 1;
|
|
28221
|
-
if (pixelSize > 0) {
|
|
28222
|
-
dissolveThreshold += .3 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedX > dissolveThreshold ? 0 : 1;
|
|
28223
|
-
} else if (this.dissolveConfig.fadeEdge) {
|
|
28224
|
-
const fadeStart = dissolveThreshold - .08;
|
|
28225
|
-
alpha = normalizedX < fadeStart ? 1 : normalizedX > dissolveThreshold ? 0 : 1 - (normalizedX - fadeStart) / (dissolveThreshold - fadeStart);
|
|
28226
|
-
} else alpha = normalizedX > dissolveThreshold ? 0 : 1;
|
|
28227
|
-
const index = 4 * (y * width + x);
|
|
28228
|
-
result[index + 3] = Math.floor(result[index + 3] * alpha);
|
|
28229
|
-
}
|
|
28230
|
-
return new ImageData(result, width, height);
|
|
28231
|
-
}
|
|
28232
|
-
applyTopToBottomDissolve(imageData, progress) {
|
|
28233
|
-
const {
|
|
28234
|
-
data: data,
|
|
28235
|
-
width: width,
|
|
28236
|
-
height: height
|
|
28237
|
-
} = imageData,
|
|
28238
|
-
result = new Uint8ClampedArray(data.length);
|
|
28239
|
-
result.set(data);
|
|
28240
|
-
const pixelSize = this.dissolveConfig.noiseScale;
|
|
28241
|
-
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
28242
|
-
const normalizedY = y / height;
|
|
28243
|
-
let dissolveThreshold = 1.2 * progress,
|
|
28244
|
-
alpha = 1;
|
|
28245
|
-
if (pixelSize > 0) {
|
|
28246
|
-
dissolveThreshold += .3 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedY < dissolveThreshold ? 0 : 1;
|
|
28247
|
-
} else if (this.dissolveConfig.fadeEdge) {
|
|
28248
|
-
const fadeEnd = dissolveThreshold + .08;
|
|
28249
|
-
alpha = normalizedY < dissolveThreshold ? 0 : normalizedY > fadeEnd ? 1 : (normalizedY - dissolveThreshold) / (fadeEnd - dissolveThreshold);
|
|
28250
|
-
} else alpha = normalizedY < dissolveThreshold ? 0 : 1;
|
|
28251
|
-
const index = 4 * (y * width + x);
|
|
28252
|
-
result[index + 3] = Math.floor(result[index + 3] * alpha);
|
|
28253
|
-
}
|
|
28254
|
-
return new ImageData(result, width, height);
|
|
28255
|
-
}
|
|
28256
|
-
applyBottomToTopDissolve(imageData, progress) {
|
|
28257
|
-
const {
|
|
28258
|
-
data: data,
|
|
28259
|
-
width: width,
|
|
28260
|
-
height: height
|
|
28261
|
-
} = imageData,
|
|
28262
|
-
result = new Uint8ClampedArray(data.length);
|
|
28263
|
-
result.set(data);
|
|
28264
|
-
const pixelSize = this.dissolveConfig.noiseScale;
|
|
28265
|
-
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
28266
|
-
const normalizedY = y / height;
|
|
28267
|
-
let dissolveThreshold = 1 - 1.2 * progress,
|
|
28268
|
-
alpha = 1;
|
|
28269
|
-
if (pixelSize > 0) {
|
|
28270
|
-
dissolveThreshold += .3 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedY > dissolveThreshold ? 0 : 1;
|
|
28271
|
-
} else if (this.dissolveConfig.fadeEdge) {
|
|
28272
|
-
const fadeStart = dissolveThreshold - .08;
|
|
28273
|
-
alpha = normalizedY < fadeStart ? 1 : normalizedY > dissolveThreshold ? 0 : 1 - (normalizedY - fadeStart) / (dissolveThreshold - fadeStart);
|
|
28274
|
-
} else alpha = normalizedY > dissolveThreshold ? 0 : 1;
|
|
28275
|
-
const index = 4 * (y * width + x);
|
|
28276
|
-
result[index + 3] = Math.floor(result[index + 3] * alpha);
|
|
28277
|
-
}
|
|
28278
|
-
return new ImageData(result, width, height);
|
|
28279
|
-
}
|
|
28280
|
-
}
|
|
28281
|
-
|
|
28282
|
-
class Grayscale extends HybridEffectBase {
|
|
28283
|
-
constructor(from, to, duration, easing, params) {
|
|
28284
|
-
var _a, _b, _c;
|
|
28285
|
-
super(from, to, duration, easing, params);
|
|
28286
|
-
const rawStrength = void 0 !== (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.strength) ? params.options.strength : 1,
|
|
28287
|
-
clampedStrength = Math.max(0, Math.min(1, rawStrength));
|
|
28288
|
-
this.colorConfig = {
|
|
28289
|
-
effectType: (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.effectType) || "grayscale",
|
|
28290
|
-
strength: clampedStrength,
|
|
28291
|
-
useWebGL: void 0 === (null === (_c = null == params ? void 0 : params.options) || void 0 === _c ? void 0 : _c.useWebGL) || params.options.useWebGL
|
|
28292
|
-
};
|
|
28293
|
-
}
|
|
28294
|
-
getShaderSources() {
|
|
28295
|
-
return {
|
|
28296
|
-
vertex: ShaderLibrary.STANDARD_VERTEX_SHADER,
|
|
28297
|
-
fragment: `\n precision mediump float;\n uniform sampler2D u_texture;\n uniform float u_time;\n uniform float u_strength;\n uniform int u_effectType;\n uniform vec2 u_resolution;\n varying vec2 v_texCoord;\n\n ${ShaderLibrary.SHADER_FUNCTIONS}\n\n void main() {\n vec2 uv = v_texCoord;\n vec4 originalColor = texture2D(u_texture, uv);\n vec3 color = originalColor.rgb;\n\n // 计算动态强度\n float dynamicStrength = calculateDynamicStrength(u_strength, u_time);\n\n if (u_effectType == 0) {\n // 灰度效果\n float gray = luminance(color);\n vec3 grayColor = vec3(gray);\n color = mix(color, grayColor, dynamicStrength);\n } else if (u_effectType == 1) {\n // 褐色调效果\n vec3 sepiaColor = sepia(color);\n color = mix(color, sepiaColor, dynamicStrength);\n }\n\n gl_FragColor = vec4(color, originalColor.a);\n }\n `
|
|
28298
|
-
};
|
|
28299
|
-
}
|
|
28300
|
-
applyWebGLEffect(canvas) {
|
|
28301
|
-
if (!this.gl || !this.program || !this.webglCanvas) return null;
|
|
28302
|
-
this.setupWebGLState(canvas);
|
|
28303
|
-
const texture = this.createTextureFromCanvas(canvas);
|
|
28304
|
-
if (!texture) return null;
|
|
28305
|
-
const vertexBuffer = this.createFullScreenQuad();
|
|
28306
|
-
if (!vertexBuffer) return this.gl.deleteTexture(texture), null;
|
|
28307
|
-
try {
|
|
28308
|
-
return this.gl.useProgram(this.program), this.setupVertexAttributes(), this.setColorUniforms(), this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4), this.webglCanvas;
|
|
28309
|
-
} finally {
|
|
28310
|
-
this.gl.deleteTexture(texture), this.gl.deleteBuffer(vertexBuffer);
|
|
28311
|
-
}
|
|
28312
|
-
}
|
|
28313
|
-
setColorUniforms() {
|
|
28314
|
-
if (!this.gl || !this.program) return;
|
|
28315
|
-
const currentTime = this.getAnimationTime(),
|
|
28316
|
-
timeLocation = this.gl.getUniformLocation(this.program, "u_time"),
|
|
28317
|
-
strengthLocation = this.gl.getUniformLocation(this.program, "u_strength"),
|
|
28318
|
-
effectTypeLocation = this.gl.getUniformLocation(this.program, "u_effectType"),
|
|
28319
|
-
resolutionLocation = this.gl.getUniformLocation(this.program, "u_resolution");
|
|
28320
|
-
this.gl.uniform1f(timeLocation, currentTime), this.gl.uniform1f(strengthLocation, this.colorConfig.strength), this.gl.uniform2f(resolutionLocation, this.webglCanvas.width, this.webglCanvas.height);
|
|
28321
|
-
this.gl.uniform1i(effectTypeLocation, {
|
|
28322
|
-
grayscale: 0,
|
|
28323
|
-
sepia: 1
|
|
28324
|
-
}[this.colorConfig.effectType] || 0);
|
|
28325
|
-
}
|
|
28326
|
-
applyCanvas2DEffect(canvas) {
|
|
28327
|
-
if (this.colorConfig.strength <= 0) {
|
|
28328
|
-
const outputCanvas = this.createOutputCanvas(canvas);
|
|
28329
|
-
return outputCanvas ? outputCanvas.canvas : null;
|
|
28330
|
-
}
|
|
28331
|
-
if (this.canUseCSSFilter()) return this.applyCSSFilter(canvas);
|
|
28332
|
-
const outputCanvas = this.createOutputCanvas(canvas);
|
|
28333
|
-
if (!outputCanvas) return null;
|
|
28334
|
-
const {
|
|
28335
|
-
ctx: ctx
|
|
28336
|
-
} = outputCanvas;
|
|
28337
|
-
try {
|
|
28338
|
-
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
|
|
28339
|
-
currentTime = this.getAnimationTime();
|
|
28340
|
-
let processedImageData;
|
|
28341
|
-
switch (this.colorConfig.effectType) {
|
|
28342
|
-
case "grayscale":
|
|
28343
|
-
default:
|
|
28344
|
-
processedImageData = this.applyGrayscaleEffect(imageData, this.colorConfig.strength, currentTime);
|
|
28345
|
-
break;
|
|
28346
|
-
case "sepia":
|
|
28347
|
-
processedImageData = this.applySepiaEffect(imageData, this.colorConfig.strength, currentTime);
|
|
28348
|
-
}
|
|
28349
|
-
return ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.putImageData(processedImageData, 0, 0), outputCanvas.canvas;
|
|
28350
|
-
} catch (error) {
|
|
28351
|
-
return null;
|
|
28352
|
-
}
|
|
28353
|
-
}
|
|
28354
|
-
canUseCSSFilter() {
|
|
28355
|
-
var _a;
|
|
28356
|
-
return !!window.useFilterAPI && "undefined" != typeof CSS && (null === (_a = CSS.supports) || void 0 === _a ? void 0 : _a.call(CSS, "filter", "grayscale(1)"));
|
|
28357
|
-
}
|
|
28358
|
-
applyCSSFilter(canvas) {
|
|
28359
|
-
try {
|
|
28360
|
-
const outputCanvas = ImageProcessUtils.createTempCanvas(canvas.width, canvas.height),
|
|
28361
|
-
ctx = outputCanvas.getContext("2d");
|
|
28362
|
-
if (!ctx) return null;
|
|
28363
|
-
const currentTime = this.getAnimationTime(),
|
|
28364
|
-
dynamicStrength = ImageProcessUtils.calculateDynamicStrength(this.colorConfig.strength, currentTime);
|
|
28365
|
-
let filterValue = "";
|
|
28366
|
-
return "grayscale" === this.colorConfig.effectType ? filterValue = `grayscale(${Math.min(1, dynamicStrength)})` : "sepia" === this.colorConfig.effectType && (filterValue = `sepia(${Math.min(1, dynamicStrength)})`), ctx.filter = filterValue, ctx.drawImage(canvas, 0, 0), ctx.filter = "none", outputCanvas;
|
|
28367
|
-
} catch (error) {
|
|
28368
|
-
return null;
|
|
28369
|
-
}
|
|
28370
|
-
}
|
|
28371
|
-
applyGrayscaleEffect(imageData, strength, time) {
|
|
28372
|
-
const {
|
|
28373
|
-
data: data,
|
|
28374
|
-
width: width,
|
|
28375
|
-
height: height
|
|
28376
|
-
} = imageData,
|
|
28377
|
-
result = new Uint8ClampedArray(data.length),
|
|
28378
|
-
dynamicStrength = ImageProcessUtils.calculateDynamicStrength(strength, time);
|
|
28379
|
-
for (let i = 0; i < data.length; i += 4) {
|
|
28380
|
-
const r = data[i],
|
|
28381
|
-
g = data[i + 1],
|
|
28382
|
-
b = data[i + 2],
|
|
28383
|
-
a = data[i + 3],
|
|
28384
|
-
gray = ImageProcessUtils.getLuminance(r, g, b);
|
|
28385
|
-
result[i] = Math.round(ImageProcessUtils.lerp(r, gray, dynamicStrength)), result[i + 1] = Math.round(ImageProcessUtils.lerp(g, gray, dynamicStrength)), result[i + 2] = Math.round(ImageProcessUtils.lerp(b, gray, dynamicStrength)), result[i + 3] = a;
|
|
28386
|
-
}
|
|
28387
|
-
return new ImageData(result, width, height);
|
|
28388
|
-
}
|
|
28389
|
-
applySepiaEffect(imageData, strength, time) {
|
|
28390
|
-
const {
|
|
28391
|
-
data: data,
|
|
28392
|
-
width: width,
|
|
28393
|
-
height: height
|
|
28394
|
-
} = imageData,
|
|
28395
|
-
result = new Uint8ClampedArray(data.length),
|
|
28396
|
-
dynamicStrength = ImageProcessUtils.calculateDynamicStrength(strength, time);
|
|
28397
|
-
for (let i = 0; i < data.length; i += 4) {
|
|
28398
|
-
const r = data[i],
|
|
28399
|
-
g = data[i + 1],
|
|
28400
|
-
b = data[i + 2],
|
|
28401
|
-
a = data[i + 3],
|
|
28402
|
-
[sepiaR, sepiaG, sepiaB] = ImageProcessUtils.applySepiaToPixel(r, g, b);
|
|
28403
|
-
result[i] = Math.round(ImageProcessUtils.lerp(r, sepiaR, dynamicStrength)), result[i + 1] = Math.round(ImageProcessUtils.lerp(g, sepiaG, dynamicStrength)), result[i + 2] = Math.round(ImageProcessUtils.lerp(b, sepiaB, dynamicStrength)), result[i + 3] = a;
|
|
28404
|
-
}
|
|
28405
|
-
return new ImageData(result, width, height);
|
|
28406
|
-
}
|
|
28407
|
-
afterStageRender(stage, canvas) {
|
|
28408
|
-
if (this.canUseCSSFilter() && this.colorConfig.strength > 0) {
|
|
28409
|
-
const cssResult = this.applyCSSFilter(canvas);
|
|
28410
|
-
if (cssResult) return cssResult;
|
|
28411
|
-
}
|
|
28412
|
-
return super.afterStageRender(stage, canvas);
|
|
28413
|
-
}
|
|
28414
|
-
}
|
|
28415
|
-
|
|
28416
|
-
class Distortion extends HybridEffectBase {
|
|
28417
|
-
constructor(from, to, duration, easing, params) {
|
|
28418
|
-
var _a, _b, _c;
|
|
28419
|
-
super(from, to, duration, easing, params), this.distortionConfig = {
|
|
28420
|
-
distortionType: (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.distortionType) || "wave",
|
|
28421
|
-
strength: (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.strength) || .3,
|
|
28422
|
-
useWebGL: void 0 === (null === (_c = null == params ? void 0 : params.options) || void 0 === _c ? void 0 : _c.useWebGL) || params.options.useWebGL
|
|
28423
|
-
};
|
|
28424
|
-
}
|
|
28425
|
-
getShaderSources() {
|
|
28426
|
-
return {
|
|
28427
|
-
vertex: "\n attribute vec2 a_position;\n attribute vec2 a_texCoord;\n varying vec2 v_texCoord;\n\n void main() {\n gl_Position = vec4(a_position, 0.0, 1.0);\n v_texCoord = a_texCoord;\n }\n ",
|
|
28428
|
-
fragment: "\n precision mediump float;\n uniform sampler2D u_texture;\n uniform float u_time;\n uniform float u_strength;\n uniform int u_distortionType;\n uniform vec2 u_resolution;\n varying vec2 v_texCoord;\n\n // 波浪扭曲函数\n vec2 wave(vec2 uv, float time, float strength) {\n float waveX = sin(uv.y * 10.0 + time * 3.0) * strength * 0.1;\n float waveY = sin(uv.x * 10.0 + time * 2.0) * strength * 0.1;\n return uv + vec2(waveX, waveY);\n }\n\n // 涟漪扭曲函数\n vec2 ripple(vec2 uv, float time, float strength) {\n vec2 center = vec2(0.5, 0.5);\n float distance = length(uv - center);\n float ripple = sin(distance * 20.0 - time * 5.0) * strength * 0.1;\n vec2 direction = normalize(uv - center);\n return uv + direction * ripple;\n }\n\n // 漩涡扭曲函数\n vec2 swirl(vec2 uv, float time, float strength) {\n vec2 center = vec2(0.5, 0.5);\n vec2 delta = uv - center;\n float dist = length(delta);\n float originalAngle = atan(delta.y, delta.x);\n float rotationAngle = dist * strength * time * 2.0;\n float finalAngle = originalAngle + rotationAngle;\n return center + dist * vec2(cos(finalAngle), sin(finalAngle));\n }\n\n void main() {\n vec2 uv = v_texCoord;\n\n // 根据扭曲类型应用相应变换\n if (u_distortionType == 0) {\n uv = wave(uv, u_time, u_strength);\n } else if (u_distortionType == 1) {\n uv = ripple(uv, u_time, u_strength);\n } else if (u_distortionType == 2) {\n uv = swirl(uv, u_time, u_strength);\n }\n\n // 边界检查\n if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {\n gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);\n } else {\n gl_FragColor = texture2D(u_texture, uv);\n }\n }\n "
|
|
28429
|
-
};
|
|
28430
|
-
}
|
|
28431
|
-
applyWebGLEffect(canvas) {
|
|
28432
|
-
if (!this.gl || !this.program || !this.webglCanvas) return null;
|
|
28433
|
-
this.setupWebGLState(canvas);
|
|
28434
|
-
const texture = this.createTextureFromCanvas(canvas);
|
|
28435
|
-
if (!texture) return null;
|
|
28436
|
-
const vertexBuffer = this.createFullScreenQuad();
|
|
28437
|
-
if (!vertexBuffer) return this.gl.deleteTexture(texture), null;
|
|
28438
|
-
try {
|
|
28439
|
-
return this.gl.useProgram(this.program), this.setupVertexAttributes(), this.setDistortionUniforms(), this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4), this.webglCanvas;
|
|
28440
|
-
} finally {
|
|
28441
|
-
this.gl.deleteTexture(texture), this.gl.deleteBuffer(vertexBuffer);
|
|
28442
|
-
}
|
|
28443
|
-
}
|
|
28444
|
-
setDistortionUniforms() {
|
|
28445
|
-
if (!this.gl || !this.program) return;
|
|
28446
|
-
const currentTime = this.getAnimationTime(),
|
|
28447
|
-
timeLocation = this.gl.getUniformLocation(this.program, "u_time"),
|
|
28448
|
-
strengthLocation = this.gl.getUniformLocation(this.program, "u_strength"),
|
|
28449
|
-
distortionTypeLocation = this.gl.getUniformLocation(this.program, "u_distortionType"),
|
|
28450
|
-
resolutionLocation = this.gl.getUniformLocation(this.program, "u_resolution");
|
|
28451
|
-
this.gl.uniform1f(timeLocation, currentTime), this.gl.uniform1f(strengthLocation, this.distortionConfig.strength), this.gl.uniform2f(resolutionLocation, this.webglCanvas.width, this.webglCanvas.height);
|
|
28452
|
-
this.gl.uniform1i(distortionTypeLocation, {
|
|
28453
|
-
wave: 0,
|
|
28454
|
-
ripple: 1,
|
|
28455
|
-
swirl: 2
|
|
28456
|
-
}[this.distortionConfig.distortionType] || 0);
|
|
28457
|
-
}
|
|
28458
|
-
applyCanvas2DEffect(canvas) {
|
|
28459
|
-
const outputCanvas = this.createOutputCanvas(canvas);
|
|
28460
|
-
if (!outputCanvas) return null;
|
|
28461
|
-
const {
|
|
28462
|
-
ctx: ctx
|
|
28463
|
-
} = outputCanvas;
|
|
28464
|
-
try {
|
|
28465
|
-
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
|
|
28466
|
-
currentTime = this.getAnimationTime();
|
|
28467
|
-
let distortedImageData;
|
|
28468
|
-
switch (this.distortionConfig.distortionType) {
|
|
28469
|
-
case "wave":
|
|
28470
|
-
distortedImageData = this.applyWaveDistortion(imageData, this.distortionConfig.strength, currentTime);
|
|
28471
|
-
break;
|
|
28472
|
-
case "ripple":
|
|
28473
|
-
distortedImageData = this.applyRippleDistortion(imageData, this.distortionConfig.strength, currentTime);
|
|
28474
|
-
break;
|
|
28475
|
-
case "swirl":
|
|
28476
|
-
distortedImageData = this.applySwirlDistortion(imageData, this.distortionConfig.strength, currentTime);
|
|
28477
|
-
break;
|
|
28478
|
-
default:
|
|
28479
|
-
distortedImageData = imageData;
|
|
28480
|
-
}
|
|
28481
|
-
return ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.putImageData(distortedImageData, 0, 0), outputCanvas.canvas;
|
|
28482
|
-
} catch (error) {
|
|
28483
|
-
return null;
|
|
28484
|
-
}
|
|
28485
|
-
}
|
|
28486
|
-
applyWaveDistortion(imageData, strength, time) {
|
|
28487
|
-
const {
|
|
28488
|
-
data: data,
|
|
28489
|
-
width: width,
|
|
28490
|
-
height: height
|
|
28491
|
-
} = imageData,
|
|
28492
|
-
result = new Uint8ClampedArray(data.length);
|
|
28493
|
-
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
28494
|
-
const waveX = Math.sin(.1 * y + 3 * time) * strength * 20,
|
|
28495
|
-
waveY = Math.sin(.1 * x + 2 * time) * strength * 20,
|
|
28496
|
-
sourceX = Math.round(x - waveX),
|
|
28497
|
-
sourceY = Math.round(y - waveY),
|
|
28498
|
-
targetIndex = 4 * (y * width + x);
|
|
28499
|
-
if (sourceX >= 0 && sourceX < width && sourceY >= 0 && sourceY < height) {
|
|
28500
|
-
const sourceIndex = 4 * (sourceY * width + sourceX);
|
|
28501
|
-
result[targetIndex] = data[sourceIndex], result[targetIndex + 1] = data[sourceIndex + 1], result[targetIndex + 2] = data[sourceIndex + 2], result[targetIndex + 3] = data[sourceIndex + 3];
|
|
28502
|
-
} else result[targetIndex + 3] = 0;
|
|
28503
|
-
}
|
|
28504
|
-
return new ImageData(result, width, height);
|
|
28505
|
-
}
|
|
28506
|
-
applyRippleDistortion(imageData, strength, time) {
|
|
28507
|
-
const {
|
|
28508
|
-
data: data,
|
|
28509
|
-
width: width,
|
|
28510
|
-
height: height
|
|
28511
|
-
} = imageData,
|
|
28512
|
-
result = new Uint8ClampedArray(data.length),
|
|
28513
|
-
centerX = width / 2,
|
|
28514
|
-
centerY = height / 2;
|
|
28515
|
-
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
28516
|
-
const dx = x - centerX,
|
|
28517
|
-
dy = y - centerY,
|
|
28518
|
-
distance = Math.sqrt(dx * dx + dy * dy),
|
|
28519
|
-
ripple = Math.sin(.2 * distance - 5 * time) * strength * 10,
|
|
28520
|
-
angle = Math.atan2(dy, dx),
|
|
28521
|
-
sourceX = Math.round(x - Math.cos(angle) * ripple),
|
|
28522
|
-
sourceY = Math.round(y - Math.sin(angle) * ripple),
|
|
28523
|
-
targetIndex = 4 * (y * width + x);
|
|
28524
|
-
if (sourceX >= 0 && sourceX < width && sourceY >= 0 && sourceY < height) {
|
|
28525
|
-
const sourceIndex = 4 * (sourceY * width + sourceX);
|
|
28526
|
-
result[targetIndex] = data[sourceIndex], result[targetIndex + 1] = data[sourceIndex + 1], result[targetIndex + 2] = data[sourceIndex + 2], result[targetIndex + 3] = data[sourceIndex + 3];
|
|
28527
|
-
} else result[targetIndex + 3] = 0;
|
|
28528
|
-
}
|
|
28529
|
-
return new ImageData(result, width, height);
|
|
28530
|
-
}
|
|
28531
|
-
applySwirlDistortion(imageData, strength, time) {
|
|
28532
|
-
const {
|
|
28533
|
-
data: data,
|
|
28534
|
-
width: width,
|
|
28535
|
-
height: height
|
|
28536
|
-
} = imageData,
|
|
28537
|
-
result = new Uint8ClampedArray(data.length),
|
|
28538
|
-
centerX = width / 2,
|
|
28539
|
-
centerY = height / 2;
|
|
28540
|
-
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
28541
|
-
const dx = x - centerX,
|
|
28542
|
-
dy = y - centerY,
|
|
28543
|
-
distance = Math.sqrt(dx * dx + dy * dy),
|
|
28544
|
-
finalAngle = Math.atan2(dy, dx) + distance * strength * time * .02,
|
|
28545
|
-
sourceX = Math.round(centerX + distance * Math.cos(finalAngle)),
|
|
28546
|
-
sourceY = Math.round(centerY + distance * Math.sin(finalAngle)),
|
|
28547
|
-
targetIndex = 4 * (y * width + x);
|
|
28548
|
-
if (sourceX >= 0 && sourceX < width && sourceY >= 0 && sourceY < height) {
|
|
28549
|
-
const sourceIndex = 4 * (sourceY * width + sourceX);
|
|
28550
|
-
result[targetIndex] = data[sourceIndex], result[targetIndex + 1] = data[sourceIndex + 1], result[targetIndex + 2] = data[sourceIndex + 2], result[targetIndex + 3] = data[sourceIndex + 3];
|
|
28551
|
-
} else result[targetIndex + 3] = 0;
|
|
28552
|
-
}
|
|
28553
|
-
return new ImageData(result, width, height);
|
|
28554
|
-
}
|
|
28555
|
-
afterStageRender(stage, canvas) {
|
|
28556
|
-
return this.distortionConfig.strength <= 0 ? canvas : super.afterStageRender(stage, canvas);
|
|
28557
|
-
}
|
|
28558
|
-
}
|
|
28559
|
-
|
|
28560
|
-
class Particle extends HybridEffectBase {
|
|
28561
|
-
constructor(from, to, duration, easing, params) {
|
|
28562
|
-
var _a, _b, _c, _d, _e;
|
|
28563
|
-
super(from, to, duration, easing, params), this.particles = [], this.positionBuffer = null, this.colorBuffer = null, this.particleConfig = {
|
|
28564
|
-
effectType: (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.effectType) || "gravity",
|
|
28565
|
-
count: (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.count) || 4e3,
|
|
28566
|
-
size: (null === (_c = null == params ? void 0 : params.options) || void 0 === _c ? void 0 : _c.size) || 20,
|
|
28567
|
-
strength: (null === (_d = null == params ? void 0 : params.options) || void 0 === _d ? void 0 : _d.strength) || 1.5,
|
|
28568
|
-
useWebGL: void 0 === (null === (_e = null == params ? void 0 : params.options) || void 0 === _e ? void 0 : _e.useWebGL) || params.options.useWebGL
|
|
28569
|
-
};
|
|
28570
|
-
}
|
|
28571
|
-
getShaderSources() {
|
|
28572
|
-
return {
|
|
28573
|
-
vertex: "\n attribute vec2 a_position;\n attribute vec4 a_color;\n attribute float a_size;\n\n uniform vec2 u_resolution;\n uniform float u_time;\n uniform float u_forceStrength;\n uniform int u_effectType;\n\n varying vec4 v_color;\n\n void main() {\n // 将像素坐标转换为剪辑空间坐标\n vec2 clipSpace = ((a_position / u_resolution) * 2.0) - 1.0;\n clipSpace.y = -clipSpace.y; // 翻转Y轴\n\n gl_Position = vec4(clipSpace, 0.0, 1.0);\n gl_PointSize = a_size;\n v_color = a_color;\n }\n ",
|
|
28574
|
-
fragment: "\n precision mediump float;\n varying vec4 v_color;\n\n void main() {\n // 创建圆形粒子\n vec2 coord = gl_PointCoord - vec2(0.5);\n float distance = length(coord);\n\n if (distance > 0.5) {\n discard;\n }\n\n // 保持原始颜色,只调整透明度渐变\n gl_FragColor = vec4(v_color.rgb, v_color.a);\n }\n "
|
|
28575
|
-
};
|
|
28576
|
-
}
|
|
28577
|
-
applyWebGLEffect(canvas) {
|
|
28578
|
-
if (!this.gl || !this.program || !this.webglCanvas) return null;
|
|
28579
|
-
this.setupWebGLState(canvas), 0 === this.particles.length && this.extractParticles(canvas), this.updateParticles(canvas);
|
|
28580
|
-
const gl = this.gl;
|
|
28581
|
-
return gl.enable(gl.BLEND), gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA), gl.useProgram(this.program), this.prepareAndDrawParticles(gl), this.webglCanvas;
|
|
28582
|
-
}
|
|
28583
|
-
applyCanvas2DEffect(canvas) {
|
|
28584
|
-
const output = this.createOutputCanvas(canvas);
|
|
28585
|
-
if (!output) return null;
|
|
28586
|
-
const {
|
|
28587
|
-
canvas: outputCanvas,
|
|
28588
|
-
ctx: ctx
|
|
28589
|
-
} = output,
|
|
28590
|
-
progress = this.currentAnimationRatio;
|
|
28591
|
-
switch (this.particleConfig.effectType) {
|
|
28592
|
-
case "explode":
|
|
28593
|
-
this.applyCanvas2DExplode(ctx, canvas, progress);
|
|
28594
|
-
break;
|
|
28595
|
-
case "gravity":
|
|
28596
|
-
this.applyCanvas2DGravity(ctx, canvas, progress);
|
|
28597
|
-
break;
|
|
28598
|
-
case "vortex":
|
|
28599
|
-
this.applyCanvas2DVortex(ctx, canvas, progress);
|
|
28600
|
-
break;
|
|
28601
|
-
default:
|
|
28602
|
-
ctx.globalAlpha = Math.max(0, 1 - progress), ctx.drawImage(canvas, 0, 0);
|
|
28603
|
-
}
|
|
28604
|
-
return outputCanvas;
|
|
28605
|
-
}
|
|
28606
|
-
extractParticles(canvas) {
|
|
28607
|
-
const tempCanvas = ImageProcessUtils.createTempCanvas(canvas.width, canvas.height, 1),
|
|
28608
|
-
tempCtx = tempCanvas.getContext("2d");
|
|
28609
|
-
if (!tempCtx) return;
|
|
28610
|
-
tempCtx.drawImage(canvas, 0, 0, tempCanvas.width, tempCanvas.height);
|
|
28611
|
-
const data = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height).data;
|
|
28612
|
-
this.particles = [];
|
|
28613
|
-
const step = Math.max(1, Math.floor(Math.sqrt(tempCanvas.width * tempCanvas.height / (1.5 * this.particleConfig.count))));
|
|
28614
|
-
for (let y = 0; y < tempCanvas.height; y += step) for (let x = 0; x < tempCanvas.width; x += step) {
|
|
28615
|
-
const index = 4 * (y * tempCanvas.width + x),
|
|
28616
|
-
r = data[index],
|
|
28617
|
-
g = data[index + 1],
|
|
28618
|
-
b = data[index + 2],
|
|
28619
|
-
a = data[index + 3];
|
|
28620
|
-
if (a > 5) {
|
|
28621
|
-
const realX = x / tempCanvas.width * canvas.width,
|
|
28622
|
-
realY = y / tempCanvas.height * canvas.height,
|
|
28623
|
-
particle = {
|
|
28624
|
-
x: realX,
|
|
28625
|
-
y: realY,
|
|
28626
|
-
originX: realX,
|
|
28627
|
-
originY: realY,
|
|
28628
|
-
vx: 0,
|
|
28629
|
-
vy: 0,
|
|
28630
|
-
r: r / 255,
|
|
28631
|
-
g: g / 255,
|
|
28632
|
-
b: b / 255,
|
|
28633
|
-
a: Math.max(.6, a / 255),
|
|
28634
|
-
life: 1,
|
|
28635
|
-
size: this.particleConfig.size * (1 + .5 * Math.random())
|
|
28636
|
-
};
|
|
28637
|
-
this.particles.push(particle);
|
|
28638
|
-
}
|
|
28639
|
-
}
|
|
28640
|
-
}
|
|
28641
|
-
updateParticles(canvas) {
|
|
28642
|
-
const centerX = canvas.width / 2,
|
|
28643
|
-
centerY = canvas.height / 2,
|
|
28644
|
-
progress = this.currentAnimationRatio,
|
|
28645
|
-
duration = this.getDurationFromParent(),
|
|
28646
|
-
isShortAnimation = duration < 2e3,
|
|
28647
|
-
timeMultiplier = isShortAnimation ? Math.max(1.5, 3e3 / duration) : 1,
|
|
28648
|
-
intensityBoost = isShortAnimation ? Math.min(2, 2e3 / duration) : 1;
|
|
28649
|
-
this.particles.forEach(particle => {
|
|
28650
|
-
const dx = particle.x - centerX,
|
|
28651
|
-
dy = particle.y - centerY,
|
|
28652
|
-
distance = Math.sqrt(dx * dx + dy * dy),
|
|
28653
|
-
angle = Math.atan2(dy, dx);
|
|
28654
|
-
this.applyParticleForces(particle, angle, distance, progress, intensityBoost, canvas), this.updateParticleProperties(particle, progress, isShortAnimation, timeMultiplier, intensityBoost);
|
|
28655
|
-
});
|
|
28656
|
-
}
|
|
28657
|
-
applyParticleForces(particle, angle, distance, progress, intensityBoost, canvas) {
|
|
28658
|
-
const time = this.getAnimationTime();
|
|
28659
|
-
switch (this.particleConfig.effectType) {
|
|
28660
|
-
case "explode":
|
|
28661
|
-
const explodeIntensity = progress * this.particleConfig.strength * intensityBoost * 5;
|
|
28662
|
-
particle.vx += Math.cos(angle) * explodeIntensity, particle.vy += Math.sin(angle) * explodeIntensity;
|
|
28663
|
-
break;
|
|
28664
|
-
case "gravity":
|
|
28665
|
-
this.applyGravityEffect(particle, progress, intensityBoost, canvas, time);
|
|
28666
|
-
break;
|
|
28667
|
-
case "vortex":
|
|
28668
|
-
this.applyVortexEffect(particle, progress, intensityBoost, canvas, angle, distance);
|
|
28669
|
-
}
|
|
28670
|
-
}
|
|
28671
|
-
applyGravityEffect(particle, progress, intensityBoost, canvas, time) {
|
|
28672
|
-
const gravityThreshold = (particle.originX + .7 * particle.originY) / (canvas.width + canvas.height) * .8;
|
|
28673
|
-
if (progress > gravityThreshold) {
|
|
28674
|
-
const gravityProgress = (progress - gravityThreshold) / (1 - gravityThreshold),
|
|
28675
|
-
gravityForce = this.particleConfig.strength * gravityProgress * gravityProgress * 12 * intensityBoost;
|
|
28676
|
-
particle.vy += gravityForce;
|
|
28677
|
-
const turbulence = Math.sin(3 * time + .02 * particle.originX) * Math.cos(2 * time + .015 * particle.originY);
|
|
28678
|
-
particle.vx += turbulence * this.particleConfig.strength * 2 * intensityBoost;
|
|
28679
|
-
}
|
|
28680
|
-
}
|
|
28681
|
-
applyVortexEffect(particle, progress, intensityBoost, canvas, angle, distance) {
|
|
28682
|
-
const centerX = canvas.width / 2,
|
|
28683
|
-
centerY = canvas.height / 2,
|
|
28684
|
-
spiralAngle = angle + progress * Math.PI * .8,
|
|
28685
|
-
targetRadius = distance + progress * Math.max(canvas.width, canvas.height) * .7 * 1.8,
|
|
28686
|
-
targetX = centerX + Math.cos(spiralAngle) * targetRadius,
|
|
28687
|
-
targetY = centerY + Math.sin(spiralAngle) * targetRadius,
|
|
28688
|
-
baseForce = progress * this.particleConfig.strength * .08 * intensityBoost;
|
|
28689
|
-
particle.vx += (targetX - particle.x) * baseForce, particle.vy += (targetY - particle.y) * baseForce;
|
|
28690
|
-
}
|
|
28691
|
-
updateParticleProperties(particle, progress, isShortAnimation, timeMultiplier, intensityBoost) {
|
|
28692
|
-
const dragCoeff = isShortAnimation ? .99 : .98;
|
|
28693
|
-
if (particle.vx *= dragCoeff, particle.vy *= dragCoeff, particle.x += particle.vx, particle.y += particle.vy, isShortAnimation) {
|
|
28694
|
-
const lifeDecayRate = Math.max(.1, .5 / timeMultiplier);
|
|
28695
|
-
particle.life = Math.max(0, 1 - progress * lifeDecayRate), particle.a = Math.max(.2, particle.life * Math.min(1, 1.2 * particle.a)), particle.size = Math.max(.7 * this.particleConfig.size, this.particleConfig.size * (.5 + .5 * particle.life));
|
|
28696
|
-
} else particle.life = Math.max(0, 1 - .2 * progress), particle.a = Math.max(.1, particle.life * Math.min(1, 1.5 * particle.a)), particle.size = Math.max(.5 * this.particleConfig.size, this.particleConfig.size * (.3 + .7 * particle.life));
|
|
28697
|
-
}
|
|
28698
|
-
prepareAndDrawParticles(gl) {
|
|
28699
|
-
const positions = new Float32Array(2 * this.particles.length),
|
|
28700
|
-
colors = new Float32Array(4 * this.particles.length),
|
|
28701
|
-
sizes = new Float32Array(this.particles.length);
|
|
28702
|
-
this.particles.forEach((particle, i) => {
|
|
28703
|
-
positions[2 * i] = particle.x, positions[2 * i + 1] = particle.y, colors[4 * i] = particle.r, colors[4 * i + 1] = particle.g, colors[4 * i + 2] = particle.b, colors[4 * i + 3] = Math.max(.1, particle.a), sizes[i] = Math.max(6, 1.5 * particle.size);
|
|
28704
|
-
}), this.updateParticleBuffers(gl, positions, colors, sizes), this.setParticleUniforms(gl), gl.drawArrays(gl.POINTS, 0, this.particles.length), this.cleanupTempBuffers(gl);
|
|
28705
|
-
}
|
|
28706
|
-
updateParticleBuffers(gl, positions, colors, sizes) {
|
|
28707
|
-
this.positionBuffer || (this.positionBuffer = gl.createBuffer()), gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer), gl.bufferData(gl.ARRAY_BUFFER, positions, gl.DYNAMIC_DRAW);
|
|
28708
|
-
const positionLocation = gl.getAttribLocation(this.program, "a_position");
|
|
28709
|
-
gl.enableVertexAttribArray(positionLocation), gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, !1, 0, 0), this.colorBuffer || (this.colorBuffer = gl.createBuffer()), gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer), gl.bufferData(gl.ARRAY_BUFFER, colors, gl.DYNAMIC_DRAW);
|
|
28710
|
-
const colorLocation = gl.getAttribLocation(this.program, "a_color");
|
|
28711
|
-
gl.enableVertexAttribArray(colorLocation), gl.vertexAttribPointer(colorLocation, 4, gl.FLOAT, !1, 0, 0);
|
|
28712
|
-
const sizeBuffer = gl.createBuffer();
|
|
28713
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer), gl.bufferData(gl.ARRAY_BUFFER, sizes, gl.DYNAMIC_DRAW);
|
|
28714
|
-
const sizeLocation = gl.getAttribLocation(this.program, "a_size");
|
|
28715
|
-
gl.enableVertexAttribArray(sizeLocation), gl.vertexAttribPointer(sizeLocation, 1, gl.FLOAT, !1, 0, 0), this._tempSizeBuffer = sizeBuffer;
|
|
28716
|
-
}
|
|
28717
|
-
setParticleUniforms(gl) {
|
|
28718
|
-
const resolutionLocation = gl.getUniformLocation(this.program, "u_resolution"),
|
|
28719
|
-
timeLocation = gl.getUniformLocation(this.program, "u_time"),
|
|
28720
|
-
forceStrengthLocation = gl.getUniformLocation(this.program, "u_forceStrength"),
|
|
28721
|
-
effectTypeLocation = gl.getUniformLocation(this.program, "u_effectType");
|
|
28722
|
-
gl.uniform2f(resolutionLocation, this.webglCanvas.width, this.webglCanvas.height), gl.uniform1f(timeLocation, this.getAnimationTime()), gl.uniform1f(forceStrengthLocation, this.particleConfig.strength);
|
|
28723
|
-
gl.uniform1i(effectTypeLocation, {
|
|
28724
|
-
explode: 0,
|
|
28725
|
-
vortex: 1,
|
|
28726
|
-
gravity: 2
|
|
28727
|
-
}[this.particleConfig.effectType] || 0);
|
|
28728
|
-
}
|
|
28729
|
-
cleanupTempBuffers(gl) {
|
|
28730
|
-
const tempSizeBuffer = this._tempSizeBuffer;
|
|
28731
|
-
tempSizeBuffer && (gl.deleteBuffer(tempSizeBuffer), delete this._tempSizeBuffer);
|
|
28732
|
-
}
|
|
28733
|
-
applyCanvas2DExplode(ctx, canvas, progress) {
|
|
28734
|
-
const centerX = canvas.width / 2,
|
|
28735
|
-
centerY = canvas.height / 2;
|
|
28736
|
-
ctx.save(), ctx.globalAlpha = Math.max(0, 1 - progress), ctx.translate(centerX, centerY);
|
|
28737
|
-
const scale = 1 + .5 * progress;
|
|
28738
|
-
ctx.scale(scale, scale), ctx.translate(-centerX, -centerY), ctx.drawImage(canvas, 0, 0), ctx.restore();
|
|
28739
|
-
}
|
|
28740
|
-
applyCanvas2DGravity(ctx, canvas, progress) {
|
|
28741
|
-
ctx.save(), ctx.globalAlpha = Math.max(0, 1 - progress);
|
|
28742
|
-
const offsetY = progress * canvas.height * .3;
|
|
28743
|
-
ctx.drawImage(canvas, 0, offsetY), ctx.restore();
|
|
28744
|
-
}
|
|
28745
|
-
applyCanvas2DVortex(ctx, canvas, progress) {
|
|
28746
|
-
const centerX = canvas.width / 2,
|
|
28747
|
-
centerY = canvas.height / 2;
|
|
28748
|
-
ctx.save(), ctx.globalAlpha = Math.max(0, 1 - progress), ctx.translate(centerX, centerY), ctx.rotate(progress * Math.PI * 2), ctx.translate(-centerX, -centerY), ctx.drawImage(canvas, 0, 0), ctx.restore();
|
|
28749
|
-
}
|
|
28750
|
-
}
|
|
28751
|
-
|
|
28752
|
-
class Glitch extends Canvas2DEffectBase {
|
|
28753
|
-
constructor(from, to, duration, easing, params) {
|
|
28754
|
-
var _a, _b;
|
|
28755
|
-
super(from, to, duration, easing, params), this.glitchConfig = {
|
|
28756
|
-
effectType: (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.effectType) || "rgb-shift",
|
|
28757
|
-
intensity: void 0 !== (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.intensity) ? params.options.intensity : .5
|
|
28758
|
-
};
|
|
28759
|
-
}
|
|
28760
|
-
applyCanvas2DEffect(canvas) {
|
|
28761
|
-
if (this.glitchConfig.intensity <= 0) {
|
|
28762
|
-
const outputCanvas = this.createOutputCanvas(canvas);
|
|
28763
|
-
return outputCanvas ? outputCanvas.canvas : null;
|
|
28764
|
-
}
|
|
28765
|
-
try {
|
|
28766
|
-
switch (this.glitchConfig.effectType) {
|
|
28767
|
-
case "rgb-shift":
|
|
28768
|
-
default:
|
|
28769
|
-
return this.applyRGBShiftGlitch(canvas);
|
|
28770
|
-
case "digital-distortion":
|
|
28771
|
-
return this.applyDigitalDistortionGlitch(canvas);
|
|
28772
|
-
case "scan-lines":
|
|
28773
|
-
return this.applyScanLineGlitch(canvas);
|
|
28774
|
-
case "data-corruption":
|
|
28775
|
-
return this.applyDataCorruptionGlitch(canvas);
|
|
28776
|
-
}
|
|
28777
|
-
} catch (error) {
|
|
28778
|
-
return null;
|
|
28779
|
-
}
|
|
28780
|
-
}
|
|
28781
|
-
applyRGBShiftGlitch(canvas) {
|
|
28782
|
-
const outputCanvas = this.createOutputCanvas(canvas);
|
|
28783
|
-
if (!outputCanvas) return null;
|
|
28784
|
-
const {
|
|
28785
|
-
ctx: ctx
|
|
28786
|
-
} = outputCanvas;
|
|
28787
|
-
try {
|
|
28788
|
-
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
28789
|
-
const dynamicIntensity = ImageProcessUtils.calculateDynamicStrength(this.glitchConfig.intensity, this.getAnimationTime()),
|
|
28790
|
-
maxOffset = Math.floor(20 * dynamicIntensity),
|
|
28791
|
-
redOffset = this.generateRandomOffset(maxOffset),
|
|
28792
|
-
greenOffset = this.generateRandomOffset(maxOffset, .3),
|
|
28793
|
-
blueOffset = this.generateRandomOffset(-maxOffset),
|
|
28794
|
-
tempCanvas = ImageProcessUtils.createTempCanvas(canvas.width, canvas.height),
|
|
28795
|
-
tempCtx = tempCanvas.getContext("2d");
|
|
28796
|
-
tempCtx.drawImage(canvas, 0, 0);
|
|
28797
|
-
const originalImageData = tempCtx.getImageData(0, 0, canvas.width, canvas.height),
|
|
28798
|
-
redChannelData = ImageProcessUtils.extractChannel(originalImageData, 0),
|
|
28799
|
-
greenChannelData = ImageProcessUtils.extractChannel(originalImageData, 1),
|
|
28800
|
-
blueChannelData = ImageProcessUtils.extractChannel(originalImageData, 2);
|
|
28801
|
-
return ctx.globalCompositeOperation = "screen", tempCtx.clearRect(0, 0, canvas.width, canvas.height), tempCtx.putImageData(redChannelData, 0, 0), ctx.drawImage(tempCanvas, redOffset.x, redOffset.y), tempCtx.clearRect(0, 0, canvas.width, canvas.height), tempCtx.putImageData(greenChannelData, 0, 0), ctx.drawImage(tempCanvas, greenOffset.x, greenOffset.y), tempCtx.clearRect(0, 0, canvas.width, canvas.height), tempCtx.putImageData(blueChannelData, 0, 0), ctx.drawImage(tempCanvas, blueOffset.x, blueOffset.y), ctx.globalCompositeOperation = "source-over", outputCanvas.canvas;
|
|
28802
|
-
} catch (error) {
|
|
28803
|
-
return null;
|
|
28804
|
-
}
|
|
28805
|
-
}
|
|
28806
|
-
applyDigitalDistortionGlitch(canvas) {
|
|
28807
|
-
const outputCanvas = this.createOutputCanvas(canvas);
|
|
28808
|
-
if (!outputCanvas) return null;
|
|
28809
|
-
const {
|
|
28810
|
-
ctx: ctx
|
|
28811
|
-
} = outputCanvas;
|
|
28812
|
-
try {
|
|
28813
|
-
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
|
|
28814
|
-
dynamicIntensity = ImageProcessUtils.calculateDynamicStrength(this.glitchConfig.intensity, this.getAnimationTime()),
|
|
28815
|
-
distortedImageData = this.processDigitalDistortion(imageData, dynamicIntensity);
|
|
28816
|
-
return ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.putImageData(distortedImageData, 0, 0), outputCanvas.canvas;
|
|
28817
|
-
} catch (error) {
|
|
28818
|
-
return null;
|
|
28819
|
-
}
|
|
28820
|
-
}
|
|
28821
|
-
applyScanLineGlitch(canvas) {
|
|
28822
|
-
const outputCanvas = this.createOutputCanvas(canvas);
|
|
28823
|
-
if (!outputCanvas) return null;
|
|
28824
|
-
const {
|
|
28825
|
-
ctx: ctx
|
|
28826
|
-
} = outputCanvas;
|
|
28827
|
-
try {
|
|
28828
|
-
const dynamicIntensity = ImageProcessUtils.calculateDynamicStrength(this.glitchConfig.intensity, this.getAnimationTime()),
|
|
28829
|
-
lineSpacing = Math.max(2, Math.floor(10 - 8 * dynamicIntensity));
|
|
28830
|
-
ctx.globalCompositeOperation = "multiply";
|
|
28831
|
-
for (let y = 0; y < canvas.height; y += lineSpacing) if (Math.random() < dynamicIntensity) {
|
|
28832
|
-
const opacity = .1 + .4 * dynamicIntensity;
|
|
28833
|
-
ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`, ctx.fillRect(0, y, canvas.width, 1);
|
|
28834
|
-
}
|
|
28835
|
-
ctx.globalCompositeOperation = "screen";
|
|
28836
|
-
const brightLineCount = Math.floor(20 * dynamicIntensity);
|
|
28837
|
-
for (let i = 0; i < brightLineCount; i++) {
|
|
28838
|
-
const y = Math.random() * canvas.height,
|
|
28839
|
-
opacity = .3 * dynamicIntensity;
|
|
28840
|
-
ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`, ctx.fillRect(0, Math.floor(y), canvas.width, 1);
|
|
28841
|
-
}
|
|
28842
|
-
return ctx.globalCompositeOperation = "source-over", outputCanvas.canvas;
|
|
28843
|
-
} catch (error) {
|
|
28844
|
-
return null;
|
|
28845
|
-
}
|
|
28846
|
-
}
|
|
28847
|
-
applyDataCorruptionGlitch(canvas) {
|
|
28848
|
-
const outputCanvas = this.createOutputCanvas(canvas);
|
|
28849
|
-
if (!outputCanvas) return null;
|
|
28850
|
-
const {
|
|
28851
|
-
ctx: ctx
|
|
28852
|
-
} = outputCanvas;
|
|
28853
|
-
try {
|
|
28854
|
-
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
|
|
28855
|
-
dynamicIntensity = ImageProcessUtils.calculateDynamicStrength(this.glitchConfig.intensity, this.getAnimationTime()),
|
|
28856
|
-
corruptedImageData = this.processDataCorruption(imageData, dynamicIntensity);
|
|
28857
|
-
return ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.putImageData(corruptedImageData, 0, 0), outputCanvas.canvas;
|
|
28858
|
-
} catch (error) {
|
|
28859
|
-
return null;
|
|
28860
|
-
}
|
|
28861
|
-
}
|
|
28862
|
-
generateRandomOffset(maxOffset, scale = 1) {
|
|
28863
|
-
return {
|
|
28864
|
-
x: (Math.random() - .5) * maxOffset,
|
|
28865
|
-
y: (Math.random() - .5) * maxOffset * scale
|
|
28866
|
-
};
|
|
28867
|
-
}
|
|
28868
|
-
processDigitalDistortion(imageData, intensity) {
|
|
28869
|
-
const {
|
|
28870
|
-
data: data,
|
|
28871
|
-
width: width,
|
|
28872
|
-
height: height
|
|
28873
|
-
} = imageData,
|
|
28874
|
-
result = new Uint8ClampedArray(data),
|
|
28875
|
-
sliceCount = Math.floor(20 * intensity) + 5,
|
|
28876
|
-
sliceHeight = Math.floor(height / sliceCount);
|
|
28877
|
-
for (let i = 0; i < sliceCount; i++) if (Math.random() < intensity) {
|
|
28878
|
-
const y = i * sliceHeight,
|
|
28879
|
-
sliceEnd = Math.min(y + sliceHeight, height),
|
|
28880
|
-
offset = Math.floor((Math.random() - .5) * width * intensity * .1);
|
|
28881
|
-
this.shiftSliceHorizontal(result, width, height, y, sliceEnd, offset);
|
|
28882
|
-
}
|
|
28883
|
-
const noiseIntensity = .3 * intensity;
|
|
28884
|
-
for (let i = 0; i < data.length; i += 4) Math.random() < noiseIntensity && (result[i] = 255 * Math.random(), result[i + 1] = 255 * Math.random(), result[i + 2] = 255 * Math.random());
|
|
28885
|
-
return new ImageData(result, width, height);
|
|
28886
|
-
}
|
|
28887
|
-
shiftSliceHorizontal(data, width, height, startY, endY, offset) {
|
|
28888
|
-
const tempRow = new Uint8ClampedArray(4 * width);
|
|
28889
|
-
for (let y = startY; y < endY; y++) {
|
|
28890
|
-
const rowStart = y * width * 4;
|
|
28891
|
-
for (let x = 0; x < 4 * width; x++) tempRow[x] = data[rowStart + x];
|
|
28892
|
-
for (let x = 0; x < width; x++) {
|
|
28893
|
-
const targetIndex = rowStart + 4 * x,
|
|
28894
|
-
sourceIndex = 4 * ((x - offset + width) % width);
|
|
28895
|
-
data[targetIndex] = tempRow[sourceIndex], data[targetIndex + 1] = tempRow[sourceIndex + 1], data[targetIndex + 2] = tempRow[sourceIndex + 2], data[targetIndex + 3] = tempRow[sourceIndex + 3];
|
|
28896
|
-
}
|
|
28897
|
-
}
|
|
28898
|
-
}
|
|
28899
|
-
processDataCorruption(imageData, intensity) {
|
|
28900
|
-
const {
|
|
28901
|
-
data: data,
|
|
28902
|
-
width: width,
|
|
28903
|
-
height: height
|
|
28904
|
-
} = imageData,
|
|
28905
|
-
result = new Uint8ClampedArray(data),
|
|
28906
|
-
stripeCount = Math.floor(15 * intensity) + 5;
|
|
28907
|
-
for (let i = 0; i < stripeCount; i++) if (Math.random() < intensity) {
|
|
28908
|
-
const x = Math.floor(Math.random() * width),
|
|
28909
|
-
stripeWidth = Math.floor(5 * Math.random()) + 1,
|
|
28910
|
-
color = Math.random() < .5 ? 0 : 255;
|
|
28911
|
-
for (let y = 0; y < height; y++) for (let dx = 0; dx < stripeWidth && x + dx < width; dx++) {
|
|
28912
|
-
const index = 4 * (y * width + x + dx);
|
|
28913
|
-
result[index] = color, result[index + 1] = color, result[index + 2] = color;
|
|
28914
|
-
}
|
|
28915
|
-
}
|
|
28916
|
-
const corruptionCount = Math.floor(20 * intensity);
|
|
28917
|
-
for (let i = 0; i < corruptionCount; i++) {
|
|
28918
|
-
const blockX = Math.floor(Math.random() * width),
|
|
28919
|
-
blockY = Math.floor(Math.random() * height),
|
|
28920
|
-
blockW = Math.floor(20 * Math.random()) + 5,
|
|
28921
|
-
blockH = Math.floor(10 * Math.random()) + 2;
|
|
28922
|
-
this.corruptBlock(result, width, height, blockX, blockY, blockW, blockH);
|
|
28923
|
-
}
|
|
28924
|
-
return new ImageData(result, width, height);
|
|
28925
|
-
}
|
|
28926
|
-
corruptBlock(data, width, height, x, y, w, h) {
|
|
28927
|
-
for (let dy = 0; dy < h && y + dy < height; dy++) for (let dx = 0; dx < w && x + dx < width; dx++) {
|
|
28928
|
-
const index = 4 * ((y + dy) * width + (x + dx));
|
|
28929
|
-
Math.random() < .7 && (data[index] = 255 * Math.random(), data[index + 1] = 255 * Math.random(), data[index + 2] = 255 * Math.random());
|
|
28930
|
-
}
|
|
28931
|
-
}
|
|
28932
|
-
}
|
|
28933
|
-
|
|
28934
|
-
class GaussianBlur extends AStageAnimate {
|
|
28935
|
-
constructor(from, to, duration, easing, params) {
|
|
28936
|
-
var _a, _b;
|
|
28937
|
-
super(from, to, duration, easing, params), this.blurConfig = {
|
|
28938
|
-
blurRadius: (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.blurRadius) || 8,
|
|
28939
|
-
useOptimizedBlur: void 0 === (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.useOptimizedBlur) || params.options.useOptimizedBlur
|
|
28940
|
-
};
|
|
28941
|
-
}
|
|
28942
|
-
applyCSSBlur(canvas, radius) {
|
|
28943
|
-
const c = vglobal.createCanvas({
|
|
28944
|
-
width: canvas.width,
|
|
28945
|
-
height: canvas.height,
|
|
28946
|
-
dpr: vglobal.devicePixelRatio
|
|
28947
|
-
}),
|
|
28948
|
-
ctx = c.getContext("2d");
|
|
28949
|
-
return ctx ? (ctx.filter = `blur(${radius}px)`, ctx.drawImage(canvas, 0, 0), ctx.filter = "none", c) : canvas;
|
|
28950
|
-
}
|
|
28951
|
-
applyDownsampleBlur(imageData, radius) {
|
|
28952
|
-
const {
|
|
28953
|
-
width: width,
|
|
28954
|
-
height: height
|
|
28955
|
-
} = imageData,
|
|
28956
|
-
downsample = Math.max(1, Math.floor(radius / 2)),
|
|
28957
|
-
smallWidth = Math.floor(width / downsample),
|
|
28958
|
-
smallHeight = Math.floor(height / downsample),
|
|
28959
|
-
tempCanvas = vglobal.createCanvas({
|
|
28960
|
-
width: smallWidth,
|
|
28961
|
-
height: smallHeight,
|
|
28962
|
-
dpr: 1
|
|
28963
|
-
}),
|
|
28964
|
-
tempCtx = tempCanvas.getContext("2d");
|
|
28965
|
-
if (!tempCtx) return imageData;
|
|
28966
|
-
const originalCanvas = vglobal.createCanvas({
|
|
28967
|
-
width: width,
|
|
28968
|
-
height: height,
|
|
28969
|
-
dpr: 1
|
|
28970
|
-
}),
|
|
28971
|
-
originalCtx = originalCanvas.getContext("2d");
|
|
28972
|
-
return originalCtx ? (originalCtx.putImageData(imageData, 0, 0), tempCtx.drawImage(originalCanvas, 0, 0, smallWidth, smallHeight), tempCtx.filter = `blur(${radius / downsample}px)`, tempCtx.drawImage(tempCanvas, 0, 0), tempCtx.filter = "none", originalCtx.clearRect(0, 0, width, height), originalCtx.drawImage(tempCanvas, 0, 0, width, height), originalCtx.getImageData(0, 0, width, height)) : imageData;
|
|
28973
|
-
}
|
|
28974
|
-
afterStageRender(stage, canvas) {
|
|
28975
|
-
if (this.blurConfig.blurRadius <= 0) return canvas;
|
|
28976
|
-
let result;
|
|
28977
|
-
if (this.blurConfig.useOptimizedBlur) result = this.applyCSSBlur(canvas, this.blurConfig.blurRadius);else {
|
|
28978
|
-
const c = vglobal.createCanvas({
|
|
28979
|
-
width: canvas.width,
|
|
28980
|
-
height: canvas.height,
|
|
28981
|
-
dpr: vglobal.devicePixelRatio
|
|
28982
|
-
}),
|
|
28983
|
-
ctx = c.getContext("2d");
|
|
28984
|
-
if (!ctx) return !1;
|
|
28985
|
-
ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.drawImage(canvas, 0, 0);
|
|
28986
|
-
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
|
|
28987
|
-
blurredImageData = this.applyDownsampleBlur(imageData, this.blurConfig.blurRadius);
|
|
28988
|
-
ctx.putImageData(blurredImageData, 0, 0), result = c;
|
|
28989
|
-
}
|
|
28990
|
-
const ctx = result.getContext("2d");
|
|
28991
|
-
return ctx && (ctx.globalCompositeOperation = "overlay", ctx.fillStyle = "rgba(255, 255, 255, 0.1)", ctx.fillRect(0, 0, result.width, result.height), ctx.globalCompositeOperation = "source-over"), result;
|
|
28992
|
-
}
|
|
28993
|
-
}
|
|
28994
|
-
|
|
28995
|
-
class Pixelation extends DisappearAnimateBase {
|
|
28996
|
-
constructor(from, to, duration, easing, params) {
|
|
28997
|
-
var _a, _b;
|
|
28998
|
-
super(from, to, duration, easing, params), this.pixelationConfig = {
|
|
28999
|
-
maxPixelSize: (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.maxPixelSize) || 20,
|
|
29000
|
-
method: (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.method) || "out"
|
|
29001
|
-
};
|
|
29002
|
-
}
|
|
29003
|
-
applyDownsamplePixelation(canvas, pixelSize) {
|
|
29004
|
-
if (pixelSize <= 1) return canvas;
|
|
29005
|
-
const {
|
|
29006
|
-
width: width,
|
|
29007
|
-
height: height
|
|
29008
|
-
} = canvas,
|
|
29009
|
-
smallWidth = Math.ceil(width / pixelSize),
|
|
29010
|
-
smallHeight = Math.ceil(height / pixelSize),
|
|
29011
|
-
smallCanvas = vglobal.createCanvas({
|
|
29012
|
-
width: smallWidth,
|
|
29013
|
-
height: smallHeight,
|
|
29014
|
-
dpr: 1
|
|
29015
|
-
}),
|
|
29016
|
-
smallCtx = smallCanvas.getContext("2d");
|
|
29017
|
-
if (!smallCtx) return canvas;
|
|
29018
|
-
const outputCanvas = vglobal.createCanvas({
|
|
29019
|
-
width: width,
|
|
29020
|
-
height: height,
|
|
29021
|
-
dpr: vglobal.devicePixelRatio
|
|
29022
|
-
}),
|
|
29023
|
-
outputCtx = outputCanvas.getContext("2d");
|
|
29024
|
-
return outputCtx ? (smallCtx.imageSmoothingEnabled = !1, outputCtx.imageSmoothingEnabled = !1, smallCtx.drawImage(canvas, 0, 0, smallWidth, smallHeight), outputCtx.drawImage(smallCanvas, 0, 0, width, height), outputCanvas) : canvas;
|
|
29025
|
-
}
|
|
29026
|
-
updateAnimationProgress() {
|
|
29027
|
-
if ("in" === this.pixelationConfig.method) {
|
|
29028
|
-
return this.pixelationConfig.maxPixelSize - this.currentAnimationRatio * (this.pixelationConfig.maxPixelSize - 1);
|
|
29029
|
-
}
|
|
29030
|
-
return 1 + this.currentAnimationRatio * (this.pixelationConfig.maxPixelSize - 1);
|
|
29031
|
-
}
|
|
29032
|
-
afterStageRender(stage, canvas) {
|
|
29033
|
-
const currentPixelSize = this.updateAnimationProgress();
|
|
29034
|
-
if (currentPixelSize <= 1) return canvas;
|
|
29035
|
-
return this.applyDownsamplePixelation(canvas, currentPixelSize);
|
|
29036
|
-
}
|
|
29037
|
-
}
|
|
29038
|
-
|
|
29039
27687
|
const registerCustomAnimate = () => {
|
|
29040
|
-
AnimateExecutor.registerBuiltInAnimate("increaseCount", IncreaseCount), AnimateExecutor.registerBuiltInAnimate("fromTo", FromTo), AnimateExecutor.registerBuiltInAnimate("scaleIn", ScaleIn), AnimateExecutor.registerBuiltInAnimate("scaleOut", ScaleOut), AnimateExecutor.registerBuiltInAnimate("growHeightIn", GrowHeightIn), AnimateExecutor.registerBuiltInAnimate("growHeightOut", GrowHeightOut), AnimateExecutor.registerBuiltInAnimate("growWidthIn", GrowWidthIn), AnimateExecutor.registerBuiltInAnimate("growWidthOut", GrowWidthOut), AnimateExecutor.registerBuiltInAnimate("growCenterIn", GrowCenterIn), AnimateExecutor.registerBuiltInAnimate("growCenterOut", GrowCenterOut), AnimateExecutor.registerBuiltInAnimate("clipIn", ClipIn), AnimateExecutor.registerBuiltInAnimate("clipOut", ClipOut), AnimateExecutor.registerBuiltInAnimate("fadeIn", FadeIn), AnimateExecutor.registerBuiltInAnimate("fadeOut", FadeOut), AnimateExecutor.registerBuiltInAnimate("growPointsIn", GrowPointsIn), AnimateExecutor.registerBuiltInAnimate("growPointsOut", GrowPointsOut), AnimateExecutor.registerBuiltInAnimate("growPointsXIn", GrowPointsXIn), AnimateExecutor.registerBuiltInAnimate("growPointsXOut", GrowPointsXOut), AnimateExecutor.registerBuiltInAnimate("growPointsYIn", GrowPointsYIn), AnimateExecutor.registerBuiltInAnimate("growPointsYOut", GrowPointsYOut), AnimateExecutor.registerBuiltInAnimate("growAngleIn", GrowAngleIn), AnimateExecutor.registerBuiltInAnimate("growAngleOut", GrowAngleOut), AnimateExecutor.registerBuiltInAnimate("growRadiusIn", GrowRadiusIn), AnimateExecutor.registerBuiltInAnimate("growRadiusOut", GrowRadiusOut), AnimateExecutor.registerBuiltInAnimate("moveIn", MoveIn), AnimateExecutor.registerBuiltInAnimate("moveOut", MoveOut), AnimateExecutor.registerBuiltInAnimate("rotateIn", RotateIn), AnimateExecutor.registerBuiltInAnimate("rotateOut", RotateOut), AnimateExecutor.registerBuiltInAnimate("update", Update), AnimateExecutor.registerBuiltInAnimate("state", State), AnimateExecutor.registerBuiltInAnimate("labelItemAppear", LabelItemAppear), AnimateExecutor.registerBuiltInAnimate("labelItemDisappear", LabelItemDisappear), AnimateExecutor.registerBuiltInAnimate("poptipAppear", PoptipAppear), AnimateExecutor.registerBuiltInAnimate("poptipDisappear", PoptipDisappear), AnimateExecutor.registerBuiltInAnimate("inputText", InputText), AnimateExecutor.registerBuiltInAnimate("inputRichText", InputRichText), AnimateExecutor.registerBuiltInAnimate("outputRichText", OutputRichText), AnimateExecutor.registerBuiltInAnimate("slideRichText", SlideRichText), AnimateExecutor.registerBuiltInAnimate("slideOutRichText", SlideOutRichText), AnimateExecutor.registerBuiltInAnimate("slideIn", SlideIn), AnimateExecutor.registerBuiltInAnimate("growIn", GrowIn), AnimateExecutor.registerBuiltInAnimate("spinIn", SpinIn), AnimateExecutor.registerBuiltInAnimate("moveScaleIn", MoveScaleIn), AnimateExecutor.registerBuiltInAnimate("moveRotateIn", MoveRotateIn), AnimateExecutor.registerBuiltInAnimate("strokeIn", StrokeIn), AnimateExecutor.registerBuiltInAnimate("slideOut", SlideOut), AnimateExecutor.registerBuiltInAnimate("growOut", GrowOut), AnimateExecutor.registerBuiltInAnimate("spinOut", SpinOut), AnimateExecutor.registerBuiltInAnimate("moveScaleOut", MoveScaleOut), AnimateExecutor.registerBuiltInAnimate("moveRotateOut", MoveRotateOut), AnimateExecutor.registerBuiltInAnimate("strokeOut", StrokeOut), AnimateExecutor.registerBuiltInAnimate("pulse", PulseAnimate), AnimateExecutor.registerBuiltInAnimate("MotionPath", MotionPath), AnimateExecutor.registerBuiltInAnimate("streamLight", StreamLight)
|
|
27688
|
+
AnimateExecutor.registerBuiltInAnimate("increaseCount", IncreaseCount), AnimateExecutor.registerBuiltInAnimate("fromTo", FromTo), AnimateExecutor.registerBuiltInAnimate("scaleIn", ScaleIn), AnimateExecutor.registerBuiltInAnimate("scaleOut", ScaleOut), AnimateExecutor.registerBuiltInAnimate("growHeightIn", GrowHeightIn), AnimateExecutor.registerBuiltInAnimate("growHeightOut", GrowHeightOut), AnimateExecutor.registerBuiltInAnimate("growWidthIn", GrowWidthIn), AnimateExecutor.registerBuiltInAnimate("growWidthOut", GrowWidthOut), AnimateExecutor.registerBuiltInAnimate("growCenterIn", GrowCenterIn), AnimateExecutor.registerBuiltInAnimate("growCenterOut", GrowCenterOut), AnimateExecutor.registerBuiltInAnimate("clipIn", ClipIn), AnimateExecutor.registerBuiltInAnimate("clipOut", ClipOut), AnimateExecutor.registerBuiltInAnimate("fadeIn", FadeIn), AnimateExecutor.registerBuiltInAnimate("fadeOut", FadeOut), AnimateExecutor.registerBuiltInAnimate("growPointsIn", GrowPointsIn), AnimateExecutor.registerBuiltInAnimate("growPointsOut", GrowPointsOut), AnimateExecutor.registerBuiltInAnimate("growPointsXIn", GrowPointsXIn), AnimateExecutor.registerBuiltInAnimate("growPointsXOut", GrowPointsXOut), AnimateExecutor.registerBuiltInAnimate("growPointsYIn", GrowPointsYIn), AnimateExecutor.registerBuiltInAnimate("growPointsYOut", GrowPointsYOut), AnimateExecutor.registerBuiltInAnimate("growAngleIn", GrowAngleIn), AnimateExecutor.registerBuiltInAnimate("growAngleOut", GrowAngleOut), AnimateExecutor.registerBuiltInAnimate("growRadiusIn", GrowRadiusIn), AnimateExecutor.registerBuiltInAnimate("growRadiusOut", GrowRadiusOut), AnimateExecutor.registerBuiltInAnimate("moveIn", MoveIn), AnimateExecutor.registerBuiltInAnimate("moveOut", MoveOut), AnimateExecutor.registerBuiltInAnimate("rotateIn", RotateIn), AnimateExecutor.registerBuiltInAnimate("rotateOut", RotateOut), AnimateExecutor.registerBuiltInAnimate("update", Update), AnimateExecutor.registerBuiltInAnimate("state", State), AnimateExecutor.registerBuiltInAnimate("labelItemAppear", LabelItemAppear), AnimateExecutor.registerBuiltInAnimate("labelItemDisappear", LabelItemDisappear), AnimateExecutor.registerBuiltInAnimate("poptipAppear", PoptipAppear), AnimateExecutor.registerBuiltInAnimate("poptipDisappear", PoptipDisappear), AnimateExecutor.registerBuiltInAnimate("inputText", InputText), AnimateExecutor.registerBuiltInAnimate("inputRichText", InputRichText), AnimateExecutor.registerBuiltInAnimate("outputRichText", OutputRichText), AnimateExecutor.registerBuiltInAnimate("slideRichText", SlideRichText), AnimateExecutor.registerBuiltInAnimate("slideOutRichText", SlideOutRichText), AnimateExecutor.registerBuiltInAnimate("slideIn", SlideIn), AnimateExecutor.registerBuiltInAnimate("growIn", GrowIn), AnimateExecutor.registerBuiltInAnimate("spinIn", SpinIn), AnimateExecutor.registerBuiltInAnimate("moveScaleIn", MoveScaleIn), AnimateExecutor.registerBuiltInAnimate("moveRotateIn", MoveRotateIn), AnimateExecutor.registerBuiltInAnimate("strokeIn", StrokeIn), AnimateExecutor.registerBuiltInAnimate("slideOut", SlideOut), AnimateExecutor.registerBuiltInAnimate("growOut", GrowOut), AnimateExecutor.registerBuiltInAnimate("spinOut", SpinOut), AnimateExecutor.registerBuiltInAnimate("moveScaleOut", MoveScaleOut), AnimateExecutor.registerBuiltInAnimate("moveRotateOut", MoveRotateOut), AnimateExecutor.registerBuiltInAnimate("strokeOut", StrokeOut), AnimateExecutor.registerBuiltInAnimate("pulse", PulseAnimate), AnimateExecutor.registerBuiltInAnimate("MotionPath", MotionPath), AnimateExecutor.registerBuiltInAnimate("streamLight", StreamLight);
|
|
29041
27689
|
};
|
|
29042
27690
|
|
|
29043
27691
|
class AxisEnter extends AComponentAnimate {
|
|
@@ -57088,7 +55736,7 @@
|
|
|
57088
55736
|
}
|
|
57089
55737
|
|
|
57090
55738
|
function getAxisConfigInPivotChart(col, row, layout) {
|
|
57091
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
55739
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
57092
55740
|
if (layout._table.isPivotChart()) if (layout.indicatorsAsCol) {
|
|
57093
55741
|
if (layout.hasTwoIndicatorAxes && row === layout.columnHeaderLevelCount - 1 && col >= layout.rowHeaderLevelCount && col < layout.colCount - layout.rightFrozenColCount) {
|
|
57094
55742
|
const axisRange = getRange("top", col, row + 1, col, layout.columnHeaderLevelCount - 1, col, row, 1, layout);
|
|
@@ -57127,7 +55775,10 @@
|
|
|
57127
55775
|
const info = layout.getIndicatorInfo(key);
|
|
57128
55776
|
info && (indicatorInfo = info);
|
|
57129
55777
|
});
|
|
57130
|
-
const axisRange = getRange("bottom", col, row - 1, col, row, col, row, 0, layout)
|
|
55778
|
+
const axisRange = getRange("bottom", col, row - 1, col, row, col, row, 0, layout),
|
|
55779
|
+
{
|
|
55780
|
+
chartType: chartType
|
|
55781
|
+
} = getAxisOption(col, row - 1, "bottom", layout);
|
|
57131
55782
|
if (!axisRange) return;
|
|
57132
55783
|
const chartCellStyle = layout._table._getCellStyle(col, row - 1),
|
|
57133
55784
|
padding = getQuadProps(getProp("padding", chartCellStyle, col, row - 1, layout._table)),
|
|
@@ -57140,12 +55791,21 @@
|
|
|
57140
55791
|
targetRange: targetRange,
|
|
57141
55792
|
theme: theme
|
|
57142
55793
|
} = axisRange;
|
|
57143
|
-
|
|
55794
|
+
isNumber$4(null == axisOption ? void 0 : axisOption.min) && (range.min = axisOption.min, range.min > 0 && (axisOption.zero = !1)), isNumber$4(null == axisOption ? void 0 : axisOption.max) && (range.max = axisOption.max, range.max < 0 && (axisOption.zero = !1));
|
|
55795
|
+
let domain = [];
|
|
55796
|
+
if ("heatmap" === chartType) {
|
|
55797
|
+
const colDimensionKey = layout.getDimensionKeyInChartSpec(col, layout.rowCount - layout.bottomFrozenRowCount - 1, "xField"),
|
|
55798
|
+
data = null !== (_a = layout.dataset.collectedValues[colDimensionKey]) && void 0 !== _a ? _a : [],
|
|
55799
|
+
colPath = layout.getColKeysPath(col, row);
|
|
55800
|
+
domain = null !== (_b = null == data ? void 0 : data[null != colPath ? colPath : ""]) && void 0 !== _b ? _b : [];
|
|
55801
|
+
}
|
|
55802
|
+
return merge$1({
|
|
57144
55803
|
title: {
|
|
57145
55804
|
visible: !0,
|
|
57146
55805
|
text: null == indicatorInfo ? void 0 : indicatorInfo.title
|
|
57147
55806
|
},
|
|
57148
|
-
range: range
|
|
55807
|
+
range: range,
|
|
55808
|
+
domain: "linear" === (null == axisOption ? void 0 : axisOption.type) ? void 0 : Array.from(domain)
|
|
57149
55809
|
}, axisOption, {
|
|
57150
55810
|
orient: "bottom",
|
|
57151
55811
|
type: (null == axisOption ? void 0 : axisOption.type) || "linear",
|
|
@@ -57163,9 +55823,9 @@
|
|
|
57163
55823
|
if (col === layout.rowHeaderLevelCount - 1 && row >= layout.columnHeaderLevelCount && row < layout.rowCount - layout.bottomFrozenRowCount) {
|
|
57164
55824
|
let rowDimensionKey = layout.getDimensionKeyInChartSpec(layout.rowHeaderLevelCount, row);
|
|
57165
55825
|
isArray$7(rowDimensionKey) && (rowDimensionKey = rowDimensionKey[0]);
|
|
57166
|
-
const data = null !== (
|
|
55826
|
+
const data = null !== (_c = layout.dataset.collectedValues[rowDimensionKey]) && void 0 !== _c ? _c : [],
|
|
57167
55827
|
rowPath = layout.getRowKeysPath(col, row),
|
|
57168
|
-
domain = null !== (
|
|
55828
|
+
domain = null !== (_d = data[null != rowPath ? rowPath : ""]) && void 0 !== _d ? _d : [],
|
|
57169
55829
|
{
|
|
57170
55830
|
axisOption: axisOption,
|
|
57171
55831
|
theme: theme,
|
|
@@ -57183,9 +55843,9 @@
|
|
|
57183
55843
|
}
|
|
57184
55844
|
}, axisOption, {
|
|
57185
55845
|
orient: "left",
|
|
57186
|
-
type: null !== (
|
|
55846
|
+
type: null !== (_e = null == axisOption ? void 0 : axisOption.type) && void 0 !== _e ? _e : "band",
|
|
57187
55847
|
__vtableChartTheme: theme,
|
|
57188
|
-
inverse: transformInverse(axisOption, "horizontal" === (null !== (
|
|
55848
|
+
inverse: transformInverse(axisOption, "horizontal" === (null !== (_f = null == spec ? void 0 : spec.direction) && void 0 !== _f ? _f : "scatter" === chartType ? "vertical" : "horizontal")),
|
|
57189
55849
|
__vtablePadding: padding
|
|
57190
55850
|
});
|
|
57191
55851
|
}
|
|
@@ -57197,7 +55857,10 @@
|
|
|
57197
55857
|
const info = layout.getIndicatorInfo(key);
|
|
57198
55858
|
info && (indicatorInfo = info);
|
|
57199
55859
|
});
|
|
57200
|
-
const axisRange = getRange("left", col + 1, row, col, row, col, row, 0, layout)
|
|
55860
|
+
const axisRange = getRange("left", col + 1, row, col, row, col, row, 0, layout),
|
|
55861
|
+
{
|
|
55862
|
+
chartType: chartType
|
|
55863
|
+
} = getAxisOption(col + 1, row, "left", layout);
|
|
57201
55864
|
if (!axisRange) return;
|
|
57202
55865
|
const chartCellStyle = layout._table._getCellStyle(col + 1, row),
|
|
57203
55866
|
padding = getQuadProps(getProp("padding", chartCellStyle, col + 1, row, layout._table)),
|
|
@@ -57210,13 +55873,22 @@
|
|
|
57210
55873
|
targetRange: targetRange,
|
|
57211
55874
|
theme: theme
|
|
57212
55875
|
} = axisRange;
|
|
57213
|
-
|
|
55876
|
+
isNumber$4(null == axisOption ? void 0 : axisOption.min) && (range.min = axisOption.min, range.min > 0 && (axisOption.zero = !1)), isNumber$4(null == axisOption ? void 0 : axisOption.max) && (range.max = axisOption.max, range.max < 0 && (axisOption.zero = !1));
|
|
55877
|
+
let domain = [];
|
|
55878
|
+
if ("heatmap" === chartType) {
|
|
55879
|
+
const rowDimensionKey = layout.getDimensionKeyInChartSpec(layout.rowHeaderLevelCount, row, "yField"),
|
|
55880
|
+
data = null !== (_g = layout.dataset.collectedValues[rowDimensionKey]) && void 0 !== _g ? _g : [],
|
|
55881
|
+
rowPath = layout.getRowKeysPath(col, row);
|
|
55882
|
+
domain = null !== (_h = null == data ? void 0 : data[null != rowPath ? rowPath : ""]) && void 0 !== _h ? _h : [];
|
|
55883
|
+
}
|
|
55884
|
+
return merge$1({
|
|
57214
55885
|
title: {
|
|
57215
55886
|
visible: !0,
|
|
57216
55887
|
text: null == indicatorInfo ? void 0 : indicatorInfo.title,
|
|
57217
55888
|
autoRotate: !0
|
|
57218
55889
|
},
|
|
57219
|
-
range: range
|
|
55890
|
+
range: range,
|
|
55891
|
+
domain: "linear" === (null == axisOption ? void 0 : axisOption.type) ? void 0 : Array.from(domain)
|
|
57220
55892
|
}, axisOption, {
|
|
57221
55893
|
orient: "left",
|
|
57222
55894
|
type: (null == axisOption ? void 0 : axisOption.type) || "linear",
|
|
@@ -57232,7 +55904,10 @@
|
|
|
57232
55904
|
});
|
|
57233
55905
|
}
|
|
57234
55906
|
if (col === layout.colCount - layout.rightFrozenColCount && row >= layout.columnHeaderLevelCount && row < layout.rowCount - layout.bottomFrozenRowCount) {
|
|
57235
|
-
const axisRange = getRange("right", col - 1, row, layout.rowHeaderLevelCount - 1, row, col, row, 1, layout)
|
|
55907
|
+
const axisRange = getRange("right", col - 1, row, layout.rowHeaderLevelCount - 1, row, col, row, 1, layout),
|
|
55908
|
+
{
|
|
55909
|
+
chartType: chartType
|
|
55910
|
+
} = getAxisOption(col - 1, row, "right", layout);
|
|
57236
55911
|
if (!axisRange) return;
|
|
57237
55912
|
const chartCellStyle = layout._table._getCellStyle(col - 1, row),
|
|
57238
55913
|
padding = getQuadProps(getProp("padding", chartCellStyle, col - 1, row, layout._table)),
|
|
@@ -57245,11 +55920,20 @@
|
|
|
57245
55920
|
targetRange: targetRange,
|
|
57246
55921
|
theme: theme
|
|
57247
55922
|
} = axisRange;
|
|
57248
|
-
|
|
55923
|
+
isNumber$4(null == axisOption ? void 0 : axisOption.min) && (range.min = axisOption.min, range.min > 0 && (axisOption.zero = !1)), isNumber$4(null == axisOption ? void 0 : axisOption.max) && (range.max = axisOption.max, range.max < 0 && (axisOption.zero = !1));
|
|
55924
|
+
let domain = [];
|
|
55925
|
+
if ("heatmap" === chartType) {
|
|
55926
|
+
const rowDimensionKey = layout.getDimensionKeyInChartSpec(layout.colCount - layout.rightFrozenColCount - 1, row, "yField"),
|
|
55927
|
+
data = null !== (_j = layout.dataset.collectedValues[rowDimensionKey]) && void 0 !== _j ? _j : [],
|
|
55928
|
+
rowPath = layout.getRowKeysPath(col, row);
|
|
55929
|
+
domain = null !== (_k = null == data ? void 0 : data[null != rowPath ? rowPath : ""]) && void 0 !== _k ? _k : [];
|
|
55930
|
+
}
|
|
55931
|
+
return merge$1({
|
|
57249
55932
|
range: range,
|
|
57250
55933
|
title: {
|
|
57251
55934
|
autoRotate: !0
|
|
57252
|
-
}
|
|
55935
|
+
},
|
|
55936
|
+
domain: "linear" === (null == axisOption ? void 0 : axisOption.type) ? void 0 : Array.from(domain)
|
|
57253
55937
|
}, axisOption, {
|
|
57254
55938
|
orient: "right",
|
|
57255
55939
|
type: (null == axisOption ? void 0 : axisOption.type) || "linear",
|
|
@@ -57267,9 +55951,9 @@
|
|
|
57267
55951
|
if (row === layout.rowCount - layout.bottomFrozenRowCount && col >= layout.rowHeaderLevelCount && col < layout.colCount - layout.rightFrozenColCount) {
|
|
57268
55952
|
let columnDimensionKey = layout.getDimensionKeyInChartSpec(col, layout.columnHeaderLevelCount);
|
|
57269
55953
|
isArray$7(columnDimensionKey) && (columnDimensionKey = columnDimensionKey[0]);
|
|
57270
|
-
const data = null !== (
|
|
55954
|
+
const data = null !== (_l = layout.dataset.collectedValues[columnDimensionKey]) && void 0 !== _l ? _l : [],
|
|
57271
55955
|
colPath = layout.getColKeysPath(col, row),
|
|
57272
|
-
domain = null !== (
|
|
55956
|
+
domain = null !== (_m = null == data ? void 0 : data[null != colPath ? colPath : ""]) && void 0 !== _m ? _m : [],
|
|
57273
55957
|
{
|
|
57274
55958
|
axisOption: axisOption,
|
|
57275
55959
|
isPercent: isPercent,
|
|
@@ -57284,7 +55968,7 @@
|
|
|
57284
55968
|
range: "linear" === (null == axisOption ? void 0 : axisOption.type) ? domain : void 0
|
|
57285
55969
|
}, axisOption, {
|
|
57286
55970
|
orient: "bottom",
|
|
57287
|
-
type: null !== (
|
|
55971
|
+
type: null !== (_o = null == axisOption ? void 0 : axisOption.type) && void 0 !== _o ? _o : "band",
|
|
57288
55972
|
__vtableChartTheme: theme,
|
|
57289
55973
|
__vtablePadding: padding
|
|
57290
55974
|
});
|
|
@@ -57791,7 +56475,7 @@
|
|
|
57791
56475
|
}
|
|
57792
56476
|
constructor(container, options = {}) {
|
|
57793
56477
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
|
57794
|
-
if (super(), this.showFrozenIcon = !0, this.version = "1.19.10-alpha.
|
|
56478
|
+
if (super(), this.showFrozenIcon = !0, this.version = "1.19.10-alpha.1", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), "node" === Env.mode ? (options = container, container = null) : container instanceof HTMLElement || (options = container, container = container.container ? container.container : null), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
|
|
57795
56479
|
this.pluginManager = new PluginManager$1(this, options), this.fireListeners(TABLE_EVENT_TYPE.BEFORE_INIT, {
|
|
57796
56480
|
options: options,
|
|
57797
56481
|
container: container
|
|
@@ -74449,7 +73133,7 @@
|
|
|
74449
73133
|
PluginManager: PluginManager
|
|
74450
73134
|
});
|
|
74451
73135
|
|
|
74452
|
-
const version = "1.19.10-alpha.
|
|
73136
|
+
const version = "1.19.10-alpha.1";
|
|
74453
73137
|
|
|
74454
73138
|
exports.Gantt = Gantt;
|
|
74455
73139
|
exports.TYPES = index$4;
|