When I pull the repo and open index.html (or alternatively run jekyll serve to access it via localhost) the current version can't find all of the external files. It looks in index_files which as far as I can tell isn't a folder. When I change everything to point to scripts and styles it works fine.

Am I missing a step to run things locally?

…

Users should be able to save files to disk. This is already possible, but there should be an easily discoverable button.

Implementation: generate a data-URI

If you refresh the page for whatever reason, you shouldn't lose the current work. Can it be stored in localstorage or in the user's cache?

It would be useful to have arrow shapes.

Sometimes my pages have too many notes, and I can't physically fit them next to the element in question. So an arrow shape to join them up would be useful.

The arrow could just be an SVG shape that goes from one corner of an div block to the other. See stackoverflow for a quick example.

The <li> in the element list on the left side should have title-attributes to display a brief info about the element on hover.

Story: To make actions clear and possibly also make use on mobile possible, in place text editing should have a OK and an Cancel button.

Links:

• Code for example in place edit.

Story: As a user, I want to recover from errors from e.g. accidental input or so.

Possible implementation: An "undelete" button aside of the delete button which restores the most recently delete object.

Brief context: A full undo/redo would be great, but it is not in the scope and the technology the project is based on (basically supercharged HTML) would make it rather difficult anyway.

What would cover the most likely error source imho is an un-delete function that restores the most recently delete object. It would not offer a history-like function, but more a oops-I-did-not intent-to-press-this recovery.

To do: (e.g. via comments)

• possible implementation concept: Detach the element and store it in a variable.
• Is that a decent idea?
• Can we just remember the object we detached from and reattach if needed or is it more complicated? (I first thought of the former parent object being deleted is a fail case, but in this case that object would be our recently-deleted one now)
• Hmm, building it :-)

Story: Often, elements in a container are in a certain order, e.g. left-to-right (tabs, icons in toolbar) or top-to-bottom (menu, dropdown, sidebar…). It should be easy to create such groups of elements and keep them in a tidy state while not preventing quick changes and experimentation. Modes: Left-center-right and top-center-bottom alignments are common, use-whole-space by resize and use-whole-space by spacing are also possible, in addition.

Possible solutions/Notes

• The equivalent in CSS would be flexbox; UI-widget frameworks also have layouting containers.
• Figma’s auto layout does this for a UI design tool
• draw2D has some layout modes, e.g. vertical
• Common drag-drop-list libraries show how interaction with such layout containers can look like – e.g. dragula
• What might need some clever rule-of-thumbs is turning a bunch that looks like e.g. a list into something that is layouted as list: higher then wide becomes a vertical layout or so… Ideally, you could un-layout elements and then layout them again, and it would just be in the same layout mode as before (without explicitly storing it somewhere)

What happened: I pressed "duplicate" without having an element selected. I type error was thrown: TypeError: oldId.match(...) is null

What should happen: No error should happen; Program should assume that user may press error without selecting an element.

There could be dialog like the "resize canvas" dialog, which carries a link to the repo, a brief info about the tool and some useful unicode signs to use as icons etc.

Would it be a good idea to have an empty group object to make it easier to manipulate some items that go together but don't necessarily fit "inside" of each other. This is what I was trying to achieve with "clearrect" in the file I uploaded in one of the other issues, where clearrect was just a thinly styled object.

I know it's not meant for precision work, but sometimes I want my right-alignment to look semi in-line. I was hoping to nudge things around pixel by pixel using the arrow pad on the keyboard.

Thoughts?

Add a text input box as UI element.

Not a high priority or severity but:

When changing how an element gets added to the canvas, I need to touch:

• scr/app.js (binds jquery drop event to element creation)
• lib/init.js (sets up sidebar and event callback for add-to-canvas )
• src/sidebar/sidebarElements.js (creates sidebar elements, attaches the callback from init.js)

This makes code changes error prone.

User Story: …I need to save/share my work when I have no access to a file system (e.g. on mobile devices)
Possible Implementations:

• Save to Server: Just save the HTML to a server
• Save to local storage

To be considered:

• The HTML to be saved is quite cluttered/big. Thats o.k./to be expected since the tool is based on pure HTML and does not have a data abstraction layer. However, it may take too much space? (?)
• Is the local storage synced between devices?

The Title of the page is "Edittest", for easy recognition it sould be quickMockup, too.

Solution: Change the title content in the head.

We should make the code more readable. Ideas:

• Wrap reused functionality in jQuery plugins to allow more terse code and provide consistent means to manipulate the DOM.
• Use an MVC
  • The structure allows reading and writing the HTML directly. If we separate data and mockup code, we need to parse this back-and-forth (reading a file: parse HTML to MVC-data-format (most likely JSON); writing a file: take care that the saved HTML makes sense standalone and if read)
  • Currently the core code is very simple (what "bloats" are useful, but non essential functions). Can we maintain easy-to-read and -extend code?

What happens: When I drag the table widget in, it appears as a text box with code-like text vaguely resembling a table.
What is expected: It should look like the sketchy-style table in the widgets collection

Enable dublicating elements and their children to ease dealing with several similar elements or variations of a design.

User Facing

• Duplicate button
• CTRL+D shortcut
• duplicate and shift element.

Challenges

• Change/renew IDs when doing so.

It could be that at some point the structure of quickMockup gets changed so much that an existing quickMockup file might not work anymore with the current version. Should we keep track of versioning to detect what might be breaking changes? Eg. semver?

what do you think about using a chart component i.e.
https://github.com/jwilber/roughViz

examples

• Donut Chart https://blockbuilder.org/jwilber/e713c03097950d53a8cfde4c23aa292f
• Bar Chart https://blockbuilder.org/jwilber/4dc5235f7ea5e51ac1219b3605f5af6a

It would probably be pretty easy to wrap this up as a Sandstorm app and publish it on their store. That provides one-click install for people using Sandstorm, and ease of hosting your own.

Edit: just going to add this here as a future note to myself: https://github.com/sandstorm-io/sandstorm-rawapi-example

The mockups should look provisional (useful for design communication and »politics«, since it says: »we may change it and it is far from finished«): So a »sketchy« font should be used, and Comic Sans is a good choice in this regard: It looks hand drawn, is wide spread and readable.

However, Comic Sans is not Open Source, so if someone knows a font with the same metrics (means, if you change between this font and comic sans, the length of lines stays the same) we can use this other font as a preferred alternative. (As an addition, it would allow to skip annoying discussions about Comic Sans being inherently bad)

Story: As a user I want to have easy, visible/UI functions to manipulate objects and/or set their properties

Solution: Have a toolbar with widgets that allow to change things on the object.

Details:

• toolbar should/could be placed at the element itself
• draw2D does do UI with jQueryish statemanagement, maybe we want something more sustainable

Some elements (like the input-with-spinner-buttons) increase in height, when added to the canvas, but they should not.

More an enhancement than a issue; it would be useful to create different canvas for different pages and give them a name like: "Home", "Profile", etc.
Maybe it would be also useful to save them as a project folder via server.

When you create a link in Markdown ([link](www.example.com)) it is clickable in the mockup. It should not be, since it leads to an attempt to change the page.

Add a link as UI element.

Is: No matter how an element was add-dropped on the the canvas, the upper left corner is always below the mouse cursor

Should The upper left corner of the element that is added should have the same distance from the cursor as the upper left corner of the element that was dropped on canvas.

User Story: …I want to use quickMockup on my tablet

Challenges:

• Interaction: We need to enable scrolling AND drag and drop since we drag and drop in/from both scrollable areas on the screen.
• Saving: On a mobile device we can't easily save to a file, so we need another mechanism, like the one suggested in #32

Not in scope: Edit on phones.

Story: As a user I want to know how the element I will add is like so I can drop it at the right place

Current State: We drag a HTML rectangle of consistent size for each element, how it actually is like is only seen later.

Maybe watch for a tap of 'delete' or add an 'x' in the top right corner of the element?

What happens: Clicking the resize canvas button has not any visible effects and not even an error on the console.

What should happen: The dialog should appear.

On the left is a list of elements. The Text/Markup inside these elements is manually provided, and not read from the data-editable-content attribute. This causes different text after the element is added to the canvas.

Fix: Render the data-editable-content value to text, on initialization, for the elements in the left-side list of elements-to-add.

• expose a "renderTo" (or so) function in the custom jqueryUI editing plugin.
  • borrow the method $.mock.editText.prototype._leaveEditMode before actually initializing the plugin (?)

User Story: I want to edit files I saved/got send

How would this look like: The user would have a button "load". After a click, a (upload) file chooser appears, a file can be selected. Its content is loaded.

We might want to have a warning before, so the user can save any work before the new content is loaded.

Special case: the file is not a quickMockup file (or does not share its structure). In this case you get an error.

The radio button-simulating unicode signs differ in size on the mac (Yosemite/Firefox):

Possible solutions:

• Try other unicode signs
• simulate via css, ::before and border-radius

Save HTML and CSS to a code sharing platform via API

find/create/integrate

• method to read out the needed HTML/CSS (possibly with cleaning out non-needed elements)
  • [Post to prefilled Codepen(http://blog.codepen.io/documentation/api/prefill/) Documentation
• method to build an API compatible JSON object
• method to send it to the API
• method to display the URL the mockup was posted to
• UI design to activate upload and show URL

Add a new Element, a button that is slightly colorful or pops up otherwise to indicate it to be a call-to-action button.

To make the code more clean and enable functions like zooming or snapping, we could use draw2Dtouch

@AlaaSarhan is doing some work on it

Small things to try out

• drag and drop
• autogrouping via rafts
• ensure that dragged elements are in front of other elements (via canvas.installEditPolicy( new draw2d.policy.canvas.CanvasPolicy({onDragStart ). The event handler gets the figure as parameter on which you can call "toFront()" (see example)
• programmatically add things to the canvas
• enable zooming on mouse cursor (Alaa: … using setScrollArea … the canvas container needed to be absolute displayed too)

mid size things to try out

• add elements by drag and drop, so one can drag a "window"-icon from a toolbar and drop on the canvas to add a "window"-element, like this.
  • Maybe the copy-on-drag-demo helps?
  • Or we basically only have rectangles that are duplicated and then "decorated" with special types like "window", "button", "layouting rectangle" (e.g. by having an on-context button that offers "decorations" on click)…
  • One could also register a mouseup ("drop") on canvas, call the canvas document-to-canvas method and create an element there. This, however, needs to "remember" and signal to the draw-parts what was dragged (ideally NOT by a global variable…)
• edit labels (probably easy)
• layout sub-elements like menu items, tabs, buttons in toolbar…
• Add meaningful snaps: to top/left/right
  • This works with canvas.installEditPolicy(new draw2d.policy.canvas.SnapToGeometryEditPolicy()) however, the lines are directly drawn on canvas, not over the elements, so on a raft they are drawn behind the raft.

Big things to try out in draw2D

• add controls that allow to add e.g. a mock-tab in a mock-tabbar, a mock-menuentry in a mock-menu etc. This is pretty interesting, UX wise: Should there be standard elements like "menu" that have + and - controls to add "menu entries" when you click +? Or just horizontal and vertical layout children – you can drop stuff to add (also lots of menu entries, if you like)?

Bigger things to think about in general

• Should we write the other parts of the UI (toolbars, object settings) in vue or try to do everything UI with draw2D?
  • relates to coupling (to draw and in general)
• What are useful export options?

Hi Jan,

it would be wonderful if there would be an official Docker image on Dockerhub for an easy and fast installation.

There are 3 Editing modes, 2 of them having a specific syntax. There should be some unobtrusive way to learn these without inferring them from examples or looking at code or documentation.

Possible Solution: give input and textarea elements a title="helptexthere" via some code in the edit-JqUi-Plugin (jqUiEditMD2HTML.js)

What should happen: Like all other elements, duplicated elements should have resizing handles when selected.

What happens: The children of duplicated Elements do not have handles and resize functionality. However, they can be dragged etc.

Is Any text looks a bit too small. The generated SVGs indeed have 12px font size.
Should: Text should have 14px font size in our elements

Note: Ideally, we do not need to set it manually on every element we have

Story: If I search for a component I want to find it by its look

Problem: Currently people only see the name

Solution:

• We could define a property that contains a link to an svg that represents the component
• We could render the graphics from draw2D directly into the component so the image gets automatically created.

Story: I want to duplicate elements quickly

Solution: Ctrl+D is the standard keyboard shortcut

Limitations: Does not work on mobile, we might want later to have some buttons for it.

Story: If I drag an element I would like to know what element it would have as a parent if I drop it now. This is less relevant if the elements all have clear background and border, but if not, results of actions should be more clear.

Idea: Add an outline on the to-be-parent element, triggered by ondragover event (if that exists)

Example: See quick mockup v1

I want to rewrite quickMockup to use Vue.js. I hope to achieve the following advantages:

• Enable an easier/more structured creation of UI components
• undo-redo (via vuex, vue.js’ flavor of flux which react's flavor of unidirectional dataflow management :-) )
• save to JSON, save to localStorage and potentially save to Backend

Also I hope to resolve the following bugs more easily. They could be solved now, but they would introduce a huge amount of spaghetti-code:

• #32 (Refreshing page should not delete work, using save to local storage)
• #3 (mobile use, since we can use interact.js)
• #28 (page/tab system, easier to render multiple pages)
• and would resolve the issue #29 (refactoring)

Possible Problems:

• The code itself would be cleaner, but current tools often introduce a toolchain which Contibutors need to be (partly) familiar with, as well I (@jdittrich) would need to learn more about them.
  More toolchain means often higher barriers for contributors.
• Minor, but: Currently data and view are one thing. Sounds horrible, has the advantage that we don't need to convert anything. With a "proper" separation, we need a mechanism to read-from-HTML and write-to-HTML. Not rocket science, but I want to keep a) files and b) the sharing- and browser-friendly file format and not make people save and pass a JSON file or so.

Should v2: Duplicated elements should be grouped with the container of the original elements parent

Is: They get grouped with something else –canvas?

Story: Elements should have a stroke/outline/border (at least optionally)

Problem: Currently they don’t

Research so far:

• Maybe we overwrote/blocked border by mixing in a composite for groupin gon drop?