398 lines
13 KiB
JavaScript
398 lines
13 KiB
JavaScript
'use strict';
|
|
|
|
var deprecation = require('../../../utils/logging/deprecation.js');
|
|
var View = require('../../view/View.js');
|
|
var GraphicsContext = require('./GraphicsContext.js');
|
|
|
|
"use strict";
|
|
class Graphics extends View.ViewContainer {
|
|
/**
|
|
* @param options - Options for the Graphics.
|
|
*/
|
|
constructor(options) {
|
|
if (options instanceof GraphicsContext.GraphicsContext) {
|
|
options = { context: options };
|
|
}
|
|
const { context, roundPixels, ...rest } = options || {};
|
|
super({
|
|
label: "Graphics",
|
|
...rest
|
|
});
|
|
this.renderPipeId = "graphics";
|
|
if (!context) {
|
|
this._context = this._ownedContext = new GraphicsContext.GraphicsContext();
|
|
} else {
|
|
this._context = context;
|
|
}
|
|
this._context.on("update", this.onViewUpdate, this);
|
|
this.allowChildren = false;
|
|
this.roundPixels = roundPixels ?? false;
|
|
}
|
|
set context(context) {
|
|
if (context === this._context)
|
|
return;
|
|
this._context.off("update", this.onViewUpdate, this);
|
|
this._context = context;
|
|
this._context.on("update", this.onViewUpdate, this);
|
|
this.onViewUpdate();
|
|
}
|
|
get context() {
|
|
return this._context;
|
|
}
|
|
/**
|
|
* The local bounds of the graphic.
|
|
* @type {rendering.Bounds}
|
|
*/
|
|
get bounds() {
|
|
return this._context.bounds;
|
|
}
|
|
/**
|
|
* Adds the bounds of this object to the bounds object.
|
|
* @param bounds - The output bounds object.
|
|
*/
|
|
addBounds(bounds) {
|
|
bounds.addBounds(this._context.bounds);
|
|
}
|
|
/**
|
|
* Checks if the object contains the given point.
|
|
* @param point - The point to check
|
|
*/
|
|
containsPoint(point) {
|
|
return this._context.containsPoint(point);
|
|
}
|
|
onViewUpdate() {
|
|
this._didViewChangeTick++;
|
|
this._didGraphicsUpdate = true;
|
|
if (this.didViewUpdate)
|
|
return;
|
|
this.didViewUpdate = true;
|
|
const renderGroup = this.renderGroup || this.parentRenderGroup;
|
|
if (renderGroup) {
|
|
renderGroup.onChildViewUpdate(this);
|
|
}
|
|
}
|
|
/**
|
|
* Destroys this graphics renderable and optionally its context.
|
|
* @param options - Options parameter. A boolean will act as if all options
|
|
*
|
|
* If the context was created by this graphics and `destroy(false)` or `destroy()` is called
|
|
* then the context will still be destroyed.
|
|
*
|
|
* If you want to explicitly not destroy this context that this graphics created,
|
|
* then you should pass destroy({ context: false })
|
|
*
|
|
* If the context was passed in as an argument to the constructor then it will not be destroyed
|
|
* @param {boolean} [options.texture=false] - Should destroy the texture of the graphics context
|
|
* @param {boolean} [options.textureSource=false] - Should destroy the texture source of the graphics context
|
|
* @param {boolean} [options.context=false] - Should destroy the context
|
|
*/
|
|
destroy(options) {
|
|
if (this._ownedContext && !options) {
|
|
this._ownedContext.destroy(options);
|
|
} else if (options === true || options?.context === true) {
|
|
this._context.destroy(options);
|
|
}
|
|
this._ownedContext = null;
|
|
this._context = null;
|
|
super.destroy(options);
|
|
}
|
|
_callContextMethod(method, args) {
|
|
this.context[method](...args);
|
|
return this;
|
|
}
|
|
// --------------------------------------- GraphicsContext methods ---------------------------------------
|
|
/**
|
|
* Sets the current fill style of the graphics context. The fill style can be a color, gradient,
|
|
* pattern, or a more complex style defined by a FillStyle object.
|
|
* @param {FillInput} args - The fill style to apply. This can be a simple color, a gradient or
|
|
* pattern object, or a FillStyle or ConvertedFillStyle object.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
setFillStyle(...args) {
|
|
return this._callContextMethod("setFillStyle", args);
|
|
}
|
|
/**
|
|
* Sets the current stroke style of the graphics context. Similar to fill styles, stroke styles can
|
|
* encompass colors, gradients, patterns, or more detailed configurations via a StrokeStyle object.
|
|
* @param {StrokeInput} args - The stroke style to apply. Can be defined as a color, a gradient or pattern,
|
|
* or a StrokeStyle or ConvertedStrokeStyle object.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
setStrokeStyle(...args) {
|
|
return this._callContextMethod("setStrokeStyle", args);
|
|
}
|
|
fill(...args) {
|
|
return this._callContextMethod("fill", args);
|
|
}
|
|
/**
|
|
* Strokes the current path with the current stroke style. This method can take an optional
|
|
* FillStyle parameter to define the stroke's appearance, including its color, width, and other properties.
|
|
* @param {FillStyle} args - (Optional) The stroke style to apply. Can be defined as a simple color or a more
|
|
* complex style object. If omitted, uses the current stroke style.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
stroke(...args) {
|
|
return this._callContextMethod("stroke", args);
|
|
}
|
|
texture(...args) {
|
|
return this._callContextMethod("texture", args);
|
|
}
|
|
/**
|
|
* Resets the current path. Any previous path and its commands are discarded and a new path is
|
|
* started. This is typically called before beginning a new shape or series of drawing commands.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
beginPath() {
|
|
return this._callContextMethod("beginPath", []);
|
|
}
|
|
/**
|
|
* Applies a cutout to the last drawn shape. This is used to create holes or complex shapes by
|
|
* subtracting a path from the previously drawn path. If a hole is not completely in a shape, it will
|
|
* fail to cut correctly!
|
|
*/
|
|
cut() {
|
|
return this._callContextMethod("cut", []);
|
|
}
|
|
arc(...args) {
|
|
return this._callContextMethod("arc", args);
|
|
}
|
|
arcTo(...args) {
|
|
return this._callContextMethod("arcTo", args);
|
|
}
|
|
arcToSvg(...args) {
|
|
return this._callContextMethod("arcToSvg", args);
|
|
}
|
|
bezierCurveTo(...args) {
|
|
return this._callContextMethod("bezierCurveTo", args);
|
|
}
|
|
/**
|
|
* Closes the current path by drawing a straight line back to the start.
|
|
* If the shape is already closed or there are no points in the path, this method does nothing.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
closePath() {
|
|
return this._callContextMethod("closePath", []);
|
|
}
|
|
ellipse(...args) {
|
|
return this._callContextMethod("ellipse", args);
|
|
}
|
|
circle(...args) {
|
|
return this._callContextMethod("circle", args);
|
|
}
|
|
path(...args) {
|
|
return this._callContextMethod("path", args);
|
|
}
|
|
lineTo(...args) {
|
|
return this._callContextMethod("lineTo", args);
|
|
}
|
|
moveTo(...args) {
|
|
return this._callContextMethod("moveTo", args);
|
|
}
|
|
quadraticCurveTo(...args) {
|
|
return this._callContextMethod("quadraticCurveTo", args);
|
|
}
|
|
rect(...args) {
|
|
return this._callContextMethod("rect", args);
|
|
}
|
|
roundRect(...args) {
|
|
return this._callContextMethod("roundRect", args);
|
|
}
|
|
poly(...args) {
|
|
return this._callContextMethod("poly", args);
|
|
}
|
|
regularPoly(...args) {
|
|
return this._callContextMethod("regularPoly", args);
|
|
}
|
|
roundPoly(...args) {
|
|
return this._callContextMethod("roundPoly", args);
|
|
}
|
|
roundShape(...args) {
|
|
return this._callContextMethod("roundShape", args);
|
|
}
|
|
filletRect(...args) {
|
|
return this._callContextMethod("filletRect", args);
|
|
}
|
|
chamferRect(...args) {
|
|
return this._callContextMethod("chamferRect", args);
|
|
}
|
|
star(...args) {
|
|
return this._callContextMethod("star", args);
|
|
}
|
|
svg(...args) {
|
|
return this._callContextMethod("svg", args);
|
|
}
|
|
restore(...args) {
|
|
return this._callContextMethod("restore", args);
|
|
}
|
|
/** Saves the current graphics state, including transformations, fill styles, and stroke styles, onto a stack. */
|
|
save() {
|
|
return this._callContextMethod("save", []);
|
|
}
|
|
/**
|
|
* Returns the current transformation matrix of the graphics context.
|
|
* @returns The current transformation matrix.
|
|
*/
|
|
getTransform() {
|
|
return this.context.getTransform();
|
|
}
|
|
/**
|
|
* Resets the current transformation matrix to the identity matrix, effectively removing
|
|
* any transformations (rotation, scaling, translation) previously applied.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
resetTransform() {
|
|
return this._callContextMethod("resetTransform", []);
|
|
}
|
|
rotateTransform(...args) {
|
|
return this._callContextMethod("rotate", args);
|
|
}
|
|
scaleTransform(...args) {
|
|
return this._callContextMethod("scale", args);
|
|
}
|
|
setTransform(...args) {
|
|
return this._callContextMethod("setTransform", args);
|
|
}
|
|
transform(...args) {
|
|
return this._callContextMethod("transform", args);
|
|
}
|
|
translateTransform(...args) {
|
|
return this._callContextMethod("translate", args);
|
|
}
|
|
/**
|
|
* Clears all drawing commands from the graphics context, effectively resetting it. This includes clearing the path,
|
|
* and optionally resetting transformations to the identity matrix.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
clear() {
|
|
return this._callContextMethod("clear", []);
|
|
}
|
|
/**
|
|
* The fill style to use.
|
|
* @type {ConvertedFillStyle}
|
|
*/
|
|
get fillStyle() {
|
|
return this._context.fillStyle;
|
|
}
|
|
set fillStyle(value) {
|
|
this._context.fillStyle = value;
|
|
}
|
|
/**
|
|
* The stroke style to use.
|
|
* @type {ConvertedStrokeStyle}
|
|
*/
|
|
get strokeStyle() {
|
|
return this._context.strokeStyle;
|
|
}
|
|
set strokeStyle(value) {
|
|
this._context.strokeStyle = value;
|
|
}
|
|
/**
|
|
* Creates a new Graphics object.
|
|
* Note that only the context of the object is cloned, not its transform (position,scale,etc)
|
|
* @param deep - Whether to create a deep clone of the graphics object. If false, the context
|
|
* will be shared between the two objects (default false). If true, the context will be
|
|
* cloned (recommended if you need to modify the context in any way).
|
|
* @returns - A clone of the graphics object
|
|
*/
|
|
clone(deep = false) {
|
|
if (deep) {
|
|
return new Graphics(this._context.clone());
|
|
}
|
|
this._ownedContext = null;
|
|
const clone = new Graphics(this._context);
|
|
return clone;
|
|
}
|
|
// -------- v7 deprecations ---------
|
|
/**
|
|
* @param width
|
|
* @param color
|
|
* @param alpha
|
|
* @deprecated since 8.0.0 Use {@link Graphics#setStrokeStyle} instead
|
|
*/
|
|
lineStyle(width, color, alpha) {
|
|
deprecation.deprecation(deprecation.v8_0_0, "Graphics#lineStyle is no longer needed. Use Graphics#setStrokeStyle to set the stroke style.");
|
|
const strokeStyle = {};
|
|
width && (strokeStyle.width = width);
|
|
color && (strokeStyle.color = color);
|
|
alpha && (strokeStyle.alpha = alpha);
|
|
this.context.strokeStyle = strokeStyle;
|
|
return this;
|
|
}
|
|
/**
|
|
* @param color
|
|
* @param alpha
|
|
* @deprecated since 8.0.0 Use {@link Graphics#fill} instead
|
|
*/
|
|
beginFill(color, alpha) {
|
|
deprecation.deprecation(deprecation.v8_0_0, "Graphics#beginFill is no longer needed. Use Graphics#fill to fill the shape with the desired style.");
|
|
const fillStyle = {};
|
|
color && (fillStyle.color = color);
|
|
alpha && (fillStyle.alpha = alpha);
|
|
this.context.fillStyle = fillStyle;
|
|
return this;
|
|
}
|
|
/**
|
|
* @deprecated since 8.0.0 Use {@link Graphics#fill} instead
|
|
*/
|
|
endFill() {
|
|
deprecation.deprecation(deprecation.v8_0_0, "Graphics#endFill is no longer needed. Use Graphics#fill to fill the shape with the desired style.");
|
|
this.context.fill();
|
|
const strokeStyle = this.context.strokeStyle;
|
|
if (strokeStyle.width !== GraphicsContext.GraphicsContext.defaultStrokeStyle.width || strokeStyle.color !== GraphicsContext.GraphicsContext.defaultStrokeStyle.color || strokeStyle.alpha !== GraphicsContext.GraphicsContext.defaultStrokeStyle.alpha) {
|
|
this.context.stroke();
|
|
}
|
|
return this;
|
|
}
|
|
/**
|
|
* @param {...any} args
|
|
* @deprecated since 8.0.0 Use {@link Graphics#circle} instead
|
|
*/
|
|
drawCircle(...args) {
|
|
deprecation.deprecation(deprecation.v8_0_0, "Graphics#drawCircle has been renamed to Graphics#circle");
|
|
return this._callContextMethod("circle", args);
|
|
}
|
|
/**
|
|
* @param {...any} args
|
|
* @deprecated since 8.0.0 Use {@link Graphics#ellipse} instead
|
|
*/
|
|
drawEllipse(...args) {
|
|
deprecation.deprecation(deprecation.v8_0_0, "Graphics#drawEllipse has been renamed to Graphics#ellipse");
|
|
return this._callContextMethod("ellipse", args);
|
|
}
|
|
/**
|
|
* @param {...any} args
|
|
* @deprecated since 8.0.0 Use {@link Graphics#poly} instead
|
|
*/
|
|
drawPolygon(...args) {
|
|
deprecation.deprecation(deprecation.v8_0_0, "Graphics#drawPolygon has been renamed to Graphics#poly");
|
|
return this._callContextMethod("poly", args);
|
|
}
|
|
/**
|
|
* @param {...any} args
|
|
* @deprecated since 8.0.0 Use {@link Graphics#rect} instead
|
|
*/
|
|
drawRect(...args) {
|
|
deprecation.deprecation(deprecation.v8_0_0, "Graphics#drawRect has been renamed to Graphics#rect");
|
|
return this._callContextMethod("rect", args);
|
|
}
|
|
/**
|
|
* @param {...any} args
|
|
* @deprecated since 8.0.0 Use {@link Graphics#roundRect} instead
|
|
*/
|
|
drawRoundedRect(...args) {
|
|
deprecation.deprecation(deprecation.v8_0_0, "Graphics#drawRoundedRect has been renamed to Graphics#roundRect");
|
|
return this._callContextMethod("roundRect", args);
|
|
}
|
|
/**
|
|
* @param {...any} args
|
|
* @deprecated since 8.0.0 Use {@link Graphics#star} instead
|
|
*/
|
|
drawStar(...args) {
|
|
deprecation.deprecation(deprecation.v8_0_0, "Graphics#drawStar has been renamed to Graphics#star");
|
|
return this._callContextMethod("star", args);
|
|
}
|
|
}
|
|
|
|
exports.Graphics = Graphics;
|
|
//# sourceMappingURL=Graphics.js.map
|