mydraft-cc/ui

Open source wireframing tool written in typescript, react and redux.

ui's Issues

Drag and drop images

TogetherJS

https://togetherjs.com/

Write awesome Readme.md file

Rectangle Shape

Add configurable for border radius

Saved diagrams are not restored visually correct

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.

CI infrastructure

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

Tabs shape

Complete copy and paste

Lock shapes

Write awesome Readme file for shapes

Vertical Line

Pressing delete crashes application

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 ()

Select ALL shortcut

Where are the tables?

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

Hide selection adorner on double click

Open and save file with electron

Create Electron app in CI process

Write storage server

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.

Multiple pages

Select on mouse down

Templates

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

Horizontal Line

Background color for diagrams.

Better previews for shape list

Resizes at the moment and therefore they look very bad.

Advanced color editor

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

Integrate saving

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)

Write info dialog

With contact information, legal stuff and so on.

Grid shape

Horizontal scrollbar Shape

Heading shape

Got a "404 not found", if I try to load a saved diagram

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

Deploy Storage server

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

Drag and drop of icons

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

Integrate feedback button

Should just point to github.

More icon sets

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

Inputs to change the size and position of one or multiple shapes.

• Resize multiple shapes
• Position multiple shapes.

Add shape on double click.

Vertical scrollbar Shape

Disable visual setting control if undefined

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

Define default margin with drag helpers

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.

Name shapes

It should be possible to name shapes, especially groups.

Move shapes with keyboard.

Fix drag and drop

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.

Paragraph shape

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

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

Copy and paste to clipboard

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

Autosize labels

Drag and drop of shapes

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

Tree structure / Outline

Feature request: Keep URL if diagram is edited in a new session

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.