-
-
Notifications
You must be signed in to change notification settings - Fork 73
/
InfiniteViewerManager.tsx
88 lines (78 loc) · 3.14 KB
/
InfiniteViewerManager.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import * as React from "react";
import InfiniteViewer from "react-infinite-viewer";
import { useStoreStateSetValue, useStoreStateValue, useStoreValue } from "@scena/react-store";
import { $space } from "../stores/keys";
import {
$actionManager, $horizontalGuides, $layerManager, $moveable,
$scrollPos,
$selectedLayers, $selecto, $verticalGuides, $zoom,
} from "../stores/stores";
import { prefix } from "../utils/utils";
export interface InfiniteViewerManagerProps {
children: React.ReactNode;
}
export const InfiniteViewerManager = React.forwardRef<InfiniteViewer, InfiniteViewerManagerProps>((props, ref) => {
const selectoRef = useStoreStateValue($selecto);
const moveableRef = useStoreStateValue($moveable);
const horizontalGuidesRef = useStoreStateValue($horizontalGuides);
const verticalGuidesRef = useStoreStateValue($verticalGuides);
const actionManager = useStoreStateValue($actionManager);
const layerManager = useStoreStateValue($layerManager);
const selectedLayersStore = useStoreValue($selectedLayers);
const isSpace = useStoreStateValue($space);
const setZoom = useStoreStateSetValue($zoom);
const setScrollPos = useStoreStateSetValue($scrollPos);
return <InfiniteViewer
ref={ref}
className={prefix("viewer", isSpace ? "viewer-move" : "")}
usePinch={true}
useAutoZoom={true}
useWheelScroll={true}
useForceWheel={true}
useMouseDrag={isSpace}
useResizeObserver={true}
wheelContainer={".scena-canvas"}
pinchThreshold={50}
maxPinchWheel={3}
onDragStart={e => {
const target = e.inputEvent.target;
const flatted = layerManager.toFlattenElement(selectedLayersStore.value);
actionManager.act("blur");
if (
target.nodeName === "A"
|| moveableRef.current!.isMoveableElement(target)
|| moveableRef.current!.isDragging()
|| flatted.some(t => t === target || t.contains(target))
) {
e.stop();
}
}}
onDragEnd={e => {
if (!e.isDrag) {
selectoRef.current!.clickTarget(e.inputEvent);
}
}}
onAbortPinch={e => {
selectoRef.current!.triggerDragStart(e.inputEvent);
}}
onScroll={e => {
const horizontalGuides = horizontalGuidesRef.current!;
const verticalGuides = verticalGuidesRef.current!;
if (horizontalGuides && verticalGuides) {
horizontalGuides.scroll(e.scrollLeft, e.zoomX);
horizontalGuides.scrollGuides(e.scrollTop, e.zoomY);
verticalGuides.scroll(e.scrollTop, e.zoomX);
verticalGuides.scrollGuides(e.scrollLeft, e.zoomY);
}
setScrollPos([e.scrollLeft, e.scrollTop]);
setZoom(e.zoomX);
}}
onPinch={e => {
if (moveableRef.current!.isDragging()) {
return;
}
setZoom(e.zoom);
}}
>{props.children}</InfiniteViewer>;
});
InfiniteViewerManager.displayName = "InfiniteViewerManager";