phaser3-rex-plugins
Version:
768 lines (739 loc) • 24.1 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.rexchart = factory());
})(this, (function () { 'use strict';
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
Object.defineProperty(Constructor, "prototype", {
writable: false
});
return Constructor;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
writable: true,
configurable: true
}
});
Object.defineProperty(subClass, "prototype", {
writable: false
});
if (superClass) _setPrototypeOf(subClass, superClass);
}
function _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
return true;
} catch (e) {
return false;
}
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _possibleConstructorReturn(self, call) {
if (call && (typeof call === "object" || typeof call === "function")) {
return call;
} else if (call !== void 0) {
throw new TypeError("Derived constructors may only return object or undefined");
}
return _assertThisInitialized(self);
}
function _createSuper(Derived) {
var hasNativeReflectConstruct = _isNativeReflectConstruct();
return function _createSuperInternal() {
var Super = _getPrototypeOf(Derived),
result;
if (hasNativeReflectConstruct) {
var NewTarget = _getPrototypeOf(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return _possibleConstructorReturn(this, result);
};
}
function _superPropBase(object, property) {
while (!Object.prototype.hasOwnProperty.call(object, property)) {
object = _getPrototypeOf(object);
if (object === null) break;
}
return object;
}
function _get() {
if (typeof Reflect !== "undefined" && Reflect.get) {
_get = Reflect.get.bind();
} else {
_get = function _get(target, property, receiver) {
var base = _superPropBase(target, property);
if (!base) return;
var desc = Object.getOwnPropertyDescriptor(base, property);
if (desc.get) {
return desc.get.call(arguments.length < 3 ? target : receiver);
}
return desc.value;
};
}
return _get.apply(this, arguments);
}
function _toPrimitive(input, hint) {
if (typeof input !== "object" || input === null) return input;
var prim = input[Symbol.toPrimitive];
if (prim !== undefined) {
var res = prim.call(input, hint || "default");
if (typeof res !== "object") return res;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (hint === "string" ? String : Number)(input);
}
function _toPropertyKey(arg) {
var key = _toPrimitive(arg, "string");
return typeof key === "symbol" ? key : String(key);
}
// copy from Phaser.GameObjects.Text
var Utils = Phaser.Renderer.WebGL.Utils;
var WebGLRenderer = function WebGLRenderer(renderer, src, camera, parentMatrix) {
if (src.dirty) {
src.updateTexture();
src.dirty = false;
}
if (src.width === 0 || src.height === 0) {
return;
}
camera.addToRenderList(src);
var frame = src.frame;
var width = frame.width;
var height = frame.height;
var getTint = Utils.getTintAppendFloatAlpha;
var pipeline = renderer.pipelines.set(src.pipeline, src);
var textureUnit = pipeline.setTexture2D(frame.glTexture, src);
renderer.pipelines.preBatch(src);
pipeline.batchTexture(src, frame.glTexture, width, height, src.x, src.y, width / src.resolution, height / src.resolution, src.scaleX, src.scaleY, src.rotation, src.flipX, src.flipY, src.scrollFactorX, src.scrollFactorY, src.displayOriginX, src.displayOriginY, 0, 0, width, height, getTint(src.tintTopLeft, camera.alpha * src._alphaTL), getTint(src.tintTopRight, camera.alpha * src._alphaTR), getTint(src.tintBottomLeft, camera.alpha * src._alphaBL), getTint(src.tintBottomRight, camera.alpha * src._alphaBR), src.tintFill, 0, 0, camera, parentMatrix, false, textureUnit);
renderer.pipelines.postBatch(src);
};
// copy from Phaser.GameObjects.Text
var CanvasRenderer = function CanvasRenderer(renderer, src, camera, parentMatrix) {
if (src.dirty) {
src.updateTexture();
src.dirty = false;
}
if (src.width === 0 || src.height === 0) {
return;
}
camera.addToRenderList(src);
renderer.batchSprite(src, src.frame, camera, parentMatrix);
};
var Render = {
renderWebGL: WebGLRenderer,
renderCanvas: CanvasRenderer
};
var Color = Phaser.Display.Color;
var CanvasMethods = {
clear: function clear() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.dirty = true;
return this;
},
fill: function fill(color) {
this.context.fillStyle = color;
this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
this.dirty = true;
return this;
},
drawFrame: function drawFrame(key, frame, dx, dy, dWidth, dHeight, sxOffset, syOffset, sWidth, sHeight) {
var textureFrame = this.scene.sys.textures.getFrame(key, frame);
if (!textureFrame) {
return this;
}
var frameWidth = textureFrame.cutWidth,
frameHeight = textureFrame.cutHeight;
if (dx === undefined) {
dx = 0;
}
if (dy === undefined) {
dy = 0;
}
if (dWidth === undefined) {
dWidth = frameWidth;
}
if (dHeight === undefined) {
dHeight = frameHeight;
}
if (sxOffset === undefined) {
sxOffset = 0;
}
if (syOffset === undefined) {
syOffset = 0;
}
if (sWidth === undefined) {
sWidth = frameWidth;
}
if (sHeight === undefined) {
sHeight = frameHeight;
}
var sx = textureFrame.cutX + sxOffset;
var sy = textureFrame.cutY + syOffset;
this.context.drawImage(textureFrame.source.image,
// image
sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
this.dirty = true;
return this;
},
getDataURL: function getDataURL(type, encoderOptions) {
return this.canvas.toDataURL(type, encoderOptions);
},
getPixel: function getPixel(x, y, out) {
if (out === undefined) {
out = new Color();
}
var rgb = this.context.getImageData(x, y, 1, 1);
out.setTo(rgb.data[0], rgb.data[1], rgb.data[2], rgb.data[3]);
return out;
},
setPixel: function setPixel(x, y, r, g, b, a) {
if (typeof r !== 'number') {
var color = r;
r = color.red;
g = color.green;
b = color.blue;
a = color.alpha;
}
if (a === undefined) {
a = r !== 0 || g !== 0 || b !== 0 ? 255 : 0;
}
var imgData = this.context.createImageData(1, 1);
imgData.data[0] = r;
imgData.data[1] = g;
imgData.data[2] = b;
imgData.data[3] = a;
this.context.putImageData(imgData, x, y);
this.dirty = true;
return this;
}
};
var CopyCanvasToTexture = function CopyCanvasToTexture(scene, srcCanvas, key, x, y, width, height) {
var textures = scene.sys.textures;
var renderer = scene.renderer;
if (x === undefined) {
x = 0;
}
if (y === undefined) {
y = 0;
}
if (width === undefined) {
width = srcCanvas.width;
}
if (height === undefined) {
height = srcCanvas.height;
}
var texture;
if (textures.exists(key)) {
texture = textures.get(key);
} else {
texture = textures.createCanvas(key, width, height);
}
var destCanvas = texture.getSourceImage();
if (destCanvas.width !== width) {
destCanvas.width = width;
}
if (destCanvas.height !== height) {
destCanvas.height = height;
}
var destCtx = destCanvas.getContext('2d', {
willReadFrequently: true
});
destCtx.clearRect(0, 0, width, height);
destCtx.drawImage(srcCanvas, x, y, width, height);
if (renderer.gl && texture) {
renderer.canvasToTexture(destCanvas, texture.source[0].glTexture, true, 0);
}
};
var TextureMethods = {
updateTexture: function updateTexture(callback, scope) {
if (callback) {
if (scope) {
callback.call(scope, this.canvas, this.context);
} else {
callback(this.canvas, this.context);
}
}
if (this.canvas.width !== this.frame.width || this.canvas.height !== this.frame.height) {
this.frame.setSize(this.canvas.width, this.canvas.height);
}
if (this.renderer && this.renderer.gl) {
this.frame.source.glTexture = this.renderer.canvasToTexture(this.canvas, this.frame.source.glTexture, true);
this.frame.glTexture = this.frame.source.glTexture;
}
this.dirty = false;
var input = this.input;
if (input && !input.customHitArea) {
input.hitArea.width = this.width;
input.hitArea.height = this.height;
}
return this;
},
generateTexture: function generateTexture(key, x, y, width, height) {
var srcCanvas = this.canvas;
if (width === undefined) {
width = srcCanvas.width;
} else {
width *= this.resolution;
}
if (height === undefined) {
height = srcCanvas.height;
} else {
height *= this.resolution;
}
CopyCanvasToTexture(this.scene, srcCanvas, key, x, y, width, height);
return this;
},
loadTexture: function loadTexture(key, frame) {
var textureFrame = this.scene.sys.textures.getFrame(key, frame);
if (!textureFrame) {
return this;
}
if (this.width !== textureFrame.cutWidth || this.height !== textureFrame.cutHeight) {
this.setSize(textureFrame.cutWidth, textureFrame.cutHeight);
} else {
this.clear();
}
this.drawFrame(key, frame);
this.dirty = true;
return this;
}
};
var MinVersion = 60;
var IsChecked = false;
var CheckP3Version = function CheckP3Version(minVersion) {
if (IsChecked) {
return;
}
if (minVersion === undefined) {
minVersion = MinVersion;
}
var currentVersion = parseInt(Phaser.VERSION.match(/\.(\d+)\./)[1]);
if (currentVersion < minVersion) {
console.error("Minimum supported version : 3.".concat(minVersion));
}
IsChecked = true;
};
CheckP3Version();
var CanvasPool = Phaser.Display.Canvas.CanvasPool;
var GameObject = Phaser.GameObjects.GameObject;
var Canvas$1 = /*#__PURE__*/function (_GameObject) {
_inherits(Canvas, _GameObject);
var _super = _createSuper(Canvas);
function Canvas(scene, x, y, width, height) {
var _this;
_classCallCheck(this, Canvas);
if (x === undefined) {
x = 0;
}
if (y === undefined) {
y = 0;
}
if (width === undefined) {
width = 1;
}
if (height === undefined) {
height = 1;
}
_this = _super.call(this, scene, 'rexCanvas');
_this.renderer = scene.sys.game.renderer;
_this.resolution = 1;
_this._width = width;
_this._height = height;
width = Math.max(Math.ceil(width * _this.resolution), 1);
height = Math.max(Math.ceil(height * _this.resolution), 1);
_this.canvas = CanvasPool.create(_assertThisInitialized(_this), width, height);
_this.context = _this.canvas.getContext('2d', {
willReadFrequently: true
});
_this.dirty = false;
_this.setPosition(x, y);
_this.setOrigin(0.5, 0.5);
_this.initPipeline();
_this.initPostPipeline(true);
_this._crop = _this.resetCropObject();
// Create a Texture for this Text object
_this.texture = scene.sys.textures.addCanvas(null, _this.canvas, true);
// Get the frame
_this.frame = _this.texture.get();
// Set the resolution
_this.frame.source.resolution = _this.resolution;
if (_this.renderer && _this.renderer.gl) {
// Clear the default 1x1 glTexture, as we override it later
_this.renderer.deleteTexture(_this.frame.source.glTexture);
_this.frame.source.glTexture = null;
}
_this.dirty = true;
return _this;
}
_createClass(Canvas, [{
key: "preDestroy",
value: function preDestroy() {
CanvasPool.remove(this.canvas);
this.texture.destroy();
this.canvas = null;
this.context = null;
}
}, {
key: "width",
get: function get() {
return this._width;
},
set: function set(value) {
this.setSize(value, this._height);
}
}, {
key: "height",
get: function get() {
return this._height;
},
set: function set(value) {
this.setSize(this._width, value);
}
}, {
key: "setCanvasSize",
value: function setCanvasSize(width, height) {
if (this._width === width && this._height === height) {
return this;
}
this._width = width;
this._height = height;
this.updateDisplayOrigin();
width = Math.max(Math.ceil(width * this.resolution), 1);
height = Math.max(Math.ceil(height * this.resolution), 1);
this.canvas.width = width;
this.canvas.height = height;
this.frame.setSize(width, height);
this.dirty = true;
return this;
}
// setSize might be override
}, {
key: "setSize",
value: function setSize(width, height) {
this.setCanvasSize(width, height);
return this;
}
}, {
key: "displayWidth",
get: function get() {
return this.scaleX * this._width;
},
set: function set(value) {
this.scaleX = value / this._width;
}
}, {
key: "displayHeight",
get: function get() {
return this.scaleY * this._height;
},
set: function set(value) {
this.scaleY = value / this._height;
}
}, {
key: "setDisplaySize",
value: function setDisplaySize(width, height) {
this.displayWidth = width;
this.displayHeight = height;
return this;
}
}, {
key: "getCanvas",
value: function getCanvas(readOnly) {
if (!readOnly) {
this.dirty = true;
}
return this.canvas;
}
}, {
key: "getContext",
value: function getContext(readOnly) {
if (!readOnly) {
this.dirty = true;
}
return this.context;
}
}, {
key: "needRedraw",
value: function needRedraw() {
this.dirty = true;
return this;
}
}, {
key: "resize",
value: function resize(width, height) {
this.setSize(width, height);
return this;
}
}]);
return Canvas;
}(GameObject);
var Components = Phaser.GameObjects.Components;
Phaser.Class.mixin(Canvas$1, [Components.Alpha, Components.BlendMode, Components.Crop, Components.Depth, Components.Flip, Components.GetBounds, Components.Mask, Components.Origin, Components.Pipeline, Components.PostPipeline, Components.ScrollFactor, Components.Tint, Components.Transform, Components.Visible, Render, CanvasMethods, TextureMethods]);
var LoadImageMethods = {
loadFromURL: function loadFromURL(url, callback) {
var self = this;
var img = new Image();
img.onload = function () {
if (self.width !== img.width || self.height !== img.height) {
self.resize(img.width, img.height);
} else {
self.clear();
}
self.context.drawImage(img, 0, 0);
self.updateTexture();
if (callback) {
callback();
}
img.onload = null;
img.src = '';
img.remove();
};
img.src = url;
return this;
},
loadFromURLPromise: function loadFromURLPromise(url) {
var self = this;
return new Promise(function (resolve, reject) {
self.loadFromURL(url, resolve);
});
},
loadFromFile: function loadFromFile(file, callback) {
var url = URL.createObjectURL(file);
this.loadFromURL(url, function () {
URL.revokeObjectURL(url);
if (callback) {
callback();
}
});
return this;
},
loadFromFilePromise: function loadFromFilePromise(file) {
var self = this;
return new Promise(function (resolve, reject) {
self.loadFromFile(file, resolve);
});
}
};
var Canvas = /*#__PURE__*/function (_CanvasBase) {
_inherits(Canvas, _CanvasBase);
var _super = _createSuper(Canvas);
function Canvas() {
_classCallCheck(this, Canvas);
return _super.apply(this, arguments);
}
return _createClass(Canvas);
}(Canvas$1);
Object.assign(Canvas.prototype, LoadImageMethods);
var SetChart = function SetChart(config) {
if (!window.Chart) {
var msg = "Can not find chartjs! Load chartjs in preload stage.\nscene.load.script('chartjs', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/Chart.min.js');";
console.error(msg);
return this;
}
if (this.chart) {
this.chart.destroy();
}
this.chart = new Chart(this.context, FillConfig(this, config));
return this;
};
var FillConfig = function FillConfig(canvas, config) {
// Get options
if (config === undefined) {
config = {};
}
if (config.options === undefined) {
config.options = {};
}
var options = config.options;
// Fill options
options.responsive = false;
options.maintainAspectRatio = false;
if (!options.hasOwnProperty('devicePixelRatio')) {
options.devicePixelRatio = 1;
}
// Get animation config
var noAnimation = false;
if (options.animation === undefined) {
options.animation = {};
} else if (options.animation === false) {
noAnimation = true;
options.animation = {};
}
var animationConfig = options.animation;
// Fill animation config
if (noAnimation) {
animationConfig.duration = 0;
}
var onProgress = animationConfig.onProgress;
animationConfig.onProgress = function (animation) {
if (onProgress) {
onProgress(animation);
}
canvas.needRedraw();
};
var onComplete = animationConfig.onComplete;
animationConfig.onComplete = function (animation) {
if (onComplete) {
onComplete(animation);
}
canvas.needRedraw();
};
return config;
};
var GetChartDataset = function GetChartDataset(datasetIndex) {
if (this.chart === undefined) {
return undefined;
}
if (typeof datasetIndex === 'string') {
var datasets = this.chart.data.datasets,
dataset;
for (var i = 0, cnt = datasets.length; i < cnt; i++) {
dataset = datasets[i];
if (dataset.label === datasetIndex) {
return dataset;
}
}
} else {
return this.chart.data.datasets[datasetIndex];
}
return undefined;
};
var GetChartData = function GetChartData(datasetIndex, dataIndex) {
var dataset = this.getChartDataset(datasetIndex);
if (dataset === undefined) {
return undefined;
}
if (typeof dataIndex === 'string') {
var labels = this.chart.data.labels;
dataIndex = labels.indexOf(dataIndex);
if (dataIndex === -1) {
return undefined;
}
}
return dataset.data[dataIndex];
};
var SetChartData = function SetChartData(datasetIndex, dataIndex, value) {
if (this.chart === undefined) {
return this;
}
var dataset = this.getChartDataset(datasetIndex);
if (typeof dataIndex === 'string') {
var labels = this.chart.data.labels;
dataIndex = labels.indexOf(dataIndex);
if (dataIndex === -1) {
return this;
}
}
dataset.data[dataIndex] = value;
return this;
};
var UpdateChart = function UpdateChart() {
if (this.chart === undefined) {
return this;
}
this.chart.update();
return this;
};
// This plugin does not contain chart.js
// Load chart.js in preload stage -
// scene.load.script('chartjs', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/Chart.min.js');
var Chart$1 = /*#__PURE__*/function (_Canvas) {
_inherits(Chart, _Canvas);
var _super = _createSuper(Chart);
function Chart(scene, x, y, width, height, config) {
var _this;
_classCallCheck(this, Chart);
_this = _super.call(this, scene, x, y, width, height);
_this.type = 'rexChart';
_this.chart = undefined;
if (config !== undefined) {
_this.setChart(config);
}
return _this;
}
_createClass(Chart, [{
key: "destroy",
value: function destroy(fromScene) {
// This Game Object has already been destroyed
if (!this.scene) {
return;
}
if (this.chart) {
this.chart.destroy();
this.chart = undefined;
}
_get(_getPrototypeOf(Chart.prototype), "destroy", this).call(this, fromScene);
}
}, {
key: "resize",
value: function resize(width, height) {
if (width === this.width && height === this.height) {
return this;
}
_get(_getPrototypeOf(Chart.prototype), "resize", this).call(this, width, height);
if (this.chart) {
var chart = this.chart;
chart.height = this.canvas.height;
chart.width = this.canvas.width;
chart.aspectRatio = chart.height ? chart.width / chart.height : null;
chart.update();
}
return this;
}
}]);
return Chart;
}(Canvas);
var methods = {
setChart: SetChart,
getChartDataset: GetChartDataset,
getChartData: GetChartData,
setChartData: SetChartData,
updateChart: UpdateChart
};
Object.assign(Chart$1.prototype, methods);
return Chart$1;
}));