-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Initial Release
- Loading branch information
Showing
3 changed files
with
2,975 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,104 @@ | ||
| # hierarchy_designer | ||
| # Hierarchy Designer | ||
| an organizational hierarchy designer made in jQuery and d3.js | ||
|
|
||
| # Dependencies | ||
| ``` | ||
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"></link> | ||
| <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> | ||
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> | ||
| <script src="https://d3js.org/d3.v5.js"></script> | ||
| <script src="./hierachy_plugin.js"></script> | ||
| <div class="your class name here">This is where your SVG window will go when you initialize the plugin</div> | ||
| ``` | ||
|
|
||
| # Initializing | ||
| ``` | ||
| $("Your Div Element Identifier Goes Here").hierarchyDesigner({ | ||
| load: function() { | ||
| //Your Load Code Here | ||
| }, | ||
| store: function() { | ||
| //Your Save Code Here | ||
| }, | ||
| initExtra: function() { | ||
| //Code here for anything extra you need | ||
| //Usually stuff you would instantiate to work in conjunction with your own save and load | ||
| }, | ||
| height:1920, //Whatever integer here | ||
| width:1080 //Whatever integer here | ||
| }); | ||
| ``` | ||
| Download the codebase and run index.html open up the developer console and paste in | ||
| ``` | ||
| $(".hierarchy_designer").hierarchyDesigner({}); | ||
| ``` | ||
| and hit enter to test out the tool yourself (Will use LocalStorage for save and load, Feel free to change this with config options) | ||
| You will have to read the code comments to learn how to write your own save and load that will play nice with the plugin code | ||
| # Using the tool | ||
|  | ||
| Using this tool is simple, From left to right the interface is as follows | ||
| New SVG | Create Node | Save Data | Load Data | Create Tags | Download SVG | About Tool | ||
|
|
||
| #### New SVG | ||
|  | ||
| to create a new SVG enter the Height and Width and hit Submit | ||
|
|
||
| #### Create Node | ||
|  | ||
| to create a new node enter the name of the Organization/User and then check the box if you wish to create a User and hit submit | ||
|
|
||
| #### Saving Data | ||
| to save data just hit the save button, further functionality of this may be extended in the configuration options | ||
|
|
||
| #### Loading Data | ||
| to load data just hit the load button, further functionality of this may be extended in the configuration options | ||
|
|
||
| #### Creating Tags | ||
|  | ||
| to create a tag enter the name in the box and select the first checkbox to make a User Group | ||
| You can select which tags are valid connection (Nodes with the created tag can connect to other nodes with these specified tags) | ||
| If the node is an organization then you are selecting which tags are the parent of this tag | ||
|
|
||
| #### Downloading SVG | ||
| to download SVG just hit the download button and the SVG will be saved to an SVG file you can save it wherever you want | ||
|
|
||
| #### Node Manipulation | ||
|  | ||
| The UI of the Node is as follows from top to bottom | ||
| Organization/User Name, Delete Link Buttons, Organization Types, Node Settings | ||
|  | ||
| Node UI left to right is Edit Tags, Edit Name, Link, Delete | ||
| Users do not have the Edit Tags option on the Node | ||
|
|
||
| #### Add/Remove Node Tags | ||
| Click the Edit tags Button on the specified node | ||
|  | ||
| Select all the Organization Types you wish to add to the node they will appear on the node | ||
|
|
||
| #### Edit Node Name | ||
| Click the Edit Name button on the specified node | ||
|  | ||
| Enter a new name and hit submit the nodes name will be updated | ||
|
|
||
| #### Linking Nodes together | ||
| Click the Link Button on the specified node | ||
| You will now have a line that will follow to the mouse pointer, Click on another node that you wish to link with | ||
| If both nodes are organizations they will link as Parent and Child assuming they have valid tags | ||
| If one of the nodes is a User you will be presented with this window | ||
|  | ||
| Select a valid tag that can connect to the Organization | ||
| a link will be created between the Organization and User with the User Tag displayed on the connection | ||
|
|
||
| #### Deleting Nodes | ||
| Just click the delete button on the specified node and it will be deleted along with all its linked connection severed | ||
|
|
||
| #### Deleting a Link | ||
| Click one of the gray squares below the Organization name that corrosponds with the link you wish to remove | ||
|
|
||
|
|
||
|
|
||
| #### About Tool | ||
| Developed by Shubshub | ||
| Vector Icon License: [FontAwesome Free License](https://fontawesome.com/license/free "FontAwesome Free License") | ||
| Tested on Chrome 91.0.4472.114, Firefox 89.0.2, Edge 91.0.864.59 | ||
| Current Version: 1.0.0 |
Oops, something went wrong.