Guide tool

.eslintrc.js

@@ -10,9 +10,9 @@ module.exports = {
     SharedArrayBuffer: 'readonly'
   },
 
-  // Position is important, the last rules take precident here. For the least amount of prettier conficts with other eslint plugins.
-  // it has to come last
-  extends: ['eslint:recommended', 'plugin:vue/recommended', '@vue/typescript', 'prettier/vue'],
+    // Position is important, the last rules take precident here. For the least amount of prettier conficts with other eslint plugins.
+    // it has to come last
+    extends: ["eslint:recommended", "plugin:vue/recommended", "@vue/typescript"],
 
   parserOptions: {
     ecmaVersion: 2018,

.vscode/launch.json

@@ -4,6 +4,13 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
+        {
+            "name": "Attach to Chrome",
+            "port": 9222,
+            "request": "attach",
+            "type": "pwa-chrome",
+            "webRoot": "${workspaceFolder}"
+        },
         {
             "type": "chrome",
             "request": "launch",

package.json

@@ -62,6 +62,7 @@
         "vue-select": "^3.13.0",
         "vuetify": "^2.5.8",
         "vuex": "^3.6.2",
+        "webpack-build": "^1.0.1",
         "wnumb": "^1.2.0"
     },
     "devDependencies": {

src/App.vue

@@ -6,7 +6,7 @@
 
 <script>
 import Visualiser from "./components/Visualiser.vue";
-import LayoutSidebar from "./views/layouts/SplitLayout.vue";
+import LayoutSidebar from "./views/layouts/GuideToolLayout.vue";
 
 export default {
     name: "App",

src/app/core/component.ts

@@ -11,6 +11,8 @@ import { ConnectionInterchangeV1, Point } from "./init";
 import ComponentUtils from "../utils/componentUtils";
 import { ComponentAPI } from "@/componentAPI";
 import MapUtils from "../utils/mapUtils";
+import Layer from "./layer";
+import Device from "./device";
 
 /**
  * This class contains the component abstraction used in the interchange format and the
@@ -28,6 +30,15 @@ export default class Component {
     protected _componentPortTRenders: Map<string, Port>;
     protected _xspan: number;
     protected _yspan: number;
+    protected _layers: Array<Layer>;
+
+    get layers(){
+        return this._layers;
+    }
+
+    set layer(value:Array<Layer>){
+        this._layers = value;
+    }
     /**
      * Default Constructor
      * @param {string} type
@@ -36,11 +47,12 @@ export default class Component {
      * @param {string} mint
      * @param {String} id
      */
-    constructor(params: Params, name: string, mint: string, id: string = Component.generateID()) {
+    constructor(params: Params, name: string, mint: string, layer:Array<Layer>, id: string = Component.generateID()) {
         this._params = params;
         this._name = name;
         this._id = id;
         this._entity = mint;
+        this._layers = layer;
         // This stores the features that are a part of the component
         this._featureIDs = [];
         // TODO: Need to figure out how to effectively search through these
@@ -388,7 +400,7 @@ export default class Component {
         const unique_map = MapUtils.toMap(definition.unique);
         const heritable_map = MapUtils.toMap(definition.heritable);
         const replicaparams = new Params(cleanparamdata, unique_map, heritable_map);
-        const ret = new Component(replicaparams, name, this._entity);
+        const ret = new Component(replicaparams, name, this._entity, this.layer);
         console.log("Checking what the new component params are:", ret._params);
         // Generate New features
         for (const i in this._featureIDs) {
@@ -433,7 +445,7 @@ export default class Component {
      * @returns {*}
      * @memberof component
      */
-    static fromInterchangeV1(json: ComponentInterchangeV1): Component {
+    static fromInterchangeV1(json: ComponentInterchangeV1, device: Device): Component {
         // let set;
         // if (json.hasOwnProperty("set")) set = json.set;
         // else set = "Basic";
@@ -448,7 +460,7 @@ export default class Component {
         // It was originially this._span = this.span which threw several errors so I patterned in off the above const var
         const xspan = json["x-span"];
         const yspan = json["y-span"];
-
+        
         const params = json.params;
 
         console.log("new entity:", entity);
@@ -496,7 +508,14 @@ export default class Component {
         const unique_map = MapUtils.toMap(definition.unique);
         const heritable_map = MapUtils.toMap(definition.heritable);
         const paramstoadd = new Params(params, unique_map, heritable_map);
-        const component = new Component(paramstoadd, name, entity, id);
+        let layers: Array<Layer> =[]
+        for(let i in json.layers){
+            let layer = device.getLayer(json.layers[i]);
+            if (layer !== null){
+                layers.push(layer);
+            }
+        }
+        const component = new Component(paramstoadd, name, entity, layers, id);
 
         // Deserialize the component ports
         const portdata = new Map();

src/app/core/device.ts

@@ -531,7 +531,8 @@ export default class Device {
         let componenttoadd;
 
         for (let i in components) {
-            componenttoadd = Component.fromInterchangeV1(components[i]);
+            componenttoadd = Component.fromInterchangeV1(components[i],this);
+            console.log(components[i]);
             this.__components.push(componenttoadd);
         }
     }

src/app/core/registry.ts

@@ -29,7 +29,7 @@ class Registry {
     currentTextLayer = null;
     currentGrid: AdaptiveGrid | null = null;
     view = null;
-    viewManager: ViewManager | null = null;
+    viewManager: null | ViewManager = null;
     featureSet = null;
 }
 

src/app/view/loadUtils.ts

@@ -24,6 +24,7 @@ import {
     ComponentPortInterchangeV1,
     LogicalLayerType
 } from "@/app/core/init";
+import device from "@/app/core/device";
 
 export default class LoadUtils {
     constructor() {}
@@ -117,7 +118,7 @@ export default class LoadUtils {
         //TODO: Use this to dynamically create enough layers to scroll through
         //TODO: Use these to generate a rat's nest
         for (const i in json.components) {
-            const newComponent = LoadUtils.loadComponentFromInterchangeV1(json.components[i]);
+            const newComponent = LoadUtils.loadComponentFromInterchangeV1(json.components[i], newDevice);
             newDevice.addComponent(newComponent);
         }
 
@@ -276,7 +277,7 @@ export default class LoadUtils {
      * @returns {Component}
      * @memberof LoadUtils
      */
-    static loadComponentFromInterchangeV1(json: ComponentInterchangeV1): Component {
+    static loadComponentFromInterchangeV1(json: ComponentInterchangeV1, device: Device): Component {
         const iscustomcompnent = false;
         const name = json.name;
         const id = json.id;
@@ -334,7 +335,15 @@ export default class LoadUtils {
         const unique_map = MapUtils.toMap(definition.unique);
         const heritable_map = MapUtils.toMap(definition.heritable);
         const paramstoadd = new Params(params, unique_map, heritable_map);
-        const component = new Component(paramstoadd, name, entity, id);
+
+        let layers: Array<Layer> =[]
+        for(let i in json.layers){
+            let layer = device.getLayer(json.layers[i]);
+            if (layer !== null){
+                layers.push(layer);
+            }
+        }
+        const component = new Component(paramstoadd, name, entity, layers, id);
 
         // Deserialize the component ports
         const portdata = new Map();

src/app/view/viewManager.js

@@ -391,11 +391,11 @@ export default class ViewManager {
         let groupNum = Registry.currentDevice.layers.length;
         if (groupNum != 0) groupNum = groupNum / 3;
 
-        const newlayers = [];
+        let newlayers = [];
         newlayers[0] = new Layer({ z_offset: 0, flip: false }, this.currentDevice.generateNewName("LayerFlow"), LogicalLayerType.FLOW, groupNum.toString());
         newlayers[1] = new Layer({ z_offset: 0, flip: false }, this.currentDevice.generateNewName("LayerControl"), LogicalLayerType.CONTROL, groupNum.toString());
         newlayers[2] = new Layer({ z_offset: 0, flip: false }, this.currentDevice.generateNewName("LayerIntegration"), LogicalLayerType.INTEGRATION, groupNum.toString());
-        // Add model layers to current device
+        //Add model layers to current device
         Registry.currentDevice.createNewLayerBlock(newlayers);
 
         // Find all the edge features

src/components/ChangeAllDialog.vue

@@ -7,29 +7,42 @@
         </template>
 
         <v-card>
-            <v-card-title class="text-h5 lighten-2"> Change All Components: </v-card-title>
+            <v-card-title class="text-h5 lighten-2">
+                Change All Components:
+            </v-card-title>
 
-            <v-card-text> </v-card-text>
+            <v-card-text />
             <table>
                 <tr>
                     <th class="font-weight-bold pl-10 pt-4 pb-2">
                         <input v-model="selectAll" type="checkbox" />
                         <span class="pl-1">Select</span>
                     </th>
-                    <th class="font-weight-bold pl-15 pt-4 pb-2">Name</th>
+                    <th class="font-weight-bold pl-15 pt-4 pb-2">
+                        Name
+                    </th>
                 </tr>
                 <tr v-for="comp in components" :key="comp.id">
-                    <td class="pl-15 pb-2"><input v-model="selected" type="checkbox" :value="comp.id" /></td>
-                    <td class="pl-15 pb-2">{{ comp.name }}</td>
+                    <td class="pl-15 pb-2">
+            <input v-model="selected" type="checkbox" :value="comp.id" >
+          </td>
+
+                    <td class="pl-15 pb-2">
+                        {{ comp.name }}
+                    </td>
                 </tr>
             </table>
 
-            <v-divider></v-divider>
+            <v-divider />
 
             <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="green" class="white--text" @click="onSave"> Change </v-btn>
-                <v-btn color="red" class="white--text ml-9" @click="dialog = false"> Cancel </v-btn>
+                <v-spacer />
+                <v-btn color="green" class="white--text" @click="onSave">
+                    Change
+                </v-btn>
+                <v-btn color="red" class="white--text ml-9" @click="dialog = false">
+                    Cancel
+                </v-btn>
             </v-card-actions>
         </v-card>
     </v-dialog>

src/components/ComponentContextMenu.vue

@@ -4,7 +4,7 @@
             <thead v-show="showRename">
                 <v-col>
                     <v-row align-start>
-                        <v-text-field v-model="componentName" label="Name" type="input"> </v-text-field>
+                        <v-text-field v-model="componentName" label="Name" type="input" />
                         <v-btn x-small depressed @click="cancelRename">
                             <span class="material-icons">close</span>
                         </v-btn>

src/components/ConnectionContextMenu.vue

@@ -4,7 +4,7 @@
             <thead v-show="showRename">
                 <v-col>
                     <v-row align-start>
-                        <v-text-field v-model="connectionName" label="Name" type="input"> </v-text-field>
+                        <v-text-field v-model="connectionName" label="Name" type="input" />
                         <v-btn x-small depressed @click="cancelRename">
                             <span class="material-icons">close</span>
                         </v-btn>

src/components/ConnectionPropertyDrawer.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="property-drawer-parent">
-        <v-btn ref="activator" :class="buttonClasses" @click="showProperties()">Connection </v-btn>
+        <v-btn ref="activator" :class="buttonClasses" @click="showProperties()">
+            Connection
+        </v-btn>
         <div ref="drawer" class="connection-property-drawer">
             <v-card v-if="activated">
                 <v-card-text>
@@ -18,7 +20,7 @@
                                                 </v-row>
                                             </v-card-text>
                                         </v-col>
-                                        <v-divider vertical inset></v-divider>
+                                        <v-divider vertical inset />
                                         <v-col>
                                             <v-card-text>
                                                 <v-row>
@@ -69,31 +71,33 @@
                                                 <v-row no-gutters>
                                                     Source:
                                                     <v-col v-for="source in sources" :key="source.name" cols="4">
-                                                        <v-chip v-if="chip1" small close color="green" text-color="white" closable @click:close="chip1 = false">{{
-                                                            source.name
-                                                        }}</v-chip>
+                                                        <v-chip v-if="chip1" small close color="green" text-color="white" closable @click:close="chip1 = false">
+                              {{ source.name }}
+                            </v-chip>
                                                     </v-col>
                                                 </v-row>
                                                 <v-row no-gutters>
                                                     Sinks:
                                                 </v-row>
                                                 <v-row no-gutters>
                                                     <v-col v-for="sink in sinks" :key="sink.name" cols="4">
-                                                        <v-chip v-if="chip2" small close color="green" text-color="white" @click:close="chip2 = false">{{ sink.name }}</v-chip>
+                                                        <v-chip v-if="chip2" small close color="green" text-color="white" @click:close="chip2 = false">
+                                                            {{ sink.name }}
+                                                        </v-chip>
                                                     </v-col>
                                                 </v-row>
                                             </v-card-text>
                                         </v-col>
-                                        <v-divider vertical inset></v-divider>
+                                        <v-divider vertical inset />
                                         <v-col cols="3">
                                             <v-row no-gutters>
                                                 Connection Profile
                                             </v-row>
                                             <v-row no-gutters>
-                                                <v-select v-model="selectedProfile" :items="connectionProfiles"></v-select>
+                                                <v-select v-model="selectedProfile" :items="connectionProfiles" />
                                             </v-row>
                                             <v-row>
-                                                <v-img max-height="150" max-width="150" src="@/assets/technology/CHANNEL.png" class="image-placeholder"></v-img>
+                                                <v-img max-height="150" max-width="150" src="@/assets/technology/CHANNEL.png" class="image-placeholder" />
                                             </v-row>
                                         </v-col>
                                     </v-row>

src/components/DOEDialog.vue

@@ -1,7 +1,9 @@
 <template>
     <dialog id="doe_dialog" class="mdl-dialog">
         <div class="mdl-card__title">
-            <h2 class="mdl-card__title-text">Generate Design of Experiments for a Single Component</h2>
+            <h2 class="mdl-card__title-text">
+                Generate Design of Experiments for a Single Component
+            </h2>
         </div>
         <div class="mdl-dialog__content">
             <input id="doe_input" type="file" class="upload" />
@@ -15,8 +17,12 @@
         <!--</form>-->
         <br />
         <div class="mdl-dialog__actions mdl-dialog__actions--full-width">
-            <button id="download-doe-button" type="button" class="mdl-button">Download Designs</button>
-            <button type="button" class="mdl-button close">Cancel</button>
+            <button id="download-doe-button" type="button" class="mdl-button">
+                Download Designs
+            </button>
+            <button type="button" class="mdl-button close">
+                Cancel
+            </button>
         </div>
     </dialog>
 </template>

src/components/EditBorderDialog.vue

@@ -3,15 +3,21 @@
         <template #content>
             <h4>Drag Drop the DXF Border File:</h4>
             <div class="mdl-dialog__content">
-                <v-card id="border_import_panel" class="mx-auto" tile outlined width="400" color="grey lighten-2" height="200"> </v-card>
+                <v-card id="border_import_panel" class="mx-auto" tile outlined width="400" color="grey lighten-2" height="200" />
                 <br />
                 <input id="file_input" ref="file" type="file" class="upload" @change="addFile()" />
             </div>
         </template>
         <template v-slot:actions="{ callbacks }">
-            <v-btn dark color="green dark" @click="importBorderButton()"> Import Border </v-btn>
-            <v-btn dark color="red dark" @click="deleteBorderButton()"> Delete Border </v-btn>
-            <v-btn color="white" @click="callbacks.close(onSave)"> Okay </v-btn>
+            <v-btn dark color="green dark" @click="importBorderButton()">
+                Import Border
+            </v-btn>
+            <v-btn dark color="red dark" @click="deleteBorderButton()">
+                Delete Border
+            </v-btn>
+            <v-btn color="white" @click="callbacks.close(onSave)">
+                Okay
+            </v-btn>
         </template>
     </Dialog>
 </template>