diff --git a/demo/Demo.tsx b/demo/Demo.tsx
index 30055730..656d17d5 100644
--- a/demo/Demo.tsx
+++ b/demo/Demo.tsx
@@ -2,11 +2,12 @@ import React from 'react'
interface Props {
title: string
+ subtitle?: string
code: React.ReactNode
children: React.ReactNode
}
-export default function Demo({ title, code, children }: Props) {
+export default function Demo({ title, subtitle, code, children }: Props) {
return (
{title}
{code}
+ {subtitle &&
{subtitle}
}
{children}
)
diff --git a/demo/demo.css b/demo/demo.css
index a3249476..f01c41e3 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -38,6 +38,10 @@ body {
margin-bottom: 30px;
border-radius: 5px;
}
+.demo p {
+ margin: 0 0 1em;
+ font-size: 18px;
+}
pre {
border-radius: 5px;
margin: 0 0 20px !important;
diff --git a/demo/examples/DisabledYAxis.tsx b/demo/examples/DisabledYAxis.tsx
index c2acf7ef..1a09d159 100644
--- a/demo/examples/DisabledYAxis.tsx
+++ b/demo/examples/DisabledYAxis.tsx
@@ -5,7 +5,7 @@ import Demo from '../Demo'
const code = {`Panzoom(elem, { disableYAxis: true })`}
-export default function ContainInside() {
+export default function DisabledYAxis() {
const elem = useRef(null)
useEffect(() => {
Panzoom(elem.current, { disableYAxis: true })
diff --git a/demo/examples/Rotate.tsx b/demo/examples/Rotate.tsx
new file mode 100644
index 00000000..0a7c6ff9
--- /dev/null
+++ b/demo/examples/Rotate.tsx
@@ -0,0 +1,57 @@
+import React, { useEffect, useRef } from 'react'
+import Panzoom from '../../src/panzoom'
+import Code from '../Code'
+import Demo from '../Demo'
+
+const code = (
+ {`const panzoom = Panzoom(elem, {
+ setTransform: (_, { scale, x, y }) => {
+ panzoom.setStyle('transform', \`rotate($\{x / 20}deg) scale($\{scale}) translate($\{x}px, $\{y}px)\`)
+ }
+})`}
+)
+
+const code2 = {`Panzoom(elem)`}
+
+export default function Rotate() {
+ const elem = useRef(null)
+ const elem2 = useRef(null)
+ useEffect(() => {
+ const panzoom = Panzoom(elem.current, {
+ setTransform: (_: HTMLElement, { scale, x, y }: { scale: number; x: number; y: number }) => {
+ panzoom.setStyle(
+ 'transform',
+ `rotate(${x / 20}deg) scale(${scale}) translate(${x}px, ${y}px)`
+ )
+ }
+ })
+ Panzoom(elem2.current)
+ }, [])
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+ )
+}
diff --git a/demo/examples/Standard.tsx b/demo/examples/Standard.tsx
index 21dcbafb..864cf3df 100644
--- a/demo/examples/Standard.tsx
+++ b/demo/examples/Standard.tsx
@@ -17,7 +17,7 @@ rangeInput.addEventListener('input', (event) => {
)
-export default function Buttons() {
+export default function Standard() {
const elem = useRef(null)
const range = useRef(null)
const panzoomRef = useRef(null)
diff --git a/demo/index.tsx b/demo/index.tsx
index 7df5d6f1..4efc6212 100644
--- a/demo/index.tsx
+++ b/demo/index.tsx
@@ -10,6 +10,7 @@ import React from 'react'
import ReactDOM from 'react-dom'
import SVG from './examples/SVG'
import Standard from './examples/Standard'
+import Rotate from './examples/Rotate'
function Demos() {
return (
@@ -32,6 +33,7 @@ function Demos() {
+
)
}