From c014fd1f5e3da9043752070550453b7ef466ca7b Mon Sep 17 00:00:00 2001
From: Timmy Willison <4timmywil@gmail.com>
Date: Wed, 15 Jan 2020 20:06:34 -0500
Subject: [PATCH] docs(demo): add special rotation examples

---
 demo/Demo.tsx                   |  4 ++-
 demo/demo.css                   |  4 +++
 demo/examples/DisabledYAxis.tsx |  2 +-
 demo/examples/Rotate.tsx        | 57 +++++++++++++++++++++++++++++++++
 demo/examples/Standard.tsx      |  2 +-
 demo/index.tsx                  |  2 ++
 6 files changed, 68 insertions(+), 3 deletions(-)
 create mode 100644 demo/examples/Rotate.tsx

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 (
     <div className="demo">
       <a
@@ -16,6 +17,7 @@ export default function Demo({ title, code, children }: Props) {
         <h2>{title}</h2>
       </a>
       {code}
+      {subtitle && <p>{subtitle}</p>}
       <div className="live-example">{children}</div>
     </div>
   )
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 = <Code>{`Panzoom(elem, { disableYAxis: true })`}</Code>
 
-export default function ContainInside() {
+export default function DisabledYAxis() {
   const elem = useRef<HTMLDivElement>(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 = (
+  <Code>{`const panzoom = Panzoom(elem, {
+  setTransform: (_, { scale, x, y }) => {
+    panzoom.setStyle('transform', \`rotate($\{x / 20}deg) scale($\{scale}) translate($\{x}px, $\{y}px)\`)
+  }
+})`}</Code>
+)
+
+const code2 = <Code>{`Panzoom(elem)`}</Code>
+
+export default function Rotate() {
+  const elem = useRef<HTMLDivElement>(null)
+  const elem2 = useRef<HTMLDivElement>(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 (
+    <>
+      <Demo
+        title="Adding on matrix functions to the transform"
+        subtitle="Warning: the setTransform option should be used with caution. Most cases can be handled by adding a parent element and applying any special transforms to the child (see the next example)."
+        code={code}>
+        <div className="panzoom-parent">
+          <div className="panzoom" ref={elem} style={{ width: '400px', margin: '0 auto' }}>
+            <img style={{ width: '100%', height: '100%' }} src="awesome_tiger.svg" />
+          </div>
+        </div>
+      </Demo>
+      <Demo
+        title="Adding a transform to a child"
+        subtitle="A rotation of 180deg is applied to the image tag. It's almost always better to add any special transforms to a child of the panzoom element instead of the panzoom element."
+        code={code2}>
+        <div className="panzoom-parent">
+          <div className="panzoom" ref={elem2} style={{ width: '400px', margin: '0 auto' }}>
+            <img
+              style={{ width: '100%', height: '100%', transform: 'rotate(180deg)' }}
+              src="awesome_tiger.svg"
+            />
+          </div>
+        </div>
+      </Demo>
+    </>
+  )
+}
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) => {
   </Code>
 )
 
-export default function Buttons() {
+export default function Standard() {
   const elem = useRef<HTMLDivElement>(null)
   const range = useRef<HTMLInputElement>(null)
   const panzoomRef = useRef<PanzoomObject>(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() {
       <ContainInside />
       <ContainOutside />
       <DisabledYAxis />
+      <Rotate />
     </div>
   )
 }