Basic skeleton of web-based mind map creation software
- or -
Post a project like this$$$
- Posted:
- Proposals: 6
- Remote
- #2091759
- Expired
Description
Experience Level: Expert
Estimated project duration: less than 1 week
Create a Javascript/HTML application that allows to create/edit mind map. The result should be a DEMO application and well written, extendable Javascript library that allow to call various functions like addNode, setNodeColor, setNodePosition, … Maybe use some kind of open-source solution like VivaGraphJS (uses SVG). For inspiration take look at imindq.com that uses HTML canvas.
Requirements
• Use HTML Canvas or SVG to allow create/insert/update nodes and edges
• Zoom in/zoom out by scrolling
• Create/delete node by double click on canvas, edit text inside
• Automatically adjust node size to the text size
• Node with image from URL as a node background
• Create/delete edge between two nodes
• Being able to handle events like: on mouse click/touch on node, edge, drag&drop, select node, select edge …
• Moving with canvas by drag&drop (left mouse click, touchpad, …)
• Being able to dynamically change various properties of a node, edge, like weight, color, font, size
• Easy to add other elements like circle, curved dotted line, notes, etc.
• Nodes and edges should be stored in an array, for example:
nodes: [
{
id: 'First',
text: 'Some text',
selected : false,
x: 10,
y: 10,
},
{
id: 'Second',
text: 'Some text 2',
selected : false,
x: 100,
y: 50,
}
],
edges: [
{
idf: 'First',
idt: 'Second'
},
]
• Working on all devices (tablet, pc, phone)
• Clean DRY code, easy to extend
Requirements
• Use HTML Canvas or SVG to allow create/insert/update nodes and edges
• Zoom in/zoom out by scrolling
• Create/delete node by double click on canvas, edit text inside
• Automatically adjust node size to the text size
• Node with image from URL as a node background
• Create/delete edge between two nodes
• Being able to handle events like: on mouse click/touch on node, edge, drag&drop, select node, select edge …
• Moving with canvas by drag&drop (left mouse click, touchpad, …)
• Being able to dynamically change various properties of a node, edge, like weight, color, font, size
• Easy to add other elements like circle, curved dotted line, notes, etc.
• Nodes and edges should be stored in an array, for example:
nodes: [
{
id: 'First',
text: 'Some text',
selected : false,
x: 10,
y: 10,
},
{
id: 'Second',
text: 'Some text 2',
selected : false,
x: 100,
y: 50,
}
],
edges: [
{
idf: 'First',
idt: 'Second'
},
]
• Working on all devices (tablet, pc, phone)
• Clean DRY code, easy to extend
Tomas J.
0% (0)Projects Completed
-
Freelancers worked with
-
Projects awarded
0%
Last project
9 May 2024
Czech Republic
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
Tomas, do you have reference website link ? would you please let us know in which technology you want to build the site? Also would you like to go with ready made theme or you want to design it from scratch ? Which payment gateway do you want to integrate ?
Awaiting your response.
684670
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies