diff --git a/README.md b/README.md index cf25426..887280c 100644 --- a/README.md +++ b/README.md @@ -35,8 +35,8 @@ npm run import-visualizer To use the library without installation, enter the command as follows. -``` -npx import-visualizer --root --targetDir +```sh +npx import-visualizer --root --targetDir --collapse ``` ## Options @@ -45,9 +45,11 @@ npx import-visualizer --root --targetDir `--targetDir ` (default `src`) - Directory path to be included in the tree. If you want to include the entire project file, set it to `.` +`--collapse` - Collapse the tree and render it + ## Generation Mechanism -``` +```sh +---------------------------+ | | +-------> generateTree | { name: 'App.tsx', attributes: { dir: 'src' }, children: [] } diff --git a/bin/cli.ts b/bin/cli.ts index 64361ac..028557e 100644 --- a/bin/cli.ts +++ b/bin/cli.ts @@ -9,13 +9,13 @@ import { getConfigFile } from '../plugin/getConfigFile'; import { FileTree } from '../plugin/FileTree'; import { __dirname, generateTemplate } from '../plugin/generateTemplate'; -const { root, targetDir } = cliConfig(process.argv.slice(2)); +const { root, targetDir, collapse } = cliConfig(process.argv.slice(2)); const { compilerOptions } = getConfigFile(); const { baseUrl, paths } = compilerOptions; const fileTree = new FileTree(root, targetDir, baseUrl, paths); -generateTemplate(fileTree.tree); +generateTemplate(fileTree.tree, collapse); const resultFilePath = resolve(__dirname, '../index.html'); await open(resultFilePath, { wait: true }); diff --git a/package-lock.json b/package-lock.json index ccd15cc..36d9954 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "import-visualizer", - "version": "1.0.4", + "version": "1.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "import-visualizer", - "version": "1.0.4", + "version": "1.1.0", "license": "MIT", "dependencies": { "@babel/parser": "^7.24.6", diff --git a/package.json b/package.json index 2f81f34..c7318e9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "import-visualizer", - "version": "1.0.4", + "version": "1.1.0", "main": "./dist/bin/cli.js", "type": "module", "bin": "./dist/bin/cli.js", @@ -9,6 +9,7 @@ ], "scripts": { "test": "jest -c jest.config.js --coverage", + "dev": "npm run build && node dist/bin/cli.js --root dist/bin/cli.js --targetDir dist --collapse", "build": "run-p build:*", "build:plugin": "rollup -c rollup.config.js", "build:template": "rollup -c rollup.config-tree.js", diff --git a/plugin/cliConfig.ts b/plugin/cliConfig.ts index 465c3a8..523c5bc 100644 --- a/plugin/cliConfig.ts +++ b/plugin/cliConfig.ts @@ -1,14 +1,16 @@ import type { CliOptions, cliArgType } from './types'; export function cliConfig(argv: NodeJS.Process['argv']): CliOptions { - const options = { + const options: CliOptions = { root: 'src/App.tsx', targetDir: 'src', + collapse: false, }; argv.forEach((arg: cliArgType) => { - if (arg == '--root') options.root = argv[argv.indexOf(arg) + 1]; - if (arg == '--targetDir') options.targetDir = argv[argv.indexOf(arg) + 1]; + if (arg === '--root') options.root = argv[argv.indexOf(arg) + 1]; + if (arg === '--targetDir') options.targetDir = argv[argv.indexOf(arg) + 1]; + if (arg === '--collapse') options.collapse = true; }); return options; diff --git a/plugin/generateTemplate.ts b/plugin/generateTemplate.ts index 3c2da52..641187e 100644 --- a/plugin/generateTemplate.ts +++ b/plugin/generateTemplate.ts @@ -2,9 +2,11 @@ import { readFileSync, writeFileSync } from 'fs'; import { dirname, resolve } from 'path'; import { fileURLToPath } from 'url'; -export const __dirname = dirname(fileURLToPath(import.meta.url)) +import type { FileNode } from './types'; -const template = (data: string) => { +export const __dirname = dirname(fileURLToPath(import.meta.url)); + +const template = (data: string, collapse: boolean) => { const script = readFileSync(resolve(__dirname, '../lib/tree.js')); return ` @@ -18,11 +20,12 @@ const template = (data: string) => {
+ `; }; -export function generateTemplate(data: any) { - writeFileSync(resolve(__dirname, '../index.html'), template(JSON.stringify(data))); +export function generateTemplate(data: FileNode, collapse: boolean) { + writeFileSync(resolve(__dirname, '../index.html'), template(JSON.stringify(data), collapse)); } diff --git a/plugin/types.ts b/plugin/types.ts index 84276e1..9f5915e 100644 --- a/plugin/types.ts +++ b/plugin/types.ts @@ -10,10 +10,11 @@ interface FileNode { children: FileNode[]; } -type cliArgType = '--root' | '--targetDir'; +type cliArgType = '--root' | '--targetDir' | '--collapse'; interface CliOptions { root: string; targetDir: string; + collapse: boolean; } type configPath = Record; diff --git a/rollup.config.js b/rollup.config.js index 343707b..d338082 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -9,7 +9,7 @@ export default [ dir: 'dist', preserveModules: true, }, - external: ['open', 'json5', '@babel/parser', '@babel/traverse', 'fs', 'path', 'fs/promises'], + external: ['open', 'json5', '@babel/parser', '@babel/traverse', 'fs', 'path', 'fs/promises', 'url'], plugins: [ typescript({ tsconfig: 'tsconfig.json', diff --git a/src/App.jsx b/src/App.jsx index ba20c7a..55871f0 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,13 +1,77 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import ReactDOM from 'react-dom'; import Tree from 'react-d3-tree'; +import TextSizeController from './TextSizeController.jsx'; +import Controller from './Controller.jsx'; +import CustomNode from './CustomNode.jsx'; + +const SEPERATION_INTERVAL = 0.5; +const DEPTH_INTERVAL = 50; function App() { + const [orientation, setOrientation] = useState('horizontal'); + const [depthFactor, setDepthFactor] = useState(500); + const [seperation, setSeperation] = useState(0.5); + + const changeOrientation = () => { + if (orientation === 'vertical') setOrientation('horizontal'); + else setOrientation('vertical'); + }; + + const increaseDepthFactor = () => { + setDepthFactor((prev) => prev + DEPTH_INTERVAL); + }; + + const decreaseDepthFactor = () => { + setDepthFactor((prev) => (prev - DEPTH_INTERVAL > 0 ? prev - DEPTH_INTERVAL : prev)); + }; + + const increaseSeperation = () => { + setSeperation((prev) => prev + SEPERATION_INTERVAL); + }; + + const decreaseSeperation = () => { + setSeperation((prev) => (prev - SEPERATION_INTERVAL > 0 ? prev - SEPERATION_INTERVAL : prev)); + }; + + useEffect(() => { + if (orientation === 'horizontal') { + setDepthFactor(500); + setSeperation(0.5); + } else { + setDepthFactor(100); + setSeperation(2); + } + }, [orientation]); + return ( -
- +
+
+
+ Orientation + +
+ + + +
+ CustomNode({ ...rd3Props })} + />
- ) + ); } -ReactDOM.createRoot(document.getElementById('root')).render(); \ No newline at end of file +ReactDOM.createRoot(document.getElementById('root')).render(); diff --git a/src/Controller.jsx b/src/Controller.jsx new file mode 100644 index 0000000..24c9c9c --- /dev/null +++ b/src/Controller.jsx @@ -0,0 +1,15 @@ +import React from 'react'; + +export default function Controller({ title, onClickIncrease, onClickDecrease }) { + return ( +
+ {title} + + +
+ ); +} diff --git a/src/CustomNode.jsx b/src/CustomNode.jsx new file mode 100644 index 0000000..1f51a70 --- /dev/null +++ b/src/CustomNode.jsx @@ -0,0 +1,19 @@ +import React from 'react'; + +export default function CustomNode({ nodeDatum, toggleNode }) { + return ( + <> + + + + {nodeDatum.name} + + + + dir: {nodeDatum.attributes.dir} + + + + + ); +} diff --git a/src/TextSizeController.jsx b/src/TextSizeController.jsx new file mode 100644 index 0000000..6269de8 --- /dev/null +++ b/src/TextSizeController.jsx @@ -0,0 +1,64 @@ +import React, { useState } from 'react'; +import Controller from './Controller.jsx'; + +const TITLE_SIZE_INTERVAL = 1; +const ATTRIBUTE_SIZE_INTERVAL = 1; + +export default function TextSizeController() { + const [titleSize, setTitleSize] = useState(20); + const [attributeSize, setAttributeSize] = useState(15); + + const increaseTitleSize = () => { + setTitleSize((prev) => prev + TITLE_SIZE_INTERVAL); + }; + + const decreaseTitleSize = () => { + setTitleSize((prev) => (prev - TITLE_SIZE_INTERVAL > 0 ? prev - TITLE_SIZE_INTERVAL : prev)); + }; + + const increaseAttributeSize = () => { + setAttributeSize((prev) => prev + ATTRIBUTE_SIZE_INTERVAL); + }; + + const decreaseAttributeSize = () => { + setAttributeSize((prev) => (prev - ATTRIBUTE_SIZE_INTERVAL > 0 ? prev - ATTRIBUTE_SIZE_INTERVAL : prev)); + }; + + return ( + <> + + + + + ); +}