This commit is contained in:
Akko
2025-08-04 18:57:35 +02:00
parent 8cf6e78a79
commit 9495868c2e
5030 changed files with 518594 additions and 17609 deletions

View File

@@ -0,0 +1,33 @@
import { Matrix } from '../../../../maths/matrix/Matrix';
import { Texture } from '../../../../rendering/renderers/shared/texture/Texture';
import type { ColorSource } from '../../../../color/Color';
export type GradientType = 'linear' | 'radial';
export interface LinearGradientFillStyle {
x0: number;
y0: number;
x1: number;
y1: number;
colors: number[];
stops: number[];
}
export declare class FillGradient implements CanvasGradient {
static defaultTextureSize: number;
/** unique id for this fill gradient */
readonly uid: number;
readonly type: GradientType;
x0: number;
y0: number;
x1: number;
y1: number;
texture: Texture;
transform: Matrix;
gradientStops: Array<{
offset: number;
color: string;
}>;
private _styleKey;
constructor(x0: number, y0: number, x1: number, y1: number);
addColorStop(offset: number, color: ColorSource): this;
buildLinearGradient(): void;
get styleKey(): string;
}

View File

@@ -0,0 +1,77 @@
'use strict';
var Color = require('../../../../color/Color.js');
var adapter = require('../../../../environment/adapter.js');
var Matrix = require('../../../../maths/matrix/Matrix.js');
var ImageSource = require('../../../../rendering/renderers/shared/texture/sources/ImageSource.js');
var Texture = require('../../../../rendering/renderers/shared/texture/Texture.js');
var uid = require('../../../../utils/data/uid.js');
"use strict";
const _FillGradient = class _FillGradient {
constructor(x0, y0, x1, y1) {
/** unique id for this fill gradient */
this.uid = uid.uid("fillGradient");
this.type = "linear";
this.gradientStops = [];
this._styleKey = null;
this.x0 = x0;
this.y0 = y0;
this.x1 = x1;
this.y1 = y1;
}
addColorStop(offset, color) {
this.gradientStops.push({ offset, color: Color.Color.shared.setValue(color).toHexa() });
this._styleKey = null;
return this;
}
// TODO move to the system!
buildLinearGradient() {
const defaultSize = _FillGradient.defaultTextureSize;
const { gradientStops } = this;
const canvas = adapter.DOMAdapter.get().createCanvas();
canvas.width = defaultSize;
canvas.height = defaultSize;
const ctx = canvas.getContext("2d");
const gradient = ctx.createLinearGradient(0, 0, _FillGradient.defaultTextureSize, 1);
for (let i = 0; i < gradientStops.length; i++) {
const stop = gradientStops[i];
gradient.addColorStop(stop.offset, stop.color);
}
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, defaultSize, defaultSize);
this.texture = new Texture.Texture({
source: new ImageSource.ImageSource({
resource: canvas,
addressModeU: "clamp-to-edge",
addressModeV: "repeat"
})
});
const { x0, y0, x1, y1 } = this;
const m = new Matrix.Matrix();
const dx = x1 - x0;
const dy = y1 - y0;
const dist = Math.sqrt(dx * dx + dy * dy);
const angle = Math.atan2(dy, dx);
m.translate(-x0, -y0);
m.scale(1 / defaultSize, 1 / defaultSize);
m.rotate(-angle);
m.scale(256 / dist, 1);
this.transform = m;
this._styleKey = null;
}
get styleKey() {
if (this._styleKey) {
return this._styleKey;
}
const stops = this.gradientStops.map((stop) => `${stop.offset}-${stop.color}`).join("-");
const texture = this.texture.uid;
const transform = this.transform.toArray().join("-");
return `fill-gradient-${this.uid}-${stops}-${texture}-${transform}-${this.x0}-${this.y0}-${this.x1}-${this.y1}`;
}
};
_FillGradient.defaultTextureSize = 256;
let FillGradient = _FillGradient;
exports.FillGradient = FillGradient;
//# sourceMappingURL=FillGradient.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,75 @@
import { Color } from '../../../../color/Color.mjs';
import { DOMAdapter } from '../../../../environment/adapter.mjs';
import { Matrix } from '../../../../maths/matrix/Matrix.mjs';
import { ImageSource } from '../../../../rendering/renderers/shared/texture/sources/ImageSource.mjs';
import { Texture } from '../../../../rendering/renderers/shared/texture/Texture.mjs';
import { uid } from '../../../../utils/data/uid.mjs';
"use strict";
const _FillGradient = class _FillGradient {
constructor(x0, y0, x1, y1) {
/** unique id for this fill gradient */
this.uid = uid("fillGradient");
this.type = "linear";
this.gradientStops = [];
this._styleKey = null;
this.x0 = x0;
this.y0 = y0;
this.x1 = x1;
this.y1 = y1;
}
addColorStop(offset, color) {
this.gradientStops.push({ offset, color: Color.shared.setValue(color).toHexa() });
this._styleKey = null;
return this;
}
// TODO move to the system!
buildLinearGradient() {
const defaultSize = _FillGradient.defaultTextureSize;
const { gradientStops } = this;
const canvas = DOMAdapter.get().createCanvas();
canvas.width = defaultSize;
canvas.height = defaultSize;
const ctx = canvas.getContext("2d");
const gradient = ctx.createLinearGradient(0, 0, _FillGradient.defaultTextureSize, 1);
for (let i = 0; i < gradientStops.length; i++) {
const stop = gradientStops[i];
gradient.addColorStop(stop.offset, stop.color);
}
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, defaultSize, defaultSize);
this.texture = new Texture({
source: new ImageSource({
resource: canvas,
addressModeU: "clamp-to-edge",
addressModeV: "repeat"
})
});
const { x0, y0, x1, y1 } = this;
const m = new Matrix();
const dx = x1 - x0;
const dy = y1 - y0;
const dist = Math.sqrt(dx * dx + dy * dy);
const angle = Math.atan2(dy, dx);
m.translate(-x0, -y0);
m.scale(1 / defaultSize, 1 / defaultSize);
m.rotate(-angle);
m.scale(256 / dist, 1);
this.transform = m;
this._styleKey = null;
}
get styleKey() {
if (this._styleKey) {
return this._styleKey;
}
const stops = this.gradientStops.map((stop) => `${stop.offset}-${stop.color}`).join("-");
const texture = this.texture.uid;
const transform = this.transform.toArray().join("-");
return `fill-gradient-${this.uid}-${stops}-${texture}-${transform}-${this.x0}-${this.y0}-${this.x1}-${this.y1}`;
}
};
_FillGradient.defaultTextureSize = 256;
let FillGradient = _FillGradient;
export { FillGradient };
//# sourceMappingURL=FillGradient.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,13 @@
import { Matrix } from '../../../../maths/matrix/Matrix';
import type { Texture } from '../../../../rendering/renderers/shared/texture/Texture';
export type PatternRepetition = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
export declare class FillPattern implements CanvasPattern {
/** unique id for this fill pattern */
readonly uid: number;
texture: Texture;
transform: Matrix;
private _styleKey;
constructor(texture: Texture, repetition?: PatternRepetition);
setTransform(transform?: Matrix): void;
get styleKey(): string;
}

View File

@@ -0,0 +1,60 @@
'use strict';
var Matrix = require('../../../../maths/matrix/Matrix.js');
var uid = require('../../../../utils/data/uid.js');
"use strict";
const repetitionMap = {
repeat: {
addressModeU: "repeat",
addressModeV: "repeat"
},
"repeat-x": {
addressModeU: "repeat",
addressModeV: "clamp-to-edge"
},
"repeat-y": {
addressModeU: "clamp-to-edge",
addressModeV: "repeat"
},
"no-repeat": {
addressModeU: "clamp-to-edge",
addressModeV: "clamp-to-edge"
}
};
class FillPattern {
constructor(texture, repetition) {
/** unique id for this fill pattern */
this.uid = uid.uid("fillPattern");
this.transform = new Matrix.Matrix();
this._styleKey = null;
this.texture = texture;
this.transform.scale(
1 / texture.frame.width,
1 / texture.frame.height
);
if (repetition) {
texture.source.style.addressModeU = repetitionMap[repetition].addressModeU;
texture.source.style.addressModeV = repetitionMap[repetition].addressModeV;
}
}
setTransform(transform) {
const texture = this.texture;
this.transform.copyFrom(transform);
this.transform.invert();
this.transform.scale(
1 / texture.frame.width,
1 / texture.frame.height
);
this._styleKey = null;
}
get styleKey() {
if (this._styleKey)
return this._styleKey;
this._styleKey = `fill-pattern-${this.uid}-${this.texture.uid}-${this.transform.toArray().join("-")}`;
return this._styleKey;
}
}
exports.FillPattern = FillPattern;
//# sourceMappingURL=FillPattern.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"FillPattern.js","sources":["../../../../../src/scene/graphics/shared/fill/FillPattern.ts"],"sourcesContent":["import { Matrix } from '../../../../maths/matrix/Matrix';\nimport { uid } from '../../../../utils/data/uid';\n\nimport type { WRAP_MODE } from '../../../../rendering/renderers/shared/texture/const';\nimport type { Texture } from '../../../../rendering/renderers/shared/texture/Texture';\n\nexport type PatternRepetition = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';\n\nconst repetitionMap = {\n repeat: {\n addressModeU: 'repeat',\n addressModeV: 'repeat',\n },\n 'repeat-x': {\n addressModeU: 'repeat',\n addressModeV: 'clamp-to-edge',\n },\n 'repeat-y': {\n addressModeU: 'clamp-to-edge',\n addressModeV: 'repeat',\n },\n 'no-repeat': {\n addressModeU: 'clamp-to-edge',\n addressModeV: 'clamp-to-edge',\n },\n};\n\nexport class FillPattern implements CanvasPattern\n{\n /** unique id for this fill pattern */\n public readonly uid: number = uid('fillPattern');\n public texture: Texture;\n public transform = new Matrix();\n\n private _styleKey: string | null = null;\n\n constructor(texture: Texture, repetition?: PatternRepetition)\n {\n this.texture = texture;\n\n this.transform.scale(\n 1 / texture.frame.width,\n 1 / texture.frame.height\n );\n\n if (repetition)\n {\n texture.source.style.addressModeU = repetitionMap[repetition].addressModeU as WRAP_MODE;\n texture.source.style.addressModeV = repetitionMap[repetition].addressModeV as WRAP_MODE;\n }\n }\n\n public setTransform(transform?: Matrix): void\n {\n const texture = this.texture;\n\n this.transform.copyFrom(transform);\n this.transform.invert();\n // transform.scale\n this.transform.scale(\n 1 / texture.frame.width,\n 1 / texture.frame.height\n );\n\n this._styleKey = null;\n }\n\n public get styleKey(): string\n {\n if (this._styleKey) return this._styleKey;\n\n this._styleKey = `fill-pattern-${this.uid}-${this.texture.uid}-${this.transform.toArray().join('-')}`;\n\n return this._styleKey;\n }\n}\n"],"names":["uid","Matrix"],"mappings":";;;;;;AAQA,MAAM,aAAgB,GAAA;AAAA,EAClB,MAAQ,EAAA;AAAA,IACJ,YAAc,EAAA,QAAA;AAAA,IACd,YAAc,EAAA,QAAA;AAAA,GAClB;AAAA,EACA,UAAY,EAAA;AAAA,IACR,YAAc,EAAA,QAAA;AAAA,IACd,YAAc,EAAA,eAAA;AAAA,GAClB;AAAA,EACA,UAAY,EAAA;AAAA,IACR,YAAc,EAAA,eAAA;AAAA,IACd,YAAc,EAAA,QAAA;AAAA,GAClB;AAAA,EACA,WAAa,EAAA;AAAA,IACT,YAAc,EAAA,eAAA;AAAA,IACd,YAAc,EAAA,eAAA;AAAA,GAClB;AACJ,CAAA,CAAA;AAEO,MAAM,WACb,CAAA;AAAA,EAQI,WAAA,CAAY,SAAkB,UAC9B,EAAA;AAPA;AAAA,IAAgB,IAAA,CAAA,GAAA,GAAcA,QAAI,aAAa,CAAA,CAAA;AAE/C,IAAO,IAAA,CAAA,SAAA,GAAY,IAAIC,aAAO,EAAA,CAAA;AAE9B,IAAA,IAAA,CAAQ,SAA2B,GAAA,IAAA,CAAA;AAI/B,IAAA,IAAA,CAAK,OAAU,GAAA,OAAA,CAAA;AAEf,IAAA,IAAA,CAAK,SAAU,CAAA,KAAA;AAAA,MACX,CAAA,GAAI,QAAQ,KAAM,CAAA,KAAA;AAAA,MAClB,CAAA,GAAI,QAAQ,KAAM,CAAA,MAAA;AAAA,KACtB,CAAA;AAEA,IAAA,IAAI,UACJ,EAAA;AACI,MAAA,OAAA,CAAQ,MAAO,CAAA,KAAA,CAAM,YAAe,GAAA,aAAA,CAAc,UAAU,CAAE,CAAA,YAAA,CAAA;AAC9D,MAAA,OAAA,CAAQ,MAAO,CAAA,KAAA,CAAM,YAAe,GAAA,aAAA,CAAc,UAAU,CAAE,CAAA,YAAA,CAAA;AAAA,KAClE;AAAA,GACJ;AAAA,EAEO,aAAa,SACpB,EAAA;AACI,IAAA,MAAM,UAAU,IAAK,CAAA,OAAA,CAAA;AAErB,IAAK,IAAA,CAAA,SAAA,CAAU,SAAS,SAAS,CAAA,CAAA;AACjC,IAAA,IAAA,CAAK,UAAU,MAAO,EAAA,CAAA;AAEtB,IAAA,IAAA,CAAK,SAAU,CAAA,KAAA;AAAA,MACX,CAAA,GAAI,QAAQ,KAAM,CAAA,KAAA;AAAA,MAClB,CAAA,GAAI,QAAQ,KAAM,CAAA,MAAA;AAAA,KACtB,CAAA;AAEA,IAAA,IAAA,CAAK,SAAY,GAAA,IAAA,CAAA;AAAA,GACrB;AAAA,EAEA,IAAW,QACX,GAAA;AACI,IAAA,IAAI,IAAK,CAAA,SAAA;AAAW,MAAA,OAAO,IAAK,CAAA,SAAA,CAAA;AAEhC,IAAA,IAAA,CAAK,SAAY,GAAA,CAAA,aAAA,EAAgB,IAAK,CAAA,GAAG,IAAI,IAAK,CAAA,OAAA,CAAQ,GAAG,CAAA,CAAA,EAAI,KAAK,SAAU,CAAA,OAAA,EAAU,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA,CAAA;AAEnG,IAAA,OAAO,IAAK,CAAA,SAAA,CAAA;AAAA,GAChB;AACJ;;;;"}

View File

@@ -0,0 +1,58 @@
import { Matrix } from '../../../../maths/matrix/Matrix.mjs';
import { uid } from '../../../../utils/data/uid.mjs';
"use strict";
const repetitionMap = {
repeat: {
addressModeU: "repeat",
addressModeV: "repeat"
},
"repeat-x": {
addressModeU: "repeat",
addressModeV: "clamp-to-edge"
},
"repeat-y": {
addressModeU: "clamp-to-edge",
addressModeV: "repeat"
},
"no-repeat": {
addressModeU: "clamp-to-edge",
addressModeV: "clamp-to-edge"
}
};
class FillPattern {
constructor(texture, repetition) {
/** unique id for this fill pattern */
this.uid = uid("fillPattern");
this.transform = new Matrix();
this._styleKey = null;
this.texture = texture;
this.transform.scale(
1 / texture.frame.width,
1 / texture.frame.height
);
if (repetition) {
texture.source.style.addressModeU = repetitionMap[repetition].addressModeU;
texture.source.style.addressModeV = repetitionMap[repetition].addressModeV;
}
}
setTransform(transform) {
const texture = this.texture;
this.transform.copyFrom(transform);
this.transform.invert();
this.transform.scale(
1 / texture.frame.width,
1 / texture.frame.height
);
this._styleKey = null;
}
get styleKey() {
if (this._styleKey)
return this._styleKey;
this._styleKey = `fill-pattern-${this.uid}-${this.texture.uid}-${this.transform.toArray().join("-")}`;
return this._styleKey;
}
}
export { FillPattern };
//# sourceMappingURL=FillPattern.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"FillPattern.mjs","sources":["../../../../../src/scene/graphics/shared/fill/FillPattern.ts"],"sourcesContent":["import { Matrix } from '../../../../maths/matrix/Matrix';\nimport { uid } from '../../../../utils/data/uid';\n\nimport type { WRAP_MODE } from '../../../../rendering/renderers/shared/texture/const';\nimport type { Texture } from '../../../../rendering/renderers/shared/texture/Texture';\n\nexport type PatternRepetition = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';\n\nconst repetitionMap = {\n repeat: {\n addressModeU: 'repeat',\n addressModeV: 'repeat',\n },\n 'repeat-x': {\n addressModeU: 'repeat',\n addressModeV: 'clamp-to-edge',\n },\n 'repeat-y': {\n addressModeU: 'clamp-to-edge',\n addressModeV: 'repeat',\n },\n 'no-repeat': {\n addressModeU: 'clamp-to-edge',\n addressModeV: 'clamp-to-edge',\n },\n};\n\nexport class FillPattern implements CanvasPattern\n{\n /** unique id for this fill pattern */\n public readonly uid: number = uid('fillPattern');\n public texture: Texture;\n public transform = new Matrix();\n\n private _styleKey: string | null = null;\n\n constructor(texture: Texture, repetition?: PatternRepetition)\n {\n this.texture = texture;\n\n this.transform.scale(\n 1 / texture.frame.width,\n 1 / texture.frame.height\n );\n\n if (repetition)\n {\n texture.source.style.addressModeU = repetitionMap[repetition].addressModeU as WRAP_MODE;\n texture.source.style.addressModeV = repetitionMap[repetition].addressModeV as WRAP_MODE;\n }\n }\n\n public setTransform(transform?: Matrix): void\n {\n const texture = this.texture;\n\n this.transform.copyFrom(transform);\n this.transform.invert();\n // transform.scale\n this.transform.scale(\n 1 / texture.frame.width,\n 1 / texture.frame.height\n );\n\n this._styleKey = null;\n }\n\n public get styleKey(): string\n {\n if (this._styleKey) return this._styleKey;\n\n this._styleKey = `fill-pattern-${this.uid}-${this.texture.uid}-${this.transform.toArray().join('-')}`;\n\n return this._styleKey;\n }\n}\n"],"names":[],"mappings":";;;;AAQA,MAAM,aAAgB,GAAA;AAAA,EAClB,MAAQ,EAAA;AAAA,IACJ,YAAc,EAAA,QAAA;AAAA,IACd,YAAc,EAAA,QAAA;AAAA,GAClB;AAAA,EACA,UAAY,EAAA;AAAA,IACR,YAAc,EAAA,QAAA;AAAA,IACd,YAAc,EAAA,eAAA;AAAA,GAClB;AAAA,EACA,UAAY,EAAA;AAAA,IACR,YAAc,EAAA,eAAA;AAAA,IACd,YAAc,EAAA,QAAA;AAAA,GAClB;AAAA,EACA,WAAa,EAAA;AAAA,IACT,YAAc,EAAA,eAAA;AAAA,IACd,YAAc,EAAA,eAAA;AAAA,GAClB;AACJ,CAAA,CAAA;AAEO,MAAM,WACb,CAAA;AAAA,EAQI,WAAA,CAAY,SAAkB,UAC9B,EAAA;AAPA;AAAA,IAAgB,IAAA,CAAA,GAAA,GAAc,IAAI,aAAa,CAAA,CAAA;AAE/C,IAAO,IAAA,CAAA,SAAA,GAAY,IAAI,MAAO,EAAA,CAAA;AAE9B,IAAA,IAAA,CAAQ,SAA2B,GAAA,IAAA,CAAA;AAI/B,IAAA,IAAA,CAAK,OAAU,GAAA,OAAA,CAAA;AAEf,IAAA,IAAA,CAAK,SAAU,CAAA,KAAA;AAAA,MACX,CAAA,GAAI,QAAQ,KAAM,CAAA,KAAA;AAAA,MAClB,CAAA,GAAI,QAAQ,KAAM,CAAA,MAAA;AAAA,KACtB,CAAA;AAEA,IAAA,IAAI,UACJ,EAAA;AACI,MAAA,OAAA,CAAQ,MAAO,CAAA,KAAA,CAAM,YAAe,GAAA,aAAA,CAAc,UAAU,CAAE,CAAA,YAAA,CAAA;AAC9D,MAAA,OAAA,CAAQ,MAAO,CAAA,KAAA,CAAM,YAAe,GAAA,aAAA,CAAc,UAAU,CAAE,CAAA,YAAA,CAAA;AAAA,KAClE;AAAA,GACJ;AAAA,EAEO,aAAa,SACpB,EAAA;AACI,IAAA,MAAM,UAAU,IAAK,CAAA,OAAA,CAAA;AAErB,IAAK,IAAA,CAAA,SAAA,CAAU,SAAS,SAAS,CAAA,CAAA;AACjC,IAAA,IAAA,CAAK,UAAU,MAAO,EAAA,CAAA;AAEtB,IAAA,IAAA,CAAK,SAAU,CAAA,KAAA;AAAA,MACX,CAAA,GAAI,QAAQ,KAAM,CAAA,KAAA;AAAA,MAClB,CAAA,GAAI,QAAQ,KAAM,CAAA,MAAA;AAAA,KACtB,CAAA;AAEA,IAAA,IAAA,CAAK,SAAY,GAAA,IAAA,CAAA;AAAA,GACrB;AAAA,EAEA,IAAW,QACX,GAAA;AACI,IAAA,IAAI,IAAK,CAAA,SAAA;AAAW,MAAA,OAAO,IAAK,CAAA,SAAA,CAAA;AAEhC,IAAA,IAAA,CAAK,SAAY,GAAA,CAAA,aAAA,EAAgB,IAAK,CAAA,GAAG,IAAI,IAAK,CAAA,OAAA,CAAQ,GAAG,CAAA,CAAA,EAAI,KAAK,SAAU,CAAA,OAAA,EAAU,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA,CAAA;AAEnG,IAAA,OAAO,IAAK,CAAA,SAAA,CAAA;AAAA,GAChB;AACJ;;;;"}