roughjs has a bunch of options regarding line width, stroke/bg color, various patterns/roughness... We should add a pane where we can modify all those values for each element.

We should be able to move selected elements by dragging them

Ideally we want an infinite canvas where you can draw anywhere. In order to avoid people from getting lost, we could only make the canvas exist for half a screen around the closest object. If you draw something on the edge, it automatically expands it.

The HTML title says "React App".

Is the current behavior where click-to-select adds to current selection intentional? AFAIK in all other apps, you need to hold down ctrl/shift to add to selection.

I propose we use a modifier for that.

Affinity Designer uses Shift. Not sure what the standard is on this.

https://twitter.com/DavidKPiano/status/1213201911706464256

I found that the dashed white background doesn't work really well. I'm not sure what we should be doing but the current default is not right. Some ideas:

• Have a setting to control whether a shape has solid fill. Only then, use the background color. It'll also affect how hit test works. We should enable hitting everywhere if the background is solid.
• Use a different color than white so it's visible even with the white background.

More generally, I think that we should go out of our way to provide good defaults and suggestions for colors. Having a color scheme that looks reasonable would go a long way in making people that are using the app draw good looking diagrams. Rather than just giving all the underlying raw options.

I think there is the need to add a README to clarify the scope of the project for contributors.

I just bought excalidraw.com. We should figure out how to setup CI to build and publish it somewhere, either github pages or netlify

Preliminary tests show promise. I'll try to write a few tests and make a PR if it feels good.

It kinda sucks that it's under my name. I created an organization for it. excalibur and all the normal variations were taken so I got creative and made excalidraw which was available.

Need at bare minimum a way to do send to back, move to front.

Do not switch to the selection tool upon element insertion. I'd say common use case is to create several elements in a row. I don't know of any editor which changes the tool after each insertion. Thoughts?

All the options are selected by just double-clicking somewhere, so I think we need to disable it with user-select. I'm already ready to open PR for this.

We need to attach the listener to window instead of the canvas. I need to get better at hooks to make it work...

Let's discuss (and aggregate issues on) project structure, styleguide, etc.

• Add Prettier.
• Move to TypeScript.
• ESLint (IMO, at least for react)?

To be decided

• Currently, we're using classical React. Do we want to move to hooks?
• Testing. Jest? (actually, don't think we'll be able to test canvas workflow in Jest.)

As the title says, the selection of elements works only when the elements are fully inside the selection area.
It should work even if there is only an intersection between the selection area and the elemen.

Zwibbler allows you to rotate all the elements. I'm not sure I've ever used it and it's been more annoying in my experience. Creating an issue to think about it

• Rotate any element
• Lock on 0, 45, 90, 135, 180, etc

Just in case someone wants to work on this, the implementation should have these attributes:

Technical

1. The image source data (the base64 or whatever format) shouldn't be stored in elements array, but live in a separate data structure (likely in appState.images).
2. The image source will be linked to an element (of {type: "image"} or something) that will live in elements — this element will be used for manipulation, and act as a normal element would.
3. In collab, the image source shouldn't be synced more than once per session. Only the element in elements array should be synced freely as we normally do with other elements.
4. The image source should be compressed (using pako zlib library we're already using for something else) before syncing/storing to database. Note, we're talking about a lossless compression, but EDIT: gzipping the image will actually offer almost no benefits, so let's not do that. But we'll want to serialize to binary string instead of base64 (which is inefficient). But we may also consider lossy compression (thus encode as JPG).
5. There should be a limit on individual size, and likely a limit on total images per scene.
6. When persisting the image to server (e.g. for collab scenes), we're currently using Firebase Firestore, which has 1MB size limit on documents. So we'll need to persist the images to separate Firestore documents, or preferably to Firebase Storage which is more suited for resources such as images (it also has better pricing per GB).

UI

• For the first iterration we don't want any UI changes and adding images should happen with drag and drop (and maybe in the context menu to support mobile)
• Show additional information in stats
  • Total number of images
  • Total size of images
  • When selecting an image or two.. show their size.

Not sure if super useful (I've never been able to draw in a reasonable way using a mouse / touchpad) but may be worth adding

Would be nice to be able to zoom in / out for the canvas. This way we can see different parts of the scene.

Generating a png out of the canvas we created. We'll need to be smart about removing empty whitespace

In my opinion, since this project will be developed by multiple people, i think we would benefit a lot by having typescript support.

I know people have strong opinions on typescript, but it makes it easier for multiple people without project context to integrate themselves on it.

Just food for thought :)

the main file is gitting bigger we should modulize it

This is going to be super useful

If we resize the window, we need to click somewhere before there's a render and it re-lays out.

I created a MVP Milestone where I tagged all the issues that we should implement to have something that would replace my usage of zwibbler. Let's use this issue to discuss priorities and progress :)

https://github.com/excalidraw/excalidraw/milestone/1

Right now the elements array is a global variable. This works fine if we only have 1 file, but since we're going to get more and more files, we should move this inside the React scope, so components can re-render when necessary if this array changes.

My idea was to move this inside a useReducer hook, to make this elements available to all the children without having to pass then down using props.

What do you guys think?

I can also see a usage to create a useElements hook, where we have the information related to the elements there... All the elements, the selected elements, etc etc

We should generate a new seed when copy pasting elements. This way we don't end up with the same looking element more than once.

We should either allow to resize the canvas (via input, or handles), or make the [x] export visible area the default and remove this option (since exporting full page doesn't make sense if user has no control over the size).

Not sure how it would work with the infinite scroll #14.

Not sure if it's super useful but zwibbler supports it. Maybe we worth also having a smooth one using bezier curves

If we right click on the canvas, then I think that onmouseup isn't triggered and we're no longer deleting the selection object.

Maybe we should listen to context menu as well and clean things up there. Worst case, would be nice to clean up on mousedown if we haven't received mouseup.

Need to think how it works with saving

So we can easily resize rectangles, circles... We shouldn't do it for text.

We need to make sure that if the element is small, we can still move it instead of resizing it. It's going to be an interesting UX challenge with the hit targets.

Instead of using prompt, could we overlay a real text input with the right font and position so that the user can edit it and see the result instantly.

Note: this is opening a big can of worms so will need to be careful

WIth the #75 I ahve added the automatic deploy to GH pages but it is not working.
I have used this action.
As said in the PR should configure github pages to pick content from the branch gh-pages, because the deploy is not working for now.
Maybe there is a problem with the secrets, in the README of the repo, is suggested to create personal access token to make it work.

@vjeux

Unfortunately roughjs will not implement adding a seed for randomness ( rough-stuff/rough#27 ). That's unfortunate because when we serialize content to disk, we lose the same random options and loading the scene back will look slightly different.

Fear not, we should be able to override Math.random with a custom pseudo random number generator that allows a seed: https://stackoverflow.com/a/47593316/232122, call roughjs and revert it back.

Right now we can only select using drag. If we click (not drag) on something, it should select it

It's useful to get stats on how many people are using it

Great project! It'd be nice to have keyboard shortcuts so that you don't have to move your mouse up and down the whole time. I'd propose: R for rectangle, O for oval, A for arrow, T for text. This should also feel familiar to people coming from Sketch as it's the same, except for A (A is for Artboard in Sketch, there's no shortcut for creating an arrow).

For lines (arrow, circle, rectangles), we should only hit test when you are within X pixels of the line and not everywhere in the whitespace

The first time we render the font, it displays with the default one until it's loaded. This makes the metrics computation wrong and is a bad experience. We should eagerly load the font on page startup.

So we don't lose it if the tab is closed