feat(ui): add silent option to transformer.startTransform

A "silent" transformation executes without any user feedback.
This commit is contained in:
psychedelicious
2024-10-09 20:30:27 +10:00
parent c99852657e
commit 65fe79fa0e
3 changed files with 29 additions and 3 deletions

View File

@@ -25,6 +25,7 @@ const TransformContent = memo(({ adapter }: { adapter: CanvasEntityAdapter }) =>
const onChangeIsolatedPreview = useCallback(() => {
dispatch(settingsIsolatedTransformingPreviewToggled());
}, [dispatch]);
const silentTransform = useStore(adapter.transformer.$silentTransform);
useRegisteredHotkeys({
id: 'applyTransform',
@@ -42,6 +43,10 @@ const TransformContent = memo(({ adapter }: { adapter: CanvasEntityAdapter }) =>
dependencies: [adapter.transformer, isProcessing, isCanvasFocused],
});
if (silentTransform) {
return null;
}
return (
<Flex
ref={ref}

View File

@@ -264,8 +264,13 @@ export abstract class CanvasEntityAdapterBase<
}
if (this.manager.stateApi.runSelector(selectIsolatedTransformingPreview)) {
const transformingEntityIdentifier = this.manager.stateApi.$transformingAdapter.get()?.entityIdentifier;
if (transformingEntityIdentifier && transformingEntityIdentifier.id !== this.id) {
const transformingEntity = this.manager.stateApi.$transformingAdapter.get();
if (
transformingEntity &&
transformingEntity.entityIdentifier.id !== this.id &&
// Silent transforms should be transparent to the user, so we don't need to hide the entity.
!transformingEntity.transformer.$silentTransform.get()
) {
isHidden = true;
}
}

View File

@@ -147,6 +147,18 @@ export class CanvasEntityTransformer extends CanvasModuleBase {
*/
$isProcessing = atom(false);
/**
* Whether the transformer is currently in silent mode. In silent mode, the transform operation should not show any
* visual feedback.
*
* This is set every time a transform is started.
*
* This is used for transform operations like directly fitting the entity to the bbox, which should not show the
* transform controls, Transform react component or have any other visual feedback. The transform should just happen
* silently.
*/
$silentTransform = atom(false);
konva: {
transformer: Konva.Transformer;
proxyRect: Konva.Rect;
@@ -624,13 +636,17 @@ export class CanvasEntityTransformer extends CanvasModuleBase {
/**
* Starts the transformation of the entity.
* @param arg Options for starting the transformation
* @param arg.silent Whether the transformation should be silent. If silent, the transform controls will not be shown,
* so you _must_ immediately call `applyTransform` or `stopTransform` to complete the transformation.
*/
startTransform = (silent: boolean = false) => {
startTransform = (arg?: { silent: boolean }) => {
const transformingAdapter = this.manager.stateApi.$transformingAdapter.get();
if (transformingAdapter) {
assert(false, `Already transforming an entity: ${transformingAdapter.id}`);
}
this.log.debug('Starting transform');
const { silent } = { silent: false, ...arg };
this.$silentTransform.set(silent);
this.$isTransforming.set(true);
this.manager.stateApi.$transformingAdapter.set(this.parent);