@turbox3d/graphic-component-pixi
Version:
Graphic component library based on pixi
265 lines (264 loc) • 11.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.GridHelper = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var PIXI = _interopRequireWildcard(require("pixi.js"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/**
* from https://www.npmjs.com/package/pixijs-grid
* @author: Luis Angel Garcia
*/
/** */
var DEFAULT_LINE_STYLE = {
width: 1,
color: 0xffffff,
alpha: 1,
alignment: 0.5,
"native": true
};
/**
* @description Utility class that draws a grid on the screen.
* @extends PIXI.Graphics
*/
var GridHelper = exports.GridHelper = /*#__PURE__*/function (_PIXI$Graphics) {
/**
*
* @param {number} width number. Required.
*
* The target sidelength of the grid. It is best for `width` to be a perfect square (i.e., 2, 4, 9, 16, 25, etc.). If
* not and the parameter `useCorrectedWidth` is set to **false**, then the grid will use a corrected width,
* which is the smallest perfect square greater than `width`.
*
* @param {number} cellSize number, null. Optional, default: square root of corrected width
*
* The size of each cell in the grid.
* If the value is **null**, the grid will use the default value.
*
* @param {{ width: number, color: number, alpha: number, alignment: number, native: boolean }}. Object. Optional.
*
* default:
* **{
* width: 1,
* color: 0xffffff,
* alpha: 1,
* alignment: 0.5,
* native: true
* }**
*
* Configuration for the line style on the object. See documentation on `PIXI.Graphics` for more on the `LineStyle` class.
*
* @param {boolean} useCorrectedWidth boolean. Optional. default: **true**
* If **true**, the grid will use the smallest perfect square greater than `width`.
* Otherwise, the grid will use the exact value given by `width`.
*
* @param {boolean} drawBoundaries boolean. Optional. default: **true**
* If **true**, the grid will draw its boundaries.
* Otherwise, the grid will not draw its boundaries. Mouse pointer detection is not affected.
*/
function GridHelper() {
var _this;
var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var cellSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var lineConfig = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
var useCorrectedWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
var drawBoundaries = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
(0, _classCallCheck2["default"])(this, GridHelper);
_this = _callSuper(this, GridHelper);
_this._amtLines = null;
_this._gridWidth = width;
_this._useCorrectedWidth = useCorrectedWidth;
_this._correctedWidth = 0;
_this._correctWidth();
_this._drawBoundaries = drawBoundaries;
_this.cellSize = cellSize;
var lConfig = _objectSpread(_objectSpread({}, DEFAULT_LINE_STYLE), lineConfig || {});
_this.lineStyle(lConfig.width, lConfig.color, lConfig.alpha, lConfig.alignment, lConfig["native"]);
// handle mouse move
_this.eventMode = 'static';
_this.on('mousemove', function (evt) {
var mouseCoords = evt.data.global;
// check if the mouse is within the bounds of this grid. If not, do nothing.
if (mouseCoords.x >= _this.bounds.x1 && mouseCoords.x <= _this.bounds.x2 && mouseCoords.y >= _this.bounds.y1 && mouseCoords.y <= _this.bounds.y2) {
var gridCoords = _this.getCellCoordinates(mouseCoords.x, mouseCoords.y);
_this.onMousemove(evt, gridCoords);
}
});
return _this;
}
/**
* Draws the grid to the containing PIXI stage
*/
(0, _inherits2["default"])(GridHelper, _PIXI$Graphics);
return (0, _createClass2["default"])(GridHelper, [{
key: "cellSize",
get: function get() {
return this._cellSize;
}
/**
* The amount of equally spaced lines along the grid's side.
*/,
set:
/**
* @param {number} cellSize number. Optional. default: the square root of the grid's side length
*/
function set(cellSize) {
this._cellSize = cellSize || Math.sqrt(this._correctedWidth);
}
}, {
key: "amtLines",
get: function get() {
return Math.floor(this.gridWidth / this.cellSize);
}
/**
* The coordinates for each corner of the grid.
* The leftmost (**x1**), topmost (**y1**), rightmost (**x2**), and bottommost (**y2**) coordinates.
*/
}, {
key: "bounds",
get: function get() {
return {
x1: this.x,
y1: this.y,
x2: this.x + this._correctedWidth,
y2: this.y + this._correctedWidth
};
}
}, {
key: "drawBoundaries",
get: function get() {
return this._drawBoundaries;
}
/**
* The requested width of the grid given by the `width` constructor parameter.
*/,
set: function set(drawBoundaries) {
this._drawBoundaries = drawBoundaries;
}
}, {
key: "originalWidth",
get: function get() {
return this._gridWidth;
}
/**
* The corrected width of the grid, which is the smallest square root number larger than
* the corrected width.
*/
}, {
key: "correctedWidth",
get: function get() {
return this._correctedWidth;
}
}, {
key: "useCorrectedWidth",
get: function get() {
return this._useCorrectedWidth;
}
/**
* The actual width of the grid.
* When the `cellSize` is not the default, the width of the grid will be the
* width given in the `width` constructor. Otherwise, it is the corrected width.
*/
}, {
key: "gridWidth",
get: function get() {
if (!this.useCorrectedWidth) {
return this._gridWidth;
}
return Math.abs(this.cellSize - Math.sqrt(this._correctedWidth)) <= 1e-6 ? this._correctedWidth : this._gridWidth;
}
}, {
key: "drawGrid",
value: function drawGrid() {
this.clearGrid(true);
for (var i = this._drawBoundaries ? 0 : 1; i <= this.amtLines - (this._drawBoundaries ? 0 : 1); i += 1) {
var startCoord = i * this._cellSize;
// draw the column
this.moveTo(startCoord, 0);
this.lineTo(startCoord, this._correctedWidth);
// draw the row
this.moveTo(0, startCoord);
this.lineTo(this._correctedWidth, startCoord);
}
this.endFill();
return this;
}
/**
* Clears the grid from the containing PIXI stage.
*
* @param {boolean} retainLineStyle Optional, default: **true**
*
* When **true**, the configuration for the line style object is preserved.
* Otherwise, the object's line style will revert to the defaults specified by the `PIXI.Graphics` object.
*/
}, {
key: "clearGrid",
value: function clearGrid() {
var retainLineStyle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
var _this$line = this.line,
width = _this$line.width,
alignment = _this$line.alignment,
color = _this$line.color,
alpha = _this$line.alpha,
_native = _this$line["native"];
this.clear();
if (!retainLineStyle) {
return;
}
this.lineStyle(width, color, alpha, alignment, _native);
return this;
}
/**
* Transforms global coordinates to grid coordinates.
* @param {number} x
* The global X coordinate.
*
* @param {number} y
* The global Y coordinate.
*/
}, {
key: "getCellCoordinates",
value: function getCellCoordinates(x, y) {
return {
x: Math.floor((x - this.bounds.x1) / this.cellSize),
y: Math.floor((y - this.bounds.y1) / this.cellSize)
};
}
/**
* Callback fired after detecting a mousemove event.
*
* @param {PIXI.InteractionData} evt
* The `PIXI.InteractionData` captured by the event.
*
* @param {{x: number, y: number}} gridCoords
* The grid-level coordinates captured by the event.
*/
}, {
key: "onMousemove",
value: function onMousemove(evt, gridCoords) {}
/**
* Calculates the corrected width. If the `useCorrectedWidth` constructor parameter is set to **false**,
* then it simply keeps the given value for `width` as the corrected width.
*/
}, {
key: "_correctWidth",
value: function _correctWidth() {
if (!this._useCorrectedWidth) {
this._correctedWidth = this._gridWidth;
}
this._correctedWidth = Math.pow(Math.ceil(Math.sqrt(this._gridWidth)), 2);
}
}]);
}(PIXI.Graphics);