Skip to content

Commit

Permalink
too to fit fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@msDestiny14
msDestiny14 committed Sep 30, 2021
1 parent db6d24a commit 5f2251a
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 25 deletions.
41 changes: 22 additions & 19 deletions guiEditor/src/components/propertyTab/propertyTabComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,20 +87,13 @@ interface IPropertyTabComponentState {
export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, IPropertyTabComponentState> {
private _onBuiltObserver: Nullable<Observer<void>>;
private _timerIntervalId: number;
private _lockObject : LockObject;
private _lockObject: LockObject;
private _sizeOption: number = 2;
private _sizeOptions = [
{ label: "Web (1920)", value: 0 },
{ label: "Phone (720)", value: 1 },
{ label: "Square (1200)", value: 2 },
];
private _sizeValues = [
new Vector2(1920, 1080),
new Vector2(750, 1334),
new Vector2(1200, 1200)];
private _sizeOptionsLength = 3;

constructor(props: IPropertyTabComponentProps) {
super(props);

this.state = { currentNode: null, textureSize: new Vector2(1200, 1200) };
this._lockObject = new LockObject();
this.props.globalState.lockObject = this._lockObject;
Expand All @@ -119,7 +112,7 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
});

this.props.globalState.onLoadObservable.add((file) => this.load(file));
this._sizeOption = DataStorage.ReadBoolean("Responsive", true) ? 2 : this._sizeOptions.length;
this._sizeOption = DataStorage.ReadBoolean("Responsive", true) ? 2 : this._sizeOptionsLength;

}

Expand Down Expand Up @@ -385,9 +378,18 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
return adtIcon;
}


render() {

const _sizeValues = [
new Vector2(1920, 1080),
new Vector2(750, 1334),
new Vector2(1200, 1200)];
const _sizeOptions = [
{ label: "Web (1920)", value: 0 },
{ label: "Phone (750)", value: 1 },
{ label: "Square (1200)", value: 2 },
];

if (this.state.currentNode && this.props.globalState.workbench.selectedGuiNodes.length === 1) {
return (
<div id="ge-propertyTab">
Expand Down Expand Up @@ -444,10 +446,10 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
onSelect={(value: boolean) => {
this.props.globalState.onResponsiveChangeObservable.notifyObservers(value);
DataStorage.WriteBoolean("Responsive", value);
this._sizeOption = this._sizeOptions.length;
this._sizeOption = _sizeOptions.length;
if (value) {
this._sizeOption = 0;
this.props.globalState.workbench.resizeGuiTexture(this._sizeValues[this._sizeOption]);
this.props.globalState.workbench.resizeGuiTexture(_sizeValues[this._sizeOption]);
}
this.forceUpdate();
}}
Expand All @@ -456,21 +458,22 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
<OptionsLineComponent
label=""
iconLabel="Size"
options={this._sizeOptions}
options={_sizeOptions}
icon={canvasSizeIcon}
target={this}
propertyName={"_sizeOption"}
noDirectUpdate={true}
onSelect={(value: any) => {
this._sizeOption = value;
if (this._sizeOption !== (this._sizeOptions.length)) {
const newSize = this._sizeValues[this._sizeOption];
if (this._sizeOption !== (_sizeOptions.length)) {
const newSize = _sizeValues[this._sizeOption];

this.props.globalState.workbench.resizeGuiTexture(newSize);
}
this.forceUpdate();
}}
/>}
{this._sizeOption == (this._sizeOptions.length) &&
{this._sizeOption == (_sizeOptions.length) &&
<div className="divider">
<FloatLineComponent
icon={canvasSizeIcon}
Expand Down
19 changes: 14 additions & 5 deletions guiEditor/src/diagram/workbench.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,8 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
private _clipboard: Control[] = [];
private _selectAll: boolean = false;
private _camera: ArcRotateCamera;
private _cameraRadias = 1500;
private _cameraRadias: number;
private _cameraMaxRadiasFactor = 8192; // 2^13
public get globalState() {
return this.props.globalState;
}
Expand Down Expand Up @@ -142,6 +143,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
});

props.globalState.onFitToWindowObservable.add(() => {
this.setCameraRadius();
for (let i = 0; i < 2; ++i) {
this._camera.alpha = -Math.PI / 2;
this._camera.beta = 0;
Expand Down Expand Up @@ -223,6 +225,12 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
}
};

private setCameraRadius() {
const size = this.props.globalState.guiTexture.getSize();
this._cameraRadias = size.width > size.height ? size.width : size.height;
this._cameraRadias += this._cameraRadias - (this._cameraRadias / 1.5);
}

private copyToClipboard() {
if (this._selectAll) {
let index = 0;
Expand Down Expand Up @@ -344,6 +352,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
this.globalState.guiTexture.scaleTo(newvalue.x, newvalue.y);
this.globalState.guiTexture.markAsDirty();
this.globalState.onResizeObservable.notifyObservers(newvalue);
this.globalState.onFitToWindowObservable.notifyObservers();
}

findNodeFromGuiElement(guiControl: Control) {
Expand Down Expand Up @@ -420,7 +429,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
if (dropLocationControl.parent.typeName != "Grid") {
draggedControlParent.removeControl(draggedControl);
let index = dropLocationControl.parent.children.indexOf(dropLocationControl);
const reversed = dropLocationControl.parent.typeName === "StackPanel" || dropLocationControl.parent.typeName === "VirtualKeyboard";
const reversed = dropLocationControl.parent.typeName === "StackPanel" || dropLocationControl.parent.typeName === "VirtualKeyboard";

index = this._adjustParentingIndex(index, reversed); //adjusting index to be before or after based on where the control is over

Expand Down Expand Up @@ -624,7 +633,6 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
this._scene = new Scene(engine);
const clearColor = 204 / 255.0;
this._scene.clearColor = new Color4(clearColor, clearColor, clearColor, 1.0);
this._camera = new ArcRotateCamera("Camera", -Math.PI / 2, 0, this._cameraRadias, Vector3.Zero(), this._scene);
const light = new HemisphericLight("light1", Axis.Y, this._scene);
light.intensity = 0.9;

Expand All @@ -634,14 +642,15 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
this._textureMesh.scaling.z = textureSize;
this.globalState.guiTexture = AdvancedDynamicTexture.CreateForMesh(this._textureMesh, textureSize, textureSize, true);
this._textureMesh.showBoundingBox = true;

this.artBoardBackground = new Rectangle("Art-Board-Background");
this.artBoardBackground.width = "100%"
this.artBoardBackground.height = "100%";
this.artBoardBackground.background = "white";
this.artBoardBackground.thickness = 0;

this.globalState.guiTexture.addControl(this.artBoardBackground);
this.setCameraRadius();
this._camera = new ArcRotateCamera("Camera", -Math.PI / 2, 0, this._cameraRadias, Vector3.Zero(), this._scene);
this.addControls(this._scene, this._camera);

this._scene.getEngine().onCanvasPointerOutObservable.clear();
Expand All @@ -661,7 +670,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
addControls(scene: Scene, camera: ArcRotateCamera) {
camera.inertia = 0.7;
camera.lowerRadiusLimit = 10;
camera.upperRadiusLimit = 2500;
camera.upperRadiusLimit = this._cameraMaxRadiasFactor;
camera.upperBetaLimit = Math.PI / 2 - 0.1;
camera.angularSensibilityX = camera.angularSensibilityY = 500;

Expand Down
2 changes: 1 addition & 1 deletion sharedUiComponents/imgs/checkboxIconDark.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 5f2251a

Please sign in to comment.