8 |
11 |
12 |
21 |
--------------------------------------------------------------------------------
/background.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | chrome.runtime.onInstalled.addListener(()=>{
4 | //right click Svelcro devtools context menu option
5 | chrome.contextMenus.create({
6 | "id" : "Svelcro",
7 | "title" : "Svelcro DevTools",
8 | "contexts" : ["all"]
9 | })
10 |
11 | chrome.runtime.onMessage.addListener((msg, sender, response)=> {
12 | // Recieves msg body from DEVTOOLSscripts
13 | if(msg){
14 | chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
15 | chrome.tabs.sendMessage(tabs[0].id, {header: msg}, function(response) {});
16 | });
17 | }
18 | return true;
19 | })
20 |
21 | })
--------------------------------------------------------------------------------
/dev-app/src/Nav.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/svelte';
2 | import nav from './components/nav.svelte';
3 |
4 | describe('Nav component tests: ', () => {
5 | it('Navbar is mounted when nav component is rendered', () => {
6 | render(nav);
7 | const navBar = screen.queryByTestId('nav-bar');
8 | expect(navBar).toBeInTheDocument();
9 | });
10 |
11 | it('Component button is mounted when nav component is rendered', () => {
12 | render(nav);
13 | const compButton = screen.queryByTestId('comp-button');
14 | expect(compButton).toBeInTheDocument();
15 | });
16 |
17 | it('Profiler button is mounted when nav component is rendered', () => {
18 | render(nav);
19 | const profilerButton = screen.queryByTestId('profiler-button');
20 | expect(profilerButton).toBeInTheDocument();
21 | });
22 | })
23 |
--------------------------------------------------------------------------------
/dev-app/src/utils/exploreCompositeDataType.js:
--------------------------------------------------------------------------------
1 | const exploreCompositeDataType = (node) => {
2 | if (node.type === 'Literal') {
3 | return node.value;
4 | }
5 | if (node.type === 'ArrayExpression') {
6 | if (node.elements[0].type === 'Literal') {
7 | return node.elements;
8 | }
9 | const arr = [];
10 | for (let i = 0; i < node.elements.length; i += 1) {
11 | arr.push(exploreCompositeDataType(node.elements[i]));
12 | }
13 | return arr;
14 | }
15 | const obj = {};
16 | for (let i = 0; i < node.properties.length; i += 1) {
17 | if (node.properties[i].value.type === 'Literal') {
18 | obj[node.properties[i].key.name || node.properties[i].key.value] = node.properties[i].value.value;
19 | } else {
20 | obj[node.properties[i].key.name] = exploreCompositeDataType(node.properties[i].value);
21 | }
22 | }
23 | return obj;
24 | };
25 | export default exploreCompositeDataType;
26 |
--------------------------------------------------------------------------------
/dev-app/src/components/tree_hierarchy/ComponentStats.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
16 |
17 |
43 |
--------------------------------------------------------------------------------
/docs/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Svelcro
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/dev-app/public/global.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | position: relative;
3 | width: 100%;
4 | height: 100%;
5 | }
6 |
7 | body {
8 | /* TEXT COLOR */
9 | color: rgba(245, 245, 245, 0.543);
10 |
11 |
12 | margin: 0;
13 | box-sizing: border-box;
14 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
15 | }
16 |
17 | a {
18 | color: rgb(0,100,200);
19 | text-decoration: none;
20 | }
21 |
22 | a:hover {
23 | text-decoration: underline;
24 | }
25 |
26 | a:visited {
27 | color: rgb(0,80,160);
28 | }
29 |
30 | label {
31 | display: block;
32 | }
33 |
34 | input, button, select, textarea {
35 | font-family: inherit;
36 | font-size: inherit;
37 | -webkit-padding: 0.4em 0;
38 | padding: 0.4em;
39 | box-sizing: border-box;
40 | border: 1px solid #ccc;
41 | border-radius: 2px;
42 | }
43 |
44 | input:disabled {
45 | color: #ccc;
46 | }
47 |
48 | button {
49 | color: #333;
50 | background-color: #f4f4f4;
51 | outline: none;
52 | }
53 |
54 | button:disabled {
55 | color: #999;
56 | }
57 |
58 | button:not(:disabled):active {
59 | background-color: #ddd;
60 | }
61 |
62 | button:focus {
63 | border-color: #666;
64 | }
65 |
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Svelcro",
3 | "version": "1.0",
4 | "minimum_chrome_version": "10.0",
5 | "manifest_version": 3,
6 | "devtools_page": "devtools.html",
7 | "background": {
8 | "service_worker": "background.js"
9 | },
10 | "content_security_policy": {
11 | "extension pages": "script-src 'self' https://d3js.org/d3.v7.min.js; object-src 'self'"
12 | },
13 | "permissions": [
14 | "contextMenus",
15 | "tabs",
16 | "activeTab"
17 | ],
18 | "content_scripts": [{
19 | "matches": ["https://*/*", "http://*/*"],
20 | "js": ["document_start.js"],
21 | "run_at": "document_start"
22 | }],
23 | "web_accessible_resources": [{
24 | "resources": ["contentScript.js"],
25 | "matches": ["https://*/*", "http://*/*"]
26 | },
27 | {
28 | "resources": ["document_start.js"],
29 | "matches": ["https://*/*", "http://*/*"]
30 | }],
31 | "externally_connectable": {
32 | "matches": ["http://localhost/*"]
33 | },
34 | "icons": { "16": "/icons/icon16.png",
35 | "48": "/icons/icon48.png",
36 | "128": "/icons/icon128.png" }
37 | }
38 |
--------------------------------------------------------------------------------
/dev-app/src/components/tree_hierarchy/ComponentTree.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 | Component stats
8 | -
9 | {#each $compArrayStore as comp}
10 |
- 11 | {`${comp.$$.id}: ${JSON.stringify(comp.$$.ctx[0])}`} 12 | 13 | {/each} 14 |
11 |
24 |
25 |
26 |
27 |
57 |
--------------------------------------------------------------------------------
/dev-app/src/components/Nav.svelte:
--------------------------------------------------------------------------------
1 |
16 |
17 |
31 |
32 | 25 |
2 | 
3 |
216 |
230 |
231 |
232 |
233 |
300 |
--------------------------------------------------------------------------------
/dev-app/src/utils/componentDisplayFuncs.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import { parse, walk } from 'svelte/compiler';
3 | import * as d3 from 'd3';
4 | import exploreCompositeDataType from "./exploreCompositeDataType.js";
5 |
6 | export const getData = (tab , compRecord) => {
7 | if (tab !== 'chart' && tab !== 'tree') return;
8 | let i = 0;
9 | let componentNames = [];
10 | const D3PreTree = [];
11 | // This is a pre- or partial tree with known relationships among componenets/files that go only 1 layer deep (this is all we need to build the rest of the tree)
12 | const unorderedListOfNodes = [];
13 | let componentTree;
14 |
15 | const createNode = (ast) => {
16 | const node = {};
17 | const dependencies = {};
18 | const state = {};
19 | const props = {};
20 | const elementOfD3PreTree = {};
21 |
22 | ast.instance.content.body.forEach((el) => {
23 | // Find dependencies (via import statements) of current svelte component/file and store the dep in the node for said svelte component/file
24 | if (
25 | el.type === "ImportDeclaration" &&
26 | el.source.value.includes(".svelte")
27 | ) {
28 | const componentName = `<${el.source.value.slice(
29 | el.source.value.lastIndexOf("/") + 1,
30 | el.source.value.lastIndexOf(".")
31 | )} />`;
32 | dependencies[componentName] = {};
33 | }
34 | // Find props (via export statements) of current svelte component/file and store the props in the node for said svelte component/file
35 | else if (el.type === "ExportNamedDeclaration") {
36 | props[el.declaration.declarations[0].id.name] = null;
37 | }
38 | });
39 |
40 | node[componentNames[i]] = Object.keys(dependencies).length ? dependencies : {};
41 |
42 | Object.defineProperty(node[componentNames[i]], "Props", {
43 | value: props,
44 | configurable: true,
45 | writable: true,
46 | enumerable: false
47 | });
48 |
49 | walk(ast, {
50 | enter(ASTnode, parent, prop, index) {
51 | if (ASTnode.hasOwnProperty("declarations")) {
52 | // For variable declarations that either have not been initialized or have a value that is equal to "null"
53 | if (!ASTnode.declarations[0].init) {
54 | state[ASTnode.declarations[0].id.name] = ASTnode.declarations[0].init;
55 | }
56 | // For variable declarations that have a value that is a primitive data type or is a "Literal"
57 | else if (ASTnode.declarations[0].init.type === "Literal") {
58 | state[ASTnode.declarations[0].id.name] = ASTnode.declarations[0].init.value;
59 | }
60 | // For variable declarations that have a value that is a composite data type
61 | else if (
62 | ASTnode.declarations[0].init.type === "ObjectExpression" ||
63 | ASTnode.declarations[0].init.type === "ArrayExpression"
64 | ) {
65 | console.log("AST NODE IS:", ASTnode)
66 | state[ASTnode.declarations[0].id.name] = exploreCompositeDataType(ASTnode.declarations[0].init);
67 | }
68 |
69 | Object.defineProperty(node[componentNames[i]], "State", {
70 | value: state,
71 | configurable: true,
72 | writable: true,
73 | enumerable: false
74 | });
75 | }
76 | },
77 | });
78 |
79 | if (Object.keys(node).length) {
80 | unorderedListOfNodes.push(node);
81 |
82 | // For D3
83 | const temp = {};
84 | temp["State"] = state;
85 | temp["Props"] = props;
86 | elementOfD3PreTree[componentNames[i]] = temp;
87 | D3PreTree.push(elementOfD3PreTree);
88 | }
89 | }
90 |
91 | const createTree = (arr) => {
92 | for (let j = 0; j < arr.length; j += 1) {
93 | let success = 0;
94 |
95 | const searchTree = (
96 | tree,
97 | keyToSearchFor,
98 | valToSubstituteIfKeyIsFound
99 | ) => {
100 | for (const key in tree) {
101 | if (key === keyToSearchFor) {
102 | tree[key] = valToSubstituteIfKeyIsFound;
103 | arr.splice(j, 1);
104 | success += 1;
105 | return true;
106 | }
107 | if (
108 | Object.keys(tree[key]).length &&
109 | searchTree(
110 | tree[key],
111 | keyToSearchFor,
112 | valToSubstituteIfKeyIsFound
113 | )
114 | ) {
115 | return true;
116 | }
117 | }
118 | return false;
119 | }
120 |
121 | for (const key in arr[j]) {
122 | // If an unordered array node has keys that are not null (an object and therefore has dependencies)
123 | if (Object.keys(arr[j][key]).length > 0) {
124 | // testing top-most component (second level)
125 | for (const nestedKey in arr[j][key]) {
126 | for (const masterKey in componentTree) {
127 | if (nestedKey === masterKey) {
128 | arr[j][key][nestedKey] = componentTree[masterKey];
129 | componentTree = arr[j];
130 | arr.splice(j, 1);
131 | success += 1;
132 | }
133 | }
134 | }
135 | }
136 | }
137 |
138 | for (const key in arr[j]) {
139 | if (!success) {
140 | searchTree(componentTree, key, arr[j][key]);
141 | }
142 | }
143 | if (success) {
144 | j -= success;
145 | success = 0;
146 | }
147 | }
148 |
149 | if (arr.length !== 0) {
150 | createTree(arr);
151 | }
152 | }
153 |
154 | const filterTree = (compRecord, templateStructured) => {
155 | // comp record tag names
156 | const compRecordTagNames = {}
157 |
158 | compRecord.forEach((comp) => {
159 | const curTag = comp.$$.tag_name;
160 | if (compRecordTagNames.hasOwnProperty(curTag)) compRecordTagNames[curTag] += 1;
161 | else compRecordTagNames[curTag] = 1;
162 | })
163 | console.log('filterTree - compRecordTagNames: ', compRecordTagNames);
164 | // helper
165 | const helper = (struc) => {
166 | // if no children, return
167 | if (!struc.children) return;
168 | // start at beginning of template structured
169 | // check that children have a match in compRecord
170 | const curChildren = struc.children;
171 | struc.children = curChildren.filter((child) => {
172 | return compRecordTagNames.hasOwnProperty(child.id);
173 | });
174 | struc.children.forEach((child) => {
175 | helper(child);
176 | })
177 | // console.log("filterTreeHelper - children after filter: ", struc.children);
178 | }
179 | // call helper
180 | helper(templateStructured);
181 | console.log('filterTree - templateStructured after', templateStructured)
182 | // return template structured
183 | return templateStructured;
184 | }
185 |
186 | // Get resources of inspected program and generate views
187 | chrome.devtools.inspectedWindow.getResources(resources => {
188 | const arrSvelteFiles = resources.filter(file =>file.url.includes(".svelte"));
189 | console.log("arrSvelteFiles: ", arrSvelteFiles);
190 | componentNames = arrSvelteFiles.map(svelteFile => `<${svelteFile.url.slice(
191 | svelteFile.url.lastIndexOf("/") + 1,
192 | svelteFile.url.lastIndexOf(".")
193 | )} />`);
194 |
195 | arrSvelteFiles.forEach(svelteFile => {
196 | svelteFile.getContent(source => {
197 | if (source) {
198 | const ast = parse(source);
199 | createNode(ast);
200 |
201 | if (i === componentNames.length - 1) {
202 | componentTree = unorderedListOfNodes[0];
203 | unorderedListOfNodes.shift();
204 | createTree(unorderedListOfNodes);
205 | }
206 | i += 1;
207 | }
208 | });
209 | });
210 |
211 | // For D3 component tree
212 | let AST = [];
213 | let urls = [];
214 |
215 | // retrieves URLs from Svelte files and adds them to urls array
216 | // adds each Svelte file's contents to AST array
217 | for (let i = 0; i < arrSvelteFiles.length; i++) {
218 | urls.push(JSON.parse(JSON.stringify(arrSvelteFiles[i])));
219 | arrSvelteFiles[i].getContent(content => {
220 | AST.push(parse(content));
221 | });
222 | }
223 |
224 | /* ---- D3 ---- */
225 | // executes after svelte.parse is completed
226 | setTimeout(() => {
227 | // modified D3PreTree so that it fits for D3 stratify function
228 | const newD3Pre = [];
229 | for (let eachObj of D3PreTree) {
230 | let temp = {};
231 | let key = Object.keys(eachObj)[0];
232 | let value = Object.values(eachObj)[0];
233 | key = key.split("");
234 | key.shift();
235 | key.pop();
236 | key.pop();
237 | key.pop();
238 | key = key.join("");
239 | temp[key] = value;
240 | newD3Pre.push(temp);
241 | }
242 |
243 | // declare object to assemble component template
244 | let bigData = {};
245 |
246 | // map out AST array so that it is easier to access the node that contains import declaration
247 | // iterated through the AST array and modified the source key to later match with url array to
248 | // combined into bigData object
249 | AST = AST.map(obj => obj.instance.content.body);
250 | for (let i = 0; i < AST.length; i++) {
251 | AST[i] = AST[i].filter(node => node.type === "ImportDeclaration");
252 | for (let j = 0; j < AST[i].length; j++) {
253 | if (AST[i][j].source.value !== "svelte") {
254 | let obj = {};
255 | obj.type = AST[i][j].type;
256 | obj.source = AST[i][j].source.value.split("");
257 | obj.source.shift();
258 | obj.source.shift();
259 | obj.source = obj.source.join("");
260 | obj.source = obj.source.replace(".svelte", "");
261 | obj.source = obj.source.slice(obj.source.lastIndexOf('/') + 1)
262 | AST[i][j] = obj;
263 | } else {
264 | let obj = {};
265 | obj.type = AST[i][j].type;
266 | obj.source = AST[i][j].source.value;
267 | AST[i][j] = obj;
268 | }
269 | }
270 | }
271 |
272 | // modified the url array to match with AST array and then combined into
273 | // bigData object
274 | for (let i = 0; i < urls.length; i++) {
275 | for (let j = urls[i].url.length - 1; j > 0; j--) {
276 | if (urls[i].url[j] === "/") {
277 | urls[i].url = urls[i].url
278 | .slice(j + 1, urls[i].url.length)
279 | .replace(".svelte", "");
280 | }
281 | }
282 | bigData[urls[i].url] = AST[i];
283 | }
284 |
285 | // iterate through bigData and made parent/child object and pushed into componentTemplate array
286 | let componentTemplate = [];
287 | function componentChildren(bigObj) {
288 | for (let eachKey in bigObj) {
289 | for (let eachObj of bigObj[eachKey]) {
290 | if (
291 | eachObj.type == "ImportDeclaration" &&
292 | eachObj.source !== "svelte"
293 | ) {
294 | let obj = {};
295 | obj.parent = eachKey;
296 | obj.child = eachObj.source;
297 | componentTemplate.push(obj);
298 | }
299 | }
300 | }
301 | }
302 | componentChildren(bigData);
303 |
304 | // added special obj for the top parent component for D3 stratifyy function to successfully create relevant array
305 | for (let i = 0; i < componentTemplate.length; i++) {
306 | let obj = {};
307 | obj.child = componentTemplate[i].parent;
308 | if (componentTemplate.every(object => object.child !== obj.child)) {
309 | if (obj.child !== "") {
310 | obj.parent = "";
311 | componentTemplate.unshift(obj);
312 | }
313 | }
314 | }
315 |
316 | // combined data from newD3Pre into componentTemplate to render state/props onto panel with D3JS
317 | for (let i = 0; i < componentTemplate.length; i++) {
318 | for (let j = 0; j < newD3Pre.length; j++) {
319 | if (componentTemplate[i].child === Object.keys(newD3Pre[j])[0]) {
320 | componentTemplate[i].data = Object.values(newD3Pre[j])[0];
321 | }
322 | }
323 | }
324 |
325 | // modified componentTemplate for data that has no States and/or Prop to render appropriate states for users
326 | // modified the data to show only Props keys for better user experience
327 | for (let i = 0; i < componentTemplate.length; i++) {
328 | if (!componentTemplate[i].hasOwnProperty("data")) {
329 | componentTemplate[i].data = {
330 | State: "No State",
331 | Props: "No Props"
332 | };
333 | } else if (
334 | Object.keys(componentTemplate[i].data.Props).length === 0
335 | ) {
336 | componentTemplate[i].data.Props = "No Props";
337 | } else {
338 | let result = [];
339 | componentTemplate[i].data.Props = result.concat(
340 | Object.keys(componentTemplate[i].data.Props)
341 | );
342 | }
343 | }
344 |
345 | // finally create templateStructured for D3 using D3.stratify function
346 | let templateStructured = d3
347 | .stratify()
348 | .id(function(d) {
349 | return d.child;
350 | })
351 | .parentId(function(d) {
352 | return d.parent;
353 | })(componentTemplate);
354 |
355 | // filter through templateStructured
356 | templateStructured = filterTree(compRecord, templateStructured);
357 | switch (tab) {
358 | case "tree":
359 | let margin = {top: 40, right: 10, bottom: 50, left: 10},
360 | width = 150 - margin.left - margin.right,//660
361 | height = 500 - margin.top - margin.bottom;
362 |
363 | // declares a tree layout and assigns the size
364 | let treemap = d3.tree()
365 | .size([width, height]);
366 |
367 |
368 | // assigns the data to a hierarchy using parent-child relationships
369 | let nodes = d3.hierarchy(templateStructured);
370 |
371 | // maps the node data to the tree layout
372 | nodes = treemap(nodes);
373 |
374 | //check if a D3 tree is already present
375 | // if so, replace tree, instead of appending tree
376 | if (!d3.select("#component-cur").empty()) {
377 | d3.select("#component-cur").remove()
378 | };
379 |
380 | let svg = d3.select("#component-tree-display").append("svg")
381 | .attr('id', 'component-cur')
382 | .attr("width", width + margin.left + margin.right)
383 | .attr("height", height + margin.top + margin.bottom),
384 | g = svg.append("g")
385 | .attr("transform",
386 | "translate(" + margin.left + "," + margin.top + ")");
387 | // adds the links between the nodes
388 | let link = g.selectAll(".link")
389 | .data( nodes.descendants().slice(1))
390 | .enter().append("path")
391 | .attr("class", "link")
392 | .attr("d", function(d) {
393 | return "M" + d.x + "," + d.y
394 | + "C" + d.x + "," + (d.y + d.parent.y) / 2
395 | + " " + d.parent.x + "," + (d.y + d.parent.y) / 2
396 | + " " + d.parent.x + "," + d.parent.y;
397 | });
398 | console.log('link', link)
399 |
400 | // adds each node as a group
401 | let node = g.selectAll(".node")
402 | .data(nodes.descendants())
403 | .enter().append("g")
404 | .attr("class", function(d) {
405 | return "node" +
406 | (d.children ? " node--internal" : " node--leaf"); })
407 | .attr("transform", function(d) {
408 | return "translate(" + d.x + "," + d.y + ")"; });
409 |
410 | // adds the circle to the node
411 | node.append("circle")
412 | .attr("r", 10);
413 |
414 | // adds the text to the node
415 | node.append("text")
416 | .attr("dy", ".35em")
417 | .attr("y", function(d) { return d.children ? -20 : 20; })
418 | .style("text-anchor", "middle")
419 | .text(function(d) { return d.data.id; });
420 |
421 | console.log('LAST NODE', node);
422 | break;
423 | case "chart":
424 | (function () {
425 | 'use strict';
426 | }());
427 | let tree = d3.tree;
428 | let hierarchy = d3.hierarchy;
429 | let select = d3.select;
430 | let data = templateStructured;
431 | let MyTree = /** @class */ (function () {
432 | function MyTree() {
433 | let _this = this;
434 | this.connector = function (d) {
435 | return "M" + d.parent.y + "," + d.parent.x
436 | + "V" + d.x + "H" + d.y;
437 | };
438 | this.collapse = function (d) {
439 | if (d.children) {
440 | d._children = d.children;
441 | d._children.forEach(_this.collapse);
442 | d.children = null;
443 | }
444 | };
445 | this.click = function (d) {
446 | if (d.children) {
447 | d._children = d.children;
448 | d.children = null;
449 | }
450 | else {
451 | d.children = d._children;
452 | d._children = null;
453 | }
454 | _this.update(d);
455 | };
456 | this.update = function (source) {
457 | _this.width = 100;
458 | // Compute the new tree layout.
459 | let nodes = _this.tree(_this.root);
460 | let nodesSort = [];
461 | nodes.eachBefore(function (n) {
462 | nodesSort.push(n);
463 | });
464 | _this.height = Math.max(500, nodesSort.length * _this.barHeight + _this.margin.top + _this.margin.bottom);
465 | let links = nodesSort.slice(1);
466 | // Compute the "layout".
467 | nodesSort.forEach(function (n, i) {
468 | n.x = i * _this.barHeight;
469 | });
470 | d3.select('svg').transition()
471 | .duration(_this.duration)
472 | .attr("height", _this.height);
473 | // Update the nodes…
474 | let node = _this.svg.selectAll('g.node')
475 | .data(nodesSort, function (d) {
476 | return d.id || (d.id = ++this.i);
477 | });
478 | // Enter any new nodes at the parent's previous position.
479 | let nodeEnter = node.enter().append('g')
480 | .attr('class', 'node')
481 | .attr('transform', function () {
482 | return 'translate(' + source.y0 + ',' + source.x0 + ')';
483 | })
484 | .on('click', _this.click);
485 | nodeEnter.append('circle')
486 | .attr('r', 1e-6)
487 | .style('fill', function (d) {
488 | return d._children ? 'lightsteelblue' : '#fff';
489 | });
490 | nodeEnter.append('text')
491 | .attr('x', function (d) {
492 | return d.children || d._children ? 10 : 10;
493 | })
494 | .attr('dy', '.35em')
495 | .attr('text-anchor', function (d) {
496 | return d.children || d._children ? 'start' : 'start';
497 | })
498 | .text(function (d) {
499 | if (d.data.id.length > 20) {
500 | return d.data.id.substring(0, 20) + '...';
501 | }
502 | else {
503 | return d.data.id;
504 | }
505 | })
506 | .style('fill-opacity', 1e-6);
507 | nodeEnter.append('svg:title').text(function (d) {
508 | return d.data.id;
509 | });
510 | // Transition nodes to their new position.
511 | let nodeUpdate = node.merge(nodeEnter)
512 | .transition()
513 | .duration(_this.duration);
514 | nodeUpdate
515 | .attr('transform', function (d) {
516 | return 'translate(' + d.y + ',' + d.x + ')';
517 | });
518 | nodeUpdate.select('circle')
519 | .attr('r', 4.5)
520 | .style('fill', function (d) {
521 | return d._children ? 'lightsteelblue' : '#fff';
522 | });
523 | nodeUpdate.select('text')
524 | .style('fill-opacity', 1);
525 | // Transition exiting nodes to the parent's new position (and remove the nodes)
526 | let nodeExit = node.exit().transition()
527 | .duration(_this.duration);
528 | nodeExit
529 | .attr('transform', function (d) {
530 | return 'translate(' + source.y + ',' + source.x + ')';
531 | })
532 | .remove();
533 | nodeExit.select('circle')
534 | .attr('r', 1e-6);
535 | nodeExit.select('text')
536 | .style('fill-opacity', 1e-6);
537 | // Update the links…
538 | let link = _this.svg.selectAll('path.link')
539 | .data(links, function (d) {
540 | // return d.target.id;
541 | let id = d.id + '->' + d.parent.id;
542 | return id;
543 | });
544 | // Enter any new links at the parent's previous position.
545 | let linkEnter = link.enter().insert('path', 'g')
546 | .attr('class', 'link')
547 | .attr('d', function (d) {
548 | let o = { x: source.x0, y: source.y0, parent: { x: source.x0, y: source.y0 } };
549 | return _this.connector(o);
550 | });
551 | // Transition links to their new position.
552 | link.merge(linkEnter).transition()
553 | .duration(_this.duration)
554 | .attr('d', _this.connector);
555 | // Transition exiting nodes to the parent's new position.
556 | link.exit().transition()
557 | .duration(_this.duration)
558 | .attr('d', function (d) {
559 | let o = { x: source.x, y: source.y, parent: { x: source.x, y: source.y } };
560 | return _this.connector(o);
561 | })
562 | .remove();
563 | // Stash the old positions for transition.
564 | nodesSort.forEach(function (d) {
565 | d.x0 = d.x;
566 | d.y0 = d.y;
567 | });
568 | };
569 | }
570 | MyTree.prototype.$onInit = function () {
571 | let _this = this;
572 | this.margin = { top: 20, right: 10, bottom: 20, left: 10 };
573 | this.width = 150 - this.margin.right - this.margin.left;
574 | this.height = 100 - this.margin.top - this.margin.bottom;
575 | this.barHeight = 20;
576 | this.barWidth = this.width * .8;
577 | this.i = 0;
578 | this.duration = 750;
579 | this.tree = tree().size([this.width, this.height]);
580 | // this.tree = tree().nodeSize([0, 30]);
581 | this.tree = tree().nodeSize([0, 30]);
582 | this.root = this.tree(hierarchy(data));
583 | this.root.each(function (d) {
584 | d.id = d.id; //transferring name to a name variable
585 | d.id = _this.i; //Assigning numerical Ids
586 | _this.i++;
587 | });
588 | this.root.x0 = this.root.x;
589 | this.root.y0 = this.root.y;
590 | if (!d3.select("#component-cur").empty()) {
591 | console.log('hit')
592 | d3.select("#component-cur").remove()
593 | };
594 | this.svg = select('#component-tree-display').append('svg')
595 | .attr('id', 'component-cur')
596 | .attr('width', this.width + this.margin.right + this.margin.left)
597 | .attr('height', this.height + this.margin.top + this.margin.bottom)
598 | .append('g')
599 | .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
600 | this.update(this.root);
601 | };
602 | return MyTree;
603 | }());
604 | ;
605 | let myTree = new MyTree();
606 | const test = myTree.$onInit();
607 | break;
608 | }
609 | }, 100);
610 | });
611 | };
--------------------------------------------------------------------------------
231 |