Skip to content

Commit

Permalink
fix: instrument window bug (#12)
Browse files Browse the repository at this point in the history
* fix canvas teleportation issue

* remove unused dnd context

* make mouse props optional

* re-add dndContext boolean for Transform wrapper
  • Loading branch information
nakajimayoshi authored Jul 21, 2023
1 parent f721e8f commit 8a56a11
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 6 deletions.
10 changes: 6 additions & 4 deletions src/components/Instrument.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,10 @@ const InstrumentFrame: React.FC<InstrumentFrameProps> = memo(forwardRef(
)}
/>
);
}),
);
},
));

export const Instrument: React.FC<Element> = ({ uuid, name, element, x, y, width, height }) => {
export const Instrument: React.FC<Element> = ({ uuid, name, element, x, y, width, height, onMouseEnter, onMouseLeave }) => {
const iframeRef = useRef<HTMLIFrameElement>(null);
const containerRef = useRef<HTMLDivElement>(null);

Expand Down Expand Up @@ -122,7 +122,7 @@ export const Instrument: React.FC<Element> = ({ uuid, name, element, x, y, width
element={{ uuid, name, element, x, y, width, height }}
x={e.clientX}
y={e.clientY}
/>
/>,
))
), [dispatch]);

Expand Down Expand Up @@ -152,6 +152,8 @@ export const Instrument: React.FC<Element> = ({ uuid, name, element, x, y, width
width,
height,
}}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
<div className="absolute bottom-full w-full box-content border-2 border-b-0 border-silver-800 bg-silver-800 rounded-t-xl">
<div className="absolute -top-0.5 w-full flex justify-center">
Expand Down
10 changes: 8 additions & 2 deletions src/pages/Workspace.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -83,11 +83,13 @@ const CanvasLayer: React.FC = () => {
const project = useWorkspaceSelector((state: WorkspaceState) => state.project.active);
const dispatch = useWorkspaceDispatch();

const [transformDisabled, setTransformDisabled] = useState(false);

const dndContext = useDndContext();

return (
<TransformWrapper
disabled={dndContext.active !== null}
disabled={transformDisabled || dndContext.active !== null}
centerOnInit
minScale={0.25}
initialScale={0.5}
Expand All @@ -112,7 +114,11 @@ const CanvasLayer: React.FC = () => {
}}
>
{project?.config.elements?.map((props) => (
<Instrument {...props} />
<Instrument
{...props}
onMouseEnter={() => setTransformDisabled(true)}
onMouseLeave={() => setTransformDisabled(false)}
/>
))}
</div>
</TransformComponent>
Expand Down
2 changes: 2 additions & 0 deletions src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ export interface Element {
height: number;
x: number;
y: number;
onMouseEnter?: () => void;
onMouseLeave?: () => void;
}

export interface AceConfig {
Expand Down

0 comments on commit 8a56a11

Please sign in to comment.