@turbox3d/graphic-component-pixi
Version:
Graphic component library based on pixi
213 lines • 8.62 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
import { Mesh2D, g } from '@turbox3d/renderer-pixi';
import Rect2d from '../rect2d';
import Image2d from '../image2d';
var StretchKey;
(function (StretchKey) {
StretchKey["X_LEFT"] = "x-left";
StretchKey["X_RIGHT"] = "x-right";
StretchKey["Y_TOP"] = "y-top";
StretchKey["Y_BOTTOM"] = "y-bottom";
})(StretchKey || (StretchKey = {}));
var Gizmo2d = /*#__PURE__*/function (_Mesh2D) {
function Gizmo2d() {
var _this;
_classCallCheck(this, Gizmo2d);
_this = _callSuper(this, Gizmo2d, arguments);
_this.deleteHandler = function () {
_this.props.deleteHandler && _this.props.deleteHandler();
};
_this.copyHandler = function () {
_this.props.copyHandler && _this.props.copyHandler();
};
_this.dragHandler = function (op) {
return function (viewEntity, event, tools) {
_this.props.adjustHandler && _this.props.adjustHandler(op, viewEntity, event, tools);
};
};
_this.stretchHandler = function (actionKey, op) {
return function (viewEntity, event, tools) {
_this.props.stretchHandler && _this.props.stretchHandler(actionKey, op, viewEntity, event, tools);
};
};
return _this;
}
_inherits(Gizmo2d, _Mesh2D);
return _createClass(Gizmo2d, [{
key: "render",
value: function render() {
var _this$props = this.props,
_this$props$x = _this$props.x,
x = _this$props$x === void 0 ? 0 : _this$props$x,
_this$props$y = _this$props.y,
y = _this$props$y === void 0 ? 0 : _this$props$y,
width = _this$props.width,
height = _this$props.height,
_this$props$rotation = _this$props.rotation,
rotation = _this$props$rotation === void 0 ? 0 : _this$props$rotation,
_this$props$central = _this$props.central,
central = _this$props$central === void 0 ? false : _this$props$central,
_this$props$zIndex = _this$props.zIndex,
zIndex = _this$props$zIndex === void 0 ? 1000 : _this$props$zIndex,
_this$props$color = _this$props.color,
color = _this$props$color === void 0 ? 0xffffff : _this$props$color,
_this$props$deleteIco = _this$props.deleteIcon,
deleteIcon = _this$props$deleteIco === void 0 ? '' : _this$props$deleteIco,
_this$props$copyIcon = _this$props.copyIcon,
copyIcon = _this$props$copyIcon === void 0 ? '' : _this$props$copyIcon,
_this$props$adjustIco = _this$props.adjustIcon,
adjustIcon = _this$props$adjustIco === void 0 ? '' : _this$props$adjustIco,
_this$props$deleteIco2 = _this$props.deleteIconSize,
deleteIconSize = _this$props$deleteIco2 === void 0 ? 10 : _this$props$deleteIco2,
_this$props$copyIconS = _this$props.copyIconSize,
copyIconSize = _this$props$copyIconS === void 0 ? 10 : _this$props$copyIconS,
_this$props$adjustIco2 = _this$props.adjustIconSize,
adjustIconSize = _this$props$adjustIco2 === void 0 ? 10 : _this$props$adjustIco2,
_this$props$stretchRe = _this$props.stretchRectSize,
stretchRectSize = _this$props$stretchRe === void 0 ? 8 : _this$props$stretchRe,
_this$props$showStret = _this$props.showStretchRect,
showStretchRect = _this$props$showStret === void 0 ? [StretchKey.X_LEFT, StretchKey.X_RIGHT, StretchKey.Y_TOP, StretchKey.Y_BOTTOM] : _this$props$showStret;
var _ref = central ? [-width / 2, -height / 2] : [0, 0],
_ref2 = _slicedToArray(_ref, 2),
posX = _ref2[0],
posY = _ref2[1];
this.view.zIndex = zIndex;
this.view.position.set(x, y);
this.view.rotation = rotation;
return [g(Rect2d, {
key: 'wireframe',
x: posX,
y: posY,
width: width,
height: height,
central: false,
lineWidth: 1,
lineColor: color,
fillAlpha: 0,
alignment: 1
}), showStretchRect.includes(StretchKey.X_LEFT) && g(Rect2d, {
key: StretchKey.X_LEFT,
draggable: true,
x: posX,
y: posY + height / 2,
width: stretchRectSize,
height: stretchRectSize,
central: true,
lineWidth: 1,
lineColor: color,
fillColor: 0xffffff,
fillAlpha: 0.01,
alignment: 1,
onDragStart: this.stretchHandler(StretchKey.X_LEFT, 'start'),
onDragMove: this.stretchHandler(StretchKey.X_LEFT, 'move'),
onDragEnd: this.stretchHandler(StretchKey.X_LEFT, 'end')
}), showStretchRect.includes(StretchKey.X_RIGHT) && g(Rect2d, {
key: StretchKey.X_RIGHT,
draggable: true,
x: posX + width,
y: posY + height / 2,
width: stretchRectSize,
height: stretchRectSize,
central: true,
lineWidth: 1,
lineColor: color,
fillColor: 0xffffff,
fillAlpha: 0.01,
alignment: 1,
onDragStart: this.stretchHandler(StretchKey.X_RIGHT, 'start'),
onDragMove: this.stretchHandler(StretchKey.X_RIGHT, 'move'),
onDragEnd: this.stretchHandler(StretchKey.X_RIGHT, 'end')
}), showStretchRect.includes(StretchKey.Y_TOP) && g(Rect2d, {
key: StretchKey.Y_TOP,
draggable: true,
x: posX + width / 2,
y: posY,
width: stretchRectSize,
height: stretchRectSize,
central: true,
lineWidth: 1,
lineColor: color,
fillColor: 0xffffff,
fillAlpha: 0.01,
alignment: 1,
onDragStart: this.stretchHandler(StretchKey.Y_TOP, 'start'),
onDragMove: this.stretchHandler(StretchKey.Y_TOP, 'move'),
onDragEnd: this.stretchHandler(StretchKey.Y_TOP, 'end')
}), showStretchRect.includes(StretchKey.Y_BOTTOM) && g(Rect2d, {
key: StretchKey.Y_BOTTOM,
draggable: true,
x: posX + width / 2,
y: posY + height,
width: stretchRectSize,
height: stretchRectSize,
central: true,
lineWidth: 1,
lineColor: color,
fillColor: 0xffffff,
fillAlpha: 0.01,
alignment: 1,
onDragStart: this.stretchHandler(StretchKey.Y_BOTTOM, 'start'),
onDragMove: this.stretchHandler(StretchKey.Y_BOTTOM, 'move'),
onDragEnd: this.stretchHandler(StretchKey.Y_BOTTOM, 'end')
}), deleteIcon && g(Image2d, {
key: 'delete',
clickable: true,
x: posX,
y: posY,
central: true,
width: deleteIconSize,
height: deleteIconSize,
radius: deleteIconSize / 2,
lineWidth: 2,
lineColor: color,
fillColor: color,
fillAlpha: 1,
fit: 'cover',
backgroundImage: deleteIcon,
onClick: this.deleteHandler
}), copyIcon && g(Image2d, {
key: 'copy',
clickable: true,
x: posX + width,
y: posY,
central: true,
width: copyIconSize,
height: copyIconSize,
radius: copyIconSize / 2,
lineWidth: 2,
lineColor: color,
fillColor: color,
fillAlpha: 1,
fit: 'cover',
backgroundImage: copyIcon,
onClick: this.copyHandler
}), adjustIcon && g(Image2d, {
key: 'adjust',
draggable: true,
x: central ? width / 2 : width,
y: central ? height / 2 : height,
central: true,
width: adjustIconSize,
height: adjustIconSize,
radius: adjustIconSize / 2,
lineWidth: 2,
lineColor: color,
fillColor: color,
fillAlpha: 1,
fit: 'cover',
backgroundImage: adjustIcon,
onDragStart: this.dragHandler('start'),
onDragMove: this.dragHandler('move'),
onDragEnd: this.dragHandler('end')
})];
}
}]);
}(Mesh2D);
export { Gizmo2d as default };