@hunterchen/canvas 0.4.0 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -0
- package/dist/components/canvas/draggable.d.ts +1 -0
- package/dist/components/canvas/draggable.d.ts.map +1 -1
- package/dist/components/canvas/draggable.js +3 -3
- package/dist/components/canvas/draggable.js.map +1 -1
- package/package.json +3 -3
- package/src/components/canvas/draggable.tsx +4 -2
package/README.md
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
[](https://www.npmjs.com/package/@hunterchen/canvas)
|
|
2
|
+
|
|
3
|
+
|
|
1
4
|
# @hunterchen/canvas
|
|
2
5
|
|
|
3
6
|
A React-based canvas library for creating pannable, zoomable, and interactive canvas experiences. Originally developed (by me) for the [Hack Western 12 Website](https://github.com/hackwestern/hackwestern/tree/2025).
|
|
@@ -15,6 +15,7 @@ export interface DraggableImageProps extends DraggableProps {
|
|
|
15
15
|
width?: string | number;
|
|
16
16
|
height?: string | number;
|
|
17
17
|
scale?: number;
|
|
18
|
+
hoverScale?: number;
|
|
18
19
|
}
|
|
19
20
|
export declare function DraggableImage(props: DraggableImageProps): import("react/jsx-runtime").JSX.Element;
|
|
20
21
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"draggable.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/draggable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,KAAK,eAAe,EAErB,MAAM,eAAe,CAAC;AAGvB,UAAU,KAAK;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,cAAe,SAAQ,eAAe,CAAC,KAAK,CAAC;IAC5D,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,YAAY,KAAK,OAAO,CAAC;CAC5D;AAID,eAAO,MAAM,SAAS,oGAoGrB,CAAC;AAIF,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IACzD,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"draggable.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/draggable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,KAAK,eAAe,EAErB,MAAM,eAAe,CAAC;AAGvB,UAAU,KAAK;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,cAAe,SAAQ,eAAe,CAAC,KAAK,CAAC;IAC5D,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,YAAY,KAAK,OAAO,CAAC;CAC5D;AAID,eAAO,MAAM,SAAS,oGAoGrB,CAAC;AAIF,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IACzD,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAuDD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CAwGxD"}
|
|
@@ -101,7 +101,7 @@ function updateCursor(opaque, isMouseDown, img) {
|
|
|
101
101
|
img.style.cursor = cursor;
|
|
102
102
|
}
|
|
103
103
|
export function DraggableImage(props) {
|
|
104
|
-
const { src, alt, width, height, initialPos, animate, className, scale, ...restProps } = props;
|
|
104
|
+
const { src, alt, width, height, initialPos, animate, className, scale, hoverScale, ...restProps } = props;
|
|
105
105
|
const imgRef = useRef(null);
|
|
106
106
|
const [isOpaque, setIsOpaque] = useState(true); // default to true for better UX
|
|
107
107
|
const canvasRef = useRef(null);
|
|
@@ -152,10 +152,10 @@ export function DraggableImage(props) {
|
|
|
152
152
|
isMouseDown.current = false;
|
|
153
153
|
updateCursor(isOpaque, false, imgRef.current);
|
|
154
154
|
};
|
|
155
|
-
const
|
|
155
|
+
const hoverScaleValue = isOpaque ? (hoverScale ?? (scale ?? 1)) : (scale ?? 1);
|
|
156
156
|
return (_jsx(Draggable, { initialPos: initialPos, className: className, drag: isOpaque, style: {
|
|
157
157
|
height: 0,
|
|
158
|
-
}, ...restProps, children: _jsx(motion.img, { ref: imgRef, src: src, alt: alt, width: width, height: height, animate: animate, draggable: "false", whileHover: { scale:
|
|
158
|
+
}, ...restProps, children: _jsx(motion.img, { ref: imgRef, src: src, alt: alt, width: width, height: height, animate: animate, draggable: "false", whileHover: { scale: hoverScaleValue }, style: {
|
|
159
159
|
scale: scale ?? 1,
|
|
160
160
|
pointerEvents: isOpaque ? "auto" : "none",
|
|
161
161
|
}, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"draggable.js","sourceRoot":"","sources":["../../../src/components/canvas/draggable.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"draggable.js","sourceRoot":"","sources":["../../../src/components/canvas/draggable.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hunterchen/canvas",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"description": "A React-based canvas library for creating pannable, zoomable, and interactive canvas experiences.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"framer-motion": "^11.0.0 || ^12.0.0",
|
|
49
|
-
"react": "^
|
|
50
|
-
"react-dom": "^
|
|
49
|
+
"react": "^19.0.0",
|
|
50
|
+
"react-dom": "^19.0.0"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
53
|
"clsx": "^2.1.1",
|
|
@@ -137,6 +137,7 @@ export interface DraggableImageProps extends DraggableProps {
|
|
|
137
137
|
width?: string | number;
|
|
138
138
|
height?: string | number;
|
|
139
139
|
scale?: number;
|
|
140
|
+
hoverScale?: number;
|
|
140
141
|
}
|
|
141
142
|
|
|
142
143
|
function drawImageToCanvas(img: HTMLImageElement, canvas: HTMLCanvasElement) {
|
|
@@ -202,6 +203,7 @@ export function DraggableImage(props: DraggableImageProps) {
|
|
|
202
203
|
animate,
|
|
203
204
|
className,
|
|
204
205
|
scale,
|
|
206
|
+
hoverScale,
|
|
205
207
|
...restProps
|
|
206
208
|
} = props;
|
|
207
209
|
const imgRef = useRef<HTMLImageElement>(null);
|
|
@@ -265,7 +267,7 @@ export function DraggableImage(props: DraggableImageProps) {
|
|
|
265
267
|
updateCursor(isOpaque, false, imgRef.current);
|
|
266
268
|
};
|
|
267
269
|
|
|
268
|
-
const
|
|
270
|
+
const hoverScaleValue = isOpaque ? (hoverScale ?? (scale ?? 1)) : (scale ?? 1);
|
|
269
271
|
|
|
270
272
|
return (
|
|
271
273
|
<Draggable
|
|
@@ -285,7 +287,7 @@ export function DraggableImage(props: DraggableImageProps) {
|
|
|
285
287
|
height={height}
|
|
286
288
|
animate={animate}
|
|
287
289
|
draggable="false"
|
|
288
|
-
whileHover={{ scale:
|
|
290
|
+
whileHover={{ scale: hoverScaleValue }}
|
|
289
291
|
style={{
|
|
290
292
|
scale: scale ?? 1,
|
|
291
293
|
pointerEvents: isOpaque ? "auto" : "none",
|