From b39e93684c17e6ffe1fb4d7936af36dba9f32c7a Mon Sep 17 00:00:00 2001 From: Dany Shev Date: Wed, 28 Apr 2021 10:36:16 +0300 Subject: [PATCH 1/2] Buttons updated --- .../g.frame.components.buttons/package.json | 2 +- .../src/ButtonComponent.ts | 128 ++---------------- .../src/ButtonComponent_interfaces.ts | 7 +- .../src/IconButtonComponent.ts | 3 +- .../package.json | 4 +- .../src/MultipleCircleMenuComponent.ts | 6 +- 6 files changed, 23 insertions(+), 127 deletions(-) diff --git a/packages/g.frame.components.buttons/package.json b/packages/g.frame.components.buttons/package.json index adc2177..9a4064b 100644 --- a/packages/g.frame.components.buttons/package.json +++ b/packages/g.frame.components.buttons/package.json @@ -1,6 +1,6 @@ { "name": "@g.frame/components.buttons", - "version": "0.2.0", + "version": "0.2.1", "description": "Button component module for g.frame framework", "main": "build/main/index.js", "typings": "build/main/index.d.ts", diff --git a/packages/g.frame.components.buttons/src/ButtonComponent.ts b/packages/g.frame.components.buttons/src/ButtonComponent.ts index b5f3a7f..67442cc 100644 --- a/packages/g.frame.components.buttons/src/ButtonComponent.ts +++ b/packages/g.frame.components.buttons/src/ButtonComponent.ts @@ -1,14 +1,8 @@ -import {CircleGeometry, Color, DoubleSide, Group, Mesh, MeshBasicMaterial, Object3D, Vector2, Vector3} from 'three'; +import {CircleGeometry, Color, Group, Mesh, MeshBasicMaterial, Object3D, Vector2, Vector3} from 'three'; import {ITextViewerModuleOptions, TextViewerModule} from '@g.frame/components.text'; -import {IButtonComponentOptions} from './ButtonComponent_interfaces'; -// import * as TWEEN from '../libs/TWEEN/Tween'; +import {ButtonComponentType, IButtonComponentOptions} from './ButtonComponent_interfaces'; import {RoundedPlane, ViewerModule} from '@g.frame/core'; -import { - ActionController, - ActionControllerEvent, - ActionControllerEventName -} from '@g.frame/common.action_controller'; -import {WindowComponent} from '@g.frame/components.window'; +import {ActionController, ActionControllerEvent, ActionControllerEventName} from '@g.frame/common.action_controller'; export class ButtonComponent extends TextViewerModule { protected box: Mesh; @@ -16,27 +10,20 @@ export class ButtonComponent extends TextViewerModule { constructor(private options: IButtonComponentOptions, private actionController: ActionController) { super(options.sizePx || new Vector2(64, 64), new Vector2(Math.sqrt(2 * Math.pow(options.size.x / 2, 2)), Math.sqrt(2 * Math.pow(options.size.y / 2, 2)))); - if (options.type === 'flat') { + if (options.type === ButtonComponentType.default) { options.background = options.background || {}; options.background.color = options.background.color || (options.boxColor ? new Color(options.boxColor).getStyle() : '#fff'); options.text.autoWrappingHorizontal = true; options.text.lineHeight = options.text.lineHeight || 44; options.bordRadius = options.bordRadius !== null && options.bordRadius !== undefined ? options.bordRadius : 0.6; options.text.align = 'center'; - } else if (options.type === '3d') { + } else if (options.type === ButtonComponentType.volumetric) { options.background = options.background || {}; options.background.color = options.background.color || (options.boxColor ? new Color(options.boxColor).getStyle() : '#fff'); options.text.autoWrappingHorizontal = true; options.text.lineHeight = options.text.lineHeight || 44; options.text.align = 'center'; - } else if (options.type === '3dEmpty') { - options.background = options.background || {}; - options.background.color = options.background.color || (options.boxColor ? new Color(options.boxColor).getStyle() : '#fff'); - options.text.autoWrappingHorizontal = true; - options.text.lineHeight = options.text.lineHeight || 44; - options.text.align = 'center'; - options.bordRadius = options.bordRadius !== null && options.bordRadius !== undefined ? options.bordRadius : 0.6; - } else if (options.type === 'icon') { + } else if (options.type === ButtonComponentType.icon) { options.background = options.background || {}; options.background.color = options.background.color || (options.boxColor ? new Color(options.boxColor).getStyle() : '#fff'); options.text.autoWrappingHorizontal = false; @@ -49,21 +36,6 @@ export class ButtonComponent extends TextViewerModule { family: options.text.style.family || 'FontAwesome' }; options.text.align = 'center'; - } else if (options.type === '3dIconEmpty') { - options.background = options.background || {}; - options.background.color = options.background.color || (options.boxColor ? new Color(options.boxColor).getStyle() : '#fff'); - options.bordRadius = options.bordRadius !== null && options.bordRadius !== undefined ? options.bordRadius : 0.1; - options.text.autoWrappingHorizontal = true; - options.text.autoWrapping = true; - options.text.align = 'center'; - options.text.lineHeight = options.text.lineHeight || 44; - options.text.style = options.text.style || { - color: 'black', - weight: '900', - size: '46px', - family: 'FontAwesome' - }; - } options.background.radius = options.bordRadius; this.options = options; @@ -85,7 +57,7 @@ export class ButtonComponent extends TextViewerModule { updateElement(options: ITextViewerModuleOptions): Mesh { const temp = super.updateElement(options); - if (this.options.type === '3d') { + if (this.options.type === ButtonComponentType.volumetric) { if (this.box) { this.actionController.off(null, this.box); this.box.parent.remove(this.box); @@ -112,91 +84,13 @@ export class ButtonComponent extends TextViewerModule { this.actionController.on(ActionControllerEventName.buttonUp, this.box, () => this.clickButtonFunc(false)); this.actionController.on(ActionControllerEventName.click, this.box, (event: ActionControllerEvent) => event.data.intersection.orderNumber === 0 && this.fire('click')); - } else if (this.options.type === '3dEmpty') { - if (this.box) { - this.actionController.off(null, this.box); - this.box.parent.remove(this.box); - this.box.geometry.dispose(); - (this.box.material).dispose(); - } - this.mesh.geometry.computeBoundingBox(); - const size = this.mesh.geometry.boundingBox.getSize(new Vector3()); - - const background = new Color(options.background.color).getHex(); - const planeFront = new WindowComponent({ - size: new Vector2(size.x, size.y), - background, - bordRadius: this.options.bordRadius, - bordWidth: 0.06 - }); - const planeBack = new WindowComponent({ - size: new Vector2(size.x, size.y), - bordRadius: this.options.bordRadius, - bordWidth: 0.06 - }); - planeFront.uiObject.position.z += size.z ? size.z : 1.7; - planeBack.uiObject.position.z += size.z ? size.z : 0.05; - this.mesh.position.z += size.z ? size.z : 1.71; - this.addObject(planeFront.uiObject); - this.addObject(planeBack.uiObject); - - this.actionController.on(ActionControllerEventName.buttonDown, planeFront.uiObject, () => this.clickButtonFunc(true)); - this.actionController.on(ActionControllerEventName.buttonDown, planeBack.uiObject, () => this.clickButtonFunc(true)); - this.actionController.on(ActionControllerEventName.buttonUp, planeFront.uiObject, () => this.clickButtonFunc(false)); - this.actionController.on(ActionControllerEventName.buttonUp, planeBack.uiObject, () => this.clickButtonFunc(false)); - this.actionController.on(ActionControllerEventName.click, planeBack.uiObject, (event: ActionControllerEvent) => event.data.intersection.orderNumber === 0 && this.fire('click')); - this.actionController.on(ActionControllerEventName.click, planeFront.uiObject, (event: ActionControllerEvent) => event.data.intersection.orderNumber === 0 && this.fire('click')); - } else if (this.options.type === '3dIconEmpty') { - if (this.box) { - this.actionController.off(null, this.box); - this.box.parent.remove(this.box); - this.box.geometry.dispose(); - (this.box.material).dispose(); - } - this.mesh.geometry.computeBoundingBox(); - const color = new Color(options.background.color).getHex(); - const background = new Color(options.background.color).getHex(); - const planeFront1 = new Mesh(new CircleGeometry(this.options.size.x / 2, 36), new MeshBasicMaterial({ - color: 'black', - side: DoubleSide - })); - planeFront1.position.set(0, 0, -0.05); - const planeFront2 = new Mesh(new CircleGeometry(this.options.size.x / 2 - this.options.bordRadius, 36), new MeshBasicMaterial({ - color: color, - side: DoubleSide - })); - const planeBack1 = new Mesh(new CircleGeometry(this.options.size.x / 2, 36), new MeshBasicMaterial({ - color: 'black', - side: DoubleSide - })); - planeBack1.position.set(0, 0, -0.05); - const planeBack2 = new Mesh(new CircleGeometry(this.options.size.x / 2 - this.options.bordRadius, 36), new MeshBasicMaterial({ - color: color, - side: DoubleSide - })); - const planeFront = new Group(); - planeFront.add(planeFront1, planeFront2); - const planeBack = new Group(); - planeBack.add(planeBack1, planeBack2); - planeFront.position.z += 1.7; - planeBack.position.z -= 0.05; - this.mesh.position.z += 1.71; - this.addObject(planeFront); - this.addObject(planeBack); - - this.actionController.on(ActionControllerEventName.buttonDown, planeFront2, () => this.clickButtonFunc(true)); - this.actionController.on(ActionControllerEventName.buttonDown, planeBack2, () => this.clickButtonFunc(true)); - this.actionController.on(ActionControllerEventName.buttonUp, planeFront2, () => this.clickButtonFunc(false)); - this.actionController.on(ActionControllerEventName.buttonUp, planeBack2, () => this.clickButtonFunc(false)); - this.actionController.on(ActionControllerEventName.click, planeFront2, (event: ActionControllerEvent) => event.data.intersection.orderNumber === 0 && this.fire('click')); - this.actionController.on(ActionControllerEventName.click, planeBack2, (event: ActionControllerEvent) => event.data.intersection.orderNumber === 0 && this.fire('click')); - } else if (this.options.type === 'icon') { + } else if (this.options.type === ButtonComponentType.icon) { this.mesh.geometry.dispose(); // @ts-ignore this.mesh.geometry = new CircleGeometry(this.options.size.x / 2, 36); - } else if (this.options.type === 'flat') { + } else if (this.options.type === ButtonComponentType.default) { this.mesh.geometry.dispose(); if (this.box) { this.actionController.off(null, this.box); @@ -227,10 +121,6 @@ export class ButtonComponent extends TextViewerModule { clickButtonFunc(buttonDown: boolean = true) { const endScaleZ = buttonDown ? 0.5 : 1; this.uiObject.scale.set(1, 1, endScaleZ); - // new TWEEN.Tween(this.uiObject.scale) - // .to(new Vector3(1, 1, endScaleZ), 100) - // .easing(TWEEN.Easing.Linear.None) - // .start(); } disposeObject(object?: Object3D | ViewerModule, disposeParams?: any): void { diff --git a/packages/g.frame.components.buttons/src/ButtonComponent_interfaces.ts b/packages/g.frame.components.buttons/src/ButtonComponent_interfaces.ts index 61fdd53..d7643c3 100644 --- a/packages/g.frame.components.buttons/src/ButtonComponent_interfaces.ts +++ b/packages/g.frame.components.buttons/src/ButtonComponent_interfaces.ts @@ -1,11 +1,16 @@ import {Vector2, Vector3} from 'three'; import {ITextViewerModuleOptions} from '@g.frame/components.text'; +export enum ButtonComponentType { + 'default', + 'volumetric', + 'icon', +} export interface IButtonComponentOptions extends ITextViewerModuleOptions { size: Vector3; sizePx?: Vector2; - type: string; // flat, icon, 3d, 3dEmpty, 3dIconEmpty + type: ButtonComponentType; // default, icon, 3d boxColor?: number; boxTransparent?: boolean; bordRadius?: number; diff --git a/packages/g.frame.components.buttons/src/IconButtonComponent.ts b/packages/g.frame.components.buttons/src/IconButtonComponent.ts index 74ff2b9..3150be5 100644 --- a/packages/g.frame.components.buttons/src/IconButtonComponent.ts +++ b/packages/g.frame.components.buttons/src/IconButtonComponent.ts @@ -2,6 +2,7 @@ import {Group, Mesh, Vector2, Vector3} from 'three'; import {ButtonComponent} from './ButtonComponent'; import {IIconButtonComponentOptions} from './IconButtonComponent_interfaces'; import {ActionController} from '@g.frame/common.action_controller'; +import {ButtonComponentType} from "./ButtonComponent_interfaces"; export class IconButtonComponent extends ButtonComponent { protected box: Mesh; @@ -14,7 +15,7 @@ export class IconButtonComponent extends ButtonComponent { super({ size: new Vector3(options.diameter, options.diameter, 0.1), sizePx: new Vector2(40 * options.pxRatio, 40 * options.pxRatio), - type: 'icon', + type: ButtonComponentType.icon, text: { value: options.text, lineHeight: (28 - options.differenceBetweenSizeAndLineHeight) * options.pxRatio * options.iconSize, diff --git a/packages/g.frame.components.divided_circle/package.json b/packages/g.frame.components.divided_circle/package.json index 907f45e..1c5d91e 100644 --- a/packages/g.frame.components.divided_circle/package.json +++ b/packages/g.frame.components.divided_circle/package.json @@ -1,6 +1,6 @@ { "name": "@g.frame/components.divided_circle", - "version": "0.2.0", + "version": "0.2.1", "description": "Divided circle component module for g.frame framework", "main": "build/main/index.js", "typings": "build/main/index.d.ts", @@ -32,7 +32,7 @@ "homepage": "https://github.com/VeryBigThings/g.frame#readme", "dependencies": { "@g.frame/common.action_controller": "^0.2.0", - "@g.frame/components.buttons": "^0.2.0", + "@g.frame/components.buttons": "^0.2.1", "@g.frame/components.depth_scroll": "^0.2.0", "@g.frame/components.text": "^0.2.0", "@g.frame/components.window": "^0.2.0" diff --git a/packages/g.frame.components.divided_circle/src/MultipleCircleMenuComponent.ts b/packages/g.frame.components.divided_circle/src/MultipleCircleMenuComponent.ts index d3d6f46..cd25416 100644 --- a/packages/g.frame.components.divided_circle/src/MultipleCircleMenuComponent.ts +++ b/packages/g.frame.components.divided_circle/src/MultipleCircleMenuComponent.ts @@ -1,7 +1,7 @@ import {ParentEvent, ViewerModule} from '@g.frame/core'; -import {Mesh, Vector2, Vector3, Object3D} from 'three'; +import {Mesh, Object3D, Vector2, Vector3} from 'three'; import {DividedCircleComponent} from './DividedCircleComponent'; -import {ButtonComponent} from '@g.frame/components.buttons'; +import {ButtonComponent, ButtonComponentType} from '@g.frame/components.buttons'; import {DepthScrollComponent, IDepthScrollComponentOptions} from '@g.frame/components.depth_scroll'; import {IDividedCircleMenu, IMultipleCircleMenuComponent, ISectorItem} from './interfaces'; import {ActionController} from '@g.frame/common.action_controller'; @@ -38,7 +38,7 @@ export class MultipleCircleMenuComponent extends ViewerModule { const maxBorderWidth = Math.max(...borderWidthList.filter(Boolean)); this.backBtn = new ButtonComponent({ - type: '3dIconEmpty', + type: ButtonComponentType.volumetric, sizePx: new Vector2(128, 128), size: new Vector3(minInnerRadius * 0.7, minInnerRadius * 0.7, 1), bordRadius: maxBorderWidth, From 388f4a7e353e96de6e7aebeec604c8c37a844fee Mon Sep 17 00:00:00 2001 From: Dany Shev Date: Wed, 28 Apr 2021 11:27:26 +0300 Subject: [PATCH 2/2] linter fix --- packages/g.frame.components.buttons/src/IconButtonComponent.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/g.frame.components.buttons/src/IconButtonComponent.ts b/packages/g.frame.components.buttons/src/IconButtonComponent.ts index 3150be5..fcf34ef 100644 --- a/packages/g.frame.components.buttons/src/IconButtonComponent.ts +++ b/packages/g.frame.components.buttons/src/IconButtonComponent.ts @@ -2,7 +2,7 @@ import {Group, Mesh, Vector2, Vector3} from 'three'; import {ButtonComponent} from './ButtonComponent'; import {IIconButtonComponentOptions} from './IconButtonComponent_interfaces'; import {ActionController} from '@g.frame/common.action_controller'; -import {ButtonComponentType} from "./ButtonComponent_interfaces"; +import {ButtonComponentType} from './ButtonComponent_interfaces'; export class IconButtonComponent extends ButtonComponent { protected box: Mesh;