From bbfcf7e46fe1cafc12ab4191549423f014aef391 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E4=BA=91?= <609237304@qq.com>
Date: Wed, 3 Mar 2021 11:12:47 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E5=92=8C=E7=BC=A9=E6=94=BE=E7=9A=84=E5=9F=BA=E6=9C=AC=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/src/App.js                 |   1 +
 src/components/ControlBar/index.js |  35 +++++++++-
 src/index.js                       | 100 +++++++++++++++++++++++------
 3 files changed, 117 insertions(+), 19 deletions(-)

diff --git a/example/src/App.js b/example/src/App.js
index 706c942..06d5f43 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -46,6 +46,7 @@ const App = () => {
 				hintOnStartup
 				hintText="Drag to view"
 			/>
+
 			<button onClick={() => tridiRef.current.prev()}>Prev</button>
 			<button onClick={() => tridiRef.current.next()}>Next</button>
 			<button onClick={() => tridiRef.current.toggleAutoplay(!isAutoPlayRunning)}>
diff --git a/src/components/ControlBar/index.js b/src/components/ControlBar/index.js
index 0d4b672..e28d6a2 100644
--- a/src/components/ControlBar/index.js
+++ b/src/components/ControlBar/index.js
@@ -10,6 +10,7 @@ import PlayIcon from '../../assets/icons/play.svg';
 const ControlBar = ({
 	isPlaying,
 	isRecording,
+	isMoveing,
 	setIsPlaying,
 	setIsRecording,
 	onPlay,
@@ -17,7 +18,11 @@ const ControlBar = ({
 	onNext,
 	onPrev,
 	onRecordStart,
-	onRecordStop
+	onRecordStop,
+	onZoomout,
+	onZoomin,
+	onStartMoveing,
+	onStopMoveing
 }) => {
 	const playHandler = () => {
 		setIsPlaying(true);
@@ -39,6 +44,14 @@ const ControlBar = ({
 		onRecordStop();
 	};
 
+	const moveStartHandler = () => {
+		onStartMoveing();
+	};
+
+	const moveStopHandler = () => {
+		onStopMoveing();
+	};
+
 	return (
 		<div
 			className={`tridi-control-bar ${styles['tridi-control-bar']}`}
@@ -67,9 +80,29 @@ const ControlBar = ({
 			<a className={`${styles['tridi-control-button']}`} onClick={onPrev}>
 				<PrevIcon />
 			</a>
+
 			<a className={`${styles['tridi-control-button']}`} onClick={onNext}>
 				<NextIcon />
 			</a>
+
+			<a className={`${styles['tridi-control-button']}`} onClick={onZoomout}>
+				<NextIcon />
+			</a>
+
+			<a className={`${styles['tridi-control-button']}`} onClick={onZoomin}>
+				<NextIcon />
+			</a>
+
+			{!isMoveing && (
+				<a className={`${styles['tridi-control-button']}`} onClick={moveStartHandler}>
+					<TargetIcon />
+				</a>
+			)}
+			{isMoveing && (
+				<a className={`${styles['tridi-control-button']}`} onClick={moveStopHandler}>
+					<StopIcon />
+				</a>
+			)}
 		</div>
 	);
 };
diff --git a/src/index.js b/src/index.js
index 9a693f1..a3af70d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -91,18 +91,26 @@ const Tridi = forwardRef(
 			onFrameChange,
 			onRecordStart,
 			onRecordStop,
-			onPinClick
+			onPinClick,
+			onZoom,
+			maxZoom,
+			minZoom
 		},
 		ref
 	) => {
 		const [moveBuffer, setMoveBuffer] = useState([]);
 		const [hintVisible, setHintVisible] = useState(hintOnStartup);
 		const [currentImageIndex, setCurrentImageIndex] = useState(0);
+		const [zoom, setZoom] = useState(1);
 		const [isDragging, setIsDragging] = useState(false);
 		const [isAutoPlayRunning, setIsAutoPlayRunning] = useState(false);
 		const [isRecording, setIsRecording] = useState(false);
 		const [recordingSessionId, setRecordingSessionId] = useState(null);
 		const [isPlaying, setIsPlaying] = useState(false);
+		const [isMoveing, setIsMoveing] = useState(false);
+
+		const [viewerImageOfset, setViewerImageOfset] = useState({ x: 0, y: 0 });
+		const [moveingMouseDownPoint, setMoveingMouseDownPoint] = useState(null);
 
 		const _count = Array.isArray(images) ? images.length : Number(count);
 		const _images = TridiUtils.normalizedImages(images, format, location, _count);
@@ -203,7 +211,14 @@ const Tridi = forwardRef(
 				startDragging();
 				rotateViewerImage(e);
 			}
-
+			if (isMoveing) {
+				const clientX = e.clientX;
+				const clientY = e.clientY;
+				setMoveingMouseDownPoint({
+					x: clientX - viewerImageOfset.x,
+					y: clientY - viewerImageOfset.y
+				});
+			}
 			if (isAutoPlayRunning && stopAutoplayOnClick) {
 				toggleAutoplay(false);
 			}
@@ -215,9 +230,21 @@ const Tridi = forwardRef(
 				stopDragging();
 				resetMoveBuffer();
 			}
+			if (moveingMouseDownPoint) {
+				setMoveingMouseDownPoint(null);
+			}
 		};
 
 		const imageViewerMouseMoveHandler = (e) => {
+			if (isDragging && isMoveing && moveingMouseDownPoint) {
+				const clientX = e.clientX;
+				const clientY = e.clientY;
+				setViewerImageOfset({
+					x: clientX - moveingMouseDownPoint.x,
+					y: clientY - moveingMouseDownPoint.y
+				});
+				return;
+			}
 			if (_draggable && isDragging) {
 				rotateViewerImage(e);
 			}
@@ -440,10 +467,34 @@ const Tridi = forwardRef(
 					onMouseLeave={imageViewerMouseLeaveHandler}
 					onMouseEnter={imageViewerMouseEnterHandler}
 					onClick={imageViewerClickHandler}
-					style={{ width: '100%' }}
+					style={{
+						width: '100%'
+					}}
 				>
-					{_images?.length > 0 && renderImages()}
+					<div
+						style={{
+							width: '100%',
+							transform: `scale(${zoom}, ${zoom}) translate(${
+								viewerImageOfset.x / zoom
+							}px, ${viewerImageOfset.y / zoom}px)`
+						}}
+					>
+						{_images?.length > 0 && renderImages()}
+					</div>
+
+					<Pins
+						pins={pins}
+						viewerWidth={_viewerImageRef?.current?.clientWidth}
+						viewerHeight={_viewerImageRef?.current?.clientHeight}
+						currentFrameId={currentImageIndex}
+						pinWidth={pinWidth}
+						pinHeight={pinHeight}
+						onPinDoubleClick={pinDoubleClickHandler}
+						onPinClick={pinClickHandler}
+						renderPin={renderPin}
+					/>
 				</div>
+
 				{showStatusBar && (
 					<StatusBar isRecording={isRecording} currentImageIndex={currentImageIndex} />
 				)}
@@ -451,27 +502,38 @@ const Tridi = forwardRef(
 					<ControlBar
 						isPlaying={isPlaying}
 						isRecording={isRecording}
+						isMoveing={isMoveing}
 						setIsPlaying={setIsPlaying}
 						setIsRecording={setIsRecording}
+						setIsMoveing={setIsMoveing}
+						onStartMoveing={() => {
+							toggleRecording(false);
+							setIsMoveing(true);
+						}}
+						onStopMoveing={() => {
+							setIsMoveing(false);
+						}}
 						onPlay={() => toggleAutoplay(true)}
 						onPause={() => toggleAutoplay(false)}
 						onNext={() => nextMove()}
 						onPrev={() => prevMove()}
-						onRecordStart={() => toggleRecording(true)}
+						onRecordStart={() => {
+							toggleRecording(true);
+							setIsMoveing(false);
+						}}
 						onRecordStop={() => toggleRecording(false)}
+						onZoomout={() => {
+							const newZoom = Math.max(minZoom, zoom - 0.1);
+							setZoom(newZoom);
+							onZoom(newZoom);
+						}}
+						onZoomin={() => {
+							const newZoom = Math.min(maxZoom, zoom + 0.1);
+							setZoom(newZoom);
+							onZoom(newZoom);
+						}}
 					/>
 				)}
-				<Pins
-					pins={pins}
-					viewerWidth={_viewerImageRef?.current?.clientWidth}
-					viewerHeight={_viewerImageRef?.current?.clientHeight}
-					currentFrameId={currentImageIndex}
-					pinWidth={pinWidth}
-					pinHeight={pinHeight}
-					onPinDoubleClick={pinDoubleClickHandler}
-					onPinClick={pinClickHandler}
-					renderPin={renderPin}
-				/>
 			</div>
 		);
 	}
@@ -553,7 +615,8 @@ Tridi.defaultProps = {
 	renderPin: undefined,
 	setPins: () => {},
 	renderHint: undefined,
-
+	maxZoom: 3,
+	minZoom: 0.3,
 	onHintHide: () => {},
 	onAutoplayStart: () => {},
 	onAutoplayStop: () => {},
@@ -566,7 +629,8 @@ Tridi.defaultProps = {
 	onFrameChange: () => {},
 	onRecordStart: () => {},
 	onRecordStop: () => {},
-	onPinClick: () => {}
+	onPinClick: () => {},
+	onZoom: () => {}
 };
 
 export default Tridi;

From afcffd3c35fa47bcd4e1ed5fa67c0064aaae4380 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E4=BA=91?= <609237304@qq.com>
Date: Thu, 4 Mar 2021 11:02:25 +0800
Subject: [PATCH 2/5] Fix the inaccuracy of scaling record coordinates

---
 src/index.js | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/index.js b/src/index.js
index a3af70d..9c8b41b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -325,12 +325,17 @@ const Tridi = forwardRef(
 
 		const imageViewerClickHandler = (e) => {
 			if (isRecording) {
-				const clientX = e.clientX;
-				const clientY = e.clientY;
 				const viewerWidth = _viewerImageRef.current.clientWidth;
 				const viewerHeight = _viewerImageRef.current.clientHeight;
+				const clientX =
+					(e.clientX - viewerImageOfset.x - (viewerWidth - viewerWidth * zoom) / 2) /
+					zoom;
+				const clientY =
+					(e.clientY - viewerImageOfset.y - (viewerHeight - viewerHeight * zoom) / 2) /
+					zoom;
 				const viewerOffsetLeft = _viewerImageRef.current.getBoundingClientRect().left;
 				const viewerOffsetTop = _viewerImageRef.current.getBoundingClientRect().top;
+
 				const x = ((clientX - viewerOffsetLeft) / viewerWidth).toFixed(6);
 				const y = ((clientY - viewerOffsetTop) / viewerHeight).toFixed(6);
 				const pin = {
@@ -480,19 +485,18 @@ const Tridi = forwardRef(
 						}}
 					>
 						{_images?.length > 0 && renderImages()}
+						<Pins
+							pins={pins}
+							viewerWidth={_viewerImageRef?.current?.clientWidth}
+							viewerHeight={_viewerImageRef?.current?.clientHeight}
+							currentFrameId={currentImageIndex}
+							pinWidth={pinWidth}
+							pinHeight={pinHeight}
+							onPinDoubleClick={pinDoubleClickHandler}
+							onPinClick={pinClickHandler}
+							renderPin={renderPin}
+						/>
 					</div>
-
-					<Pins
-						pins={pins}
-						viewerWidth={_viewerImageRef?.current?.clientWidth}
-						viewerHeight={_viewerImageRef?.current?.clientHeight}
-						currentFrameId={currentImageIndex}
-						pinWidth={pinWidth}
-						pinHeight={pinHeight}
-						onPinDoubleClick={pinDoubleClickHandler}
-						onPinClick={pinClickHandler}
-						renderPin={renderPin}
-					/>
 				</div>
 
 				{showStatusBar && (

From 081c28027917a9d486a780aea7c6b11963ac28d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E4=BA=91?= <609237304@qq.com>
Date: Thu, 4 Mar 2021 16:58:25 +0800
Subject: [PATCH 3/5] update controlBar icons

---
 src/assets/icons/drag.svg          |  8 ++++++++
 src/assets/icons/move.svg          |  3 +++
 src/assets/icons/next.svg          | 10 +++-------
 src/assets/icons/pause.svg         |  7 ++-----
 src/assets/icons/play.svg          |  8 +++-----
 src/assets/icons/previous.svg      |  8 --------
 src/assets/icons/stop.svg          |  8 +++-----
 src/assets/icons/target.svg        |  8 +++-----
 src/assets/icons/zoomIn.svg        |  3 +++
 src/assets/icons/zoomOut.svg       |  3 +++
 src/components/ControlBar/index.js | 19 +++++++++++++------
 src/index.js                       |  3 ++-
 12 files changed, 46 insertions(+), 42 deletions(-)
 create mode 100644 src/assets/icons/drag.svg
 create mode 100644 src/assets/icons/move.svg
 mode change 100755 => 100644 src/assets/icons/next.svg
 mode change 100755 => 100644 src/assets/icons/pause.svg
 mode change 100755 => 100644 src/assets/icons/play.svg
 delete mode 100755 src/assets/icons/previous.svg
 mode change 100755 => 100644 src/assets/icons/stop.svg
 mode change 100755 => 100644 src/assets/icons/target.svg
 create mode 100644 src/assets/icons/zoomIn.svg
 create mode 100644 src/assets/icons/zoomOut.svg

diff --git a/src/assets/icons/drag.svg b/src/assets/icons/drag.svg
new file mode 100644
index 0000000..276072e
--- /dev/null
+++ b/src/assets/icons/drag.svg
@@ -0,0 +1,8 @@
+<svg width="33" height="30" viewBox="0 0 33 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.3709 3.21631H21.7185C21.2744 3.21631 20.9141 3.57669 20.9141 4.02071C20.9141 4.46472 21.2744 4.82511 21.7185 4.82511H31.3709C31.815 4.82511 32.1753 4.46472 32.1753 4.02071C32.1753 3.57669 31.815 3.21631 31.3709 3.21631Z" fill="#212121"/>
+<path d="M31.9405 3.4528L28.7229 0.235279C28.4092 -0.0784264 27.8992 -0.0784264 27.5855 0.235279C27.2718 0.548985 27.2718 1.05898 27.5855 1.37269L30.2335 4.02071L27.5839 6.67032C27.2702 6.98402 27.2702 7.49402 27.5839 7.80773C27.7416 7.96375 27.9475 8.04263 28.1534 8.04263C28.3594 8.04263 28.5653 7.96383 28.7229 7.80773L31.9405 4.59021C32.2542 4.27643 32.2542 3.7665 31.9405 3.4528Z" fill="#212121"/>
+<path d="M10.4573 3.21631H0.80478C0.360766 3.21631 0.00038147 3.57669 0.00038147 4.02071C0.00038147 4.46472 0.360766 4.82511 0.80478 4.82511H10.4573C10.9013 4.82511 11.2617 4.46472 11.2617 4.02071C11.2617 3.57669 10.9013 3.21631 10.4573 3.21631Z" fill="#212121"/>
+<path d="M1.94211 4.02071L4.59013 1.37269C4.90384 1.05898 4.90384 0.548985 4.59013 0.235279C4.27643 -0.0784264 3.76643 -0.0784264 3.45272 0.235279L0.235279 3.45287C-0.0784264 3.76658 -0.0784264 4.27658 0.235279 4.59028L3.4528 7.8078C3.61048 7.96382 3.81635 8.0427 4.02229 8.0427C4.22824 8.0427 4.43411 7.9639 4.59021 7.80622C4.90391 7.49251 4.90391 6.98251 4.59021 6.66881L1.94211 4.02071Z" fill="#212121"/>
+<path d="M1.94211 4.02071L4.59013 1.37269C4.90384 1.05898 4.90384 0.548985 4.59013 0.235279C4.27643 -0.0784264 3.76643 -0.0784264 3.45272 0.235279L0.235279 3.45287C-0.0784264 3.76658 -0.0784264 4.27658 0.235279 4.59028L3.4528 7.8078C3.61048 7.96382 3.81635 8.0427 4.02229 8.0427C4.22824 8.0427 4.43411 7.9639 4.59021 7.80622C4.90391 7.49251 4.90391 6.98251 4.59021 6.66881L1.94211 4.02071Z" fill="#212121"/>
+<path d="M27.4188 10.0562C26.9277 10.1545 26.4999 10.3955 26.1709 10.7261C25.6574 9.86204 24.6356 9.37063 23.5949 9.57899C23.1038 9.67731 22.676 9.91831 22.347 10.2489C21.8335 9.38484 20.8117 8.89343 19.771 9.10178C19.3361 9.18886 18.9509 9.38779 18.6405 9.66244L17.8585 5.75634C17.5946 4.43837 16.3082 3.58113 14.9902 3.845C13.6723 4.10886 12.815 5.39526 13.0789 6.71324L15.1123 16.8697L12.7239 15.7286C11.3082 15.0513 9.58116 15.5251 8.70842 16.8333C8.14936 17.6722 8.37686 18.8086 9.21581 19.3676L19.4283 26.1741C20.6473 26.9864 22.1107 27.2751 23.547 26.9875L26.3466 26.427C29.9695 25.7017 32.3283 22.1635 31.6027 18.5394L30.287 11.9675C30.0231 10.6496 28.7367 9.79233 27.4188 10.0562ZM30.4078 18.7786C31.0013 21.7431 29.0719 24.6386 26.1073 25.2321L23.3077 25.7926C22.1893 26.0165 21.0519 25.7919 20.104 25.1601L9.89148 18.3537C9.61183 18.1673 9.53599 17.7885 9.72235 17.5089C10.0188 17.0655 10.4755 16.7765 10.9726 16.677C11.3765 16.5961 11.8078 16.6402 12.1995 16.8277L15.6862 18.4947C15.8951 18.5945 16.143 18.5661 16.3236 18.4255C16.5052 18.2835 16.5917 18.0512 16.5465 17.8254L14.2739 6.474C14.1421 5.8156 14.5699 5.17196 15.2295 5.03991C15.8891 4.90786 16.5318 5.33722 16.6636 5.99556L18.4578 14.9572C18.5238 15.287 18.845 15.5011 19.1748 15.4351C19.5046 15.369 19.7187 15.0478 19.6527 14.718L19.0546 11.7308C18.9228 11.0724 19.3507 10.4287 20.0103 10.2967C20.6699 10.1646 21.3126 10.594 21.4444 11.2523L22.0424 14.2395C22.1084 14.5693 22.4297 14.7834 22.7595 14.7174C23.0893 14.6514 23.3034 14.3301 23.2373 14.0003L22.8785 12.208C22.7467 11.5496 23.1746 10.9059 23.8342 10.7739C24.4937 10.6418 25.1364 11.0712 25.2682 11.7295L25.6271 13.5219C25.6931 13.8517 26.0144 14.0658 26.3442 13.9997C26.6739 13.9337 26.888 13.6124 26.822 13.2826L26.7024 12.6852C26.5706 12.0268 26.9985 11.3832 27.658 11.2511C28.3176 11.1191 28.9603 11.5484 29.0921 12.2068L30.4078 18.7786V18.7786Z" fill="#212121"/>
+</svg>
diff --git a/src/assets/icons/move.svg b/src/assets/icons/move.svg
new file mode 100644
index 0000000..b2a8bb8
--- /dev/null
+++ b/src/assets/icons/move.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.9193 11.8305L20.0916 8.80969C20.0596 8.7845 20.0211 8.76884 19.9806 8.7645C19.9401 8.76017 19.8992 8.76733 19.8625 8.78518C19.8259 8.80303 19.7951 8.83083 19.7735 8.86541C19.7519 8.89998 19.7406 8.93993 19.7407 8.98068V10.9216H13.0812V4.26197H15.025C15.205 4.26197 15.307 4.05199 15.196 3.91099L12.1723 0.0832314C12.1522 0.0573293 12.1266 0.0363589 12.0972 0.0219306C12.0678 0.00750221 12.0355 0 12.0028 0C11.97 0 11.9377 0.00750221 11.9084 0.0219306C11.879 0.0363589 11.8533 0.0573293 11.8333 0.0832314L8.80953 3.91099C8.78434 3.94302 8.76868 3.9815 8.76434 4.02201C8.76001 4.06253 8.76717 4.10345 8.78502 4.14008C8.80286 4.17671 8.83067 4.20757 8.86524 4.22913C8.89982 4.25069 8.93977 4.26207 8.98052 4.26197H10.9214V10.9216H4.26189V8.97768C4.26189 8.79769 4.05191 8.6957 3.91092 8.80669L0.0832299 11.8305C0.0573283 11.8505 0.0363582 11.8762 0.0219302 11.9056C0.00750208 11.935 0 11.9673 0 12C0 12.0327 0.00750208 12.065 0.0219302 12.0944C0.0363582 12.1238 0.0573283 12.1495 0.0832299 12.1695L3.90792 15.1933C4.04891 15.3043 4.25889 15.2053 4.25889 15.0223V13.0814H10.9184V19.741H8.97452C8.79453 19.741 8.69254 19.951 8.80353 20.092L11.8273 23.9168C11.9143 24.0277 12.0823 24.0277 12.1663 23.9168L15.19 20.092C15.301 19.951 15.202 19.741 15.019 19.741H13.0812V13.0814H19.7407V15.0253C19.7407 15.2053 19.9506 15.3073 20.0916 15.1963L23.9163 12.1725C23.9421 12.1522 23.9631 12.1264 23.9776 12.0969C23.992 12.0674 23.9997 12.0351 24 12.0022C24.0003 11.9694 23.9932 11.9369 23.9792 11.9072C23.9652 11.8774 23.9448 11.8512 23.9193 11.8305V11.8305Z" fill="#212121"/>
+</svg>
diff --git a/src/assets/icons/next.svg b/src/assets/icons/next.svg
old mode 100755
new mode 100644
index 6f247fc..2704f4a
--- a/src/assets/icons/next.svg
+++ b/src/assets/icons/next.svg
@@ -1,8 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 16 16">
-<path fill="#000000" d="M8 0c4.418 0 8 3.582 8 8s-3.582 8-8 8-8-3.582-8-8 3.582-8 8-8zM8 14.5c3.59 0 6.5-2.91 6.5-6.5s-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5 2.91 6.5 6.5 6.5z"></path>
-<path fill="#000000" d="M9 8l-4-3v6z"></path>
-<path fill="#000000" d="M11 5h-2v6h2v-6z"></path>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.1437 11.8258L9.55446 7.05797C9.52244 7.03472 9.4846 7.02079 9.44515 7.01773C9.40569 7.01467 9.36616 7.02259 9.33093 7.04062C9.29571 7.05865 9.26616 7.08608 9.24557 7.11988C9.22498 7.15367 9.21415 7.19251 9.21428 7.23208V8.48833C9.21428 8.76154 9.34553 9.02136 9.56785 9.18208L13.4625 11.9999L9.56785 14.8178C9.34553 14.9785 9.21428 15.2356 9.21428 15.5115V16.7678C9.21428 16.9419 9.41249 17.0437 9.55446 16.9419L16.1437 12.174C16.2616 12.0883 16.2616 11.9115 16.1437 11.8258Z" fill="#212121"/>
+<path d="M12 0C5.37321 0 0 5.37321 0 12C0 18.6268 5.37321 24 12 24C18.6268 24 24 18.6268 24 12C24 5.37321 18.6268 0 12 0ZM12 21.9643C6.49821 21.9643 2.03571 17.5018 2.03571 12C2.03571 6.49821 6.49821 2.03571 12 2.03571C17.5018 2.03571 21.9643 6.49821 21.9643 12C21.9643 17.5018 17.5018 21.9643 12 21.9643Z" fill="#212121"/>
 </svg>
diff --git a/src/assets/icons/pause.svg b/src/assets/icons/pause.svg
old mode 100755
new mode 100644
index f478533..355b393
--- a/src/assets/icons/pause.svg
+++ b/src/assets/icons/pause.svg
@@ -1,6 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 16 16">
-<path fill="#000000" d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5zM5 5h2v6h-2zM9 5h2v6h-2z"></path>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 0C5.37321 0 0 5.37321 0 12C0 18.6268 5.37321 24 12 24C18.6268 24 24 18.6268 24 12C24 5.37321 18.6268 0 12 0ZM12 21.9643C6.49821 21.9643 2.03571 17.5018 2.03571 12C2.03571 6.49821 6.49821 2.03571 12 2.03571C17.5018 2.03571 21.9643 6.49821 21.9643 12C21.9643 17.5018 17.5018 21.9643 12 21.9643ZM9.64286 7.71429H8.35714C8.23929 7.71429 8.14286 7.81071 8.14286 7.92857V16.0714C8.14286 16.1893 8.23929 16.2857 8.35714 16.2857H9.64286C9.76071 16.2857 9.85714 16.1893 9.85714 16.0714V7.92857C9.85714 7.81071 9.76071 7.71429 9.64286 7.71429ZM15.6429 7.71429H14.3571C14.2393 7.71429 14.1429 7.81071 14.1429 7.92857V16.0714C14.1429 16.1893 14.2393 16.2857 14.3571 16.2857H15.6429C15.7607 16.2857 15.8571 16.1893 15.8571 16.0714V7.92857C15.8571 7.81071 15.7607 7.71429 15.6429 7.71429Z" fill="#212121"/>
 </svg>
diff --git a/src/assets/icons/play.svg b/src/assets/icons/play.svg
old mode 100755
new mode 100644
index b75a18a..1bb24bf
--- a/src/assets/icons/play.svg
+++ b/src/assets/icons/play.svg
@@ -1,6 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 16 16">
-<path fill="#000000" d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5zM6 4.5l6 3.5-6 3.5z"></path>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 0C5.37321 0 0 5.37321 0 12C0 18.6268 5.37321 24 12 24C18.6268 24 24 18.6268 24 12C24 5.37321 18.6268 0 12 0ZM12 21.9643C6.49821 21.9643 2.03571 17.5018 2.03571 12C2.03571 6.49821 6.49821 2.03571 12 2.03571C17.5018 2.03571 21.9643 6.49821 21.9643 12C21.9643 17.5018 17.5018 21.9643 12 21.9643Z" fill="#212121"/>
+<path d="M17.5554 11.6546L9.62412 5.89563C9.56051 5.84901 9.4852 5.82096 9.40659 5.81461C9.32797 5.80827 9.24914 5.82388 9.17888 5.85971C9.10861 5.89553 9.04968 5.95017 9.00864 6.01752C8.9676 6.08487 8.94607 6.1623 8.94645 6.24117V17.759C8.94645 18.1099 9.34287 18.3081 9.62412 18.1046L17.5554 12.3456C17.6101 12.3062 17.6547 12.2543 17.6855 12.1942C17.7162 12.1341 17.7323 12.0676 17.7323 12.0001C17.7323 11.9326 17.7162 11.8661 17.6855 11.806C17.6547 11.7459 17.6101 11.694 17.5554 11.6546V11.6546ZM10.6554 15.2438V8.75635L15.1206 12.0001L10.6554 15.2438V15.2438Z" fill="#212121"/>
 </svg>
diff --git a/src/assets/icons/previous.svg b/src/assets/icons/previous.svg
deleted file mode 100755
index 8d061c3..0000000
--- a/src/assets/icons/previous.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 16 16">
-<path fill="#000000" d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5z"></path>
-<path fill="#000000" d="M7 8l4-3v6z"></path>
-<path fill="#000000" d="M5 5h2v6h-2v-6z"></path>
-</svg>
diff --git a/src/assets/icons/stop.svg b/src/assets/icons/stop.svg
old mode 100755
new mode 100644
index 23de266..c6393c5
--- a/src/assets/icons/stop.svg
+++ b/src/assets/icons/stop.svg
@@ -1,6 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 16 16">
-<path fill="#000000" d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5zM5 5h6v6h-6z"></path>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 0C5.37321 0 0 5.37321 0 12C0 18.6268 5.37321 24 12 24C18.6268 24 24 18.6268 24 12C24 5.37321 18.6268 0 12 0ZM12 21.9643C6.49821 21.9643 2.03571 17.5018 2.03571 12C2.03571 6.49821 6.49821 2.03571 12 2.03571C17.5018 2.03571 21.9643 6.49821 21.9643 12C21.9643 17.5018 17.5018 21.9643 12 21.9643Z" fill="#212121"/>
+<path d="M15.5564 8.72929V15.5564H8.72929V8.72929H15.5564ZM15.5714 6.985H8.71429C8.25565 6.985 7.8158 7.16719 7.4915 7.4915C7.16719 7.8158 6.985 8.25565 6.985 8.71429V15.5714C6.985 16.0301 7.16719 16.4699 7.4915 16.7942C7.8158 17.1185 8.25565 17.3007 8.71429 17.3007H15.5714C16.0301 17.3007 16.4699 17.1185 16.7942 16.7942C17.1185 16.4699 17.3007 16.0301 17.3007 15.5714V8.71429C17.3007 8.25565 17.1185 7.8158 16.7942 7.4915C16.4699 7.16719 16.0301 6.985 15.5714 6.985Z" fill="#212121" stroke="#212121" stroke-width="0.03"/>
 </svg>
diff --git a/src/assets/icons/target.svg b/src/assets/icons/target.svg
old mode 100755
new mode 100644
index 03376ef..213ff3d
--- a/src/assets/icons/target.svg
+++ b/src/assets/icons/target.svg
@@ -1,6 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 16 16">
-<path fill="#000000" d="M16 7h-1.577c-0.432-2.785-2.638-4.991-5.423-5.423v-1.577h-2v1.577c-2.785 0.432-4.991 2.638-5.423 5.423h-1.577v2h1.577c0.432 2.785 2.638 4.991 5.423 5.423v1.577h2v-1.577c2.785-0.432 4.991-2.638 5.423-5.423h1.577v-2zM12.388 7h-1.559c-0.301-0.852-0.977-1.528-1.829-1.829v-1.559c1.68 0.383 3.005 1.708 3.388 3.388zM8 9c-0.552 0-1-0.448-1-1s0.448-1 1-1c0.552 0 1 0.448 1 1s-0.448 1-1 1zM7 3.612v1.559c-0.852 0.301-1.528 0.977-1.829 1.829h-1.559c0.383-1.68 1.708-3.005 3.388-3.388zM3.612 9h1.559c0.301 0.852 0.977 1.528 1.829 1.829v1.559c-1.68-0.383-3.005-1.708-3.388-3.388zM9 12.388v-1.559c0.852-0.301 1.528-0.977 1.829-1.829h1.559c-0.383 1.68-1.708 3.005-3.388 3.388z"></path>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.5256 13.2C21.2585 15.3149 20.2954 17.2808 18.7881 18.7881C17.2808 20.2954 15.3149 21.2585 13.2 21.5256V24H10.8V21.5256C8.68513 21.2585 6.7192 20.2954 5.21188 18.7881C3.70456 17.2808 2.7415 15.3149 2.4744 13.2H0V10.8H2.4744C2.7415 8.68513 3.70456 6.7192 5.21188 5.21188C6.7192 3.70456 8.68513 2.7415 10.8 2.4744V0H13.2V2.4744C15.3149 2.7415 17.2808 3.70456 18.7881 5.21188C20.2954 6.7192 21.2585 8.68513 21.5256 10.8H24V13.2H21.5256ZM12 19.2C13.9096 19.2 15.7409 18.4414 17.0912 17.0912C18.4414 15.7409 19.2 13.9096 19.2 12C19.2 10.0904 18.4414 8.25909 17.0912 6.90883C15.7409 5.55857 13.9096 4.8 12 4.8C10.0904 4.8 8.25909 5.55857 6.90883 6.90883C5.55857 8.25909 4.8 10.0904 4.8 12C4.8 13.9096 5.55857 15.7409 6.90883 17.0912C8.25909 18.4414 10.0904 19.2 12 19.2Z" fill="#212121"/>
+<circle cx="12" cy="12" r="4" stroke="#212121" stroke-width="2"/>
 </svg>
diff --git a/src/assets/icons/zoomIn.svg b/src/assets/icons/zoomIn.svg
new file mode 100644
index 0000000..21dcc3c
--- /dev/null
+++ b/src/assets/icons/zoomIn.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.6485 9.98547H12.204V6.07389C12.204 5.94545 12.0989 5.84036 11.9704 5.84036H10.219C10.0906 5.84036 9.98547 5.94545 9.98547 6.07389V9.98547H6.54094C6.4125 9.98547 6.30742 10.0906 6.30742 10.219V11.9704C6.30742 12.0989 6.4125 12.204 6.54094 12.204H9.98547V16.1155C9.98547 16.244 10.0906 16.3491 10.219 16.3491H11.9704C12.0989 16.3491 12.204 16.244 12.204 16.1155V12.204H15.6485C15.7769 12.204 15.882 12.0989 15.882 11.9704V10.219C15.882 10.0906 15.7769 9.98547 15.6485 9.98547ZM23.9387 22.3624L19.6768 18.1005C23.241 13.754 22.9929 7.3145 18.9179 3.24238C14.5976 -1.08079 7.58014 -1.08079 3.24238 3.24238C-1.08079 7.58014 -1.08079 14.5976 3.24238 18.9179C7.3145 22.9929 13.754 23.241 18.1005 19.6768L22.3624 23.9387C22.4558 24.0204 22.6047 24.0204 22.6835 23.9387L23.9387 22.6835C24.0204 22.6047 24.0204 22.4558 23.9387 22.3624ZM17.3708 17.3708C13.9029 20.8357 8.28656 20.8357 4.81868 17.3708C1.35373 13.9029 1.35373 8.28656 4.81868 4.81868C8.28656 1.35373 13.9029 1.35373 17.3708 4.81868C20.8357 8.28656 20.8357 13.9029 17.3708 17.3708Z" fill="#212121"/>
+</svg>
diff --git a/src/assets/icons/zoomOut.svg b/src/assets/icons/zoomOut.svg
new file mode 100644
index 0000000..dde27ab
--- /dev/null
+++ b/src/assets/icons/zoomOut.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.6485 9.98547H6.54094C6.4125 9.98547 6.30742 10.0906 6.30742 10.219V11.9704C6.30742 12.0989 6.4125 12.204 6.54094 12.204H15.6485C15.7769 12.204 15.882 12.0989 15.882 11.9704V10.219C15.882 10.0906 15.7769 9.98547 15.6485 9.98547ZM23.9387 22.3624L19.6768 18.1005C23.241 13.754 22.9929 7.3145 18.9179 3.24238C14.5976 -1.08079 7.58014 -1.08079 3.24238 3.24238C-1.08079 7.58014 -1.08079 14.5976 3.24238 18.9179C7.3145 22.9929 13.754 23.241 18.1005 19.6768L22.3624 23.9387C22.4558 24.0204 22.6047 24.0204 22.6835 23.9387L23.9387 22.6835C24.0204 22.6047 24.0204 22.4558 23.9387 22.3624ZM17.3708 17.3708C13.9029 20.8357 8.28656 20.8357 4.81868 17.3708C1.35373 13.9029 1.35373 8.28656 4.81868 4.81868C8.28656 1.35373 13.9029 1.35373 17.3708 4.81868C20.8357 8.28656 20.8357 13.9029 17.3708 17.3708Z" fill="#212121"/>
+</svg>
diff --git a/src/components/ControlBar/index.js b/src/components/ControlBar/index.js
index e28d6a2..b0707f6 100644
--- a/src/components/ControlBar/index.js
+++ b/src/components/ControlBar/index.js
@@ -1,11 +1,14 @@
 import React from 'react';
 import styles from './styles.module.css';
+
 import TargetIcon from '../../assets/icons/target.svg';
 import StopIcon from '../../assets/icons/stop.svg';
 import NextIcon from '../../assets/icons/next.svg';
-import PrevIcon from '../../assets/icons/previous.svg';
 import PauseIcon from '../../assets/icons/pause.svg';
 import PlayIcon from '../../assets/icons/play.svg';
+import ZoomInIcon from '../../assets/icons/zoomIn.svg';
+import ZoomOutIcon from '../../assets/icons/zoomOut.svg';
+import MoveIcon from '../../assets/icons/move.svg';
 
 const ControlBar = ({
 	isPlaying,
@@ -77,8 +80,12 @@ const ControlBar = ({
 					<PauseIcon />
 				</a>
 			)}
-			<a className={`${styles['tridi-control-button']}`} onClick={onPrev}>
-				<PrevIcon />
+			<a
+				className={`${styles['tridi-control-button']}`}
+				style={{ transform: 'rotate(180deg)' }}
+				onClick={onPrev}
+			>
+				<NextIcon />
 			</a>
 
 			<a className={`${styles['tridi-control-button']}`} onClick={onNext}>
@@ -86,16 +93,16 @@ const ControlBar = ({
 			</a>
 
 			<a className={`${styles['tridi-control-button']}`} onClick={onZoomout}>
-				<NextIcon />
+				<ZoomOutIcon />
 			</a>
 
 			<a className={`${styles['tridi-control-button']}`} onClick={onZoomin}>
-				<NextIcon />
+				<ZoomInIcon />
 			</a>
 
 			{!isMoveing && (
 				<a className={`${styles['tridi-control-button']}`} onClick={moveStartHandler}>
-					<TargetIcon />
+					<MoveIcon />
 				</a>
 			)}
 			{isMoveing && (
diff --git a/src/index.js b/src/index.js
index 9c8b41b..433dc36 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,6 +9,7 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import styles from './styles.module.css';
+import DragIcon from './assets/icons/drag.svg';
 
 import useInterval from './hooks/useInterval';
 import useTridiKeyPressHandler from './hooks/useTridiKeyPressHandler';
@@ -438,7 +439,7 @@ const Tridi = forwardRef(
 			>
 				{!renderHint && (
 					<Fragment>
-						<div className={`${styles['tridi-hint']}`} />
+						<DragIcon />
 						{hintText && (
 							<span className={`${styles['tridi-hint-text']}`}>{hintText}</span>
 						)}

From 45c748ecb044f0c453cae97cea64d7e6f3b1b3c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E4=BA=91?= <609237304@qq.com>
Date: Sun, 7 Mar 2021 21:42:42 +0800
Subject: [PATCH 4/5] add hideRecord fix occasionally not showing pins

---
 src/components/ControlBar/index.js |  7 +++---
 src/index.js                       | 38 ++++++++++++++++++++----------
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/components/ControlBar/index.js b/src/components/ControlBar/index.js
index b0707f6..6f72379 100644
--- a/src/components/ControlBar/index.js
+++ b/src/components/ControlBar/index.js
@@ -25,7 +25,8 @@ const ControlBar = ({
 	onZoomout,
 	onZoomin,
 	onStartMoveing,
-	onStopMoveing
+	onStopMoveing,
+	hideRecord
 }) => {
 	const playHandler = () => {
 		setIsPlaying(true);
@@ -60,12 +61,12 @@ const ControlBar = ({
 			className={`tridi-control-bar ${styles['tridi-control-bar']}`}
 			onClick={(e) => e.stopPropagation()}
 		>
-			{!isRecording && (
+			{!hideRecord && !isRecording && (
 				<a className={`${styles['tridi-control-button']}`} onClick={recordStartHandler}>
 					<TargetIcon />
 				</a>
 			)}
-			{isRecording && (
+			{!hideRecord && isRecording && (
 				<a className={`${styles['tridi-control-button']}`} onClick={recordStopHandler}>
 					<StopIcon />
 				</a>
diff --git a/src/index.js b/src/index.js
index 433dc36..4bea169 100644
--- a/src/index.js
+++ b/src/index.js
@@ -95,7 +95,8 @@ const Tridi = forwardRef(
 			onPinClick,
 			onZoom,
 			maxZoom,
-			minZoom
+			minZoom,
+			hideRecord
 		},
 		ref
 	) => {
@@ -112,6 +113,7 @@ const Tridi = forwardRef(
 
 		const [viewerImageOfset, setViewerImageOfset] = useState({ x: 0, y: 0 });
 		const [moveingMouseDownPoint, setMoveingMouseDownPoint] = useState(null);
+		const [viewerSize, setViewerSize] = useState(null);
 
 		const _count = Array.isArray(images) ? images.length : Number(count);
 		const _images = TridiUtils.normalizedImages(images, format, location, _count);
@@ -413,7 +415,12 @@ const Tridi = forwardRef(
 			next: () => nextMove(),
 			prev: () => prevMove()
 		}));
-
+		useEffect(() => {
+			setViewerSize({
+				width: _viewerImageRef?.current?.clientWidth,
+				height: _viewerImageRef?.current?.clientHeight
+			});
+		}, [setViewerSize]);
 		useTridiKeyPressHandler({ nextMove, prevMove });
 
 		// render component helpers
@@ -486,17 +493,19 @@ const Tridi = forwardRef(
 						}}
 					>
 						{_images?.length > 0 && renderImages()}
-						<Pins
-							pins={pins}
-							viewerWidth={_viewerImageRef?.current?.clientWidth}
-							viewerHeight={_viewerImageRef?.current?.clientHeight}
-							currentFrameId={currentImageIndex}
-							pinWidth={pinWidth}
-							pinHeight={pinHeight}
-							onPinDoubleClick={pinDoubleClickHandler}
-							onPinClick={pinClickHandler}
-							renderPin={renderPin}
-						/>
+						{viewerSize ? (
+							<Pins
+								pins={pins}
+								viewerWidth={viewerSize.width}
+								viewerHeight={viewerSize.height}
+								currentFrameId={currentImageIndex}
+								pinWidth={pinWidth}
+								pinHeight={pinHeight}
+								onPinDoubleClick={pinDoubleClickHandler}
+								onPinClick={pinClickHandler}
+								renderPin={renderPin}
+							/>
+						) : null}
 					</div>
 				</div>
 
@@ -505,6 +514,7 @@ const Tridi = forwardRef(
 				)}
 				{showControlBar && (
 					<ControlBar
+						hideRecord={hideRecord}
 						isPlaying={isPlaying}
 						isRecording={isRecording}
 						isMoveing={isMoveing}
@@ -570,6 +580,7 @@ Tridi.propTypes = {
 	mouseleaveDetect: PropTypes.bool,
 	showControlBar: PropTypes.bool,
 	showStatusBar: PropTypes.bool,
+	hideRecord: PropTypes.bool,
 
 	renderPin: PropTypes.func,
 	setPins: PropTypes.func,
@@ -616,6 +627,7 @@ Tridi.defaultProps = {
 	mouseleaveDetect: false,
 	showControlBar: false,
 	showStatusBar: false,
+	hideRecord: false,
 
 	renderPin: undefined,
 	setPins: () => {},

From 7fe5b00232873d38f0440990f1651cad44d95c5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E4=BA=91?= <609237304@qq.com>
Date: Mon, 8 Mar 2021 02:30:19 +0800
Subject: [PATCH 5/5] fix occasionally not showing pins

---
 src/index.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/index.js b/src/index.js
index 4bea169..0410954 100644
--- a/src/index.js
+++ b/src/index.js
@@ -415,12 +415,16 @@ const Tridi = forwardRef(
 			next: () => nextMove(),
 			prev: () => prevMove()
 		}));
-		useEffect(() => {
-			setViewerSize({
-				width: _viewerImageRef?.current?.clientWidth,
-				height: _viewerImageRef?.current?.clientHeight
-			});
-		}, [setViewerSize]);
+
+		const loadImage = () => {
+			if (!viewerSize) {
+				setViewerSize({
+					width: _viewerImageRef?.current?.clientWidth,
+					height: _viewerImageRef?.current?.clientHeight
+				});
+			}
+		};
+
 		useTridiKeyPressHandler({ nextMove, prevMove });
 
 		// render component helpers
@@ -429,6 +433,7 @@ const Tridi = forwardRef(
 				<img
 					key={index}
 					src={src}
+					onLoad={loadImage}
 					className={`${styles['tridi-viewer-image']} ${
 						currentImageIndex === index
 							? styles['tridi-viewer-image-shown']