Skip to content

Buttons updated #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DanyShevVBT wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Buttons updated #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b39e936
Buttons updated
DanyShevVBT Apr 28, 2021
388f4a7
linter fix
DanyShevVBT Apr 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/g.frame.components.buttons/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
128 changes: 9 additions & 119 deletions packages/g.frame.components.buttons/src/ButtonComponent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,29 @@
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;
protected group: Group;

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;
Expand All @@ -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;
Expand All @@ -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);
Expand All @@ -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();
(<MeshBasicMaterial>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();
(<MeshBasicMaterial>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);
Expand Down Expand Up @@ -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 {
Expand Down
7 changes: 6 additions & 1 deletion packages/g.frame.components.buttons/src/ButtonComponent_interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
3 changes: 2 additions & 1 deletion packages/g.frame.components.buttons/src/IconButtonComponent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions packages/g.frame.components.divided_circle/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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"
Expand Down
6 changes: 3 additions & 3 deletions packages/g.frame.components.divided_circle/src/MultipleCircleMenuComponent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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,
Expand Down