From 6365d717f9dc40669ddc8016f96f5ac837cf951c Mon Sep 17 00:00:00 2001 From: Alice Peng <1399789151@qq.com> Date: Sun, 27 Oct 2024 21:47:55 +0800 Subject: [PATCH 1/2] feat: add dragging --- .../base/file/preview/image/ImagePreview.tsx | 126 +++++++++++++++++- 1 file changed, 124 insertions(+), 2 deletions(-) diff --git a/packages/ui-lib/src/base/file/preview/image/ImagePreview.tsx b/packages/ui-lib/src/base/file/preview/image/ImagePreview.tsx index ee48e54d5..ce2149700 100644 --- a/packages/ui-lib/src/base/file/preview/image/ImagePreview.tsx +++ b/packages/ui-lib/src/base/file/preview/image/ImagePreview.tsx @@ -1,8 +1,130 @@ +import { RotateCw, ZoomIn, ZoomOut, RefreshCcw } from '@teable/icons'; +import { useEffect, useState } from 'react'; import type { IFileItemInner } from '../FilePreviewContext'; - interface IImagePreviewProps extends IFileItemInner {} export const ImagePreview = (props: IImagePreviewProps) => { const { src, name } = props; - return {name}; + const [scale, setScale] = useState(1); + const [rotate, setRotate] = useState(0); + + const [position, setPosition] = useState({ + oldX: 0, + oldY: 0, + x: 0, + y: 0, + }); + const [isPanning, setPanning] = useState(false); + + const handleZoomIn = () => { + setPosition({ + ...position, + x: (position.x -= 135.5), + y: (position.y -= 65.6), + }); + setScale(scale + 0.65); + }; + + const handleZoomOut = () => { + if (scale <= 0.35) return; + setScale(scale - 0.65); + }; + const handleReset = () => { + setScale(1); + setRotate(0); + setPosition({ + oldX: 0, + oldY: 0, + x: 0, + y: 0, + }); + }; + const handleRotate = () => { + setRotate(rotate + 30); + }; + + const onMouseDown = (e: React.MouseEvent) => { + e.preventDefault(); + if (scale > 1) { + setPanning(true); + setPosition({ + ...position, + oldX: e.clientX, + oldY: e.clientY, + }); + } + }; + + useEffect(() => { + const mouseup = () => { + setPanning(false); + }; + + const mousemove = (event: MouseEvent) => { + if (isPanning) { + if (position.x == 0) { + return; + } + setPosition({ + ...position, + x: position.x + event.clientX - position.oldX, + y: position.y + event.clientY - position.oldY, + oldX: event.clientX, + oldY: event.clientY, + }); + } + }; + + window.addEventListener('mouseup', mouseup); + window.addEventListener('mousemove', mousemove); + + return () => { + window.removeEventListener('mouseup', mouseup); + window.removeEventListener('mousemove', mousemove); + }; + }); + + return ( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions +
1 ? 'grabbing' : 'auto'}`, + }} + onMouseDown={(e) => onMouseDown(e)} + > +
+ {name} +
+
+ {/* zoomin */} + + {/* zoomout */} + + {/* rotate */} + + {/* reset */} + +
+
+ ); }; From d1cd9343139f3d5595d1497c538b004a96a2137a Mon Sep 17 00:00:00 2001 From: Boris Date: Thu, 17 Oct 2024 14:47:00 +0800 Subject: [PATCH 2/2] chore: update icons (#996) --- packages/icons/src/components/FileCsv.tsx | 2 +- packages/icons/src/components/GithubLogo.tsx | 2 +- packages/icons/src/components/HttpRequest.tsx | 2 +- packages/icons/src/components/Phone.tsx | 2 +- packages/icons/src/components/RotateCw.tsx | 28 +++++++++++++++++++ packages/icons/src/components/ZoomIn.tsx | 21 ++++++++++++++ packages/icons/src/components/ZoomOut.tsx | 21 ++++++++++++++ packages/icons/src/index.ts | 3 ++ 8 files changed, 77 insertions(+), 4 deletions(-) create mode 100644 packages/icons/src/components/RotateCw.tsx create mode 100644 packages/icons/src/components/ZoomIn.tsx create mode 100644 packages/icons/src/components/ZoomOut.tsx diff --git a/packages/icons/src/components/FileCsv.tsx b/packages/icons/src/components/FileCsv.tsx index b5b547699..0a74926e5 100644 --- a/packages/icons/src/components/FileCsv.tsx +++ b/packages/icons/src/components/FileCsv.tsx @@ -24,7 +24,7 @@ const FileCsv = (props: SVGProps) => ( /> diff --git a/packages/icons/src/components/GithubLogo.tsx b/packages/icons/src/components/GithubLogo.tsx index 634a8ad03..083ec50c9 100644 --- a/packages/icons/src/components/GithubLogo.tsx +++ b/packages/icons/src/components/GithubLogo.tsx @@ -12,7 +12,7 @@ const GithubLogo = (props: SVGProps) => ( diff --git a/packages/icons/src/components/HttpRequest.tsx b/packages/icons/src/components/HttpRequest.tsx index b1c2edb1a..89b9f56f6 100644 --- a/packages/icons/src/components/HttpRequest.tsx +++ b/packages/icons/src/components/HttpRequest.tsx @@ -16,7 +16,7 @@ const HttpRequest = (props: SVGProps) => ( /> ); diff --git a/packages/icons/src/components/Phone.tsx b/packages/icons/src/components/Phone.tsx index e665a65a3..76f898bdd 100644 --- a/packages/icons/src/components/Phone.tsx +++ b/packages/icons/src/components/Phone.tsx @@ -14,7 +14,7 @@ const Phone = (props: SVGProps) => ( strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} - d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92" + d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92" /> ); diff --git a/packages/icons/src/components/RotateCw.tsx b/packages/icons/src/components/RotateCw.tsx new file mode 100644 index 000000000..d36f621a1 --- /dev/null +++ b/packages/icons/src/components/RotateCw.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +const RotateCw = (props: SVGProps) => ( + + + + +); +export default RotateCw; diff --git a/packages/icons/src/components/ZoomIn.tsx b/packages/icons/src/components/ZoomIn.tsx new file mode 100644 index 000000000..be8522fd4 --- /dev/null +++ b/packages/icons/src/components/ZoomIn.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +const ZoomIn = (props: SVGProps) => ( + + + +); +export default ZoomIn; diff --git a/packages/icons/src/components/ZoomOut.tsx b/packages/icons/src/components/ZoomOut.tsx new file mode 100644 index 000000000..8a4d6119e --- /dev/null +++ b/packages/icons/src/components/ZoomOut.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +const ZoomOut = (props: SVGProps) => ( + + + +); +export default ZoomOut; diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts index e6f121330..403934128 100644 --- a/packages/icons/src/index.ts +++ b/packages/icons/src/index.ts @@ -110,6 +110,7 @@ export { default as PlusCircle } from './components/PlusCircle'; export { default as Qrcode } from './components/Qrcode'; export { default as Redo2 } from './components/Redo2'; export { default as RefreshCcw } from './components/RefreshCcw'; +export { default as RotateCw } from './components/RotateCw'; export { default as Search } from './components/Search'; export { default as SendMail } from './components/SendMail'; export { default as Settings } from './components/Settings'; @@ -137,3 +138,5 @@ export { default as Users } from './components/Users'; export { default as Webhook } from './components/Webhook'; export { default as X } from './components/X'; export { default as Zap } from './components/Zap'; +export { default as ZoomIn } from './components/ZoomIn'; +export { default as ZoomOut } from './components/ZoomOut';