Skip to content

Commit

Permalink
Merge pull request BabylonJS#9798 from msDestiny14/msDestiny14/snippet
Browse files Browse the repository at this point in the history 
[Gui Editor] Adding Loading and Saving
  • Loading branch information
@msDestiny14
msDestiny14 authored Jan 19, 2021
2 parents 8cb4ad7 + 45dd762 commit e14e7ad
Show file tree
Hide file tree
Showing 12 changed files with 317 additions and 463 deletions.
247 changes: 124 additions & 123 deletions dist/preview release/what's new.md
View file

Large diffs are not rendered by default.

245 changes: 91 additions & 154 deletions guiEditor/src/components/propertyTab/propertyTabComponent.tsx
View file

Large diffs are not rendered by default.

100 changes: 62 additions & 38 deletions guiEditor/src/diagram/guiNode.ts
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,27 @@
import { GlobalState } from '../globalState';
import { Nullable } from 'babylonjs/types';
import { Observer } from 'babylonjs/Misc/observable';
import { WorkbenchComponent, FramePortData } from './workbench';
import { Control } from 'babylonjs-gui/2D/controls/control';
import { Vector2 } from 'babylonjs/Maths/math.vector';

import { GlobalState } from "../globalState";
import { Nullable } from "babylonjs/types";
import { Observer } from "babylonjs/Misc/observable";
import { WorkbenchComponent, FramePortData } from "./workbench";
import { Control } from "babylonjs-gui/2D/controls/control";
import { Vector2 } from "babylonjs/Maths/math.vector";
import { Container } from "babylonjs-gui/2D/controls/container";

export class GUINode {
private _x = 0;
private _y = 0;
private _gridAlignedX = 0;
private _gridAlignedY = 0;
private _gridAlignedY = 0;
private _globalState: GlobalState;
private _onSelectionChangedObserver: Nullable<Observer<Nullable<GUINode | FramePortData>>>;
private _onSelectionBoxMovedObserver: Nullable<Observer<ClientRect | DOMRect>>;
private _onUpdateRequiredObserver: Nullable<Observer<void>>;
private _ownerCanvas: WorkbenchComponent;
private _onSelectionChangedObserver: Nullable<Observer<Nullable<GUINode | FramePortData>>>;
private _onSelectionBoxMovedObserver: Nullable<Observer<ClientRect | DOMRect>>;
private _onUpdateRequiredObserver: Nullable<Observer<void>>;
private _ownerCanvas: WorkbenchComponent;
private _isSelected: boolean;
private _isVisible = true;
private _enclosingFrameId = -1;

public children: GUINode[] = [];

public get isVisible() {
return this._isVisible;
}
Expand All @@ -45,7 +47,7 @@ export class GUINode {
return;
}
this._x = value;

this._gridAlignedX = this._ownerCanvas.getGridPosition(value);
}

Expand Down Expand Up @@ -95,42 +97,40 @@ export class GUINode {
this._isSelected = value;

if (value) {
this._globalState.onSelectionChangedObservable.notifyObservers(this);
this._globalState.onSelectionChangedObservable.notifyObservers(this);
}
}

public constructor(globalState: GlobalState, public guiControl: Control) {
this._globalState = globalState;
this._ownerCanvas = this._globalState.workbench;

guiControl.onPointerUpObservable.add(evt => {
this.x = guiControl.leftInPixels;
this.y = guiControl.topInPixels;
guiControl.onPointerUpObservable.add((evt) => {
this.clicked = false;
console.log("up");
});

guiControl.onPointerDownObservable.add( evt => {
guiControl.onPointerDownObservable.add((evt) => {
if (!this._ownerCanvas.isUp) return;
this.clicked = true;
this.isSelected = true;
console.log("down");
}
);
this._ownerCanvas.isUp = false;
});

guiControl.onPointerEnterObservable.add( evt => {
guiControl.onPointerEnterObservable.add((evt) => {
this._ownerCanvas.isOverGUINode = true;
console.log("in");
}
);
});

guiControl.onPointerOutObservable.add( evt => {
guiControl.onPointerOutObservable.add((evt) => {
this._ownerCanvas.isOverGUINode = false;
console.log("out");
}
);

//TODO: Implement
this._onSelectionBoxMovedObserver = this._globalState.onSelectionBoxMoved.add(rect1 => {
});

//TODO: Implement
this._onSelectionBoxMovedObserver = this._globalState.onSelectionBoxMoved.add((rect1) => {});
}

public cleanAccumulation(useCeil = false) {
Expand All @@ -139,28 +139,52 @@ export class GUINode {
}

public clicked: boolean;
public _onMove(evt: Vector2, startPos: Vector2) {

if(!this.clicked) return false;
public _onMove(evt: Vector2, startPos: Vector2, ignorClick: boolean = false) {
if (!this.clicked && !ignorClick) return false;
console.log("moving");

//TODO: Implement move with zoom factor.
let newX = (evt.x - startPos.x) ;// / this._ownerCanvas.zoom;
let newY = (evt.y - startPos.y) ;// / this._ownerCanvas.zoom;
let newX = evt.x - startPos.x; // / this._ownerCanvas.zoom;
let newY = evt.y - startPos.y; // / this._ownerCanvas.zoom;

this.x += newX;
this.y += newY;
this.y += newY;

this.children.forEach((child) => {
child._onMove(evt, startPos, true);
});

return true;
//evt.stopPropagation();
}

public updateVisual()
{
public updateVisual() {
this.guiControl.leftInPixels = this.x;
this.guiControl.topInPixels = this.y;
}

private _isContainer() {
switch (this.guiControl.typeName) {
case "Button":
case "StackPanel":
case "Rectangle":
case "Ellipse":
return true;
default:
return false;
}
}

public addGui(childNode: GUINode) {
if (!this._isContainer) return;
this.children.push(childNode);
(this.guiControl as Container).addControl(childNode.guiControl);

//adjust the position to be relative
//childNode.x = this.x - childNode.x;
//childNode.y = this.y - childNode.y;
}

public dispose() {
// notify frame observers that this node is being deleted
this._globalState.onGuiNodeRemovalObservable.notifyObservers(this);
Expand All @@ -177,6 +201,6 @@ export class GUINode {
this._globalState.onSelectionBoxMoved.remove(this._onSelectionBoxMovedObserver);
}

this.guiControl.dispose();
this.guiControl.dispose();
}
}
}
113 changes: 0 additions & 113 deletions guiEditor/src/diagram/properties/genericNodePropertyComponent.tsx
View file

This file was deleted.

7 changes: 0 additions & 7 deletions guiEditor/src/diagram/properties/propertyComponentProps.ts
View file

This file was deleted.

34 changes: 31 additions & 3 deletions guiEditor/src/diagram/workbench.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
this._selectedGuiNodes = [];
}
else {
if (selection instanceof GUINode){
if (selection instanceof GUINode ) {
if (this._ctrlKeyIsPressed) {
if (this._selectedGuiNodes.indexOf(selection) === -1) {
this._selectedGuiNodes.push(selection);
Expand All @@ -159,6 +159,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
else {
this._selectedGuiNodes = [selection];
}


}
}
Expand Down Expand Up @@ -194,7 +195,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
}
return gridSize * Math.floor(position / gridSize);
}

public getGridPositionCeil(position: number) {
let gridSize = this.gridSize;
if (gridSize === 0) {
Expand All @@ -203,6 +204,29 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
return gridSize * Math.ceil(position / gridSize);
}

loadFromJson(serializationObject: any) {
this.globalState.onSelectionChangedObservable.notifyObservers(null);
this._guiNodes = [];
this.globalState.guiTexture.parseContent(serializationObject);
this.props.globalState.workbench.loadFromGuiTexture();
}

async loadFromSnippet(snippedID: string){
this.globalState.onSelectionChangedObservable.notifyObservers(null);
this._guiNodes = [];
await this.globalState.guiTexture.parseFromSnippetAsync(snippedID);
this.props.globalState.workbench.loadFromGuiTexture();
}

loadFromGuiTexture()
{
var children = this.globalState.guiTexture.getChildren();
children[0].children.forEach(guiElement => {
var newGuiNode = new GUINode(this.props.globalState, guiElement);
this._guiNodes.push(newGuiNode);
});
}

updateTransform() {
this._rootContainer.style.transform = `translate(${this._x}px, ${this._y}px) scale(${this._zoom})`;

Expand Down Expand Up @@ -399,9 +423,11 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
}

this._mouseStartPointX = evt.clientX;
this._mouseStartPointY = evt.clientY;
this._mouseStartPointY = evt.clientY;

}

public isUp : boolean = true;
onUp(evt: React.PointerEvent) {
this._mouseStartPointX = null;
this._mouseStartPointY = null;
Expand All @@ -420,6 +446,8 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
this._frameCandidate = null;

}
this.isUp = true;

}

onWheel(evt: React.WheelEvent) {
Expand Down
3 changes: 1 addition & 2 deletions guiEditor/src/guiEditor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import * as ReactDOM from "react-dom";
import { GlobalState } from "./globalState";
import { WorkbenchEditor } from "./workbenchEditor";
import { Popup } from "./sharedUiComponents/lines/popup";
import { SerializationTools } from "./serializationTools";
import { Observable } from "babylonjs/Misc/observable";
/**
* Interface used to specify creation options for the gui editor
Expand Down Expand Up @@ -57,7 +56,7 @@ export class GUIEditor {

if (options.customLoadObservable) {
options.customLoadObservable.add((data) => {
SerializationTools.Deserialize(data, globalState);
//TODO: Add deserilization here.
globalState.onResetRequiredObservable.notifyObservers();
globalState.onBuiltObservable.notifyObservers();
});
Expand Down
Loading

0 comments on commit e14e7ad

Please sign in to comment.