c_meyer/pxt-ev3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix resizing flickering issue, remove flip animation on start, remove the need for a default height and width in the layout engine

Browse Source
This commit is contained in:
Sam El-Husseini 2017-12-24 11:59:01 -08:00
parent 88df2e14cb
commit 0aa41e9a64
3 changed files with 14 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pxtarget.json
View File

@ -139,9 +139,7 @@
}, },
"monacoColors": { "monacoColors": {
"editor.background": "#ecf6ff" "editor.background": "#ecf6ff"
}, }
"simAnimationEnter": "horizontal flip in",
"simAnimationExit": "horizontal flip out"
}, },
"ignoreDocsErrors": true "ignoreDocsErrors": true
} }

14
sim/visuals/board.ts
View File

@ -286,18 +286,13 @@ namespace pxsim.visuals {
window.addEventListener("resize", e => { window.addEventListener("resize", e => {
this.resize(); this.resize();
}); });
setTimeout(() => {
this.resize();
}, 200);
} }
public resize() { public resize() {
if (!this.element) return; if (!this.element) return;
const bounds = this.element.getBoundingClientRect(); this.width = document.body.offsetWidth;
this.width = bounds.width; this.height = document.body.offsetHeight;
this.height = bounds.height; this.layoutView.layout(this.width, this.height);
this.layoutView.layout(bounds.width, bounds.height);
this.updateState(); this.updateState();
let state = ev3board().screenState; let state = ev3board().screenState;
@ -340,6 +335,7 @@ namespace pxsim.visuals {
private begin() { private begin() {
this.running = true; this.running = true;
this.updateState();
} }
private running: boolean = false; private running: boolean = false;
@ -405,7 +401,7 @@ namespace pxsim.visuals {
}); });
let state = ev3board().screenState; let state = ev3board().screenState;
if (!state.didChange()) { if (state.didChange()) {
this.updateScreenStep(state); this.updateScreenStep(state);
} }
} }

17
sim/visuals/layoutView.ts
View File

@ -3,9 +3,6 @@
/// <reference path="./nodes/portView.ts" /> /// <reference path="./nodes/portView.ts" />
namespace pxsim.visuals { namespace pxsim.visuals {
export const DEFAULT_WIDTH = 350;
export const DEFAULT_HEIGHT = 700;
export const BRICK_HEIGHT_RATIO = 1 / 3; export const BRICK_HEIGHT_RATIO = 1 / 3;
export const MODULE_AND_WIRING_HEIGHT_RATIO = 1 / 3; // For inputs and outputs export const MODULE_AND_WIRING_HEIGHT_RATIO = 1 / 3; // For inputs and outputs
@ -220,8 +217,10 @@ namespace pxsim.visuals {
this.offsets = []; this.offsets = [];
const contentWidth = this.width || DEFAULT_WIDTH; const contentWidth = this.width;
const contentHeight = this.height || DEFAULT_HEIGHT; if (!contentWidth) return;
const contentHeight = this.height;
if (!contentHeight) return;
const moduleHeight = this.getModuleHeight(); const moduleHeight = this.getModuleHeight();
@ -337,16 +336,16 @@ namespace pxsim.visuals {
} }
public getBrickHeight() { public getBrickHeight() {
return (this.height || DEFAULT_HEIGHT) * BRICK_HEIGHT_RATIO; return this.height * BRICK_HEIGHT_RATIO;
} }
public getWiringHeight() { public getWiringHeight() {
return (this.height || DEFAULT_HEIGHT) * WIRING_HEIGHT_RATIO; return this.height * WIRING_HEIGHT_RATIO;
} }
public getModuleBounds() { public getModuleBounds() {
return { return {
width: (this.width || DEFAULT_WIDTH) / 4, width: this.width / 4,
height: this.getModuleHeight() height: this.getModuleHeight()
} }
} }
@ -360,7 +359,7 @@ namespace pxsim.visuals {
} }
public getModuleHeight() { public getModuleHeight() {
return (this.height || DEFAULT_HEIGHT) * MODULE_HEIGHT_RATIO; return this.height * MODULE_HEIGHT_RATIO;
} }
} }
} }