Skip to content

Commit e3d9a0d

Browse files
ziggraceziggrace
authored
Merge pull request #15 from ziggrace/sean/edit
Sean/edit
2 parents c08d0f5 + fb6140f commit e3d9a0d

File tree

9 files changed

+512
-320
lines changed

9 files changed

+512
-320
lines changed

‎package-lock.json

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"vue-drag-resize": "^1.3.2",
4040
"vue-draggable-nested-tree": "^2.2.17",
4141
"vue-draggable-resizable": "^2.0.0-rc2",
42+
"vue-js-toggle-button": "^1.3.3",
4243
"vue-loader": "^15.7.0",
4344
"vue-multiselect": "^2.1.6",
4445
"vue-prism-editor": "^0.2.1",

‎src/components/dashboard_items/CodeSnippet.vue

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -181,18 +181,18 @@ export default {
181181
// }
182182
// },
183183
// If HTML elements or components are added, rerenders Code Snippet
184-
componentMap: {
185-
deep: true,
186-
handler () {
187-
// console.log('component Map has changed');
188-
if (this.componentMap[this.activeComponent]) {
189-
this.code = `${this.createCodeSnippet(
190-
this.activeComponent,
191-
this.componentMap[this.activeComponent].children
192-
)}`
193-
}
194-
}
195-
}
184+
// componentMap: {
185+
// deep: true,
186+
// handler () {
187+
// // console.log('component Map has changed');
188+
// if (this.componentMap[this.activeComponent]) {
189+
// this.code = `${this.createCodeSnippet(
190+
// this.activeComponent,
191+
// this.componentMap[this.activeComponent].children
192+
// )}`
193+
// }
194+
// }
195+
// }
196196
}
197197
</script>
198198

‎src/components/dashboard_items/Tree.vue

Lines changed: 64 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -18,92 +18,101 @@ Description:
1818
</template>
1919

2020
<script>
21-
import { tree } from 'vued3tree'
22-
import { mapState } from 'vuex'
21+
import { tree } from "vued3tree";
22+
import { mapState } from "vuex";
2323
export default {
24-
name: 'Tree',
24+
name: "Tree",
2525
components: {
26-
tree
26+
tree,
2727
},
2828
computed: {
29-
...mapState(['componentMap']),
29+
...mapState(["componentMap", "activeComponent"]),
3030
// Returns project tree on re-render
31-
computedTree () {
31+
computedTree() {
3232
// console.log('buildtree', this.buildTree())
33-
return this.buildTree()
34-
}
33+
return this.buildTree();
34+
},
3535
},
36-
data () {
36+
data() {
3737
return {
38-
tree: null
39-
}
38+
tree: null,
39+
};
4040
},
4141
methods: {
4242
// Called by transformToTree, formats componentMap
43-
formatComponentMap (compMap) {
43+
formatComponentMap(compMap) {
4444
// console.log('compMap', compMap)
45-
let result = []
46-
Object.values(compMap).forEach(compData => {
45+
let result = [];
46+
Object.values(compMap).forEach((compData) => {
4747
result.push({
4848
name: compData.componentName,
49-
children: compData.children
50-
})
51-
})
49+
children: compData.children,
50+
});
51+
});
52+
console.log(JSON.stringify(result))
5253
// console.log('Formatcomponent map result', result)
53-
return result
54+
return result;
5455
},
5556
// Called by buildTree, transforms componentMap
56-
transformToTree (data) {
57-
let result = {}
58-
const nodes = {}
59-
const formattedData = this.formatComponentMap(data)
57+
transformToTree(data) {
58+
let result = {};
59+
const nodes = {};
60+
const formattedData = this.formatComponentMap(data);
6061
61-
formattedData.forEach(component => {
62+
formattedData.forEach((component) => {
6263
if (!nodes[component.name]) {
63-
nodes[component.name] = { name: component.name, children: [] }
64-
result = nodes
64+
nodes[component.name] = { name: component.name, children: [] };
65+
result = nodes;
6566
}
66-
component.children.forEach(child => {
67-
nodes[child] = { name: child, children: [] }
68-
nodes[component.name].children.push(nodes[child])
69-
})
70-
})
71-
return result
67+
component.children.forEach((child) => {
68+
if (!nodes[child]) nodes[child] = { name: child, children: [] };
69+
nodes[component.name].children.push(nodes[child]);
70+
});
71+
});
72+
console.log(nodes)
73+
console.log(result)
74+
return result;
7275
},
7376
// Called by computedTree, calls transformToTree
74-
buildTree () {
75-
let build = this.transformToTree(this.componentMap)
76-
return build['App']
77+
buildTree() {
78+
let build = this.transformToTree(this.componentMap);
79+
return build["App"];
80+
},
81+
},
82+
watch:{
83+
componentMap:{
84+
deep:true,
85+
handler (){
86+
this.buildTree()
87+
}
7788
}
7889
}
79-
}
90+
};
8091
</script>
8192

8293
<style lang="stylus">
83-
.container {
84-
height: 100%;
85-
width: 100%;
86-
}
94+
.container
95+
height 100%
96+
width 100%
8797
88-
.treeclass .nodetree text {
89-
font-size: 19px !important;
90-
cursor: pointer;
91-
text-shadow: none !important;
92-
font-weight: bold;
93-
fill: #FFF;
98+
.treeclass .nodetree text
99+
font-size 19px !important
100+
cursor pointer
101+
text-shadow none !important
102+
font-weight bold
103+
fill #FFF
94104
/* none of these classes work
95105
color: white !important;
96106
background: white;
97107
margin: 1rem; */
98-
}
99-
/* changes the circle node color */
100-
.treeclass .nodetree circle {
101-
fill: #A2D9FF;
102-
}
108+
109+
/* changes the circle node color */
110+
.treeclass .nodetree circle
111+
fill #A2D9FF
112+
103113
/* changes the stroke color */
104-
.treeclass .linktree {
105-
stroke: $secondary !important;
106-
stroke-opacity: 0.4;
107-
stroke-width: 8px;
108-
}
114+
.treeclass .linktree
115+
stroke $secondary !important
116+
stroke-opacity .4
117+
stroke-width 8px
109118
</style>

0 commit comments

Comments
 (0)