@san-siva/blogkit 1.1.28 → 1.1.29

package/dist/esm/styles/Mermaid.module.scss.js

@@ -1,4 +1,4 @@
-var styles = {"margin-top--1":"Mermaid-module_margin-top--1__W10B7","margin-bottom--2":"Mermaid-module_margin-bottom--2__w3Zct","mermaid":"Mermaid-module_mermaid__02iRo"};
+var styles = {"margin-top--1":"Mermaid-module_margin-top--1__W10B7","margin-bottom--2":"Mermaid-module_margin-bottom--2__w3Zct","mermaid":"Mermaid-module_mermaid__02iRo","mermaid__controls":"Mermaid-module_mermaid__controls__0YNFR","mermaid__controls__btn":"Mermaid-module_mermaid__controls__btn__w04sa","mermaid__viewport":"Mermaid-module_mermaid__viewport__KVL-A","mermaid__viewport--dragging":"Mermaid-module_mermaid__viewport--dragging__WjBzf"};
 
 export { styles as default };
 //# sourceMappingURL=Mermaid.module.scss.js.map

package/dist/types/dynamicComponents/MermaidDynamic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MermaidDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/MermaidDynamic.tsx"],"names":[],"mappings":"AASA,UAAU,iBAAiB;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAmBD,QAAA,MAAM,OAAO,GAAI,2CAKd,iBAAiB,4CAsDnB,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"MermaidDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/MermaidDynamic.tsx"],"names":[],"mappings":"AASA,UAAU,iBAAiB;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAuBD,QAAA,MAAM,OAAO,GAAI,2CAKd,iBAAiB,4CAkMnB,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@san-siva/blogkit",
-	"version": "1.1.28",
+	"version": "1.1.29",
 	"description": "A reusable blog component library for React/Next.js applications with code highlighting, diagrams, and rich content features",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",

package/src/dynamicComponents/MermaidDynamic.tsx

@@ -31,6 +31,10 @@ mermaid.initialize({
 	},
 });
 
+const MIN_SCALE = 0.5;
+const MAX_SCALE = 4;
+const ZOOM_STEP = 0.15;
+
 const Mermaid = ({
 	code = '',
 	id = '',
@@ -39,8 +43,33 @@ const Mermaid = ({
 }: MermaidProperties) => {
 	const [enabled, setEnabled] = useState(false);
 	const [error, setError] = useState<string | null>(null);
+	const [transform, setTransform] = useState({ scale: 1, x: 0, y: 0 });
+	const [isDragging, setIsDragging] = useState(false);
+
 	const mermaidReference = useRef<HTMLDivElement>(null);
+	const viewportRef = useRef<HTMLDivElement>(null);
 	const renderCount = useRef(0);
+	const transformRef = useRef({ scale: 1, x: 0, y: 0 });
+	const isDraggingRef = useRef(false);
+	const dragStart = useRef({
+		mouseX: 0,
+		mouseY: 0,
+		transformX: 0,
+		transformY: 0,
+	});
+
+	const applyTransform = useCallback(
+		(
+			updater: (
+				prev: typeof transformRef.current
+			) => typeof transformRef.current
+		) => {
+			const next = updater(transformRef.current);
+			transformRef.current = next;
+			setTransform(next);
+		},
+		[]
+	);
 
 	const initializeMermaid = useCallback(async () => {
 		if (!mermaidReference.current || !code) return;
@@ -62,9 +91,90 @@ const Mermaid = ({
 	useEffect(() => {
 		if (!code) return;
 		setError(null);
+		applyTransform(() => ({ scale: 1, x: 0, y: 0 }));
 		const timer = setTimeout(initializeMermaid, 100);
 		return () => clearTimeout(timer);
-	}, [code, initializeMermaid]);
+	}, [code, initializeMermaid, applyTransform]);
+
+	const handleWheel = useCallback(
+		(e: WheelEvent) => {
+			e.preventDefault();
+			const factor = e.deltaY < 0 ? 1 + ZOOM_STEP : 1 - ZOOM_STEP;
+			applyTransform(prev => {
+				const newScale = Math.min(
+					Math.max(prev.scale * factor, MIN_SCALE),
+					MAX_SCALE
+				);
+				if (!viewportRef.current) return { ...prev, scale: newScale };
+				const rect = viewportRef.current.getBoundingClientRect();
+				const cursorX = e.clientX - rect.left;
+				const cursorY = e.clientY - rect.top;
+				const ratio = newScale / prev.scale;
+				return {
+					scale: newScale,
+					x: cursorX - (cursorX - prev.x) * ratio,
+					y: cursorY - (cursorY - prev.y) * ratio,
+				};
+			});
+		},
+		[applyTransform]
+	);
+
+	useEffect(() => {
+		const viewport = viewportRef.current;
+		if (!viewport || !enabled) return;
+		viewport.addEventListener('wheel', handleWheel, { passive: false });
+		return () => viewport.removeEventListener('wheel', handleWheel);
+	}, [handleWheel, enabled]);
+
+	const handleMouseDown = useCallback((e: React.MouseEvent) => {
+		e.preventDefault();
+		isDraggingRef.current = true;
+		setIsDragging(true);
+		dragStart.current = {
+			mouseX: e.clientX,
+			mouseY: e.clientY,
+			transformX: transformRef.current.x,
+			transformY: transformRef.current.y,
+		};
+	}, []);
+
+	const handleMouseMove = useCallback(
+		(e: React.MouseEvent) => {
+			if (!isDraggingRef.current) return;
+			applyTransform(prev => ({
+				...prev,
+				x:
+					dragStart.current.transformX + (e.clientX - dragStart.current.mouseX),
+				y:
+					dragStart.current.transformY + (e.clientY - dragStart.current.mouseY),
+			}));
+		},
+		[applyTransform]
+	);
+
+	const handleMouseUp = useCallback(() => {
+		isDraggingRef.current = false;
+		setIsDragging(false);
+	}, []);
+
+	const zoomIn = useCallback(() => {
+		applyTransform(prev => ({
+			...prev,
+			scale: Math.min(prev.scale * (1 + ZOOM_STEP), MAX_SCALE),
+		}));
+	}, [applyTransform]);
+
+	const zoomOut = useCallback(() => {
+		applyTransform(prev => ({
+			...prev,
+			scale: Math.max(prev.scale * (1 - ZOOM_STEP), MIN_SCALE),
+		}));
+	}, [applyTransform]);
+
+	const resetView = useCallback(() => {
+		applyTransform(() => ({ scale: 1, x: 0, y: 0 }));
+	}, [applyTransform]);
 
 	return (
 		<div
@@ -82,12 +192,46 @@ const Mermaid = ({
 				<CalloutStatic type="info">
 					<p>Rendering diagram...</p>
 				</CalloutStatic>
-			) : null}
+			) : (
+				<div className={styles['mermaid__controls']}>
+					<button className={styles['mermaid__controls__btn']} onClick={zoomIn}>
+						+
+					</button>
+					<button
+						className={styles['mermaid__controls__btn']}
+						onClick={zoomOut}
+					>
+						−
+					</button>
+					<button
+						className={styles['mermaid__controls__btn']}
+						onClick={resetView}
+					>
+						Reset
+					</button>
+				</div>
+			)}
 			<div
-				ref={mermaidReference}
-				id={id}
+				ref={viewportRef}
+				className={`${styles['mermaid__viewport']} ${
+					isDragging ? styles['mermaid__viewport--dragging'] : ''
+				}`}
 				style={enabled ? undefined : { display: 'none' }}
-			/>
+				onMouseDown={handleMouseDown}
+				onMouseMove={handleMouseMove}
+				onMouseUp={handleMouseUp}
+				onMouseLeave={handleMouseUp}
+			>
+				<div
+					style={{
+						transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`,
+						transformOrigin: '0 0',
+						transition: isDragging ? 'none' : 'transform 0.1s ease',
+					}}
+				>
+					<div ref={mermaidReference} id={id} />
+				</div>
+			</div>
 		</div>
 	);
 };

package/src/styles/Mermaid.module.scss

@@ -6,12 +6,54 @@
 	> * {
 		background-color: unset;
 	}
+
+	&__controls {
+		display: flex;
+		flex-direction: row;
+		gap: styles.rem(4);
+		justify-content: flex-end;
+		margin-bottom: styles.rem(6);
+		opacity: 0;
+
+		&__btn {
+			background: none;
+			border: 1px solid styles.$color--grey-medium;
+			color: styles.$color--dark;
+			cursor: pointer;
+			font-size: styles.$font-size--very-small;
+			font-weight: styles.$font-weight--500;
+			line-height: 1;
+			padding: styles.rem(4) styles.rem(8);
+			border-radius: styles.rem(2);
+
+			&:hover {
+				background-color: rgba(0, 0, 0, 0.05);
+			}
+		}
+	}
+
+	&__viewport {
+		overflow: hidden;
+		cursor: grab;
+		user-select: none;
+		-webkit-user-select: none;
+
+		&--dragging {
+			cursor: grabbing;
+		}
+	}
+
+	&:hover {
+		.mermaid__controls {
+			opacity: 1;
+		}
+	}
 }
 
 .margin-top--1 {
-  margin-top: styles.space(1);
+	margin-top: styles.space(1);
 }
 
 .margin-bottom--2 {
-  margin-bottom: styles.space(2);
+	margin-bottom: styles.space(2);
 }

package/src/styles/Mermaid.module.scss.d.ts

@@ -1,5 +1,9 @@
 declare const styles: {
   readonly mermaid: string;
+  readonly 'mermaid__controls': string;
+  readonly 'mermaid__controls__btn': string;
+  readonly 'mermaid__viewport': string;
+  readonly 'mermaid__viewport--dragging': string;
   readonly 'margin-top--1': string;
   readonly 'margin-bottom--2': string;
 };