(stores: T) => T;
18 |
19 | if (module.hot) {
20 | const cache = require.cache;
21 | if (!module.parents || module.parents.length === 0) {
22 | fail('`hot` is not supported on your system.');
23 | }
24 | const parent = cache[module.parents[0]];
25 | if (!parent) {
26 | fail('`hot` is not supported on your system.');
27 | }
28 | // remove from cache, trigger create new hot module and update ref
29 | delete cache[module.id];
30 | hot = reactComponentHot(parent);
31 | hotDomain = domainHot(parent);
32 | }
33 |
--------------------------------------------------------------------------------
/packages/renderer-core/src/utils.ts:
--------------------------------------------------------------------------------
1 | import { Component } from './component';
2 | import { NodeTag } from './common';
3 |
4 | /**
5 | * 找寻类型为 BaseMesh | BaseScene 的上层组件
6 | * @param component
7 | */
8 | export function getMeshParent(component: Component) {
9 | const vNode = component._vNode;
10 |
11 | if (!vNode) {
12 | return;
13 | }
14 |
15 | let parent = vNode.parent;
16 |
17 | while (parent) {
18 | if (parent && (parent.tag === NodeTag.SCENE || parent.tag === NodeTag.MESH)) {
19 | return parent.instance;
20 | }
21 |
22 | parent = parent.parent;
23 | }
24 | }
25 |
26 | export function getSceneParent(component: Component) {
27 | const vNode = component._vNode;
28 |
29 | if (!vNode) {
30 | return;
31 | }
32 |
33 | let parent = vNode.parent;
34 |
35 | while (parent) {
36 | if (parent && parent.tag === NodeTag.SCENE) {
37 | return parent.instance;
38 | }
39 |
40 | parent = parent.parent;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/demo/src/image-builder/views/world/hintLine/index.ts:
--------------------------------------------------------------------------------
1 | import { Reactive, Component, g, Rect2d, MathUtils } from '@turbox3d/turbox';
2 | import { RenderOrder } from '../../../common/consts/scene';
3 | import { appCommandManager } from '../../../commands';
4 | import { BLUE } from '../../../common/consts/color';
5 |
6 | @Reactive
7 | export class HintLine extends Component {
8 | render() {
9 | const hinted = appCommandManager.default.hint.getHintedEntity();
10 | return [
11 | hinted &&
12 | g(Rect2d, {
13 | key: 'wireframe',
14 | x: hinted.position.x,
15 | y: hinted.position.y,
16 | width: hinted.size.x,
17 | height: hinted.size.y,
18 | central: true,
19 | lineWidth: 1,
20 | lineColor: BLUE,
21 | fillAlpha: 0,
22 | alignment: 1,
23 | rotation: hinted.rotation.z * MathUtils.DEG2RAD,
24 | zIndex: RenderOrder.GIZMO,
25 | }),
26 | ];
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/packages/command-manager/src/create.ts:
--------------------------------------------------------------------------------
1 | import { IConstructorOf } from '@turbox3d/shared';
2 | import { Command } from './Command';
3 |
4 | // 仅作为类型标示无参数的 Command 生命周期函数
5 | class INoParamCommand {
6 | apply() {
7 | //
8 | }
9 |
10 | active() {
11 | //
12 | }
13 | }
14 |
15 | // 仅作为类型标示有参数的 Command 生命周期函数
16 | class IParamCommand {
17 | apply(param: P) {
18 | //
19 | }
20 |
21 | active(param: P) {
22 | //
23 | }
24 | }
25 |
26 | type LifeCircleClass
= P extends {} ? IParamCommand
: INoParamCommand;
27 |
28 | export type CommandType = Omit;
29 |
30 | // type E = keyof Command;
31 |
32 | // type P = Pick;
33 |
34 | /**
35 | * 构建一个 Command 基类
36 | *
37 | * 范型类型为激活时的函数参数
38 | */
39 | function create() {
40 | return Command as any as IConstructorOf & CommandType>;
41 | }
42 |
43 | export { create };
44 |
--------------------------------------------------------------------------------
/demo/src/lite-design/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { depCollector } from '@turbox3d/turbox';
4 |
5 | import { appCommandManager } from './commands/index';
6 | import { ldeStore } from './models/index';
7 | import { LeftPanel } from './views/leftPanel/index';
8 | import { MainScene } from './views/scene';
9 | import './common/styles/base.less';
10 | import { SceneUtil } from './views/scene/modelsWorld/index';
11 |
12 | window.$$DEMO_DEBUG = {
13 | appCommandManager,
14 | ldeStore,
15 | SceneUtil,
16 | depCollector,
17 | };
18 |
19 | ldeStore.document.createTimeTravel('lite-design', 20);
20 | ldeStore.document.applyTimeTravel();
21 |
22 | export const Demo = () => (
23 | <>
24 |
34 |
35 |
36 | );
37 |
38 | export default Demo;
39 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": true,
3 | "compilerOptions": {
4 | "module": "es6",
5 | "noImplicitAny": false,
6 | "declaration": true,
7 | "strictNullChecks": true,
8 | "allowJs": false,
9 | "jsx": "react",
10 | "esModuleInterop": true,
11 | "allowSyntheticDefaultImports": true,
12 | "removeComments": false,
13 | "preserveConstEnums": true,
14 | "experimentalDecorators": true,
15 | "sourceMap": false,
16 | "downlevelIteration": true,
17 | "target": "ES2018",
18 | "moduleResolution": "node",
19 | "resolveJsonModule": true,
20 | "lib": [
21 | "DOM",
22 | "ESNext"
23 | ],
24 | "types": [
25 | "node",
26 | "jest",
27 | "webpack-env"
28 | ],
29 | "skipLibCheck": true
30 | },
31 | "include": [
32 | "packages/**/src/**/*",
33 | "plugins/**/src/**/*"
34 | ],
35 | "exclude": [
36 | "node_modules",
37 | "**/node_modules/**/*",
38 | "**/__tests__/**/*"
39 | ]
40 | }
41 |
--------------------------------------------------------------------------------
/packages/event-manager/src/keyboard/type.ts:
--------------------------------------------------------------------------------
1 | import { HotKeyEventType } from './listener/util';
2 |
3 | export type Key = string | string[];
4 |
5 | export type Handler = (keyEventType: HotKeyEventType) => void;
6 | export type Condition = () => boolean;
7 |
8 | export interface HotKeyConfig {
9 | /**
10 | * 快捷键字符
11 | *
12 | * 单个：'ctrl+a'
13 | *
14 | * 多个：['ctrl+a', 'ctrl+b', 'meta+a']
15 | */
16 | key: Key;
17 | /**
18 | * 快捷功能名称
19 | */
20 | name?: string;
21 | /**
22 | * 快捷键功能描述
23 | */
24 | description?: string;
25 | /**
26 | * 快捷键是否露出
27 | *
28 | * @default false
29 | */
30 | show?: boolean;
31 | /**
32 | * 快捷键的额外信息（当快捷键冲突时会提示该信息）
33 | */
34 | info?: string;
35 | /**
36 | * 快捷键回调函数
37 | */
38 | handler: Handler;
39 | /**
40 | * 快捷键触发回调的条件函数
41 | *
42 | * @default () => true
43 | */
44 | condition?: Condition;
45 | }
46 |
47 | export interface HotKeyData {
48 | key: string;
49 | name?: string;
50 | description?: string;
51 | }
52 |
--------------------------------------------------------------------------------
/packages/reactivity/src/middlewares/mutation.ts:
--------------------------------------------------------------------------------
1 | import { Middleware } from '../interfaces';
2 | import { actionTypeChain } from '../core/store';
3 | import { EMaterialType } from '../const/enums';
4 | import { Action } from '../core/action';
5 | import { normalNextReturn } from './common';
6 |
7 | function createMutationMiddleware(): Middleware {
8 | return () => next => (dispatchedAction) => {
9 | const { name, displayName, type, isInner } = dispatchedAction;
10 | if (isInner || (type !== EMaterialType.MUTATION && type !== EMaterialType.UPDATE)) {
11 | return normalNextReturn(next, dispatchedAction);
12 | }
13 |
14 | if (Action.context) {
15 | Action.context.historyNode.actionChain.push({
16 | name,
17 | displayName,
18 | });
19 | } else {
20 | actionTypeChain.push({
21 | name,
22 | displayName,
23 | });
24 | }
25 |
26 | return normalNextReturn(next, dispatchedAction);
27 | };
28 | }
29 |
30 | export default createMutationMiddleware();
31 |
--------------------------------------------------------------------------------
/demo/src/image-builder/commands/default/index.ts:
--------------------------------------------------------------------------------
1 | import { CommandManager, SelectionCommand, HintCommand, SceneEvent, SceneTool, ViewEntity } from '@turbox3d/turbox';
2 |
3 | import { MoveCommand } from './move';
4 | import { imageBuilderStore } from '../../models';
5 |
6 | /**
7 | * 画布默认激活的全局事件指令集
8 | */
9 | class DefaultCommand extends CommandManager.compose({
10 | hint: HintCommand,
11 | select: SelectionCommand,
12 | move: MoveCommand,
13 | }) {
14 | active() {
15 | this.select.active({
16 | hint: this.hint,
17 | });
18 | this.hint.active(this.select);
19 | this.move.active();
20 | }
21 |
22 | protected onWheel(entity: ViewEntity, event: SceneEvent, tools: SceneTool): void {
23 | const sceneTool = imageBuilderStore.scene.sceneTools;
24 | if (!sceneTool) {
25 | return;
26 | }
27 | const rootView = sceneTool.getRootView();
28 | imageBuilderStore.scene.$update({
29 | canvasZoom: rootView.scale.x,
30 | });
31 | }
32 | }
33 |
34 | export { DefaultCommand };
35 |
--------------------------------------------------------------------------------
/demo/src/lite-design/views/scene/camera/index.tsx:
--------------------------------------------------------------------------------
1 | import * as THREE from 'three';
2 |
3 | import { Mesh3D } from '@turbox3d/turbox';
4 |
5 | import { CameraDistance } from '../../../common/consts/scene';
6 | import { ldeStore } from '../../../models/index';
7 |
8 | const NEAR_RATIO = 0.0001;
9 |
10 | export class OrthographicCamera extends Mesh3D {
11 | protected view = new THREE.OrthographicCamera(
12 | -ldeStore.scene.sceneWidth / 2,
13 | ldeStore.scene.sceneWidth / 2,
14 | ldeStore.scene.sceneHeight / 2,
15 | -ldeStore.scene.sceneHeight / 2,
16 | 1,
17 | 30000
18 | );
19 | protected viewType: 'camera' | 'light' | 'model' = 'camera';
20 | }
21 |
22 | export class PerspectiveCamera extends Mesh3D {
23 | protected view = new THREE.PerspectiveCamera(
24 | 50,
25 | ldeStore.scene.sceneWidth / ldeStore.scene.sceneHeight,
26 | CameraDistance.CAMERA * NEAR_RATIO,
27 | CameraDistance.CAMERA * (2 - NEAR_RATIO)
28 | );
29 | protected viewType: 'camera' | 'light' | 'model' = 'camera';
30 | }
31 |
--------------------------------------------------------------------------------
/packages/shared/src/graphic.ts:
--------------------------------------------------------------------------------
1 | export interface Vec2 {
2 | x: number;
3 | y: number;
4 | }
5 |
6 | export interface Vec3 {
7 | x: number;
8 | y: number;
9 | z: number;
10 | }
11 |
12 | /** 判断点是否在矩形内 */
13 | export function pointInRect(p: Vec2, rect: Vec2[]) {
14 | const [r1, r2] = rect;
15 | const c1 = (p.x - r1.x) * (p.x - r2.x);
16 | const c2 = (p.y - r1.y) * (p.y - r2.y);
17 | return c1 <= 0 && c2 <= 0;
18 | }
19 |
20 | interface ICanvasRect {
21 | width: number;
22 | height: number;
23 | x: number;
24 | y: number;
25 | }
26 |
27 | /**
28 | * 获得点击位置相对于 canvas 的坐标
29 | * 如果输入参数不合法，或点击位置超出 canvas 的 clientRect 则返回 undefined
30 | * @param vec 事件坐标
31 | * @param canvas 要接受的 canvas 对象
32 | */
33 | export function getRelativePositionFromEvent(vec: Vec2, rect: ICanvasRect) {
34 | const point = {
35 | x: vec.x - rect.x,
36 | y: vec.y - rect.y,
37 | };
38 | if (point.x <= 0 || point.y <= 0 || point.x > rect.width || point.y > rect.height) {
39 | return undefined;
40 | }
41 | return point;
42 | }
43 |
--------------------------------------------------------------------------------
/packages/math/src/index.ts:
--------------------------------------------------------------------------------
1 | import { Box2 } from './base/Box2';
2 | import { Box3 } from './base/Box3';
3 | import { Euler } from './base/Euler';
4 | import { Interval } from './base/Interval';
5 | import { Line3 } from './base/Line3';
6 | import { MathUtils } from './MathUtils';
7 | import { Matrix3 } from './base/Matrix3';
8 | import { Matrix4 } from './base/Matrix4';
9 | import { Quaternion } from './base/Quaternion';
10 | import { Ray } from './base/Ray';
11 | import { Tolerance } from './base/Tolerance';
12 | import { Vector2 } from './base/Vector2';
13 | import { Vector3 } from './base/Vector3';
14 | import { Vector4 } from './base/Vector4';
15 |
16 | export interface Vec2 {
17 | x: number;
18 | y: number;
19 | }
20 |
21 | export interface Vec3 {
22 | x: number;
23 | y: number;
24 | z: number;
25 | }
26 |
27 | export {
28 | Box2,
29 | Box3,
30 | Euler,
31 | Interval,
32 | Line3,
33 | MathUtils,
34 | Matrix3,
35 | Matrix4,
36 | Quaternion,
37 | Ray,
38 | Tolerance,
39 | Vector2,
40 | Vector3,
41 | Vector4,
42 | };
43 |
--------------------------------------------------------------------------------
/packages/graphic-component-three/src/index.ts:
--------------------------------------------------------------------------------
1 | const ENV = process.env.NODE_ENV;
2 | if (
3 | ENV !== 'production' &&
4 | ENV !== 'test' &&
5 | typeof console !== 'undefined' &&
6 | console.warn && // eslint-disable-line no-console
7 | typeof window !== 'undefined'
8 | ) {
9 | // eslint-disable-next-line no-console
10 | console.warn(
11 | 'You are using a whole package of graphic component three, ' +
12 | 'please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.',
13 | );
14 | }
15 |
16 | export { default as Arrow3d } from './arrow3d/index';
17 | export { default as Axis3d } from './axis3d/index';
18 | export { default as Circle3d } from './circle3d/index';
19 | export { default as Cube } from './cube/index';
20 | export { default as FatLine } from './fat-line/index';
21 | export { default as Gizmo3d } from './gizmo3d/index';
22 | export { default as Rect3d } from './rect3d/index';
23 | export { default as Wireframe } from './wireframe/index';
24 | export { default as Animation3d } from './animation3d/index';
25 |
--------------------------------------------------------------------------------
/demo/src/lite-design/views/scene/tempWorld/index.ts:
--------------------------------------------------------------------------------
1 | import { Reactive, Component, g } from '@turbox3d/turbox';
2 |
3 | import { Product2DSymbol } from '../../../common/consts/scene';
4 | import { ProductEntity } from '../../../models/entity/product';
5 | import { ldeStore } from '../../../models/index';
6 | import { SceneUtil } from '../modelsWorld/index';
7 |
8 | // import { Product2DViewEntity } from './Product2D';
9 |
10 | @Reactive
11 | export class TempWorld extends Component {
12 | render() {
13 | SceneUtil.get2DScreenShot = this.context.getSceneTools().getScreenShot;
14 | SceneUtil.get2DApp = this.context.getSceneTools().getApp;
15 | SceneUtil.get2DRootView = this.context.getSceneTools().getRootView;
16 | // if (ldeStore.document.skewModel) {
17 | // return [
18 | // g(Product2DViewEntity, {
19 | // model: ldeStore.document.skewModel as ProductEntity,
20 | // id: ldeStore.document.skewModel.id,
21 | // type: Product2DSymbol,
22 | // }),
23 | // ];
24 | // }
25 | return null;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/demo/src/image-builder/views/world/rangeLine/index.ts:
--------------------------------------------------------------------------------
1 | import { Reactive, Component, g, Rect2d, MathUtils } from '@turbox3d/turbox';
2 | import { imageBuilderStore } from '../../../models';
3 | import { RED } from '../../../common/consts/color';
4 | import { RenderOrder } from '../../../common/consts/scene';
5 |
6 | @Reactive
7 | export class RangeLine extends Component {
8 | render() {
9 | const showInvalidRangeFrame = imageBuilderStore.scene.isShowInvalidRangeFrame();
10 | const frames = imageBuilderStore.document.getFrameEntities();
11 | return [
12 | showInvalidRangeFrame &&
13 | g(Rect2d, {
14 | key: 'range-wireframe',
15 | width: frames[0].size.x,
16 | height: frames[0].size.y,
17 | x: frames[0].position.x,
18 | y: frames[0].position.y,
19 | rotation: frames[0].rotation.z * MathUtils.DEG2RAD,
20 | zIndex: RenderOrder.GIZMO,
21 | central: true,
22 | lineWidth: 1,
23 | lineColor: RED,
24 | fillAlpha: 0,
25 | alignment: 1,
26 | }),
27 | ];
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/demo/src/lite-design/commands/measure/index.ts:
--------------------------------------------------------------------------------
1 | import { Command, ViewEntity, SceneEvent, SceneTool, Action, Vec3, Vector3 } from '@turbox3d/turbox';
2 |
3 | import { MeasureDomain } from './domain';
4 |
5 | export class MeasureCommand extends Command {
6 | private action = Action.create('measure');
7 | measure = new MeasureDomain();
8 |
9 | protected onDragStart(viewEntity: ViewEntity, event: SceneEvent, tools: SceneTool) {
10 | const scenePosition = event.getScenePosition(0) as Vec3;
11 | this.action.execute(() => {
12 | this.measure.$update({
13 | start: new Vector3(scenePosition.x, scenePosition.y, scenePosition.z),
14 | });
15 | });
16 | }
17 |
18 | protected onDragMove(viewEntity: ViewEntity, event: SceneEvent, tools: SceneTool) {
19 | const scenePosition = event.getScenePosition(0) as Vec3;
20 | this.action.execute(() => {
21 | this.measure.$update({
22 | end: new Vector3(scenePosition.x, scenePosition.y, scenePosition.z),
23 | });
24 | });
25 | }
26 |
27 | protected onDragEnd() {
28 | this.action.complete();
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/packages/graphic-component-pixi/src/line2d/index.ts:
--------------------------------------------------------------------------------
1 | import { Vec2 } from '@turbox3d/shared';
2 | import { Mesh2D } from '@turbox3d/renderer-pixi';
3 | import * as PIXI from 'pixi.js';
4 | import DrawUtils from '../draw-utils';
5 |
6 | interface ILine2dProps {
7 | lineWidth?: number;
8 | lineColor?: number;
9 | alignment?: number;
10 | start: Vec2;
11 | end: Vec2;
12 | rotation?: number;
13 | scale?: Vec2;
14 | zIndex?: number;
15 | }
16 |
17 | export default class Line2d extends Mesh2D {
18 | protected view = new PIXI.Graphics();
19 |
20 | draw() {
21 | const { lineWidth = 2, lineColor = 0xffffff, start, end, alignment = 0.5, zIndex = 0 } = this.props;
22 | this.view.clear();
23 | this.view.zIndex = zIndex;
24 | DrawUtils.drawLine(this.view, {
25 | x0: start.x,
26 | y0: start.y,
27 | x1: end.x,
28 | y1: end.y,
29 | lineWidth,
30 | lineColor,
31 | alignment,
32 | });
33 | this.view.rotation = this.props.rotation ?? 0;
34 | this.view.scale.set(this.props.scale?.x ?? 1, this.props.scale?.y ?? 1);
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | turbox
6 |
7 |
8 |
9 |
10 |
16 |
17 |
18 |
19 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020-present, Felix Koo
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/demo/src/data-flow/domain/point.ts:
--------------------------------------------------------------------------------
1 | import Point2d from '../math/Point2d';
2 | import { Domain, mutation, reactor } from '@turbox3d/reactivity-react';
3 | import { Countertop } from './countertop';
4 | import { Line } from './line';
5 | import { EPointType } from '../types/enum';
6 |
7 | export class Point extends Domain {
8 | @reactor(true, true, function(target, property) {
9 | // console.log('$$$$$', target, property);
10 | // console.log(this);
11 | }) position: Point2d;
12 | @reactor type: EPointType;
13 | @reactor prevLine?: Line;
14 | @reactor nextLine?: Line;
15 | @reactor countertop?: Countertop;
16 |
17 | @mutation('更新点位置')
18 | updatePosition = (p: Point2d) => {
19 | this.position = p;
20 | }
21 |
22 | @mutation('更新点x位置')
23 | updatePositionX = () => {
24 | this.position.x = 1000;
25 | }
26 |
27 | constructor({
28 | position,
29 | type,
30 | }: {
31 | position: Point2d,
32 | type: EPointType,
33 | prevLine?: Line;
34 | nextLine?: Line;
35 | countertop?: Countertop;
36 | }) {
37 | super();
38 | this.position = position;
39 | this.type = type;
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/plugins/turbox-snippets/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "turbox-snippets",
3 | "displayName": "Turbox Snippets",
4 | "version": "1.0.17",
5 | "description": "Code snippets for Turbox",
6 | "author": "feifan ",
7 | "license": "MIT",
8 | "repository": {
9 | "type": "git",
10 | "url": "git+https://github.com/turbox3d/turbox.git"
11 | },
12 | "scripts": {
13 | "deploy": "pnpm exec vsce publish"
14 | },
15 | "publisher": "feifan-gff",
16 | "engines": {
17 | "vscode": "^1.28.0"
18 | },
19 | "categories": [
20 | "Snippets"
21 | ],
22 | "icon": "images/turbox.png",
23 | "contributes": {
24 | "snippets": [
25 | {
26 | "language": "javascript",
27 | "path": "./snippets/snippets.json"
28 | },
29 | {
30 | "language": "javascriptreact",
31 | "path": "./snippets/snippets.json"
32 | },
33 | {
34 | "language": "typescript",
35 | "path": "./snippets/snippets.json"
36 | },
37 | {
38 | "language": "typescriptreact",
39 | "path": "./snippets/snippets.json"
40 | }
41 | ]
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/demo/src/image-builder/views/world/entity/index.ts:
--------------------------------------------------------------------------------
1 | import { Reactive, Component, g } from '@turbox3d/turbox';
2 | import { imageBuilderStore } from '../../../models';
3 | import { FrameViewEntity } from './frame';
4 | import { ItemViewEntity } from './item';
5 | import { FrameEntity } from '../../../models/entity/frame';
6 | import { ItemEntity } from '../../../models/entity/item';
7 | import { FrameSymbol, ItemSymbol } from '../../../common/consts/view-entity';
8 |
9 | @Reactive
10 | export class ViewEntity extends Component {
11 | render() {
12 | const frames = imageBuilderStore.document.getFrameEntities();
13 | const items = imageBuilderStore.document.getItemEntities();
14 | return [
15 | ...frames.map(m => g(FrameViewEntity, {
16 | key: m.id,
17 | model: m as FrameEntity,
18 | id: m.id,
19 | type: FrameSymbol,
20 | })),
21 | ...items.map(m => g(ItemViewEntity, {
22 | key: m.id,
23 | model: m as ItemEntity,
24 | id: m.id,
25 | type: ItemSymbol,
26 | clickable: true,
27 | draggable: true,
28 | hoverable: true,
29 | })),
30 | ];
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/demo/src/3d/wireframe.tsx:
--------------------------------------------------------------------------------
1 | // import { EntityObject, Mesh3D } from '@turbox3d/turbox';
2 | // import * as THREE from 'three';
3 | // import { color16 } from './box';
4 |
5 | // interface IProps {
6 | // model: EntityObject;
7 | // }
8 |
9 | // export class WireFrame extends Mesh3D {
10 | // protected reactivePipeLine = [
11 | // this.updateGeometry,
12 | // ];
13 | // protected view = new THREE.Mesh();
14 |
15 | // updateGeometry() {
16 | // const { model } = this.props;
17 | // const box = model.getBox3();
18 | // const p0 = box[0];
19 | // const p1 = box[1];
20 | // const p3 = box[3];
21 | // const p7 = box[7];
22 | // const width = p3.x - p0.x;
23 | // const height = p7.y - p0.y;
24 | // const depth = p1.z - p0.z;
25 | // const geometry = new THREE.BoxGeometry(width, height, depth);
26 | // const material = new THREE.MeshBasicMaterial({ color: color16() });
27 | // const wireframe = new THREE.WireframeGeometry(geometry);
28 | // const line = new THREE.LineSegments(wireframe);
29 | // line.material = material;
30 | // this.view.position.set(0, 0, 0);
31 | // this.view.add(line);
32 | // }
33 | // }
34 |
--------------------------------------------------------------------------------
/packages/graphic-component-three/src/wireframe/index.ts:
--------------------------------------------------------------------------------
1 | import { Mesh3D } from '@turbox3d/renderer-three';
2 | import { Vec3 } from '@turbox3d/shared';
3 | import * as THREE from 'three';
4 | import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry.js';
5 | import { Wireframe as WireFrame } from 'three/examples/jsm/lines/Wireframe.js';
6 | import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';
7 |
8 | interface IProps {
9 | size: Vec3;
10 | color?: number;
11 | lineWidth?: number;
12 | }
13 |
14 | export default class Wireframe extends Mesh3D {
15 | protected reactivePipeLine = [this.updateGeometry];
16 | protected view = new WireFrame();
17 |
18 | private updateGeometry() {
19 | const { size, color, lineWidth } = this.props;
20 | const geometry = new THREE.BoxGeometry(size.x, size.y, size.z);
21 | const wireframe = new THREE.EdgesGeometry(geometry);
22 | const material = new LineMaterial({ color: color || 0xFFE802, linewidth: lineWidth || 0.002 });
23 | const lineGeo = new LineSegmentsGeometry().fromEdgesGeometry(wireframe);
24 | this.view.geometry = lineGeo;
25 | this.view.material = material;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/plugins/turbox-dev-tool/src/fps-monitor/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { fpsMonitor } from './fps';
3 |
4 | interface IProp {
5 | className?: string;
6 | }
7 |
8 | interface IState {
9 | fps: number;
10 | }
11 |
12 | export class FPSMonitorComponent extends React.Component {
13 | state = {
14 | fps: 0,
15 | };
16 | private interval?: number;
17 |
18 | componentDidMount() {
19 | fpsMonitor.start();
20 | this.interval = window.setInterval(() => {
21 | this.setState({
22 | fps: fpsMonitor.getFPS(),
23 | });
24 | }, 1000);
25 | }
26 |
27 | componentWillUnmount() {
28 | fpsMonitor.end();
29 | this.interval && window.clearInterval(this.interval);
30 | }
31 |
32 | render() {
33 | const { className } = this.props;
34 | let color: string;
35 | if (this.state.fps >= 40) {
36 | color = '#00cc00';
37 | } else if (this.state.fps >= 20) {
38 | color = '#fdea42';
39 | } else {
40 | color = '#ff0000';
41 | }
42 |
43 | return (
44 |
45 | FPS：{this.state.fps}
46 |
47 | );
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/packages/command-manager/demo/interactors/structure/DistributeCommandUnit.ts:
--------------------------------------------------------------------------------
1 | import { CommandUnit } from './CommandUnit';
2 | import { CommandUnitManager } from './Manager';
3 |
4 | interface Item {
5 | unit: CommandUnit;
6 | transformParam?: (...args: any[]) => any;
7 | }
8 |
9 | /**
10 | * 具有分发能力的 CommandUnit
11 | *
12 | * 根据参数筛选要激活的 CommandUnit
13 | */
14 | abstract class DistributeCommandUnit extends CommandUnit {
15 | private activeCommand: CommandUnit;
16 |
17 | active(...args: any[]) {
18 | // 如果存在未销毁的 CommandUnit , 请先销毁
19 | // this.dispose();
20 |
21 | const { unit, transformParam } = this.onActive(...args);
22 |
23 | const param = transformParam ? transformParam(...args) : args;
24 | this.activeCommand = unit;
25 | if (Array.isArray(param)) {
26 | this.activeCommand.active(...param);
27 | } else {
28 | this.activeCommand.active(param);
29 | }
30 | }
31 |
32 | dispose() {
33 | if (this.activeCommand) {
34 | this.activeCommand.dispose();
35 | }
36 | }
37 |
38 | /**
39 | * 用户需在该方法中实现分发逻辑
40 | *
41 | * @param args active 方法的入参
42 | */
43 | abstract onActive(...args: any[]): Item;
44 | }
45 |
46 | export { DistributeCommandUnit };
47 |
--------------------------------------------------------------------------------
/packages/reactivity/src/middlewares/perf.ts:
--------------------------------------------------------------------------------
1 | import { Middleware } from '../interfaces';
2 | import { normalNextReturn } from './common';
3 | import { EMPTY_ACTION_NAME } from '../const/symbol';
4 | import { ctx } from '../const/config';
5 | import { materialCallStack } from '../utils/materialCallStack';
6 |
7 | function createPerfMiddleware(): Middleware {
8 | return () => next => (dispatchedAction) => {
9 | if (!ctx.middleware.perf) {
10 | return normalNextReturn(next, dispatchedAction);
11 | }
12 | const { name, displayName } = dispatchedAction;
13 | const start = performance.now();
14 |
15 | const length = materialCallStack.stack.length;
16 | if (ctx.middleware.skipNestPerfLog && length !== 1) {
17 | return normalNextReturn(next, dispatchedAction);
18 | }
19 |
20 | return normalNextReturn(next, dispatchedAction, () => {
21 | const end = performance.now();
22 | console.log(
23 | `%c[TURBOX PERF]: ${name} ${displayName !== EMPTY_ACTION_NAME ? displayName : ''} ${(end - start).toFixed(3)}ms`,
24 | 'background: #FA54FF; color: #fff; font-weight: bold; padding: 3px 5px;',
25 | );
26 | });
27 | };
28 | }
29 |
30 | export default createPerfMiddleware();
31 |
--------------------------------------------------------------------------------
/demo/src/image-builder/common/utils/image.ts:
--------------------------------------------------------------------------------
1 | export function updateQueryStringParameter(url: string, key: string, value: string) {
2 | if (!value) {
3 | return url;
4 | }
5 | const re = new RegExp(`([?&])${key}=.*?(&|$)`, 'i');
6 | const separator = url.indexOf('?') !== -1 ? '&' : '?';
7 | if (url.match(re)) {
8 | return url.replace(re, `$1${key}=${value}$2`);
9 | }
10 | return `${url}${separator}${key}=${value}`;
11 | }
12 |
13 | function convertUrl(url: string, key = 'turbox') {
14 | if (url.includes(';base64,') || !url) {
15 | return url;
16 | }
17 | return updateQueryStringParameter(url, key, 'true');
18 | }
19 |
20 | export async function loadImageElement(url: string | Blob) {
21 | const img = new Image();
22 | img.setAttribute('crossOrigin', 'anonymous');
23 | img.src = url instanceof Blob ? URL.createObjectURL(url) : convertUrl(url);
24 | return new Promise<{
25 | element: HTMLImageElement;
26 | width: number;
27 | height: number;
28 | }>(resolve => {
29 | img.onload = () => {
30 | url instanceof Blob && URL.revokeObjectURL(img.src);
31 | resolve({
32 | element: img,
33 | width: img.width,
34 | height: img.height,
35 | });
36 | };
37 | });
38 | }
39 |
--------------------------------------------------------------------------------
/packages/shared/src/__tests__/compose.test.ts:
--------------------------------------------------------------------------------
1 | import { compose } from '../compose';
2 |
3 | describe('utils -> compose', () => {
4 | it('compose', () => {
5 | const original = param => `original${param}`;
6 | const middlewares = [(next) => (param) => {
7 | console.log('111');
8 | return next(param);
9 | }, (next) => (param) => {
10 | console.log('222');
11 | return next(param);
12 | }, (next) => (param) => {
13 | console.log('333');
14 | return next(param);
15 | }];
16 | const enhanced = compose(...middlewares)(original);
17 | expect(enhanced('test')).toBe('originaltest');
18 | });
19 |
20 | it('compose one middleware', () => {
21 | const original = param => `original${param}`;
22 | const middlewares = [(next) => (param) => {
23 | console.log('111');
24 | return next(param);
25 | }];
26 | const enhanced = compose(...middlewares)(original);
27 | expect(enhanced('test')).toBe('originaltest');
28 | });
29 |
30 | it('compose no middleware', () => {
31 | const original = param => `original${param}`;
32 | const middlewares = [];
33 | const enhanced = compose(...middlewares)(original);
34 | expect(enhanced('test')).toBe('originaltest');
35 | });
36 | });
37 |
--------------------------------------------------------------------------------
/packages/command-manager/demo/interactors/structure/CommandUnit.ts:
--------------------------------------------------------------------------------
1 | import { CommandUnitManager } from './Manager';
2 |
3 | /**
4 | * 业务处理模块
5 | */
6 | abstract class CommandUnit {
7 | constructor(private holder: CommandUnitManager) {}
8 |
9 | /**
10 | * 激活当前 CommandUnit
11 | *
12 | * 激活的 CommandUnit 将会收到场景视图中的交互事件
13 | *
14 | * 派生类重写该方法时，需调用 super.active()
15 | */
16 | active(...args: any[]) {
17 | this.holder.addActivatedCommand(this);
18 | }
19 |
20 | /**
21 | * 注销当前 CommandUnit
22 | *
23 | * CommandUnit 将不会响应场景视图中的交互事件
24 | *
25 | * 派生类重写该方法时，需调用 super.dispose()
26 | */
27 | dispose(result?: any) {
28 | this.holder.removeActivatedCommand(this, result);
29 | }
30 |
31 | // 场景交互回调
32 |
33 | onClick(entity: T) {}
34 |
35 | // onSelected(entity: T) {}
36 |
37 | onHoverIn(entity: T) {}
38 |
39 | onHoverOut(entity: T) {}
40 |
41 | beforeDrag(entity: T) {}
42 |
43 | onDrag(entity: T) {}
44 |
45 | afterDrag(entity: T) {}
46 |
47 | onMouseUp(entity: T) {}
48 |
49 | onMouseDown(entity: T) {}
50 |
51 | onMouseMove(entity: T) {}
52 |
53 | onThrottledDrag(entity: T) {}
54 |
55 | onThrottledMouseMove(entity: T) {}
56 |
57 | // TODO 考虑对视图能力的支持
58 | }
59 |
60 | export { CommandUnit };
61 |
--------------------------------------------------------------------------------
/packages/renderer-three/src/Mesh3D/Mesh3D.ts:
--------------------------------------------------------------------------------
1 | import * as THREE from 'three';
2 | import { BaseMesh, ComponentProps } from '@turbox3d/renderer-core';
3 | import { Vec2 } from '@turbox3d/shared';
4 | import { Scene3D } from '../Scene3D/index';
5 |
6 | export abstract class Mesh3D extends BaseMesh {
7 | constructor(props = {} as ComponentProps) {
8 | super(props);
9 | }
10 |
11 | createDefaultView() {
12 | return new THREE.Group();
13 | }
14 |
15 | addChildView(view: THREE.Object3D) {
16 | this.view.add(view);
17 | }
18 |
19 | clearView() {
20 | // if (this.view instanceof THREE.Mesh) {
21 | // this.view.clear();
22 | // }
23 | }
24 |
25 | removeFromWorld() {
26 | this.view.removeFromParent();
27 | }
28 |
29 | setViewInteractive(interactive: boolean) {
30 | this.view.userData.interactive = interactive;
31 | }
32 |
33 | addViewToScene(scene3d: Scene3D, view: THREE.Object3D) {
34 | scene3d.scene!.add(view);
35 | const isCamera = this.viewType === 'camera';
36 | if (isCamera) {
37 | scene3d.camera = view as THREE.Camera;
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/packages/math/src/base/Tolerance.ts:
--------------------------------------------------------------------------------
1 | export const TOLERANCE = 1E-6;
2 | export const TOLERANCE_HALF = TOLERANCE * 0.5;
3 | export const TOLERANCE_SQUARE = TOLERANCE * TOLERANCE;
4 | export const TOLERANCE_SAGITTA = 1;
5 |
6 | export class Tolerance {
7 | static COS_TOL = 1e-6;
8 | static DIST_TOL = 1e-6;
9 | static NUM_TOL = 1e-6;
10 | static global = new Tolerance();
11 | static setGlobal(cosTol: number, distTol: number, numTol: number) {
12 | Tolerance.global = new Tolerance(cosTol, distTol, numTol);
13 | }
14 |
15 | cosTol: number;
16 | distTol: number;
17 | numTol: number;
18 |
19 | constructor(cosTol?: number, distTol?: number, numTol?: number) {
20 | this.cosTol = cosTol || Tolerance.COS_TOL;
21 | this.distTol = distTol || Tolerance.DIST_TOL;
22 | this.numTol = numTol || Tolerance.NUM_TOL;
23 | }
24 |
25 | /**
26 | * set cosTol by given angle
27 | * @param angle
28 | * @param isRadian true means the angle is radian, false means the angle is degree
29 | */
30 | setCosTolByAngle(angle: number, isRadian: boolean) {
31 | const flag: number = isRadian ? 1 : Math.PI / 180;
32 | this.cosTol = 1 - Math.cos(angle * flag);
33 | }
34 |
35 | clone() {
36 | return new Tolerance(this.cosTol, this.distTol, this.numTol);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/demo/src/image-builder/views/world/entity/frame/index.ts:
--------------------------------------------------------------------------------
1 | import * as PIXI from 'pixi.js';
2 |
3 | import { Mesh2D, DrawUtils } from '@turbox3d/turbox';
4 |
5 | import { FrameEntity } from '../../../../models/entity/frame';
6 |
7 | export interface IFrameViewEntityProps {
8 | model: FrameEntity;
9 | }
10 |
11 | export class FrameViewEntity extends Mesh2D {
12 | protected view = new PIXI.Graphics();
13 | protected reactivePipeLine = [this.updateGeometry, this.updateMaterial];
14 |
15 | updateGeometry() {
16 | const { model } = this.props;
17 | this.view.clear();
18 | this.view.zIndex = model.renderOrder;
19 | DrawUtils.drawRect(this.view, {
20 | x: model.position.x,
21 | y: model.position.y,
22 | width: model.size.x,
23 | height: model.size.y,
24 | central: true,
25 | fillColor: model.bgColor,
26 | fillAlpha: 1,
27 | });
28 | }
29 |
30 | updateMaterial() {
31 | const { model } = this.props;
32 | if (model.imageData) {
33 | this.view.clear();
34 | DrawUtils.drawRect(this.view, {
35 | x: model.position.x,
36 | y: model.position.y,
37 | width: model.size.x,
38 | height: model.size.y,
39 | central: true,
40 | backgroundImage: model.imageData.src,
41 | });
42 | }
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/demo/src/lite-design/common/consts/scene.ts:
--------------------------------------------------------------------------------
1 | export enum CameraDistance {
2 | CAMERA = 1000,
3 | }
4 |
5 | export enum RenderOrder {
6 | EMPTY_BACKGROUND = -2,
7 | BACKGROUND = -1,
8 | SKY_BOX = 20,
9 | Cube = 30,
10 | CONTROL_POINT = 9999,
11 | }
12 |
13 | export enum Z_INDEX_ACTION {
14 | /** 置顶 */
15 | TOP = 'top',
16 | /** 置底 */
17 | BOTTOM = 'bottom',
18 | /** 下移 */
19 | DECREASE = 'decrease',
20 | /** 上移 */
21 | INCREASE = 'increase',
22 | }
23 |
24 | export enum MIRROR_ACTION {
25 | /** 左右镜像 */
26 | LEFT_RIGHT = 'left_right',
27 | /** 上下镜像 */
28 | TOP_BOTTOM = 'top_bottom',
29 | }
30 |
31 | export const ProductSymbol = Symbol('product');
32 | export const CubeSymbol = Symbol('cube');
33 | export const AssemblySymbol = Symbol('assembly');
34 | export const BackgroundSymbol = Symbol('background');
35 | export const ScalePointSymbol = Symbol('scale-point');
36 | export const RotatePointSymbol = Symbol('rotate-point');
37 | export const Product2DSymbol = Symbol('product-2d');
38 | export const SkewPointSymbol = Symbol('skew-point');
39 | export const ClipPointSymbol = Symbol('clip-point');
40 | export const ClipBorderSymbol = Symbol('clip-border');
41 | export const AdjustPointSymbol = Symbol('adjust-point');
42 | export const DeletePointSymbol = Symbol('delete-point');
43 | export const SkyBoxSymbol = Symbol('sky-box');
44 |
--------------------------------------------------------------------------------
/packages/graphic-component-pixi/src/draw-utils/drawLine.ts:
--------------------------------------------------------------------------------
1 | import * as PIXI from 'pixi.js';
2 | import { IGraphicOption, parseGraphicOption } from './option';
3 |
4 | interface ILineParam {
5 | x0: number;
6 | y0: number;
7 | x1: number;
8 | y1: number;
9 | }
10 |
11 | interface ILinesParam {
12 | points: number[];
13 | }
14 |
15 | /**
16 | * 绘制一条从 (x0, y0) 到 (x1, y1) 的线
17 | */
18 | export function drawLine(graphic: PIXI.Graphics, param: ILineParam & IGraphicOption) {
19 | // 样式配置
20 | const { lineWidth, lineColor, lineAlpha, alignment, native } = parseGraphicOption(param);
21 | graphic.lineStyle(lineWidth, lineColor, lineAlpha, alignment, native);
22 | // 坐标配置
23 | const { x0, y0, x1, y1 } = param;
24 | graphic.moveTo(x0, y0);
25 | graphic.lineTo(x1, y1);
26 | return graphic;
27 | }
28 |
29 | export function drawLines(graphic: PIXI.Graphics, param: ILinesParam & IGraphicOption) {
30 | // 样式配置
31 | const { lineWidth, lineColor, lineAlpha, alignment, native } = parseGraphicOption(param);
32 | graphic.lineStyle(lineWidth, lineColor, lineAlpha, alignment, native);
33 | // 坐标配置
34 | const [x0, y0] = param.points;
35 | graphic.moveTo(x0, y0);
36 | for (let index = 2; index < param.points.length; index += 2) {
37 | graphic.lineTo(param.points[index], param.points[index + 1]);
38 | }
39 | return graphic;
40 | }
41 |
--------------------------------------------------------------------------------
/packages/command-manager/src/type.ts:
--------------------------------------------------------------------------------
1 | import { IConstructorOf, Vec2, Vec3 } from '@turbox3d/shared';
2 | import { InteractiveConfig, ViewEntity, CoordinateType } from '@turbox3d/event-manager';
3 |
4 | export interface IDeclaredMap {
5 | [key: string]: IConstructorOf;
6 | }
7 |
8 | export type IInstanceMap> = {
9 | [K in keyof M]: InstanceType;
10 | };
11 |
12 | export type ComposedCommand> = IConstructorOf>;
13 |
14 | export interface SceneTool {
15 | updateInteractiveObject: (view: any, config?: InteractiveConfig) => void;
16 | updateCursor: (cursor?: string) => void;
17 | hitTarget: (point: { x: number; y: number }) => Partial | undefined;
18 | coordinateTransform: (point: Vec2 | Vec3, type: CoordinateType, z?: number) => Vec2 | Vec3;
19 | getCamera: () => any;
20 | getRaycaster: () => any;
21 | getScene: () => any;
22 | getRootView: () => any;
23 | getScreenShot: (
24 | sx?: number,
25 | sy?: number,
26 | w?: number,
27 | h?: number,
28 | fileType?: string,
29 | quality?: number,
30 | isBase64?: boolean
31 | ) => Promise;
32 | getApp: () => any;
33 | addTicker: (ticker: (deltaTime: number) => void) => void;
34 | removeTicker: (ticker: (deltaTime: number) => void) => void;
35 | }
36 |
--------------------------------------------------------------------------------
/packages/reactivity/src/index.ts:
--------------------------------------------------------------------------------
1 | import { use } from './core/use';
2 | import { config } from './const/config';
3 | import { mutation } from './decorators/mutation';
4 | // import { effect } from './decorators/effect';
5 | import { reactor } from './decorators/reactor';
6 | import { computed } from './decorators/computed';
7 | import { Domain, createDomain } from './core/domain';
8 | import { init } from './core/init';
9 | import { reactive, Reaction } from './core/reactive';
10 | import { TimeTravel } from './core/time-travel';
11 | import { ActionStatus } from './const/enums';
12 | import { Action } from './core/action';
13 | import { action } from './decorators/action';
14 | import { depCollector } from './core/collector';
15 | import { store, registerExternalBatchUpdate } from './core/store';
16 | import { REACTIVE_COMPONENT_NAME, UNSUBSCRIBE_HANDLER } from './const/symbol';
17 |
18 | export * from './utils/event';
19 | export * from './interfaces';
20 |
21 | init();
22 |
23 | export {
24 | reactive,
25 | // effect,
26 | mutation,
27 | computed,
28 | use,
29 | config,
30 | reactor,
31 | init,
32 | Domain,
33 | createDomain,
34 | TimeTravel,
35 | Action,
36 | ActionStatus,
37 | action,
38 | depCollector,
39 | Reaction,
40 | store,
41 | REACTIVE_COMPONENT_NAME,
42 | UNSUBSCRIBE_HANDLER,
43 | registerExternalBatchUpdate,
44 | };
45 |
--------------------------------------------------------------------------------
/demo/src/lite-design/views/scene/modelsWorld/SkewPoint.ts:
--------------------------------------------------------------------------------
1 | import { Reactive, Mesh3D, MathUtils, g } from '@turbox3d/turbox';
2 |
3 | import { RenderOrder } from '../../../common/consts/scene';
4 | import { SkewPointEntity } from '../../../models/entity/skewPoint';
5 | import { Circle } from '../helper/index';
6 |
7 | interface ISkewPointProps {
8 | model: SkewPointEntity;
9 | }
10 |
11 | @Reactive
12 | export class SkewPointViewEntity extends Mesh3D {
13 | protected reactivePipeLine = [this.updatePosition, this.updateRotation, this.updateScale];
14 |
15 | render() {
16 | return [
17 | g(Circle, {
18 | radius: this.props.model.radius,
19 | color: 0xbf975b,
20 | renderOrder: RenderOrder.CONTROL_POINT,
21 | }),
22 | ];
23 | }
24 |
25 | private updatePosition() {
26 | const { model } = this.props;
27 | this.view.position.set(model.position.x, model.position.y, model.position.z);
28 | }
29 |
30 | private updateRotation() {
31 | const { model } = this.props;
32 | this.view.rotation.set(
33 | model.rotation.x * MathUtils.DEG2RAD,
34 | model.rotation.y * MathUtils.DEG2RAD,
35 | model.rotation.z * MathUtils.DEG2RAD
36 | );
37 | }
38 |
39 | private updateScale() {
40 | const { model } = this.props;
41 | this.view.scale.set(model.scale.x, model.scale.y, model.scale.z);
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/packages/design-engine/src/mount-system/ViewMounter.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Reactive } from '@turbox3d/reactivity-react';
3 | import EnvSystem from '../env-system/index';
4 |
5 | interface IProps extends React.PropsWithChildren {
6 | /** 挂载点 */
7 | mountPointId?: string;
8 | /** 容器节点样式 */
9 | className?: string;
10 | /** 只在当前支持的环境下渲染，离开环境自动卸载 */
11 | environments?: string[];
12 | /** style */
13 | style?: React.CSSProperties;
14 | /** 切换环境时是否需要卸载 dom */
15 | unmountDom?: boolean;
16 | }
17 |
18 | @Reactive
19 | export class EnvViewMounter extends React.Component {
20 | static defaultProps = {
21 | className: '',
22 | mountPointId: '',
23 | environments: [],
24 | style: {},
25 | unmountDom: true,
26 | };
27 |
28 | render() {
29 | const { environments, className, mountPointId, style, unmountDom } = this.props;
30 | const matched = environments!.includes(EnvSystem.AppEnvMgr.appEnv);
31 | let styles = style;
32 | if (!matched) {
33 | if (unmountDom) {
34 | return null;
35 | }
36 | styles = {
37 | ...style,
38 | display: 'none',
39 | };
40 | }
41 | return (
42 |
47 | {this.props.children}
48 |
49 | );
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/packages/graphic-component-pixi/src/axis2d/index.ts:
--------------------------------------------------------------------------------
1 | import { Mesh2D } from '@turbox3d/renderer-pixi';
2 | import * as PIXI from 'pixi.js';
3 | import DrawUtils from '../draw-utils/index';
4 |
5 | interface IAxis2dProps {
6 | type?: 'front' | 'top' | 'left';
7 | }
8 |
9 | /** 坐标轴 2d 控件 */
10 | export default class Axis2d extends Mesh2D {
11 | protected view = new PIXI.Graphics();
12 |
13 | draw() {
14 | this.view.clear();
15 | this.view.zIndex = Number.MAX_SAFE_INTEGER;
16 | const red = 0xff0000; // x轴
17 | const green = 0x09ff00; // y轴
18 | const blue = 0x005cfc; // z轴
19 | let lineColors: number[] = [red, green];
20 | if (this.props.type === 'front') {
21 | lineColors = [red, green];
22 | } else if (this.props.type === 'top') {
23 | lineColors = [red, blue];
24 | } else if (this.props.type === 'left') {
25 | lineColors = [blue, green];
26 | }
27 | DrawUtils.drawLine(this.view, {
28 | x0: 0,
29 | y0: 0,
30 | x1: Number.MAX_SAFE_INTEGER,
31 | y1: 0,
32 | lineWidth: 5,
33 | lineColor: lineColors[0],
34 | alignment: 0.5,
35 | });
36 | DrawUtils.drawLine(this.view, {
37 | x0: 0,
38 | y0: 0,
39 | x1: 0,
40 | y1: Number.MAX_SAFE_INTEGER,
41 | lineWidth: 5,
42 | lineColor: lineColors[1],
43 | alignment: 0.5,
44 | });
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/plugins/turbox-dev-tool/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @turbox3d/turbox-dev-tool
2 |
3 | ## 1.0.22
4 |
5 | ### Patch Changes
6 |
7 | - fix: enhance gizmo2d&text2d
8 |
9 | ## 1.0.21
10 |
11 | ### Patch Changes
12 |
13 | - fix: fix issue
14 |
15 | ## 1.0.20
16 |
17 | ### Patch Changes
18 |
19 | - fix: fix dep version
20 |
21 | ## 1.0.19
22 |
23 | ### Patch Changes
24 |
25 | - feat: add inference engine&fix rect2d&add line2d&add keyup hot key feature
26 |
27 | ## 1.0.18
28 |
29 | ### Patch Changes
30 |
31 | - fix: fix build issue
32 |
33 | ## 1.0.17
34 |
35 | ### Patch Changes
36 |
37 | - fix: update version
38 |
39 | ## 1.0.16
40 |
41 | ### Patch Changes
42 |
43 | - f188584: Fix build script
44 |
45 | ## 1.0.15
46 |
47 | ### Patch Changes
48 |
49 | - Sync code
50 |
51 | ## 1.0.14
52 |
53 | ### Patch Changes
54 |
55 | - Upgrade deps: pixi.js->v7,three->v0.159,react->v18,react-dom->v18,typescript->v5
56 |
57 | ## 1.0.13
58 |
59 | ### Patch Changes
60 |
61 | - Move dts file to dist
62 |
63 | ## 1.0.12
64 |
65 | ### Patch Changes
66 |
67 | - Update build script&config file
68 |
69 | ## 1.0.11
70 |
71 | ### Patch Changes
72 |
73 | - Add doc gen building process
74 |
75 | ## 1.0.10
76 |
77 | ### Patch Changes
78 |
79 | - Upgrade react version
80 |
81 | ## 1.0.9
82 |
83 | ### Patch Changes
84 |
85 | - Lint change
86 |
87 | ## 1.0.8
88 |
89 | ### Patch Changes
90 |
91 | - Replace pnpm from lerna
92 |
--------------------------------------------------------------------------------
/packages/reactivity/src/middlewares/effect.ts:
--------------------------------------------------------------------------------
1 | // import { Effect, Middleware } from '../interfaces';
2 | // import { actionTypeChain } from '../core/store';
3 | // import { invariant } from '../utils/error';
4 | // import { EMaterialType } from '../const/enums';
5 | // import { Action } from '../core/action';
6 | // import { materialCallStack } from '../core/domain';
7 | // import { normalNextReturn } from './common';
8 |
9 | // function createEffectMiddleware(): Middleware {
10 | // return () => (next) => (dispatchedAction) => {
11 | // const { name, displayName, payload, type, original, action } = dispatchedAction;
12 |
13 | // if (type === EMaterialType.EFFECT) {
14 | // const length = materialCallStack.length;
15 | // if (length > 1) {
16 | // invariant(materialCallStack[length - 2] !== EMaterialType.MUTATION, 'Cannot trigger other effect while the current mutation is executing.');
17 | // }
18 |
19 | // const effect = original as Effect;
20 | // actionTypeChain.push({
21 | // name,
22 | // displayName,
23 | // });
24 |
25 | // return new Promise((resolve) => {
26 | // effect(action as Action, ...payload).then(() => {
27 | // resolve();
28 | // });
29 | // });
30 | // }
31 |
32 | // return normalNextReturn(next, dispatchedAction);
33 | // }
34 | // }
35 |
36 | // export default createEffectMiddleware();
37 |
--------------------------------------------------------------------------------
/demo/src/lite-design/views/scene/modelsWorld/ScalePoint.ts:
--------------------------------------------------------------------------------
1 | import { Reactive, Mesh3D, MathUtils, g } from '@turbox3d/turbox';
2 |
3 | import { RenderOrder } from '../../../common/consts/scene';
4 | import { ScalePointEntity } from '../../../models/entity/scalePoint';
5 | import { Rect3d } from '../helper/index';
6 |
7 | interface IScalePointProps {
8 | model: ScalePointEntity;
9 | }
10 |
11 | @Reactive
12 | export class ScalePointViewEntity extends Mesh3D {
13 | protected reactivePipeLine = [this.updatePosition, this.updateRotation, this.updateScale];
14 |
15 | render() {
16 | return [
17 | g(Rect3d, {
18 | width: this.props.model.radius * 1.5,
19 | height: this.props.model.radius * 1.5,
20 | renderOrder: RenderOrder.CONTROL_POINT,
21 | }),
22 | ];
23 | }
24 |
25 | private updatePosition() {
26 | const { model } = this.props;
27 | this.view.position.set(model.position.x, model.position.y, model.position.z);
28 | }
29 |
30 | private updateRotation() {
31 | const { model } = this.props;
32 | this.view.rotation.set(
33 | model.rotation.x * MathUtils.DEG2RAD,
34 | model.rotation.y * MathUtils.DEG2RAD,
35 | model.rotation.z * MathUtils.DEG2RAD
36 | );
37 | }
38 |
39 | private updateScale() {
40 | const { model } = this.props;
41 | this.view.scale.set(model.scale.x, model.scale.y, model.scale.z);
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/packages/graphic-component-pixi/src/index.ts:
--------------------------------------------------------------------------------
1 | const ENV = process.env.NODE_ENV;
2 | if (
3 | ENV !== 'production' &&
4 | ENV !== 'test' &&
5 | typeof console !== 'undefined' &&
6 | console.warn && // eslint-disable-line no-console
7 | typeof window !== 'undefined'
8 | ) {
9 | // eslint-disable-next-line no-console
10 | console.warn(
11 | 'You are using a whole package of graphic component pixi, ' +
12 | 'please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.',
13 | );
14 | }
15 |
16 | export { default as Rect2d } from './rect2d/index';
17 | export { default as Circle2d } from './circle2d/index';
18 | export { default as Polygon } from './polygon/index';
19 | export { default as Placement } from './placement/index';
20 | export { default as DrawUtils } from './draw-utils/index';
21 | export { default as Dimension } from './dimension/index';
22 | export { default as RadiusDimension } from './radius-dimension/index';
23 | export { default as AngleDimension } from './angle-dimension/index';
24 | export { default as Axis2d } from './axis2d/index';
25 | export { default as Arrow2d } from './arrow2d/index';
26 | export { default as Gizmo2d } from './gizmo2d/index';
27 | export { default as Text2d } from './text2d/index';
28 | export { default as Image2d } from './image2d/index';
29 | export { default as Line2d } from './line2d/index';
30 | export { default as Grid2d } from './grid2d/index';
31 |
--------------------------------------------------------------------------------
/packages/graphic-component-pixi/src/draw-utils/drawPath.ts:
--------------------------------------------------------------------------------
1 | import * as PIXI from 'pixi.js';
2 | import { drawLine } from './drawLine';
3 | import { IGraphicOption, parseGraphicOption } from './option';
4 |
5 | interface IPathParam {
6 | path: Array<{ x: number; y: number }>;
7 | /**
8 | * 绘制的路径是否闭合
9 | *
10 | * 默认：false，不闭合
11 | */
12 | closed?: boolean;
13 | }
14 |
15 | /**
16 | * 绘制一条路径
17 | */
18 | export function drawPath(graphic: PIXI.Graphics, param: IPathParam & IGraphicOption) {
19 | const { path, closed = false } = param;
20 | const length = path.length - 1;
21 |
22 | if (length < 1) {
23 | return;
24 | }
25 |
26 | // 样式配置
27 | const { lineWidth, lineColor, lineAlpha, alignment, native } = parseGraphicOption(param);
28 | graphic.lineStyle(lineWidth, lineColor, lineAlpha, alignment, native);
29 |
30 | for (let i = 0; i < length; i++) {
31 | drawLine(graphic, {
32 | x0: path[i].x,
33 | y0: path[i].y,
34 | x1: path[i + 1].x,
35 | y1: path[i + 1].y,
36 | lineWidth,
37 | lineColor,
38 | lineAlpha,
39 | alignment,
40 | native,
41 | });
42 | }
43 |
44 | if (closed) {
45 | drawLine(graphic, {
46 | x0: path[length].x,
47 | y0: path[length].y,
48 | x1: path[0].x,
49 | y1: path[0].y,
50 | lineWidth,
51 | lineColor,
52 | lineAlpha,
53 | alignment,
54 | native,
55 | });
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/demo/src/lite-design/views/scene/modelsWorld/RotatePoint.ts:
--------------------------------------------------------------------------------
1 | import { Reactive, Mesh3D, MathUtils, g } from '@turbox3d/turbox';
2 |
3 | import { RenderOrder } from '../../../common/consts/scene';
4 | import { RotatePointEntity } from '../../../models/entity/rotatePoint';
5 | import { Circle } from '../helper/index';
6 |
7 | interface IRotatePointProps {
8 | model: RotatePointEntity;
9 | }
10 |
11 | @Reactive
12 | export class RotatePointViewEntity extends Mesh3D {
13 | protected reactivePipeLine = [this.updatePosition, this.updateRotation, this.updateScale];
14 |
15 | render() {
16 | return [
17 | g(Circle, {
18 | radius: this.props.model.radius,
19 | imgUrl: 'https://sf16-va.tiktokcdn.com/obj/eden-va2/uhmplmeh7uhmplmbn/edm/rotate.png',
20 | renderOrder: RenderOrder.CONTROL_POINT,
21 | }),
22 | ];
23 | }
24 |
25 | private updatePosition() {
26 | const { model } = this.props;
27 | this.view.position.set(model.position.x, model.position.y, model.position.z);
28 | }
29 |
30 | private updateRotation() {
31 | const { model } = this.props;
32 | this.view.rotation.set(
33 | model.rotation.x * MathUtils.DEG2RAD,
34 | model.rotation.y * MathUtils.DEG2RAD,
35 | model.rotation.z * MathUtils.DEG2RAD
36 | );
37 | }
38 |
39 | private updateScale() {
40 | const { model } = this.props;
41 | this.view.scale.set(model.scale.x, model.scale.y, model.scale.z);
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/packages/command-manager/src/CommandManager.ts:
--------------------------------------------------------------------------------
1 | import { ViewEntity, SceneEvent, EventType } from '@turbox3d/event-manager';
2 | import { Command } from './Command';
3 | import { create } from './create';
4 | import { compose } from './compose';
5 | import { manager } from './manager';
6 | import { SceneTool } from './type';
7 | import { install } from './install';
8 |
9 | export abstract class CommandManager {
10 | /**
11 | * 构建一个 Command 基类
12 | *
13 | * 范型类型为激活时的函数参数
14 | */
15 | static create = create;
16 | /**
17 | * 构建一个组合了其他 Command 的结构（本质依然是一个 Command）
18 | */
19 | static compose = compose;
20 | /**
21 | * 构建一个 CommandManager 基类
22 | */
23 | static manager = manager;
24 | /**
25 | * 安装声明一系列指令集
26 | */
27 | static install = install;
28 | /**
29 | * 当前激活的 Command
30 | */
31 | protected activeCommand?: Command;
32 |
33 | installed() {
34 | //
35 | }
36 |
37 | toggleCommand(command?: Command) {
38 | this.activeCommand = command;
39 | }
40 |
41 | clearCommand() {
42 | this.activeCommand = undefined;
43 | }
44 |
45 | /**
46 | * 判断当前激活的 Command 是否为入参 command
47 | * @param command
48 | */
49 | isCommandActive(command: Command) {
50 | return this.activeCommand === command;
51 | }
52 |
53 | distributeEvent(eventType: EventType, ev: ViewEntity, event: SceneEvent, tools: SceneTool) {
54 | if (this.activeCommand) {
55 | this.activeCommand.distributeEvent(eventType, ev, event, tools);
56 | }
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/packages/renderer-pixi/src/Mesh2D/Mesh2D.ts:
--------------------------------------------------------------------------------
1 | import { BaseMesh, ComponentProps } from '@turbox3d/renderer-core';
2 | import { Vec2, warn } from '@turbox3d/shared';
3 | import * as PIXI from 'pixi.js';
4 |
5 | export abstract class Mesh2D extends BaseMesh {
6 | constructor(props = {} as ComponentProps) {
7 | super(props);
8 | if (this.view instanceof PIXI.Container) {
9 | this.view.sortableChildren = true;
10 | }
11 | }
12 |
13 | createDefaultView() {
14 | return new PIXI.Container();
15 | }
16 |
17 | addChildView(view: PIXI.DisplayObject) {
18 | if (this.view instanceof PIXI.Container) {
19 | this.view.addChild(view);
20 | }
21 | }
22 |
23 | clearView() {
24 | if (this.view instanceof PIXI.Graphics) {
25 | this.view.clear();
26 | }
27 | }
28 |
29 | removeFromWorld() {
30 | // 这里有可能因为父节点中主动触发了子节点的 destroy 方法，而导致无需在调用 destroy .(重复调用会报错)
31 | try {
32 | if (this.view instanceof PIXI.Container) {
33 | this.view.destroy({ children: false });
34 | } else {
35 | this.view.destroy();
36 | }
37 | } catch (e) {
38 | // 如果异常，也是该节点已经被卸载了，无需理会
39 | warn('destroy error');
40 | }
41 | }
42 |
43 | setViewInteractive(interactive: boolean) {
44 | this.view.eventMode = interactive ? 'static' : 'auto';
45 | }
46 |
47 | addViewToScene() {
48 | //
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/demo/src/lite-design/models/domain/scene.ts:
--------------------------------------------------------------------------------
1 | import { Domain, reactor, Vector3, mutation } from '@turbox3d/turbox';
2 |
3 | import { CameraDistance } from '../../common/consts/scene';
4 |
5 | export class SceneDomain extends Domain {
6 | /** 设备类型 */
7 | @reactor deviceType: 'iPad' | 'PC' = 'PC';
8 | @reactor cameraPosition = new Vector3(0, 0, CameraDistance.CAMERA);
9 | @reactor cameraTarget = new Vector3(0, 0, 0);
10 | @reactor cameraControlsEnabled = false;
11 | /** 中间阴影部分画布区域的缩放 */
12 | @reactor canvasZoom = 1;
13 | /** 画布缩放的限制范围 */
14 | @reactor canvasZoomRange = [0.1, 2];
15 | /** 中间阴影部分画布区域的位置 */
16 | @reactor canvasPosition = { x: 0, y: 0 };
17 | /** 中间阴影部分画布区域的尺寸比例 */
18 | @reactor canvasRatio = 16 / 9;
19 | /** 中间阴影部分画布区域的边距比例 */
20 | @reactor canvasMarginRatio = 0.95;
21 | @reactor isSkewMode = false;
22 | @reactor isClipMode = false;
23 | @reactor isPdfMode = false;
24 | @reactor hideSkewPoint = false;
25 | /** 场景的宽度 */
26 | @reactor sceneWidth = 0;
27 | /** 场景的高度 */
28 | @reactor sceneHeight = 0;
29 | @reactor hideClipPoint = false;
30 | @reactor resolution = window.devicePixelRatio;
31 | @reactor renderFlag2d = false;
32 | @reactor renderFlag3d = true;
33 |
34 | @mutation
35 | setResolution(res = window.devicePixelRatio) {
36 | this.resolution = res;
37 | }
38 |
39 | @mutation('', true)
40 | setRenderFlag2d(flag: boolean) {
41 | this.renderFlag2d = flag;
42 | }
43 |
44 | @mutation('', true)
45 | setRenderFlag3d(flag: boolean) {
46 | this.renderFlag3d = flag;
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/demo/src/lite-design/views/scene/modelsWorld/ClipBorder.ts:
--------------------------------------------------------------------------------
1 | import { BufferGeometry, LineDashedMaterial, LineSegments, Vector3 } from 'three';
2 |
3 | import { Reactive, Mesh3D } from '@turbox3d/turbox';
4 |
5 | import { ClipPointEntity } from '../../../models/entity/clipPoint';
6 |
7 | @Reactive
8 | export class ClipBorder extends Mesh3D<{ clipPoints: ClipPointEntity[] }> {
9 | protected reactivePipeLine = [this.updateGeometry];
10 | protected view = new LineSegments(
11 | new BufferGeometry(),
12 | new LineDashedMaterial({ color: 0xffffff, dashSize: 10, gapSize: 5 })
13 | );
14 |
15 | private updateGeometry() {
16 | const { clipPoints } = this.props;
17 | const points: Vector3[] = [];
18 | const xs = clipPoints.map(p => p.position.x);
19 | const ys = clipPoints.map(p => p.position.y);
20 | const { z } = clipPoints[0].position;
21 |
22 | points.push(new Vector3(Math.min(...xs), Math.max(...ys), z));
23 | points.push(new Vector3(Math.max(...xs), Math.max(...ys), z));
24 |
25 | points.push(new Vector3(Math.max(...xs), Math.max(...ys), z));
26 | points.push(new Vector3(Math.max(...xs), Math.min(...ys), z));
27 |
28 | points.push(new Vector3(Math.max(...xs), Math.min(...ys), z));
29 | points.push(new Vector3(Math.min(...xs), Math.min(...ys), z));
30 |
31 | points.push(new Vector3(Math.min(...xs), Math.min(...ys), z));
32 | points.push(new Vector3(Math.min(...xs), Math.max(...ys), z));
33 |
34 | this.view.geometry = new BufferGeometry().setFromPoints(points);
35 | this.view.computeLineDistances();
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/plugins/turbox-hot-loader/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | // based on https://github.com/mridgway/hoist-non-react-statics/blob/master/src/index.js
2 | const hoistBlackList = {
3 | $$typeof: true,
4 | render: true,
5 | compare: true,
6 | type: true,
7 | };
8 |
9 | export function copyStaticProperties(base, target) {
10 | const keys = Object.keys(base);
11 | for (let index = 0; index < keys.length; index++) {
12 | const key = keys[index];
13 | if (hoistBlackList[key] === void 0) {
14 | Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(base, key)!);
15 | }
16 | }
17 | }
18 |
19 | export const OBFUSCATED_ERROR =
20 | 'An invariant failed, however the error is obfuscated because this is an production build.';
21 |
22 | export function invariant(check: boolean, message?: string | boolean) {
23 | if (!check) throw new Error(`[turbox]: ${message || OBFUSCATED_ERROR}`);
24 | }
25 |
26 | export function fail(message: string | boolean): never {
27 | invariant(false, message);
28 | // eslint-disable-next-line no-throw-literal
29 | throw 'X';
30 | }
31 |
32 | export function warn(message: string | boolean) {
33 | console.warn(`[turbox]: ${message}`);
34 | }
35 |
36 | export function bind(fn, ctx) {
37 | function boundFn(a?: any) {
38 | const l: number = arguments.length;
39 | // eslint-disable-next-line no-nested-ternary
40 | return l
41 | ? l > 1
42 | // eslint-disable-next-line prefer-rest-params
43 | ? fn.apply(ctx, arguments)
44 | : fn.call(ctx, a)
45 | : fn.call(ctx);
46 | }
47 | return boundFn;
48 | }
49 |
--------------------------------------------------------------------------------
/packages/reactivity/src/core/use.ts:
--------------------------------------------------------------------------------
1 | import { compose, fail } from '@turbox3d/shared';
2 | import { Middleware, Store } from '../interfaces';
3 | import { Action } from './action';
4 | import { actionTypeChain } from './store';
5 | import { depCollector } from './collector';
6 |
7 | export const middlewares: Array = [];
8 |
9 | /**
10 | * Add middleware.
11 | */
12 | export function use(middleware: Middleware | Array, inner = true) {
13 | const arr = Array.isArray(middleware) ? middleware : [middleware];
14 | if (inner) {
15 | middlewares.unshift(...arr);
16 | } else {
17 | middlewares.push(...arr);
18 | }
19 | }
20 |
21 | export function applyMiddleware() {
22 | return (createStore: any): Store => {
23 | const store = createStore();
24 | let dispatch: any = () => {
25 | fail('Dispatching while constructing your middleware is not allowed. ' +
26 | 'Other middleware would not be applied to this dispatch.');
27 | };
28 | const exposedMethod = {
29 | getActionChain: () => {
30 | if (Action.context) {
31 | return Action.context.historyNode.actionChain.slice();
32 | }
33 | return actionTypeChain.slice();
34 | },
35 | getDependencyGraph: () => new Map(depCollector.dependencyGraph),
36 | dispatch: (...args: any[]) => dispatch(...args),
37 | };
38 | const runnerChain = middlewares.map(middleware => middleware(exposedMethod));
39 |
40 | dispatch = compose(...runnerChain)(store.dispatch);
41 |
42 | return {
43 | ...store,
44 | dispatch,
45 | };
46 | };
47 | }
48 |
--------------------------------------------------------------------------------
/docs/en-us/README.md:
--------------------------------------------------------------------------------
1 | # Turbox
2 |
3 | [](https://travis-ci.com/github/turbox3d/turbox)
4 | [](https://travis-ci.com/github/turbox3d/turbox)
5 | [](https://www.npmjs.com/package/@turbox3d/turbox)
6 | [](https://www.npmjs.com/package/@turbox3d/turbox)
7 | [](https://www.npmjs.com/package/@turbox3d/turbox)
8 |
9 | ## Introduction
10 |
11 | **Turbox** is a large-scale productivity application front-end framework.
12 |
13 | ## Documentation
14 |
15 | WIP...
16 |
17 | ## Ecosystem
18 |
19 | | Project | Status | Description |
20 | |---------|--------|-------------|
21 | | turbox-cli | - | Project cli tool, include scaffolding |
22 | | turbox-dev-tool | - | Browser DevTools extension |
23 | | turbox-loader | - | Turbox loader for webpack |
24 | | turbox-snippets | [see marketplace](https://marketplace.visualstudio.com/items?itemName=feifan-gff.turbox-snippets) | Vscode snippet extension |
25 |
26 | ## Feedback
27 |
28 | | Github Issue | Wechat |
29 | | --- | --- |
30 | | [turbox3d/turbox/issues](https://github.com/turbox3d/turbox/issues) | 
|
31 |
32 | ## License
33 |
34 | [MIT](http://opensource.org/licenses/MIT)
35 |
36 | Copyright (c) 2020-present, Felix Koo
37 |
--------------------------------------------------------------------------------
/packages/graphic-component-three/src/fat-line/index.ts:
--------------------------------------------------------------------------------
1 | import { Mesh3D } from '@turbox3d/renderer-three';
2 | import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';
3 | import { Line2 } from 'three/examples/jsm/lines/Line2.js';
4 | import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js';
5 | import { Vec3 } from '@turbox3d/shared';
6 |
7 | interface IFatLineProps {
8 | position: Vec3;
9 | rotation: Vec3;
10 | linePositions: number[];
11 | dashed?: boolean;
12 | linewidth?: number;
13 | color?: number;
14 | dashScale?: number;
15 | dashSize?: number;
16 | gapSize?: number;
17 | looped?: boolean;
18 | }
19 |
20 | export default class FatLine extends Mesh3D {
21 | protected reactivePipeLine = [this.updateGeometry];
22 | protected view = new Line2();
23 |
24 | private updateGeometry() {
25 | const { position, rotation, linePositions, dashed = false, linewidth = 0.002, color = 0xFFE802, dashScale = 0.4, dashSize = 1, gapSize = 1, looped = false } = this.props;
26 | const geometry = new LineGeometry();
27 | geometry.setPositions(looped ? [...linePositions, linePositions[0], linePositions[1], linePositions[2]] : linePositions);
28 | const material = new LineMaterial({
29 | color,
30 | linewidth,
31 | dashed,
32 | dashScale,
33 | dashSize,
34 | gapSize,
35 | alphaToCoverage: true,
36 | });
37 | this.view.geometry = geometry;
38 | this.view.material = material;
39 | this.view.position.set(position.x, position.y, position.z);
40 | this.view.rotation.set(rotation.x, rotation.y, rotation.z);
41 | this.view.computeLineDistances();
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/demo/src/lite-design/views/scene/modelsWorld/Assembly.ts:
--------------------------------------------------------------------------------
1 | import { Reactive, Mesh3D, MathUtils, EntityObject, Element, g } from '@turbox3d/turbox';
2 |
3 | import { appCommandManager } from '../../../commands/index';
4 | import { AssemblyEntity } from '../../../models/entity/assembly';
5 | import { WireFrame } from '../helper/index';
6 |
7 | interface IAssemblyProps {
8 | model: AssemblyEntity;
9 | renderEntityViews: (entities: IterableIterator) => Element[];
10 | }
11 |
12 | @Reactive
13 | export class AssemblyViewEntity extends Mesh3D {
14 | protected reactivePipeLine = [this.updatePosition, this.updateRotation, this.updateScale];
15 |
16 | render() {
17 | const { model } = this.props;
18 | const isSelected = appCommandManager.defaultCommand.select.getSelectedEntities().includes(model);
19 | const views = this.props.renderEntityViews(model.children.values());
20 | if (isSelected) {
21 | return [
22 | ...views,
23 | g(WireFrame, {
24 | model,
25 | }),
26 | ];
27 | }
28 | return views;
29 | }
30 |
31 | private updatePosition() {
32 | const { model } = this.props;
33 | this.view.position.set(model.position.x, model.position.y, model.position.z);
34 | }
35 |
36 | private updateRotation() {
37 | const { model } = this.props;
38 | this.view.rotation.set(
39 | model.rotation.x * MathUtils.DEG2RAD,
40 | model.rotation.y * MathUtils.DEG2RAD,
41 | model.rotation.z * MathUtils.DEG2RAD
42 | );
43 | }
44 |
45 | private updateScale() {
46 | const { model } = this.props;
47 | this.view.scale.set(model.scale.x, model.scale.y, model.scale.z);
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/plugins/turbox-dev-tool/src/fps-monitor/fps.ts:
--------------------------------------------------------------------------------
1 | export class FPSMonitor {
2 | costTimes: number[] = [];
3 | prevTime?: number;
4 | raf?: number;
5 | maxFPS = 120;
6 |
7 | getAverageCostTimePerFrame() {
8 | const length = this.costTimes.length;
9 | if (!length) {
10 | return 0;
11 | }
12 | return this.costTimes.reduce((prev, current) => prev + current, 0) / length;
13 | }
14 |
15 | record(costTime: number) {
16 | this.costTimes.push(costTime);
17 | if (this.costTimes.length > this.maxFPS) {
18 | this.costTimes.shift();
19 | }
20 | }
21 |
22 | start(maxFPS = 120) {
23 | this.maxFPS = maxFPS;
24 | this.end();
25 | if (this.maxFPS === 60) {
26 | this.raf = requestAnimationFrame(this.monitor);
27 | } else {
28 | this.raf = window.setTimeout(this.monitor, 1000 / this.maxFPS);
29 | }
30 | }
31 |
32 | end() {
33 | if (this.maxFPS === 60) {
34 | this.raf && cancelAnimationFrame(this.raf);
35 | } else {
36 | this.raf && window.clearTimeout(this.raf);
37 | }
38 | this.costTimes = [];
39 | this.prevTime = void 0;
40 | this.maxFPS = 120;
41 | }
42 |
43 | monitor = () => {
44 | const now = performance.now();
45 | if (this.prevTime !== void 0) {
46 | this.record(now - this.prevTime);
47 | }
48 | this.prevTime = now;
49 | if (this.maxFPS === 60) {
50 | this.raf = requestAnimationFrame(this.monitor);
51 | } else {
52 | this.raf = window.setTimeout(this.monitor, 1000 / this.maxFPS);
53 | }
54 | }
55 |
56 | getFPS() {
57 | return Math.ceil(1000 / this.getAverageCostTimePerFrame());
58 | }
59 | }
60 |
61 | export const fpsMonitor = new FPSMonitor();
62 |
--------------------------------------------------------------------------------
/demo/src/lite-design/views/scene/modelsWorld/Cube.ts:
--------------------------------------------------------------------------------
1 | import { Reactive, Mesh3D, MathUtils, Element, g } from '@turbox3d/turbox';
2 |
3 | import { appCommandManager } from '../../../commands/index';
4 | import { RenderOrder } from '../../../common/consts/scene';
5 | import { CubeEntity } from '../../../models/entity/cube';
6 | import { Cube, WireFrame } from '../helper/index';
7 |
8 | interface IProps {
9 | model: CubeEntity;
10 | }
11 |
12 | @Reactive
13 | export class CubeViewEntity extends Mesh3D {
14 | protected reactivePipeLine = [this.updatePosition, this.updateRotation, this.updateScale];
15 |
16 | render() {
17 | this.view.renderOrder = RenderOrder.Cube;
18 | const { model } = this.props;
19 | const isSelected = appCommandManager.defaultCommand.select.getSelectedEntities().includes(model);
20 | const views: Element[] = [];
21 | if (isSelected) {
22 | views.push(
23 | g(WireFrame, {
24 | model,
25 | })
26 | );
27 | }
28 | views.push(
29 | g(Cube, {
30 | model,
31 | })
32 | );
33 | return views;
34 | }
35 |
36 | private updatePosition() {
37 | const { model } = this.props;
38 | this.view.position.set(model.position.x, model.position.y, model.position.z);
39 | }
40 |
41 | private updateRotation() {
42 | const { model } = this.props;
43 | this.view.rotation.set(
44 | model.rotation.x * MathUtils.DEG2RAD,
45 | model.rotation.y * MathUtils.DEG2RAD,
46 | model.rotation.z * MathUtils.DEG2RAD
47 | );
48 | }
49 |
50 | private updateScale() {
51 | const { model } = this.props;
52 | this.view.scale.set(model.scale.x, model.scale.y, model.scale.z);
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/demo/src/image-builder/views/bottomBar/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Slider, Tooltip } from 'antd';
3 | import { ReactiveReact } from '@turbox3d/turbox';
4 | import { SyncOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
5 | import './index.less';
6 | import { imageBuilderStore } from '../../models';
7 |
8 | export const BottomBar = ReactiveReact(() => {
9 | const [min, max] = imageBuilderStore.scene.canvasZoomRange;
10 | const sceneTool = imageBuilderStore.scene.sceneTools;
11 | if (!sceneTool) {
12 | return null;
13 | }
14 | const scaleScene = (ratio: number) => {
15 | const rootView = sceneTool.getRootView();
16 | rootView.scale.x = ratio;
17 | rootView.scale.y = ratio;
18 | imageBuilderStore.scene.$update({
19 | canvasZoom: ratio,
20 | });
21 | };
22 | const resetView = () => {
23 | const rootView = sceneTool.getRootView();
24 | rootView.position.x = 0;
25 | rootView.position.y = 0;
26 | rootView.scale.x = 1;
27 | rootView.scale.y = 1;
28 | imageBuilderStore.scene.$update({
29 | canvasZoom: 1,
30 | });
31 | };
32 |
33 | return (
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
12 |
13 | test Map:
14 | {cts.countertops[0].myMap.size}
15 | {Array.from(cts.countertops[0].myMap).join()}
16 | {/* {cts.countertops[0].myMap.get(0)}
*/}
17 | {/* {cts.countertops[0].myMap.has(0) ? 'true' : 'false'}
*/}
18 | {cts.countertops[0].myMap.get(1)}
19 | {cts.countertops[0].myMap.has(1) ? 'true' : 'false'}
20 | {/* {cts.countertops[0].myMap.forEach((value, key) => {
21 | console.log(value, '...', key);
22 | })}
*/}
23 | {/* {cts.countertops[0].myMap.entries()}
*/}
24 | {/* {cts.countertops[0].myMap.keys()}
*/}
25 | {/* {cts.countertops[0].myMap.values()}
*/}
26 |
27 |
28 | test Set:
29 | {cts.countertops[0].mySet.size}
30 | {Array.from(cts.countertops[0].mySet).join()}
31 | {/* {cts.countertops[0].mySet.has(0) ? 'true' : 'false'}
*/}
32 | {/* {cts.countertops[0].mySet.has(1) ? 'true' : 'false'}
*/}
33 | {cts.countertops[0].mySet.has(1000) ? 'true' : 'false'}
34 | {/* {cts.countertops[0].mySet.forEach((value) => {
35 | console.log(value, '@@@');
36 | })}
*/}
37 | {/* {cts.countertops[0].mySet.entries()}
*/}
38 | {/* {cts.countertops[0].mySet.keys()}
*/}
39 | {/* {cts.countertops[0].mySet.values()}
*/}
40 |
41 |
4 | 
5 |
6 |
7 | [](https://travis-ci.com/github/turbox3d/turbox)
8 | [](https://travis-ci.com/github/turbox3d/turbox)
9 | [](https://www.npmjs.com/package/@turbox3d/turbox)
10 | [](https://www.npmjs.com/package/@turbox3d/turbox)
11 | [](https://www.npmjs.com/package/@turbox3d/turbox)
12 |
13 | Turbox
14 |
15 | **Turbox**（涡轮）是适合大型生产力软件应用的前端框架，场景来源于复杂大型 3D 业务
16 |
17 | ## 生态系统
18 |
19 | | Project | Status | Description |
20 | |---------|--------|-------------|
21 | | turbox-cli | - | Project cli tool, include scaffolding |
22 | | turbox-dev-tool | - | Browser DevTools extension |
23 | | turbox-loader | - | Turbox loader for webpack |
24 | | turbox-snippets | [see marketplace](https://marketplace.visualstudio.com/items?itemName=feifan-gff.turbox-snippets) | Vscode snippet extension |
25 |
26 | ## 文档
27 |
28 | [中文文档](https://turbox3d.github.io/turbox/#/zh-cn/turbox)
29 |
30 | Visit [turbox official website](https://turbox3d.github.io/turbox/#/en-us/).
31 |
32 | ## 反馈
33 |
34 | | Github Issue | 微信群 |
35 | | --- | --- |
36 | | [turbox3d/turbox/issues](https://github.com/turbox3d/turbox/issues) | |
37 |
38 | ## 许可证
39 |
40 | [MIT](http://opensource.org/licenses/MIT)
41 |
42 | Copyright (c) 2020-present, Felix Koo
43 |
--------------------------------------------------------------------------------
/demo/src/lite-design/views/scene/modelsWorld/ClipPoint.ts:
--------------------------------------------------------------------------------
1 | import { Reactive, Mesh3D, MathUtils, g } from '@turbox3d/turbox';
2 |
3 | import { RenderOrder } from '../../../common/consts/scene';
4 | import { ClipPointEntity } from '../../../models/entity/clipPoint';
5 | import { ldeStore } from '../../../models/index';
6 | import { Circle, Rect3d } from '../helper/index';
7 |
8 | interface IClipPointProps {
9 | model: ClipPointEntity;
10 | }
11 |
12 | @Reactive
13 | export class ClipPointViewEntity extends Mesh3D {
14 | protected reactivePipeLine = [this.updatePosition, this.updateRotation, this.updateScale];
15 |
16 | render() {
17 | const hotArea = ldeStore.scene.deviceType === 'iPad' ? this.props.model.radius * 6 : this.props.model.radius * 3;
18 | return [
19 | g(Rect3d, {
20 | width: hotArea,
21 | height: hotArea,
22 | opacity: 0,
23 | renderOrder: RenderOrder.CONTROL_POINT + 1,
24 | }),
25 | g(Circle, {
26 | radius: this.props.model.radius - 5,
27 | color: 0xffffff,
28 | renderOrder: RenderOrder.CONTROL_POINT,
29 | key: 1,
30 | }),
31 | g(Circle, {
32 | radius: this.props.model.radius,
33 | color: 0xbf975b,
34 | renderOrder: RenderOrder.CONTROL_POINT,
35 | key: 2,
36 | }),
37 | ];
38 | }
39 |
40 | private updatePosition() {
41 | const { model } = this.props;
42 | this.view.position.set(model.position.x, model.position.y, model.position.z);
43 | }
44 |
45 | private updateRotation() {
46 | const { model } = this.props;
47 | this.view.rotation.set(
48 | model.rotation.x * MathUtils.DEG2RAD,
49 | model.rotation.y * MathUtils.DEG2RAD,
50 | model.rotation.z * MathUtils.DEG2RAD
51 | );
52 | }
53 |
54 | private updateScale() {
55 | const { model } = this.props;
56 | this.view.scale.set(model.scale.x, model.scale.y, model.scale.z);
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/packages/graphic-component-pixi/src/circle2d/index.ts:
--------------------------------------------------------------------------------
1 | import * as PIXI from 'pixi.js';
2 | import { Mesh2D } from '@turbox3d/renderer-pixi';
3 | import { Vec2 } from '@turbox3d/shared';
4 | import DrawUtils from '../draw-utils/index';
5 |
6 | interface ICircle2DProps {
7 | center: Vec2;
8 | radius: number;
9 | rotation?: number;
10 | scale?: Vec2;
11 | lineWidth?: number;
12 | lineColor?: number;
13 | lineAlpha?: number;
14 | fillColor?: number;
15 | fillAlpha?: number;
16 | alpha?: number;
17 | alignment?: number;
18 | native?: boolean;
19 | zIndex?: number;
20 | }
21 |
22 | /** 正方形 */
23 | export default class Circle2d extends Mesh2D {
24 | protected view = new PIXI.Graphics();
25 | protected reactivePipeLine = [
26 | this.updateGeometry,
27 | this.updateMaterial,
28 | this.updatePosition,
29 | this.updateRotation,
30 | this.updateScale,
31 | ];
32 |
33 | updateGeometry() {
34 | this.view.clear();
35 | const {
36 | radius,
37 | lineWidth,
38 | lineColor,
39 | lineAlpha,
40 | fillColor,
41 | fillAlpha,
42 | alpha,
43 | alignment,
44 | native,
45 | } = this.props;
46 | DrawUtils.drawCircle(this.view, {
47 | cx: 0,
48 | cy: 0,
49 | radius,
50 | lineWidth,
51 | lineColor,
52 | lineAlpha,
53 | fillColor,
54 | fillAlpha,
55 | alpha,
56 | alignment,
57 | native,
58 | });
59 | }
60 |
61 | updateMaterial() {
62 | const { zIndex = 0 } = this.props;
63 | this.view.zIndex = zIndex;
64 | }
65 |
66 | updatePosition() {
67 | const { center } = this.props;
68 | this.view.position.set(center.x, center.y);
69 | }
70 |
71 | updateRotation() {
72 | this.view.rotation = this.props.rotation ?? 0;
73 | }
74 |
75 | updateScale() {
76 | const { scale = { x: 1, y: 1 } } = this.props;
77 | this.view.scale.set(scale.x, scale.y);
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/packages/graphic-component-pixi/src/angle-dimension/index.ts:
--------------------------------------------------------------------------------
1 | import { Mesh2D } from '@turbox3d/renderer-pixi';
2 | import * as PIXI from 'pixi.js';
3 | import { Vec2 } from '@turbox3d/shared';
4 | import { drawText } from '../_utils/utils';
5 |
6 | interface IXY {
7 | x: number;
8 | y: number;
9 | }
10 |
11 | interface IAngleDimensionProps {
12 | center: IXY;
13 | rotation?: number;
14 | scale?: Vec2;
15 | radius: number;
16 | startAngle: number;
17 | endAngle: number;
18 | anticlockwise: boolean;
19 | }
20 |
21 | /**
22 | * @description: 半径尺寸线
23 | */
24 | export default class AngleDimension extends Mesh2D {
25 | protected view = new PIXI.Graphics();
26 |
27 | public draw() {
28 | const graphics = this.view;
29 | graphics.clear();
30 |
31 | graphics.lineStyle(1, 0x131313);
32 | graphics.line.native = true;
33 |
34 | graphics.arc(this.props.center.x, this.props.center.y, this.props.radius, this.props.startAngle, this.props.endAngle, !this.props.anticlockwise);
35 |
36 | // calculate number text
37 | let k = -1;
38 | if (this.props.anticlockwise) k *= -1;
39 | if (this.props.endAngle % (Math.PI * 2) < this.props.startAngle % (Math.PI * 2)) k *= -1;
40 |
41 | let text = Math.abs(this.props.endAngle - this.props.startAngle) % (Math.PI * 2) * 180 / Math.PI;
42 | if (k < 0) text = 360 - text;
43 |
44 | const bisectorAngle = (this.props.startAngle + this.props.endAngle) / 2;
45 | const bisectorDir = { x: Math.cos(bisectorAngle), y: Math.sin(bisectorAngle) };
46 | drawText(graphics, text.toFixed(0), { offset: { x: this.props.center.x + 1.3 * k * this.props.radius * bisectorDir.x, y: this.props.center.y + 1.2 * k * this.props.radius * bisectorDir.y }, size: this.props.radius / 2, rotation: Math.PI / 2 + bisectorAngle });
47 |
48 | this.view.rotation = this.props.rotation ?? 0;
49 | this.view.scale.set(this.props.scale?.x ?? 1, this.props.scale?.y ?? 1);
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/packages/design-engine/src/selection-command/domain.ts:
--------------------------------------------------------------------------------
1 | import { Domain, mutation, reactor } from '@turbox3d/reactivity';
2 | import { batchRemove } from '@turbox3d/shared';
3 | import EntityObject from '../entity-object';
4 | import { ESelectMode } from './command';
5 |
6 | export class Selection extends Domain {
7 | @reactor() selectedEntities: EntityObject[] = [];
8 | /** 选择层级深度，多选时取最大值 */
9 | @reactor() layerDepth = 1;
10 | @reactor() selectMode = ESelectMode.OVERALL;
11 | @reactor() selectEntityTypes?: symbol[];
12 | @reactor() isMultiSelectMode = false;
13 |
14 | @mutation
15 | setMultiSelect(isMultiple: boolean) {
16 | this.isMultiSelectMode = isMultiple;
17 | }
18 |
19 | @mutation()
20 | switchSelectMode(selectMode: ESelectMode) {
21 | this.selectMode = selectMode;
22 | }
23 |
24 | @mutation
25 | setLayerDepth(layerDepth: number) {
26 | this.layerDepth = layerDepth;
27 | }
28 |
29 | @mutation()
30 | select(models: EntityObject[], onSelectHandler?: (models: EntityObject[]) => void) {
31 | if (models.length === 0) {
32 | return;
33 | }
34 | this.selectedEntities.push(...models);
35 | const layerDepths = models.map((m) => m.getParentPathChain().indexOf(m) + 1);
36 | this.setLayerDepth(Math.max(...layerDepths));
37 | onSelectHandler && onSelectHandler(models);
38 | }
39 |
40 | @mutation()
41 | unselect(models: EntityObject[], onUnselectHandler?: (models: EntityObject[]) => void) {
42 | batchRemove(this.selectedEntities, models);
43 | onUnselectHandler && onUnselectHandler(models);
44 | }
45 |
46 | @mutation()
47 | clearAllSelected(onUnselectHandler?: (models: EntityObject[]) => void) {
48 | const selected = this.selectedEntities.slice();
49 | batchRemove(this.selectedEntities, selected);
50 | onUnselectHandler && onUnselectHandler(selected);
51 | }
52 |
53 | @mutation()
54 | setSelectEntityTypes(types?: symbol[]) {
55 | this.selectEntityTypes = types;
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/demo/src/lite-design/views/scene/modelsWorld/AdjustPoint.ts:
--------------------------------------------------------------------------------
1 | import { Reactive, MathUtils, g, Mesh3D } from '@turbox3d/turbox';
2 |
3 | import { RenderOrder } from '../../../common/consts/scene';
4 | import { AdjustPointEntity } from '../../../models/entity/adjustPoint';
5 | import { Circle, Rect3d, IRect3dProps, ICircleProps } from '../helper/index';
6 |
7 | interface IAdjustPointProps {
8 | model: AdjustPointEntity;
9 | }
10 |
11 | @Reactive
12 | export class AdjustPointViewEntity extends Mesh3D {
13 | protected reactivePipeLine = [this.updatePosition, this.updateRotation, this.updateScale];
14 |
15 | render() {
16 | const hotArea = Math.min(
17 | this.props.model.radius * 6,
18 | Math.min(this.props.model.parent!.size.x / 3, this.props.model.parent!.size.y / 3)
19 | );
20 | return [
21 | g(Rect3d, {
22 | width: hotArea,
23 | height: hotArea,
24 | opacity: 0,
25 | renderOrder: RenderOrder.CONTROL_POINT + 1,
26 | }),
27 | g(Circle, {
28 | radius: this.props.model.radius,
29 | imgUrl: 'https://sf16-va.tiktokcdn.com/obj/eden-va2/uhmplmeh7uhmplmbn/edm/adjust.svg',
30 | imgScale: { x: this.props.model.radius * 3 - 8, y: this.props.model.radius * 3 - 8, z: 1 },
31 | renderOrder: RenderOrder.CONTROL_POINT,
32 | }),
33 | ];
34 | }
35 |
36 | private updatePosition() {
37 | const { model } = this.props;
38 | this.view.position.set(model.position.x, model.position.y, model.position.z);
39 | }
40 |
41 | private updateRotation() {
42 | const { model } = this.props;
43 | this.view.rotation.set(
44 | model.rotation.x * MathUtils.DEG2RAD,
45 | model.rotation.y * MathUtils.DEG2RAD,
46 | model.rotation.z * MathUtils.DEG2RAD
47 | );
48 | }
49 |
50 | private updateScale() {
51 | const { model } = this.props;
52 | this.view.scale.set(model.scale.x, model.scale.y, model.scale.z);
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/packages/command-manager/demo/CommandDemo.ts:
--------------------------------------------------------------------------------
1 | import { Command } from '../src/Command';
2 | import { CommandManager } from '../src/CommandManager';
3 | import { manager } from '../src/manager';
4 | import { compose } from '../src/compose';
5 | import { create } from '../src/create';
6 |
7 | class ACommand extends Command {}
8 |
9 | class BCommand extends Command {
10 | constructor(holder: CommandManager, parent?: Command) {
11 | super(holder, parent);
12 | }
13 | }
14 |
15 | class DCommand extends Command {}
16 |
17 | class ECommand extends Command {}
18 |
19 | // 组合单个Command
20 | class ABCommand extends compose({
21 | aCommand: ACommand,
22 | bCommand: BCommand,
23 | }) {
24 | active(name: string, age: number) {
25 | this.aCommand.active(name);
26 | }
27 | }
28 |
29 | // 组合以后的 Command 依然可以被组合
30 | // 不等同于 compose([ACommand, BCommand, DCommand])
31 | class ABDCommand extends compose({
32 | abCommand: ABCommand,
33 | dCommand: DCommand,
34 | }) {}
35 |
36 | class WCommand extends create<{ a: string }>() {
37 | active(param: { a: '10' }) {}
38 | }
39 |
40 | const w = new WCommand();
41 | // w.apply()
42 |
43 | // 创建应用唯一的 Box
44 | class DemoCommandBox extends CommandManager {
45 | // 使用独立的 Command
46 | aCommand = new ACommand(this);
47 |
48 | eCommand = new ECommand(this);
49 |
50 | // 使用合成的 Command
51 | abdCommand = new ABDCommand(this);
52 | }
53 |
54 | const demoCommandBox = new DemoCommandBox();
55 |
56 | class AWCommand extends compose({
57 | a: ACommand,
58 | w: WCommand,
59 | }) {}
60 |
61 | const awCommand = new AWCommand();
62 | // awCommand.w.active();
63 |
64 | class Demo2 extends manager({
65 | a: ACommand,
66 | w: WCommand,
67 | }) {}
68 |
69 | const a: CommandManager = new Demo2();
70 |
71 | const demo2 = new Demo2();
72 | // demo2.w.apply()
73 |
74 | class View {
75 | onClick() {
76 | demoCommandBox.aCommand.active();
77 |
78 | demoCommandBox.abdCommand.abCommand.active('', 18);
79 | }
80 | }
81 |
82 | export { demoCommandBox };
83 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | English | [简体中文](./README.zh-CN.md)
2 |
3 |
4 |
5 |
6 |
7 | [](https://travis-ci.com/github/turbox3d/turbox)
8 | [](https://travis-ci.com/github/turbox3d/turbox)
9 | [](https://www.npmjs.com/package/@turbox3d/turbox)
10 | [](https://www.npmjs.com/package/@turbox3d/turbox)
11 | [](https://www.npmjs.com/package/@turbox3d/turbox)
12 |
13 | Turbox
14 |
15 | **Turbox** is a large-scale productivity application front-end framework.
16 |
17 | ## Ecosystem
18 |
19 | | Project | Status | Description |
20 | |---------|--------|-------------|
21 | | turbox-cli | - | Project cli tool, include scaffolding |
22 | | turbox-dev-tool | - | Browser DevTools extension |
23 | | turbox-loader | - | Turbox loader for webpack |
24 | | turbox-snippets | [see marketplace](https://marketplace.visualstudio.com/items?itemName=feifan-gff.turbox-snippets) | Vscode snippet extension |
25 |
26 | ## Documentation
27 |
28 | [中文文档](https://turbox3d.github.io/turbox/#/zh-cn/turbox)
29 |
30 | Visit [turbox official website](https://turbox3d.github.io/turbox/#/en-us/).
31 |
32 | ## Feedback
33 |
34 | | Github Issue | Wechat |
35 | | --- | --- |
36 | | [turbox3d/turbox/issues](https://github.com/turbox3d/turbox/issues) | |
37 |
38 | ## License
39 |
40 | [MIT](http://opensource.org/licenses/MIT)
41 |
42 | Copyright (c) 2020-present, Felix Koo
43 |
--------------------------------------------------------------------------------