WIP- #127 Initial commit for ECFolder Works

src/visualizers/panels/ElectricCircuitsEditor/ElectricCircuitEditorControl.Joint.js

@@ -244,11 +244,15 @@ define([], function () {
  return this.client.isTypeOf(nodeId, this.META_NAMES['Circuit']);
  }
 
+ isCircuitFolder(nodeId) {
+ return this.client.isTypeOf(nodeId, this.META_NAMES['ElectricCircuitsFolder']);
+ }
+
  isSubCircuit(nodeId) {
  const node = this.client.getNode(nodeId);
 
  if (node) {
- return this.isCircuit(node.getId()) && nodeId !== this._currentNodeId;
+ return this.isCircuit(node.getId()) && nodeId !== this._currentNodeId && !this.isCircuitFolder(nodeId);
  }
  }
 
@@ -321,11 +325,15 @@ define([], function () {
  changeActiveObject(nodeId) {
  if(this.isCircuit(nodeId)){
  this.selectedObjectChanged(nodeId);
+ this._widget.showPartBrowser();
+ } else if(this.isCircuitFolder(nodeId)) {
+ this.selectedObjectChanged(nodeId);
+ this._widget.hidePartBrowser();
  }
  }
 
  canBeActiveObject(nodeId) {
- return this.isCircuit(nodeId);
+ return this.isCircuit(nodeId) || this.isCircuitFolder(nodeId);
  }
 
  showParent() {
@@ -337,7 +345,7 @@ define([], function () {
 
  isNestedDisplay () {
  const node = this._client.getNode(this._currentNodeId);
- if(this.isCircuit(node.getParentId())) {
+ if(this.isCircuit(node.getParentId()) || this.isCircuitFolder(node.getParentId())) {
  return true;
  }
  return false;

src/visualizers/panels/ElectricCircuitsEditor/ElectricCircuitsEditorControl.js

@@ -125,6 +125,11 @@ define([
 
  _getObjectDescriptor(nodeId) {
  if (this.isCircuit(nodeId) && !this.isSubCircuit(nodeId)) {
+ console.log('here', this.isCircuitFolder(nodeId));
+ return;
+ }
+ if (this.isCircuitFolder(nodeId)){
+ console.log('here');
  return;
  }
  if (this.isPin(nodeId) && !this.isCircuitPin(nodeId)) {
@@ -167,7 +172,7 @@ define([
  if (desc) {
  this._widget.addNode(desc);
  }
- if (this.isCircuit(gmeId) && !this.isSubCircuit(gmeId)) {
+ if (this.isCircuit(gmeId) && !this.isSubCircuit(gmeId) || this.isCircuitFolder(gmeId)) {
  const name = this._client.getNode(gmeId).getAttribute('name');
  this._widget.setDashboardTitle(name);
  }

src/visualizers/widgets/ElectricCircuitsEditor/CircuitEditorDashboard/src/CircuitEditorDashboard.svelte

@@ -23,7 +23,8 @@
  let activeObjectChangeFn,
  goToParentFn,
  isNested,
- parentName;
+ parentName,
+ displayPartBrowser = false;
  let showRecommendationConfig,
  recommendationPluginMetadata,
  recommendationPluginRunning,
@@ -47,17 +48,22 @@
  recommendationPluginSuccess = false;
  isNested = false;
  parentName = '';
+ displayPartBrowser = false;
  defineElectricCircuitsDomain(joint);
  if (opts.activeObjectChangeFn && opts.goToParentFn) {
  activeObjectChangeFn = opts.activeObjectChangeFn;
  goToParentFn = opts.goToParentFn;
  }
  }
 
- export function render(opts) {
+ export function render(opts={}) {
  renderCircuit(opts.width, opts.height);
- renderComponents(opts.validComponents);
- recommendationPluginMetadata = opts.recommendationPluginMetadata;
+ if(displayPartBrowser){
+ renderComponents(opts.validComponents);
+ }
+ if(opts.recommendationPluginMetadata){
+ recommendationPluginMetadata = opts.recommendationPluginMetadata;
+ }
  }
 
  export function adjustPaperDimensions(width, height) {
@@ -66,8 +72,13 @@
  if (navBarWidth < width) {
  width = navBarWidth;
  }
- circuitPaper.setDimensions(width * 10 / 12, height - navBarHeight);
- layoutComponentBrowser();
+ if(displayPartBrowser){
+ circuitPaper.setDimensions(width * 10 / 12, height - navBarHeight);
+ layoutComponentBrowser();
+ } else {
+ circuitPaper.setDimensions(width, height - navBarHeight);
+ }
+
  zoom(currentZoomLevel);
  }
 
@@ -187,6 +198,16 @@
  ).sort();
  }
 
+ export function showPartBrowser(opts){
+ displayPartBrowser = true;
+ setTimeout(() => render(opts), 100);
+ }
+
+ export function hidePartBrowser() {
+ displayPartBrowser = false;
+ setTimeout(() => render(), 100);
+ }
+
  function renderCircuit(width, height) {
  circuitGraph = new joint.dia.Graph();
 
@@ -441,9 +462,11 @@
  </div>
  </div>
  </nav>
+
  <div class="container-fluid">
  <div class="row row-list">
- <div class="col-md-2" id="componentBrowserContainer">
+ {#if displayPartBrowser}
+ <div class="col-md-2" id="componentBrowserContainer">
  <div class="text-center"
  style="position:fixed; z-index:100; width: 15.3%; height: 40px; background: #FEFEF8">
  <h4>Component Browser
@@ -467,12 +490,14 @@
  </div>
  <div class="components-div" style="height: 4000px;" bind:this={componentBrowserContainer}></div>
  </div>
- <div class="col-md-10" id="circuitEditorContainer">
+ {/if}
+ <div class="{displayPartBrowser ? 'col-md-10' : 'col-md-12'}" id="circuitEditorContainer">
  <div class="paper-div" bind:this={circuitContainer}></div>
  </div>
  </div>
  </div>
 
+ {#if displayPartBrowser}
  <div id="flyPaper"
  style="display: {flyDragged ? 'block': 'none'}; background-color:transparent;position:fixed;z-index:100;opacity:1.0;pointer-event:none;"></div>
 
@@ -496,6 +521,7 @@
  {/each}
  </form>
  {/if}
+ {/if}
 
 </main>
 

src/visualizers/widgets/ElectricCircuitsEditor/ElectricCircuitsEditorWidget.js

@@ -141,5 +141,19 @@ define([
  this.dashboard.clearGraph();
  };
 
+ ElectricCircuitsEditorWidget.prototype.showPartBrowser = function () {
+ this.dashboard.showPartBrowser({
+ validComponents: this.getValidComponents(),
+ width: this._el.width(),
+ height: this._el.height()
+ });
+ };
+
+ ElectricCircuitsEditorWidget.prototype.hidePartBrowser = function () {
+ this.dashboard.hidePartBrowser();
+ };
+
+
+
  return ElectricCircuitsEditorWidget;
 });