How to reproduce this issue

1. Add a button with drag'n'drop to the canvas
2. Copy the button with [CTRL] + [C] / [V]
3. Move (and rename) the second button
4. Click "Save"

How it looks after saving:

5. Press [F5]

How it looks after reloading:

An example could be found here: https://mydraft.cc/bllvcvrudnc606vhilgg

First investigation

Not sure if the following is correct, but I started some investigation and may it helps a little bit to point you where to start debugging.

• Saved and loaded json data looks valid for me.
• It seams to me, that there is an issue with the deserialization. The visuals get new random ids (maybe a stupid question: why are the id is not reused?). May the actions TRANSFORM_ITEMS and CHANGE_ITEMS_APPEARANCE could not be applied to the visual due to they do not know the new item id.

• Custom colors with hex code or RGB / HSV color selector
• Remember all custom colors for a project

Should just point to github.

• Setup Dockerfile
• Create org at Dockerhub
• Upload to Dockerhub
• Create kubernetes config
• Deploy to google cloud
• Find domain

• Build automatically
• Build Pull requests
• Deploy to demo site

I don't see any table UI element. Please include this in the next update.

Expected behavior

If I reload the page or copy the link, after I saved the diagram, I expect the content to be restored.

Actual behavior

I get a 404 not found.

Steps to reproduce the issue

1. Go to https://mydraft.cc/
2. Click "Save"
3. Press F5

Alternative:

3. Copy Link
4. Try to open this link in a new Tab / Window

Resizes at the moment and therefore they look very bad.

Add configurable for border radius

• Create component
• Show shapes
• Filter shapes
• Drag and drop shapes

Does not copy to clipboard yet, therefore you cannot copy to another window.

To Reproduce:

(tested on edge and chromium)

open up a new mydraft.cc document (can be an existing one as well)
click the delete icon on an element (or hit the delete key)

Application crashes:

Uncaught TypeError: Cannot read property 'isLocked' of undefined
    at src.dd5cfa859903f69abebc.js?dd5cfa859903f69abebc:2
    at Array.filter (<anonymous>)
    at src.dd5cfa859903f69abebc.js?dd5cfa859903f69abebc:2
    at src.dd5cfa859903f69abebc.js?dd5cfa859903f69abebc:2
    at src.dd5cfa859903f69abebc.js?dd5cfa859903f69abebc:2
    at src.dd5cfa859903f69abebc.js?dd5cfa859903f69abebc:2
    at Object.getSelectedItems (src.dd5cfa859903f69abebc.js?dd5cfa859903f69abebc:2)
    at Function.mapToProps (src.dd5cfa859903f69abebc.js?dd5cfa859903f69abebc:2)
    at r (src.dd5cfa859903f69abebc.js?dd5cfa859903f69abebc:2)
    at h (src.dd5cfa859903f69abebc.js?dd5cfa859903f69abebc:2)
bm8hdqjudnc606vhirfg:1 Failed to load resource: the server responded with a status of 404 ()

• Create component
• Show shapes
• Filter shapes
• Drag and drop icons

It should be possible to name shapes, especially groups.

Most projects have default margin, e.g. 10, 15, 20px. It should be possible to define it and then have a drag helper to enforce this margin.

• Resize multiple shapes
• Position multiple shapes.

Publish a diagram as template and make it available to others or inside the project.

Assume the URL is

• shared with another person
• opened in another browser
• opened after cookies are deleted

It would be great to keep the URL. Actually the URL will be changed if I save changes. This would simplify collaboration and continuing work.

API: https://api.mydraft.cc

// Get a diagram by token
e.GET("/:token", getDiagram)

// Update a diagram with token and store token
e.PUT("/:token/:writeToken", putDiagram)

// Create a new diagram
e.POST("/", postDiagram)

With contact information, legal stuff and so on.

• Other icon sets like material design
• Select icon set.

Currently the drag and drop has a bug:

react-dnd/react-dnd#2649

Unfortunately the project looks dead to me. I have 2 ideas:

1. Add the shape to the diagram when the shape is clicked and use the current move functionality. Will be tricky to fix the history.
2. Find another library.
3. Provide a fix. But react-dnd is really complicated.

Is there a way to export the wireframe as svg or jpeg or any other format?

https://togetherjs.com/

If a visual setting like font size is undefined for a shape it could be hidden or disabled?

Simple GO server that takes diagrams:

• POST endpoint: Store new diagram, returns secret_token and public_token
• PUT endpoint: Update diagram with secret_token
• GET endpoint: Get diagram with public_token

GO server should just store plain json and save it in google storage or other file system.