@turbox3d/renderer-core
Version:
Large-scale declarative graphic ui core renderer
491 lines (490 loc) • 18.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BaseMesh = void 0;
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 _reactivity = require("@turbox3d/reactivity");
var _eventManager = require("@turbox3d/event-manager");
var _shared = require("@turbox3d/shared");
var _scene = require("./scene");
var _component = require("./component");
var _utils = require("./utils");
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; })(); } /* eslint-disable react/no-unused-class-component-methods */
var WARN_TXT = 'Passing the {id} and {type} props or rewrite getViewEntity() is recommended while mesh component is interactive.';
var BaseMesh = exports.BaseMesh = /*#__PURE__*/function (_PureComponent) {
function BaseMesh() {
var _this;
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
(0, _classCallCheck2["default"])(this, BaseMesh);
_this = _callSuper(this, BaseMesh, [props]);
/** 视图对象的类型（有相机、灯光、模型三类，默认为 model） */
_this.viewType = 'model';
/** 响应式的渲染任务管线 */
_this.reactivePipeLine = [];
/** 是否默认添加到场景中。默认：true */
_this.autoAppendToWorld = true;
_this.reactions = [];
_this._on$Click = function (event) {
var tools = _this.context.getSceneTools();
var viewEntity = _this.getViewEntity();
if (viewEntity.id !== void 0 && viewEntity.type !== void 0) {
_this.forwardToCommand(_eventManager.EventType.onClick, viewEntity, event, tools);
}
return _this.onClick(viewEntity, event, tools);
};
_this._on$DBClick = function (event) {
var tools = _this.context.getSceneTools();
var viewEntity = _this.getViewEntity();
if (viewEntity.id !== void 0 && viewEntity.type !== void 0) {
_this.forwardToCommand(_eventManager.EventType.onDBClick, viewEntity, event, tools);
}
return _this.onDBClick(viewEntity, event, tools);
};
_this._on$RightClick = function (event) {
var tools = _this.context.getSceneTools();
var viewEntity = _this.getViewEntity();
if (viewEntity.id !== void 0 && viewEntity.type !== void 0) {
_this.forwardToCommand(_eventManager.EventType.onRightClick, viewEntity, event, tools);
}
return _this.onRightClick(viewEntity, event, tools);
};
_this._on$DragStart = function (event) {
var tools = _this.context.getSceneTools();
var viewEntity = _this.getViewEntity();
if (viewEntity.id !== void 0 && viewEntity.type !== void 0) {
_this.forwardToCommand(_eventManager.EventType.onDragStart, viewEntity, event, tools);
}
return _this.onDragStart(viewEntity, event, tools);
};
_this._on$DragMove = function (event) {
var tools = _this.context.getSceneTools();
var viewEntity = _this.getViewEntity();
if (viewEntity.id !== void 0 && viewEntity.type !== void 0) {
_this.forwardToCommand(_eventManager.EventType.onDragMove, viewEntity, event, tools);
}
return _this.onDragMove(viewEntity, event, tools);
};
_this._on$DragEnd = function (event) {
var tools = _this.context.getSceneTools();
var viewEntity = _this.getViewEntity();
if (viewEntity.id !== void 0 && viewEntity.type !== void 0) {
_this.forwardToCommand(_eventManager.EventType.onDragEnd, viewEntity, event, tools);
}
return _this.onDragEnd(viewEntity, event, tools);
};
_this._on$PinchStart = function (event) {
var tools = _this.context.getSceneTools();
var viewEntity = _this.getViewEntity();
if (viewEntity.id !== void 0 && viewEntity.type !== void 0) {
_this.forwardToCommand(_eventManager.EventType.onPinchStart, viewEntity, event, tools);
}
return _this.onPinchStart(viewEntity, event, tools);
};
_this._on$Pinch = function (event) {
var tools = _this.context.getSceneTools();
var viewEntity = _this.getViewEntity();
if (viewEntity.id !== void 0 && viewEntity.type !== void 0) {
_this.forwardToCommand(_eventManager.EventType.onPinch, viewEntity, event, tools);
}
return _this.onPinch(viewEntity, event, tools);
};
_this._on$PinchEnd = function (event) {
var tools = _this.context.getSceneTools();
var viewEntity = _this.getViewEntity();
if (viewEntity.id !== void 0 && viewEntity.type !== void 0) {
_this.forwardToCommand(_eventManager.EventType.onPinchEnd, viewEntity, event, tools);
}
return _this.onPinchEnd(viewEntity, event, tools);
};
_this._on$RotateStart = function (event) {
var tools = _this.context.getSceneTools();
var viewEntity = _this.getViewEntity();
if (viewEntity.id !== void 0 && viewEntity.type !== void 0) {
_this.forwardToCommand(_eventManager.EventType.onRotateStart, viewEntity, event, tools);
}
return _this.onRotateStart(viewEntity, event, tools);
};
_this._on$Rotate = function (event) {
var tools = _this.context.getSceneTools();
var viewEntity = _this.getViewEntity();
if (viewEntity.id !== void 0 && viewEntity.type !== void 0) {
_this.forwardToCommand(_eventManager.EventType.onRotate, viewEntity, event, tools);
}
return _this.onRotate(viewEntity, event, tools);
};
_this._on$RotateEnd = function (event) {
var tools = _this.context.getSceneTools();
var viewEntity = _this.getViewEntity();
if (viewEntity.id !== void 0 && viewEntity.type !== void 0) {
_this.forwardToCommand(_eventManager.EventType.onRotateEnd, viewEntity, event, tools);
}
return _this.onRotateEnd(viewEntity, event, tools);
};
_this._on$Press = function (event) {
var tools = _this.context.getSceneTools();
var viewEntity = _this.getViewEntity();
if (viewEntity.id !== void 0 && viewEntity.type !== void 0) {
_this.forwardToCommand(_eventManager.EventType.onPress, viewEntity, event, tools);
}
return _this.onPress(viewEntity, event, tools);
};
_this._on$PressUp = function (event) {
var tools = _this.context.getSceneTools();
var viewEntity = _this.getViewEntity();
if (viewEntity.id !== void 0 && viewEntity.type !== void 0) {
_this.forwardToCommand(_eventManager.EventType.onPressUp, viewEntity, event, tools);
}
return _this.onPressUp(viewEntity, event, tools);
};
_this._on$HoverIn = function (event) {
var tools = _this.context.getSceneTools();
var viewEntity = _this.getViewEntity();
if (viewEntity.id !== void 0 && viewEntity.type !== void 0) {
_this.forwardToCommand(_eventManager.EventType.onHoverIn, viewEntity, event, tools);
}
return _this.onHoverIn(viewEntity, event, tools);
};
_this._on$HoverOut = function (event) {
var tools = _this.context.getSceneTools();
var viewEntity = _this.getViewEntity();
if (viewEntity.id !== void 0 && viewEntity.type !== void 0) {
_this.forwardToCommand(_eventManager.EventType.onHoverOut, viewEntity, event, tools);
}
return _this.onHoverOut(viewEntity, event, tools);
};
_this.view = _this.createDefaultView();
_this.interactiveTask = (0, _reactivity.reactive)(function () {
_this.applyInteractive();
});
return _this;
}
(0, _inherits2["default"])(BaseMesh, _PureComponent);
return (0, _createClass2["default"])(BaseMesh, [{
key: "commit",
value: function commit(type, updateRange) {
var _this2 = this;
// 删除操作
if (type === 'delete') {
if (this.reactions.length) {
this.reactions.forEach(function (reaction) {
return reaction.dispose();
});
}
this.interactiveTask.dispose();
// 删除交互配置
this.context.getSceneTools().updateInteractiveObject(this.view);
// 移除视图
this.removeFromWorld();
return;
}
// 创建操作
if (type === 'create') {
this.clearView();
this.draw();
if (this.reactivePipeLine.length) {
this.reactions = this.reactivePipeLine.map(function (task) {
return (0, _reactivity.reactive)(function () {
return task.call(_this2);
}, {
name: 'baseMeshReactivePipeLine',
immediately: false
});
});
}
// 将视图添加到场景中
this.appendToWorld();
// 配置交互能力
this.applyInteractive();
return;
}
// 更新操作
if (this._vNode.committing) {
return;
}
this._vNode.committing = true;
var _ref = updateRange || {},
interactive = _ref.interactive,
customProps = _ref.customProps;
if (interactive) {
this.applyInteractive();
}
if (!customProps) {
return;
}
this.clearView();
this.draw();
if (this.reactivePipeLine.length) {
/*
* props上的属性值变了，会强制全部重新执行（因为可能存在非响应式属性传入的情况，导致pipeLine不会重新执行）
* @todo props 和 pipeLine 同时都执行，需要合并
*/
this.reactivePipeLine.forEach(function (task) {
return task.call(_this2);
});
}
}
/**
* 绘制图形图像，默认在 componentDidMount 时调用
*/
}, {
key: "draw",
value: function draw() {
//
}
/**
* 设置当前 cursor 状态
*
* @param cursor
*/
}, {
key: "updateCursor",
value: function updateCursor(cursor) {
this.context.getSceneTools().updateCursor(cursor);
}
/**
* 恢复默认 cursor 状态
*/
}, {
key: "resetCursor",
value: function resetCursor() {
this.context.getSceneTools().updateCursor();
}
/**
* 标记当前对象是否可点击
*/
}, {
key: "onClickable",
value: function onClickable() {
return !!this.props.clickable;
}
/**
* 标记当前对象是否可 Hover
*/
}, {
key: "onHoverable",
value: function onHoverable() {
return !!this.props.hoverable;
}
/**
* 标记当前对象是否可拖拽
*/
}, {
key: "onDraggable",
value: function onDraggable() {
return !!this.props.draggable;
}
}, {
key: "onPinchable",
value: function onPinchable() {
return !!this.props.pinchable;
}
}, {
key: "onRotatable",
value: function onRotatable() {
return !!this.props.rotatable;
}
}, {
key: "onPressable",
value: function onPressable() {
return !!this.props.pressable;
}
}, {
key: "interactiveConfig",
get: function get() {
var isClickable = this.onClickable();
var isDraggable = this.onDraggable();
var isHoverable = this.onHoverable();
var isPinchable = this.onPinchable();
var isRotatable = this.onRotatable();
var isPressable = this.onPressable();
return {
getViewEntity: this.getViewEntity.bind(this),
onClick: this._on$Click,
onDBClick: this._on$DBClick,
onRightClick: this._on$RightClick,
onDragStart: this._on$DragStart,
onDragMove: this._on$DragMove,
onDragEnd: this._on$DragEnd,
onPinchStart: this._on$PinchStart,
onPinch: this._on$Pinch,
onPinchEnd: this._on$PinchEnd,
onRotateStart: this._on$RotateStart,
onRotate: this._on$Rotate,
onRotateEnd: this._on$RotateEnd,
onPress: this._on$Press,
onPressUp: this._on$PressUp,
onHoverIn: this._on$HoverIn,
onHoverOut: this._on$HoverOut,
isClickable: isClickable,
isDraggable: isDraggable,
isHoverable: isHoverable,
isPinchable: isPinchable,
isRotatable: isRotatable,
isPressable: isPressable
};
}
}, {
key: "onClick",
value: function onClick(viewEntity, event, tools) {
this.props.onClick && this.props.onClick(viewEntity, event, tools);
}
}, {
key: "onDBClick",
value: function onDBClick(viewEntity, event, tools) {
this.props.onDBClick && this.props.onDBClick(viewEntity, event, tools);
}
}, {
key: "onRightClick",
value: function onRightClick(viewEntity, event, tools) {
this.props.onRightClick && this.props.onRightClick(viewEntity, event, tools);
}
}, {
key: "onDragStart",
value: function onDragStart(viewEntity, event, tools) {
this.props.onDragStart && this.props.onDragStart(viewEntity, event, tools);
}
}, {
key: "onDragMove",
value: function onDragMove(viewEntity, event, tools) {
this.props.onDragMove && this.props.onDragMove(viewEntity, event, tools);
}
}, {
key: "onDragEnd",
value: function onDragEnd(viewEntity, event, tools) {
this.props.onDragEnd && this.props.onDragEnd(viewEntity, event, tools);
}
}, {
key: "onPinchStart",
value: function onPinchStart(viewEntity, event, tools) {
this.props.onPinchStart && this.props.onPinchStart(viewEntity, event, tools);
}
}, {
key: "onPinch",
value: function onPinch(viewEntity, event, tools) {
this.props.onPinch && this.props.onPinch(viewEntity, event, tools);
}
}, {
key: "onPinchEnd",
value: function onPinchEnd(viewEntity, event, tools) {
this.props.onPinchEnd && this.props.onPinchEnd(viewEntity, event, tools);
}
}, {
key: "onRotateStart",
value: function onRotateStart(viewEntity, event, tools) {
this.props.onRotateStart && this.props.onRotateStart(viewEntity, event, tools);
}
}, {
key: "onRotate",
value: function onRotate(viewEntity, event, tools) {
this.props.onRotate && this.props.onRotate(viewEntity, event, tools);
}
}, {
key: "onRotateEnd",
value: function onRotateEnd(viewEntity, event, tools) {
this.props.onRotateEnd && this.props.onRotateEnd(viewEntity, event, tools);
}
}, {
key: "onPress",
value: function onPress(viewEntity, event, tools) {
this.props.onPress && this.props.onPress(viewEntity, event, tools);
}
}, {
key: "onPressUp",
value: function onPressUp(viewEntity, event, tools) {
this.props.onPressUp && this.props.onPressUp(viewEntity, event, tools);
}
}, {
key: "onHoverIn",
value: function onHoverIn(viewEntity, event, tools) {
this.props.onHoverIn && this.props.onHoverIn(viewEntity, event, tools);
}
}, {
key: "onHoverOut",
value: function onHoverOut(viewEntity, event, tools) {
this.props.onHoverOut && this.props.onHoverOut(viewEntity, event, tools);
}
}, {
key: "getViewEntity",
value: function getViewEntity() {
var _this$props = this.props,
id = _this$props.id,
type = _this$props.type;
var isClickable = this.onClickable();
var isDraggable = this.onDraggable();
var isHoverable = this.onHoverable();
var isPinchable = this.onPinchable();
var isRotatable = this.onRotatable();
var isPressable = this.onPressable();
if ((isClickable || isHoverable || isDraggable || isPinchable || isRotatable || isPressable) && (id === void 0 || type === void 0)) {
(0, _shared.warn)(WARN_TXT);
}
return {
id: id,
type: type
};
}
/** 转发事件给CommandManager */
}, {
key: "forwardToCommand",
value: function forwardToCommand(eventType, viewEntity, event, tools) {
var commandMgr = this.context.getCommandManager();
if (commandMgr) {
commandMgr.distributeEvent(eventType, viewEntity, event, tools);
}
}
/**
* 将当前视图对象添加到视图中
*/
}, {
key: "appendToWorld",
value: function appendToWorld() {
if (this.autoAppendToWorld) {
var parent = (0, _utils.getMeshParent)(this);
if (parent) {
var isCameraOrLight = this.viewType === 'camera' || this.viewType === 'light';
if (isCameraOrLight) {
while (parent && !(parent instanceof _scene.BaseScene && parent.sceneType === _scene.SceneType.Scene3D)) {
parent = (0, _utils.getMeshParent)(parent);
}
if (parent && parent.scene) {
this.addViewToScene(parent, this.view);
}
} else {
parent.addChildView(this.view);
}
} else {
(0, _shared.warn)('Cannot retrieve parent Mesh or Scene.');
}
}
}
/**
* 激活视图对象的交互状态，并更新交互配置
*/
}, {
key: "applyInteractive",
value: function applyInteractive() {
var isClickable = this.onClickable();
var isDraggable = this.onDraggable();
var isHoverable = this.onHoverable();
var isPinchable = this.onPinchable();
var isRotatable = this.onRotatable();
var isPressable = this.onPressable();
this.setViewInteractive(isClickable || isHoverable || isDraggable || isPinchable || isRotatable || isPressable);
if (!this._vNode) {
return;
}
if (isClickable || isHoverable || isDraggable || isPinchable || isRotatable || isPressable) {
this.context && this.context.getSceneTools().updateInteractiveObject(this.view, this.interactiveConfig);
} else {
this.context && this.context.getSceneTools().updateInteractiveObject(this.view);
}
}
}]);
}(_component.PureComponent);