Master Pages and Navigation

[ruediste]

When I create wirefreames, I often have a Navigation which I would like to include in every page. For each page the selected entry should be different. To achieve this I propose the following:

• Extend the tabs and the list shape with a property to set the selected item.
• Make the components of the master page selectable, and allow overriding of selected (or all) properties.

What do you think? Would you support such an approach?

[SebastianStehle]

Sounds reasonable but also very challenging. How would you make certain properties overridable?

[ruediste]

To be precise, by property, I meant appearance.

The EditorState contains a map of Diagrams. Each Diagram contains a map of DiagramItems, which in turn contain the appearance map.

To render an item, a Shape needs to be supplied to the render() method of the ShapePlugin (via the RenderContext). The Shape has a getAppearance() method, which we can use to hook the appearance-overrides into the process.

To support the overrides, a Diagram needs a Map from (diagramId, diagramItemId, appearanceKey)=>appearance value. When rendering, the lookup in getAppearance() is modified in such a way that the override map is first queried. In the process, I would also like to add support for nested master pages, thus displaying the master page of the master page as well.

In addition, the selection handling will need to be touched as well, as selection of items with editable appearances from the master pages needs to be possible as well. When items of the master pages are edited, the changes would need to be stored in the override map.

This will of course need a good amount of changes, but I'm willing to give it a shot.

[SebastianStehle]

Technically it sounds reasonable. I would go for it, ideally with small PRs. An example from another tool would be also helpful, because I think it could get confusing how changes are actually applied.

I think it also needs a sophisticated way to select an item, e.g. with a special hotkey or something like that.

[ruediste]

Here is an example from another tool:

https://youtube.com/clip/Ugkx8DPtb2zdPJPVAZBfTQVZ-KNWMPf_81VO?si=e2TlDMGAWb1d3ZVb

Here, full editing of the master page can be enabled.

[SebastianStehle]

Looks reasonable and cool. I would start with the model first and provide methods to overwrite and retrieve things and then start with the editing part. Multiple PRs would be great.

[ruediste]

Out of curiosity: You seem to have put a lot of effort into render performance optimization. Did you run into issues without? Was the normal React rendering of the SVGs not performant enough?

[SebastianStehle]

The rendering was never using react. One of the reasons was simply that I wanted to have the flexibility to use other rendering methods. Then I created the WebGL renderer just for fun, because I wanted to learn something.

[ruediste]

I really enjoyed diving into code, as it is of high quality, and there are many ideas which are new to me.

However, I came to the realization that the code base is not what I am looking for. My motivation is the following: I have to create mockups/wireframes from time to time. The only half-decent tool I know is Balsamiq: paid, slow as hell and feature overloaded. I think it's really a shame there is no good and widely used open source alternative. So may Idea is to fill this gap.

From a feature perspective, mydraft-cc is close to what I am looking for. But I am not in a "I want to learn something new for the fun of it", but in a "I want to get this done", mood. And for that purpose, I'm looking for no frills, minimal (but sufficient) abstraction, keep it simple stupid.

So, after a nice round of sports, I decided to stop working on this project and start my own.

I enjoyed our brief collaboration and whish you all the best.

Regards

Ruedi

[SebastianStehle]

Sure thing. I am looking forward how it is going. But my personal experience is that there is not really quick and easy solution in this area. Lets say you create a todo list, then it is very easy to get something that is easy and fun to work with in a relatively short time. You don't need a lot of advanced features to make a very usable tool. But for mockups the bar is much higher. Without a lot of advanced features like snapping, grouping and so on a mockup tool is almost unusable and really frustrating. And mydraft is still far away from this goal.

My motivation was / is actually very similar to yours.

You could have a look to tldraw (https://github.com/tldraw/tldraw), perhaps it fits your requirements, but I think you will not find something easy.

If you have anything, please share the repo, perhaps you will find a better abstraction, but I am not sure if something simple actually exists.

[ruediste]

I started my project: https://github.com/ruediste/lo-fi-mockups

The basic architecture is done, rendering works well directly in react.

Selection and Multi Selection work as well. I've just implemented snapping, although I'll change the snap positions later. Currently the boxes just snap together, I'll add some margins there.

Of course, as you said, there are still loads of features missing...

I'm often looking at mydraft for inspiration, I hope you don't mind.

[SebastianStehle]

Nice, I will have a look later. I was never the question if react can be used, but if the DOM can be used. Therefore the indirection in rendering. But for normal use cases the DOM is fine, if you not going to make super large mockups as in figma. I actually started with paper.js, then svg.js for better rendering quality.