feat: canvas v2 #6771

must unsubscribe!

Can be used with useSyncExternal store to make a `Map` reactive.

…ocation complete events

…back on source This is needed for `Generate` mode.

I'm not ready to delete some things but still want to build the app.

Wrappers to capture errors and turn into results: - `withResult` wraps a sync function - `withResultAsync` wraps an async function Comments, tests.

Instead of using dates, just going to increment.

Previously, canvas actions specific to an entity type only needed the id of that entity type. This allowed you to pass in the id of an entity of the wrong type. All actions for a specific entity now take a full entity identifier, and the entity identifier type can be narrowed. `selectEntity` and `selectEntityOrThrow` now need a full entity identifier, and narrow their return values to a specific entity type _if_ the entity identifier is narrowed. The types for canvas entities are updated with optional type parameters for this purpose. All reducers, actions and components have been updated.

Things like `$lastCursorPos` are now created within the canvas drawing classes. Consumers in react access them via `useCanvasManager`. For example: ```tsx const canvasManager = useCanvasManager(); const lastCursorPos = useStore(canvasManager.stateApi.$lastCursorPos); ```

This ephemeral state can live in the canvas classes.

I did this ages ago but undid it for some reason, not sure why. Caught a few issues related to subscriptions.

First step to restoring undo/redo - the undoable state must be in its own slice. So params and settings must be isolated.

We are dipping into konva's private API for preview images and it appears to be unsafe (got an error once). Wrapped in a try/catch.

Canvas dev build.

I learned that the inline selector syntax recreates the selector function on every render: ```ts const val = useAppSelector((s) => s.slice.val) ``` Not good! Better is to create a selector outside the function and use it. Doing that for all selectors now, most of the way through now. Feels snappier.

Mostly selector optimization. Still a few places to tidy up but I'll get to that later.

- Throttle pushing to history for actions of the same type, starting with 1000ms throttle. - History has a limit of 64 items, same as workflow editor - Add clear history button - Fix an issue where entity transformers would reset the entity state when the entity is fully transparent, resetting the redo stack. This could happen when you undo to the starting state of a layer

- Add lock toggle - Tweak lock and enabled styles - Update entity list action bar w/ delete & delete all - Move add layer menu to action bar - Adjust opacity slider style

The canvas size was dynamic based on the container div's size. When the div was hidden (e.g. when selecting another tab), the container's effective size is 0. This resulted in the preview image canvas being drawn at a scale of 0. Fixed by using an absolute size for the canvas container.

Previously this badge, floating over the queue menu button next to the invoke button, was rendered within the existing layout. When I initially positioned it, the app layout interfered - it would extend into an area reserved for a flex gap, which cut off the badge. As a (bad) workaround, I had shifted the whole app down a few pixels to make room for it. What I should have done is what I've done in this commit - render the badge in a portal to take it out of the layout so we don't need that extra vertical padding. Sleekified some styling a bit too.

This hook forcibly updates _all_ portals with `data-hidden=true` when the modal opens - then reverts it when the modal closes. It's intended to help screen readers. Unfortunately, this absolutely tanks performance because we have many portals. React needs to do alot of layout calculations (not re-renders). IMO this behaviour is a bug in chakra. The modals which generated the portals are hidden by default, so this data attr should really be set by default. Dunno why it isn't.

Put this together as a way to figure out the library before moving on to the full app cmdk. Works great.

The frontend needs to know where queue items came from (i.e. which tab), and where results are going to (i.e. send images to gallery or canvas). The `origin` column is not quite enough to represent this cleanly. A `destination` column provides the frontend what it needs to handle incoming generations.

- Canvas generation mode is replace with a boolean `sendToCanvas` flag. When off, images generated on the canvas go to the gallery. When on, they get added to the staging area. - When an image result is received, if its destination is the canvas, staging is automatically started. - Updated queue list to show the destination column. - Added `IconSwitch` component to represent binary choices, used for the new `sendToCanvas` flag and image viewer toggle. - Remove the queue actions menu in `QueueControls`. Move the queue count badge to the cancel button. - Redo layout of `QueueControls` to prevent duplicate queue count badges. - Fix issue where gallery and options panels could show thru transparent regions of queue tab. - Disable panel hotkeys when on mm/queue tabs.

I do not understand why this fixes the issue, doesn't seem like it should. But it does.

TBH not sure exactly why this broke. Fixed by rollback back the use of a render prop in favor of global state. Also revised the API of `useBoolean` and `buildUseBoolean`.

Was including all layer types in the rect - only want the raster layers.

I don't think it makes sense to merge control layers or regional guidance layers because they have additional state.

stupid events

Big cleanup. Makes these classes easier to implement, lots of comments and docstrings to clarify how it all works. - Add default implementations for `destroy`, `repr` and `getLoggingContext` - Tidy individual module configs - Update `CanvasManager.buildLogger` to accept a canvas module as the arg - Add `CanvasManager.buildPath`

This was used for troubleshooting only.

Use same pattern as canvas scale & opacity sliders w/ scaled slider values for precision at low values.

Q toggles between the last-selected layers.

…t ratio Closes #5590

…ect)

This provides some free reactivity for this canvas-manager-managed state.

Things were getting to complex to reason about & classes a bit complicated. Trying to simplify...

They should pull from the entity's state directly. This allows more freedom with updating the canvas.

…tion and render themselves

- Rely on redux + reselect more - Remove all nanostores that simply "mirrored" redux state in favor of direct subscriptions to redux store - Add abstractions for creating redux subs and running selectors - Add `initialize` method to CanvasModuleBase, for post-instantiation tasks - Reduce local caching of state in modules to a minimum

Use the min of each pixel's alpha value and lightness for the output alpha. This prevents artifacts when using the transparency effect, especially with non-black pixels with low alpha.

When resetting the canvas or staging area, we don't want to cancel generations that are going to the gallery - only those going to the canvas. Thus the method should not cancel by origin, but instead cancel by destination. Update the queue method and route.

- Add `Open in Viewer` - Remove `Send to Image to Image` - Fix `Send to Canvas` - Split out logic for composability

- Global action bar on top - Selected Entity action bar below

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: canvas v2 #6771

feat: canvas v2 #6771

Commits on Sep 6, 2024