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

Simulator refactoring to support better resizing of modules and controls

Browse Source
This commit is contained in:
Sam El-Husseini
2017-12-22 14:00:23 -08:00
parent 300a2c1476
commit 180f32f25c
23 changed files with 408 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
sim/visuals/nodes/brickView.ts
View File

@ -1,8 +1,8 @@
/// <reference path="./staticView.ts" />
/// <reference path="./moduleView.ts" />
namespace pxsim.visuals {
export class BrickView extends StaticModuleView implements LayoutElement {
export class BrickView extends ModuleView implements LayoutElement {
private static EV3_SCREEN_ID = "ev3_screen";
private static EV3_LIGHT_ID = "btn_color";
@ -41,9 +41,9 @@ namespace pxsim.visuals {
public updateThemeCore() {
let theme = this.theme;
svg.fill(this.buttons[0], theme.buttonUps[0]);
svg.fill(this.buttons[1], theme.buttonUps[1]);
svg.fill(this.buttons[2], theme.buttonUps[2]);
// svg.fill(this.buttons[0], theme.buttonUps[0]);
// svg.fill(this.buttons[1], theme.buttonUps[1]);
// svg.fill(this.buttons[2], theme.buttonUps[2]);
}
private lastLightPattern: number = -1;

6
sim/visuals/nodes/colorSensorView.ts
View File

@ -1,7 +1,7 @@
/// <reference path="./staticView.ts" />
/// <reference path="./moduleView.ts" />
namespace pxsim.visuals {
export class ColorSensorView extends StaticModuleView implements LayoutElement {
export class ColorSensorView extends ModuleView implements LayoutElement {
private control: ColorGridControl;
@ -10,7 +10,7 @@ namespace pxsim.visuals {
}
public getPaddingRatio() {
return 1 / 8;
return 1 / 6;
}
public updateState() {

4
sim/visuals/nodes/gyroSensorView.ts
View File

@ -1,7 +1,7 @@
/// <reference path="./staticView.ts" />
/// <reference path="./moduleView.ts" />
namespace pxsim.visuals {
export class GyroSensorView extends StaticModuleView implements LayoutElement {
export class GyroSensorView extends ModuleView implements LayoutElement {
constructor(port: number) {
super(GYRO_SVG, "gyro", NodeType.GyroSensor, port);

4
sim/visuals/nodes/largeMotorView.ts
View File

@ -1,7 +1,7 @@
/// <reference path="./staticView.ts" />
/// <reference path="./moduleView.ts" />
namespace pxsim.visuals {
export class LargeMotorView extends StaticModuleView implements LayoutElement {
export class LargeMotorView extends ModuleView implements LayoutElement {
private static ROTATING_ECLIPSE_ID = "1eb2ae58-2419-47d4-86bf-4f26a7f0cf61";

6
sim/visuals/nodes/mediumMotorView.ts
View File

@ -1,10 +1,10 @@
/// <reference path="./staticView.ts" />
/// <reference path="./moduleView.ts" />
namespace pxsim.visuals {
export const MOTOR_ROTATION_FPS = 32;
export class MediumMotorView extends StaticModuleView implements LayoutElement {
export class MediumMotorView extends ModuleView implements LayoutElement {
private static ROTATING_ECLIPSE_ID = "Hole";
@ -16,7 +16,7 @@ namespace pxsim.visuals {
}
public getPaddingRatio() {
return 1 / 10;
return 1 / 5;
}
updateState() {

17
sim/visuals/nodes/staticView.ts → sim/visuals/nodes/moduleView.ts
View File

@ -1,6 +1,6 @@
namespace pxsim.visuals {
export class StaticModuleView extends View implements LayoutElement {
export class ModuleView extends View implements LayoutElement {
protected content: SVGSVGElement;
protected controlShown: boolean;
@ -45,9 +45,8 @@ namespace pxsim.visuals {
return 0.5;
}
protected buildDom(width: number): SVGElement {
protected buildDom(): SVGElement {
this.content = svg.parseString(this.xml);
this.updateDimensions(width);
this.buildDomCore();
this.attachEvents();
if (this.hasClick())
@ -82,15 +81,17 @@ namespace pxsim.visuals {
public attachEvents() {
}
public resize(width: number) {
this.updateDimensions(width);
public resize(width: number, height: number) {
super.resize(width, height);
this.updateDimensions(width, height);
}
private updateDimensions(width: number) {
private updateDimensions(width: number, height: number) {
if (this.content) {
const currentWidth = this.getInnerWidth();
const currentHeight = this.getInnerHeight();
const newHeight = currentHeight / currentWidth * width;
const newWidth = currentWidth / currentHeight * height;
this.content.setAttribute('width', `${width}`);
this.content.setAttribute('height', `${newHeight}`);
}
@ -101,13 +102,13 @@ namespace pxsim.visuals {
}
public setSelected(selected: boolean) {
this.selected = selected;
super.setSelected(selected);
this.updateOpacity();
}
protected updateOpacity() {
if (this.rendered) {
const opacity = this.selected ? "0.5" : "1";
const opacity = this.selected ? "0.2" : "1";
if (this.hasClick()) {
this.setOpacity(opacity);
if (this.selected) this.content.style.cursor = "";

4
sim/visuals/nodes/portView.ts
View File

@ -1,8 +1,8 @@
/// <reference path="./staticView.ts" />
/// <reference path="./moduleView.ts" />
namespace pxsim.visuals {
export class PortView extends StaticModuleView implements LayoutElement {
export class PortView extends ModuleView implements LayoutElement {
constructor(port: NodeType, private label: string) {
super(PORT_SVG, "port", NodeType.Port, port);

4
sim/visuals/nodes/touchSensorView.ts
View File

@ -1,7 +1,7 @@
/// <reference path="./staticView.ts" />
/// <reference path="./moduleView.ts" />
namespace pxsim.visuals {
export class TouchSensorView extends StaticModuleView implements LayoutElement {
export class TouchSensorView extends ModuleView implements LayoutElement {
private static RECT_ID = ["touch_gradient4", "touch_gradient3", "touch_gradient2", "touch_gradient1"];
private static TOUCH_GRADIENT_UNPRESSED = ["linear-gradient-2", "linear-gradient-3", "linear-gradient-4", "linear-gradient-5"];

4
sim/visuals/nodes/ultrasonicView.ts
View File

@ -1,7 +1,7 @@
/// <reference path="./staticView.ts" />
/// <reference path="./moduleView.ts" />
namespace pxsim.visuals {
export class UltrasonicSensorView extends StaticModuleView implements LayoutElement {
export class UltrasonicSensorView extends ModuleView implements LayoutElement {
constructor(port: number) {
super(ULTRASONIC_SVG, "ultrasonic", NodeType.UltrasonicSensor, port);