- Click the "Create Project" button within the "Projects" page.
- Enter a title for your project and click "Create".
- Within the "Projects" page click on the icon for the project you want to edit.
- New projects will have the default icon of a white triangle inside a black circle.
- The icon for your project will update to a preview of the project when you save.
- To view a project without the editor click the "Present View" button from within the editor.
- If you dont have edit permissions on a project shared with you clicking on a project icon will default to Present View.
- To share a project click the "Share" button for the project you want to share on the "Projects" page.
- Fill out the email of the person you want to share the project with.
- When you share a project, the project will show up in the recipient's "Shared With Me" page.
- To provide a recipient with full edit access to your project click the "Provide Edit Permission" checkbox.
- If you provide edit permissions a recipient they will be able to edit your version of the project so make sure you only give edit permissions to trusted recipients, or make a copy.
- Sharing a project will not send the recipient an email.
- Click the "Share" button on a project, A list of people with access to your project will be available at the bottom of the modal.
- To remove someones access to your project, click the "Delete" button next to the person you want to remove access from.
- To change someones edit permissions, click the "___ edit" buton to toggle edit permissions.
- Click "Shared With Me" at the top of the "Projects" page to access the Shared With Me Page.
- Clicking on an Icon on the Shared with me page will either open the editor or the Present View for a project depending on if you have edit permissions.
- Clicking "Remove" on a project will remove your access to the project, and wont delete it even if you have edit permissions.
- To download a project click the "Download" button inside the "Project" page or the Project Editor.
- Select (.svg) or (.png) to download a file of the given type to your browsers default download folder.
- Note when downloading to png: If your project has complicated imported SVG files in it it might not get converted properly to png and you might get a corrupted file.
- To create a copy of a project, click the "Copy" button on the "Projects" page.
- This will create an editable copy of your project.
- You can not create copies of projects shared with you.
- To save a project click the "Save" button within the project editor.
- The "Editor showes you how much time has passed since the last save.
- Since the project editor doesnt auto-save it is suggested that you save often to avoid loss of progress.
- When you click on the "Add New Node" button it creates a new node with the styles provided by the style editor.
- When you click on "Import Custom Node" you can import a (.svg) file as a node into your project.
- To access a library of open licensed SVG vector images visit svgrepo.com.
- Click on a node to select it and then drag it where you want it.
- Make sure you dont click on the text area in a node when trying to move it.
- When you click on a node you will see green, blue, and orange handles appear around the node.
- Click and drag the green and blue handles to resize the node.
- When you add a new node via the "Add New Node" button the new node will have the styles of the current style state.
- To update the styles of an existing node double click on it, or hold the "u" key and single click.
- This will update the "Color" and "Details" sections of the nodes styles.
- This will NOT update the "Size", "position", "Node Type", or "Text Content" styles for the node.
- Note: When Updating the Styles of a Custom SVG node it might have unreversable and or unpredictable results with complicated svg images.
- Select the node or line you want to delete.
- While your mouse is hovering over the selected Item press the "backspace" key.
- when you delete a node all likes attached to it are also deleted.
- Select a node you want to copy and press "ctrl + c" or "cmd + c".
- This will update the copy buffer with the given node's information.
- press "ctrl + v" or "cmd + v" to paste a node in the copy buffer.
- pasted nodes will show up in the same location the copy'd node was in when it was copied which could cause it to be pasted on top of the copied node.
- press "ctrl + z" or "cmd + z" to undo an action.
-The following is a list of actions that can be undone:
* Styling a node/line.
* Deleting a node/line.
* Adding a node/line.
- Note: these actions are stored so that you can undo many of them in a row. However when you add a node the action history is reset.
- As covered in the Previous section of the docs, holding u and clicking on a selected object will update its styles as outlined there.
*all keyboard shortcuts are for use inside the Project Editor*
- When you create a text node it will create it with the text found in the "Text Content" box within the styles editor.
- You can edit the text by clicking on the text within a node and editing it like normal.
- Click anywhere outside a textBox to stop editing the text.
- All lines MUST connect 2 nodes.
- Click on a Node then Click on an orange handle, This will designate that node as the start node and start the line on that handle.
- When you click on an orange line creation handle you enter line creation mode and the line creation handles turn purple.
- To end the line click on one of the purple handles on a DIFFERENT node this will make you exit line creation mode and draw your completed line.
- While in line creation mode (node line handles are purple) if you click on the background you will add a joint in the line.
- Line ends will stay connected to the Node they are assigned to when you move the nodes around.
- If you select a line by clicking on it you will see purple handles on any joints in the line, you can use thouse handles to drag the joint wherever you want it.
- You can delete a line by clicking on it and pressing "backspace".
- You can style lines using the "Lines" section of the style editor.
- When you create a new line it will be created with the styles in the lines editor.
- You can update thouse styles by double clicking on a line, or holding the "u" key and clicking on the line. (This is the same process as updating node styles.)
- The Copy, Paste, and Undo Keybinds dont work on FireFox since it captures command and ctrl key presses and doesnt send them to the page.
- In order to use this Cite you need an account to make projects and access projects shared with you.
- To make an account you need to enter an email, We will never email you, you might get 1 email from Auth0 the 3rd party auth service OpenChart uses.
- OpenChart Uses Auth0 a 3rd party authentication service for user accounts, we do this to ensure that accounts are secure.
- When you log in, we redirect you to Auth0, you log in and then get redirected back to our cite with the proper user authentication.
- The url changing to dev-ohd9-51j.us.auth0.com when loging in is normal since i am not paying for a custom domain from them.
- Check them out at auth0.com.