first commit

helix/javascript/array_summary/panel.js

@@ -0,0 +1,169 @@
+import "../../../lib/easeljs.js";
+import Colors from "./colors";
+import $ from "jquery";
+
+function Panel(panel, isDualTilt, scale = 10, treatCoordinatesAsCenterpoints = true) {
+  this.Container_constructor();
+  this.panel = panel;
+  this.isDualTilt = isDualTilt;
+  this.textOverlays = {};
+  this.selected = false;
+  this.scale = scale;
+  this.treatCoordinatesAsCenterpoints = treatCoordinatesAsCenterpoints;
+  this.setup();
+}
+
+const panelMethods = {
+  setup() {
+    if (this.treatCoordinatesAsCenterpoints) {
+      this.x = (this.panel.x - (this.panel.width / 2.0)) * this.scale;
+      this.y = (this.panel.y - (this.panel.height / 2.0)) * this.scale;
+    } else {
+      this.x = this.panel.x  * this.scale;
+      this.y = this.panel.y  * this.scale;
+    }
+    this.width = this.scale * this.panel.width;
+    this.height = this.scale * this.panel.height;
+    this.drawBackground();
+  },
+
+  drawBackground() {
+    if (this.background === undefined) {
+      this.background = new createjs.Shape();
+    } else {
+      this.removeChild(this.background);
+    }
+    let fillColor;
+    let borderColor;
+    let textColor;
+    let secondFillColor;
+    if (this.panel.data.seismic_anchors > 0 && this.panel.data.wind_anchors > 0) {
+      fillColor = Colors.seismic_background;
+      secondFillColor = Colors.wind_background;
+      textColor = Colors.dark_text;
+      borderColor = Colors.border;
+    } else if (this.panel.data.seismic_anchors > 0) {
+      fillColor = Colors.seismic_background;
+      textColor = Colors.dark_text;
+      borderColor = Colors.border;
+    } else if (this.panel.data.wind_anchors > 0) {
+      fillColor = Colors.wind_background;
+      textColor = Colors.dark_text;
+      borderColor = Colors.border;
+    } else {
+      fillColor = Colors.default_background;
+      textColor = Colors.light_text;
+      borderColor = fillColor;
+    }
+
+    if (this.selected) {
+      fillColor = Colors.selected_background;
+      textColor = Colors.dark_text;
+      borderColor = Colors.border;
+    }
+
+    this.textColor = textColor;
+
+    let width = this.width;
+    let height = this.height;
+
+    let borderWidth = 0.5;
+
+    // main background fill rectangle with white border
+    this.background.graphics.setStrokeStyle(borderWidth)
+      .beginStroke('white')
+      .beginFill(fillColor)
+      .drawRect(0, 0, width, height)
+      .endFill()
+      .endStroke();
+
+    // diagonal split background color for multiple anchor types
+    if (secondFillColor !== undefined) {
+      this.background.graphics.beginFill(secondFillColor)
+        .moveTo(borderWidth, borderWidth)
+        .lineTo(width - borderWidth, height - borderWidth)
+        .lineTo(width - borderWidth, borderWidth)
+        .closePath()
+        .endFill()
+        .endStroke();
+    }
+
+    // inner border for use with light background colors
+    this.background.graphics.beginStroke(borderColor)
+      .drawRect(borderWidth, borderWidth, width - 2 * borderWidth, height - 2 * borderWidth)
+      .endStroke();
+
+    // line drawing of dual-tilt indicator (the right-facing triangle)
+    if (this.isDualTilt) {
+      this.background.graphics.setStrokeStyle(0.25)
+        .beginStroke(Colors.border)
+        .moveTo(width / 2., borderWidth)
+        .lineTo(width / 2., height - borderWidth)
+        .lineTo(width - borderWidth, height / 2.)
+        .closePath()
+        .endStroke();
+    }
+    this.addChildAt(this.background, 0);
+  },
+
+  select() {
+    this.selected = true;
+    this.drawBackground();
+    this.redrawOverlays();
+  },
+
+  deselect() {
+    this.selected = false;
+    this.drawBackground();
+    this.redrawOverlays();
+  },
+
+  setOverlay(overlay) {
+    let data = this.panel.data;
+    let self = this;
+    $.each(this.textOverlays, function (idx, overlay) {
+      self.removeChild(overlay);
+    });
+    this.textOverlays = {};
+    if (overlay == "ALL") {
+      this.addOverlay('panel_id', data.panel_id, "2.5px", 0.3, 0.55);
+      this.addOverlay('wind_zones', data.wind_zones, '2.5px', 0.7, 0.55);
+      this.addOverlay('ballast', data.ballast, "1.5px", 0.125, 0.25);
+      this.addOverlay('wind_anchors', data.wind_anchors, "1.5px", 0.125, 0.8);
+      this.addOverlay('seismic_anchors', "S".repeat(data.seismic_anchors), "1.5px", 0.35, 0.8);
+      this.addOverlay('cross_trays', data.cross_trays, "1.5px", 0.6, 0.25);
+      this.addOverlay('link_trays', data.link_trays, "1.5px", 0.85, 0.25);
+      this.addOverlay('subarray', data.subarray, "1.5px", 0.6, 0.8);
+      this.addOverlay('psf', data.psf.toPrecision(3), "1.5px", 0.35, 0.25);
+      this.addOverlay('panel_type', data.panel_type, "1.5px", 0.85, 0.8);
+    } else if (overlay == 'ANCHOR') {
+      this.addOverlay('ballast', data.ballast, "2.5px", 0.3, 0.55);
+      this.addOverlay('anchors', data.seismic_anchors + data.wind_anchors, '2.5px', 0.7, 0.55);
+    }
+    this.currentOverlay = overlay;
+  },
+
+  addOverlay(name, text, fontSize, relativeX, relativeY) {
+    let overlay = new createjs.Text();
+    overlay.text = text;
+    overlay.font = fontSize + " sans-serif";
+    overlay.x = this.width * relativeX;
+    overlay.y = this.height * relativeY;
+    overlay.textAlign = "center";
+    overlay.textBaseline = "middle";
+    overlay.color = this.textColor;
+    overlay.maxWidth = this.width * 0.5;
+    this.textOverlays[name] = overlay;
+    this.addChild(overlay);
+  },
+
+  redrawOverlays() {
+    this.setOverlay(this.currentOverlay);
+  }
+};
+
+Object.assign(Panel.prototype, createjs.extend(Panel, createjs.Container));
+Object.assign(Panel.prototype, panelMethods);
+Panel = createjs.promote(Panel, "Container");
+
+export {Panel};