feat(ui): use pubsub for isTransforming on manager

This commit is contained in:
psychedelicious 2024-08-05 17:56:45 +10:00
parent b530eb49d4
commit f7b2516109
3 changed files with 16 additions and 19 deletions

View File

@ -19,10 +19,7 @@ export const TransformToolButton = memo(() => {
if (!canvasManager) {
return;
}
canvasManager.onTransform = setIsTransforming;
return () => {
canvasManager.onTransform = null;
};
return canvasManager.isTransforming.subscribe(setIsTransforming);
}, [canvasManager]);
const onTransform = useCallback(() => {

View File

@ -124,7 +124,7 @@ export class CanvasManager {
_isDebugging: boolean;
onTransform: ((isTransforming: boolean) => void) | null;
isTransforming: PubSub<boolean>;
_store: Store<RootState>;
_isFirstRender: boolean;
@ -212,16 +212,16 @@ export class CanvasManager {
this._worker.onmessageerror = () => {
this.log.error('Worker message error');
};
this.onTransform = null;
this._isDebugging = false;
this.toolState = new PubSub<CanvasV2State['tool']>(this.stateApi.getToolState());
this.currentFill = new PubSub<RgbaColor>(this.getCurrentFill());
this.selectedEntityIdentifier = new PubSub<CanvasEntityIdentifier | null>(
this.isTransforming = new PubSub(false);
this.toolState = new PubSub(this.stateApi.getToolState());
this.currentFill = new PubSub(this.getCurrentFill());
this.selectedEntityIdentifier = new PubSub(
this.stateApi.getState().selectedEntityIdentifier,
(a, b) => a?.id === b?.id
);
this.selectedEntity = new PubSub<EntityStateAndAdapter | null>(
this.selectedEntity = new PubSub(
this.getSelectedEntity(),
(a, b) => a?.state === b?.state && a?.adapter === b?.adapter
);
@ -399,7 +399,7 @@ export class CanvasManager {
// TODO(psyche): Support other entity types
assert(layer?.adapter instanceof CanvasLayer, 'No selected layer');
layer.adapter.transformer.startTransform();
this.onTransform?.(true);
this.isTransforming.publish(true);
}
async applyTransform() {
@ -407,7 +407,7 @@ export class CanvasManager {
if (layer) {
await layer.transformer.applyTransform();
}
this.onTransform?.(false);
this.isTransforming.publish(false);
}
cancelTransform() {
@ -415,7 +415,7 @@ export class CanvasManager {
if (layer) {
layer.transformer.stopTransform();
}
this.onTransform?.(false);
this.isTransforming.publish(false);
}
render = async () => {
@ -451,11 +451,6 @@ export class CanvasManager {
}
}
this.toolState.publish(state.tool);
this.selectedEntityIdentifier.publish(state.selectedEntityIdentifier);
this.selectedEntity.publish(this.getSelectedEntity());
this.currentFill.publish(this.getCurrentFill());
if (
this._isFirstRender ||
state.initialImage !== this._prevState.initialImage ||
@ -499,6 +494,11 @@ export class CanvasManager {
await this.renderControlAdapters();
}
this.toolState.publish(state.tool);
this.selectedEntityIdentifier.publish(state.selectedEntityIdentifier);
this.selectedEntity.publish(this.getSelectedEntity());
this.currentFill.publish(this.getCurrentFill());
if (
this._isFirstRender ||
state.bbox !== this._prevState.bbox ||

View File

@ -161,7 +161,7 @@ export class CanvasTool {
} else if (!isDrawableEntity) {
// Non-drawable layers don't have tools
stage.container().style.cursor = 'not-allowed';
} else if (tool === 'move' || toolState.isTransforming) {
} else if (tool === 'move' || this.manager.isTransforming.getValue()) {
// Move tool gets a pointer
stage.container().style.cursor = 'default';
} else if (tool === 'rect') {