Skip to content

Commit 93fa8c4

Browse files
prc5prc5
committed
Merge branch 'master' into v4.0.0
2 parents a01837e + ea15dfe commit 93fa8c4

10 files changed

Lines changed: 149 additions & 66 deletions

File tree

‎src/components/mini-map/mini-map.tsx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,20 @@ export const MiniMap: React.FC<MiniMapProps> = ({
5656
const wrapperRef = useRef<HTMLDivElement | null>(null);
5757
const previewRef = useRef<HTMLDivElement | null>(null);
5858

59-
const computationCache = useRef({
60-
scale: 1,
61-
width: 0,
62-
height: 0,
63-
});
59+
const getViewportSize = useCallback(() => {
60+
if (instance.wrapperComponent) {
61+
const rect = instance.wrapperComponent.getBoundingClientRect();
62+
63+
return {
64+
width: rect.width,
65+
height: rect.height,
66+
};
67+
}
68+
return {
69+
width: 0,
70+
height: 0,
71+
};
72+
}, [instance.wrapperComponent]);
6473

6574
const getContentSize = useCallback(() => {
6675
if (instance.contentComponent) {
@@ -127,7 +136,7 @@ export const MiniMap: React.FC<MiniMapProps> = ({
127136
mainRef.current.style.height = `${miniSize.height}px`;
128137
}
129138
if (previewRef.current) {
130-
const size = getContentSize();
139+
const size = getViewportSize();
131140
const scale = computeMiniMapScale();
132141
const previewScale = scale * (1 / instance.state.scale);
133142
const transform = instance.handleTransformStyles(

‎src/components/transform-component/transform-component.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import React, { useContext, useEffect, useRef } from "react";
33

44
import { Context } from "../transform-wrapper/transform-wrapper";
5+
import { baseClasses } from "../../constants/state.constants";
56

67
import styles from "./transform-component.module.css";
78

@@ -45,13 +46,13 @@ export const TransformComponent: React.FC<Props> = ({
4546
<div
4647
{...wrapperProps}
4748
ref={wrapperRef}
48-
className={`react-transform-wrapper ${styles.wrapper} ${wrapperClass}`}
49+
className={`${baseClasses.wrapperClass} ${styles.wrapper} ${wrapperClass}`}
4950
style={wrapperStyle}
5051
>
5152
<div
5253
{...contentProps}
5354
ref={contentRef}
54-
className={`react-transform-component ${styles.content} ${contentClass}`}
55+
className={`${baseClasses.contentClass} ${styles.content} ${contentClass}`}
5556
style={contentStyle}
5657
>
5758
{children}

‎src/constants/state.constants.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LibrarySetup, ReactZoomPanPinchState } from "../models/context.model";
1+
import { LibrarySetup, ReactZoomPanPinchState, ReactZoomPanPinchBaseClasses } from "../models/context.model";
22

33
export const initialState: ReactZoomPanPinchState = {
44
previousScale: 1,
@@ -88,3 +88,8 @@ export const initialSetup: LibrarySetup = {
8888
animationType: "easeOut",
8989
},
9090
};
91+
92+
export const baseClasses: ReactZoomPanPinchBaseClasses = {
93+
wrapperClass: "react-transform-wrapper",
94+
contentClass: "react-transform-component",
95+
};

‎src/hooks/use-transform-component.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useMemo } from "react";
1+
import { useEffect, useState } from "react";
22

33
import { useTransformContext } from "./use-transform-context";
44
import { getState } from "utils";
@@ -9,8 +9,22 @@ export function useTransformComponent<T>(
99
): T {
1010
const libraryContext = useTransformContext();
1111

12-
return useMemo(
13-
() => callback(getState(libraryContext)),
14-
[libraryContext, callback],
12+
const [transformRender, setTransformRender] = useState<T>(
13+
callback(getState(libraryContext)),
1514
);
15+
16+
useEffect(() => {
17+
let mounted = true;
18+
const unmount = libraryContext.onChange((ref) => {
19+
if (mounted) {
20+
setTransformRender(callback(getState(ref.instance)));
21+
}
22+
});
23+
return () => {
24+
unmount();
25+
mounted = false;
26+
};
27+
}, [callback, libraryContext]);
28+
29+
return transformRender;
1630
}

‎src/models/context.model.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,3 +210,8 @@ export type LibrarySetup = Pick<
210210
| "customTransform"
211211
>
212212
>;
213+
214+
export type ReactZoomPanPinchBaseClasses = {
215+
wrapperClass: string;
216+
contentClass: string;
217+
};

‎src/stories/examples/content/content.stories.mdx‎

Lines changed: 60 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { argsTypes } from "../../types/args.types.ts";
66
import { normalizeArgs } from "../../utils";
77

88
import exampleImg from "../../assets/small-image.jpg";
9+
import { useTransformComponent } from "../../../hooks";
910

1011
export const Template = (args) => (
1112
<TransformWrapper {...normalizeArgs(args)}>
@@ -41,61 +42,70 @@ export const Template = (args) => (
4142
>
4243
<div
4344
style={{
44-
width: "100px",
45-
height: "100px",
45+
display: "flex",
46+
overflow: "auto",
47+
maxWidth: "100%",
4648
padding: "10px",
47-
background: "red",
4849
}}
49-
className="panningDisabled"
5050
>
51-
Panning is DISABLED on this element
52-
</div>
53-
<div
54-
style={{
55-
width: "100px",
56-
height: "100px",
57-
padding: "10px",
58-
background: "blue",
59-
}}
60-
className="wheelDisabled"
61-
>
62-
Wheel is DISABLED on this element
63-
</div>
64-
<div
65-
style={{
66-
width: "100px",
67-
height: "100px",
68-
padding: "10px",
69-
background: "green",
70-
}}
71-
className="pinchDisabled"
72-
>
73-
Pinch is DISABLED on this element
51+
<div
52+
style={{
53+
width: "100px",
54+
height: "100px",
55+
padding: "10px",
56+
background: "red",
57+
}}
58+
className="panningDisabled"
59+
>
60+
Panning is DISABLED on this element
61+
</div>
62+
<div
63+
style={{
64+
width: "100px",
65+
height: "100px",
66+
padding: "10px",
67+
background: "blue",
68+
}}
69+
className="wheelDisabled"
70+
>
71+
Wheel is DISABLED on this element
72+
</div>
73+
<div
74+
style={{
75+
width: "100px",
76+
height: "100px",
77+
padding: "10px",
78+
background: "green",
79+
}}
80+
className="pinchDisabled"
81+
>
82+
Pinch is DISABLED on this element
83+
</div>
7484
</div>
85+
<p>
86+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
87+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
88+
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
89+
aliquip ex ea commodo consequat. Duis aute irure dolor in
90+
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
91+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
92+
culpa qui officia deserunt mollit anim id est laborum
93+
</p>
94+
<img src={exampleImg} alt="" />
95+
<p>
96+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
97+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
98+
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
99+
aliquip ex ea commodo consequat. Duis aute irure dolor in
100+
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
101+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
102+
culpa qui officia deserunt mollit anim id est laborum
103+
</p>
75104
</div>
76-
<p>
77-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
78-
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
79-
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
80-
aliquip ex ea commodo consequat. Duis aute irure dolor in
81-
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
82-
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
83-
culpa qui officia deserunt mollit anim id est laborum
84-
</p>
85-
<img src={exampleImg} alt="" />
86-
<p>
87-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
88-
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
89-
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
90-
aliquip ex ea commodo consequat. Duis aute irure dolor in
91-
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
92-
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
93-
culpa qui officia deserunt mollit anim id est laborum
94-
</p>
95-
</div>
96-
</TransformComponent>
97-
</TransformWrapper>
98-
);
105+
</TransformComponent>
106+
</TransformWrapper>
107+
);
108+
};
99109

100110
<Meta
101111
title="Examples/Mixed Content"

‎src/stories/examples/zoom-to-element/example.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,16 @@ import React from "react";
22

33
import { TransformComponent, TransformWrapper } from "components";
44
import { normalizeArgs } from "../../utils";
5+
import { useTransformComponent } from "../../../hooks";
56

67
import styles from "../../utils/styles.module.css";
78

9+
const CurrentScale = () => {
10+
return useTransformComponent(({ state }) => {
11+
return <div>Current Scale: {state.scale}</div>;
12+
});
13+
};
14+
815
export const Example: React.FC<any> = (args: any) => {
916
return (
1017
<TransformWrapper
@@ -60,6 +67,7 @@ export const Example: React.FC<any> = (args: any) => {
6067
maxHeight: "calc(100vh - 50px)",
6168
}}
6269
>
70+
<CurrentScale />
6371
<div
6472
style={{
6573
background: "#444",

‎src/stories/hooks/use-transform-component.stories.mdx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Meta } from "@storybook/addon-docs/blocks";
2+
3+
<Meta title="Hooks/useTransformComponent" />
4+
5+
# useTransformComponent
6+
7+
This hooks allows to easily connect with lifecycle into the Zoom-Pan-Pinch state
8+
for rendering a component. It will trigger the provided callback every time the
9+
transform state is changed.
10+
11+
It will not affect rerendering so you can control the way you use received data.
12+
13+
### Example
14+
15+
```tsx
16+
const App = () => {
17+
// It will trigger every time you interact with transform-component
18+
// At the same time it will not cause rerendering so you can control it on your own
19+
const transformedComponent = useTransformComponent(({ state, instance }) => {
20+
console.log(state); // { previousScale: 1, scale: 1, positionX: 0, positionY: 0 }
21+
22+
return <div>Current scale: {state.scale}</div>;
23+
});
24+
25+
return transformedComponent;
26+
};
27+
```

‎src/stories/hooks/use-transform-effect.stories.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Meta } from "@storybook/blocks";
55
# useTransformEffect
66

77
This hooks allows to easily connect with lifecycle into the Zoom-Pan-Pinch
8-
state. It will trigger provided callback every time the transform state is
8+
state. It will trigger the provided callback every time the transform state is
99
changed.
1010

1111
It will not affect rerendering so you can control the way you use received data.

‎src/utils/helpers.utils.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1+
import { baseClasses } from "../constants/state.constants";
2+
3+
const matchPrefix = `.${baseClasses.wrapperClass}`;
4+
15
export const isExcludedNode = (
26
node: HTMLElement,
37
excluded: string[],
48
): boolean => {
5-
return excluded.some((exclude) =>
6-
node.matches(`${exclude}, .${exclude}, ${exclude} *, .${exclude} *`),
9+
return excluded.some((exclude) =>
10+
node.matches(`${matchPrefix} ${exclude}, ${matchPrefix} .${exclude}, ${matchPrefix} ${exclude} *, ${matchPrefix} .${exclude} *`),
711
);
812
};
913

0 commit comments

Comments
 (0)