From 7fd0ab75edc88bb017cb25eca6e3ae35b115eed8 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Tue, 27 Jun 2023 15:51:35 +0100
Subject: [PATCH] [improvement] custom shapes example (#1660)

This PR fixes an import in the custom shapes example. It also tweaks the
example to show how buttons and other interactive content should work.

### Change Type

- [x] `documentation`
---
 .../CardShape/CardShapeUtil.tsx               | 19 ++++++++++--
 .../src/3-custom-config/custom-shapes.ts      |  2 +-
 packages/editor/api-report.md                 | 31 +++++++++++++++++++
 packages/editor/src/index.ts                  |  1 +
 .../src/lib/editor/shapes/shared/resizeBox.ts |  2 ++
 5 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/apps/examples/src/3-custom-config/CardShape/CardShapeUtil.tsx b/apps/examples/src/3-custom-config/CardShape/CardShapeUtil.tsx
index d1d24130d..a9989085a 100644
--- a/apps/examples/src/3-custom-config/CardShape/CardShapeUtil.tsx
+++ b/apps/examples/src/3-custom-config/CardShape/CardShapeUtil.tsx
@@ -1,11 +1,12 @@
-import { resizeBox } from '@tldraw/editor/src/lib/editor/shapes/shared/resizeBox'
 import {
 	Box2d,
 	HTMLContainer,
 	ShapeUtil,
 	TLOnResizeHandler,
 	getDefaultColorTheme,
+	resizeBox,
 } from '@tldraw/tldraw'
+import { useState } from 'react'
 import { ICardShape } from './card-shape-types'
 
 // A utility class for the card shape. This is where you define
@@ -38,20 +39,34 @@ export class CardShapeUtil extends ShapeUtil<ICardShape> {
 		const bounds = this.editor.getBounds(shape)
 		const theme = getDefaultColorTheme(this.editor)
 
+		// Unfortunately eslint will think this is a class components
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		const [count, setCount] = useState(0)
+
 		return (
 			<HTMLContainer
 				id={shape.id}
 				style={{
 					border: '1px solid black',
 					display: 'flex',
+					flexDirection: 'column',
 					alignItems: 'center',
 					justifyContent: 'center',
 					pointerEvents: 'all',
+					backgroundColor: theme[shape.props.color].semi,
 					fontWeight: shape.props.weight,
 					color: theme[shape.props.color].solid,
 				}}
 			>
-				{bounds.w.toFixed()}x{bounds.h.toFixed()}
+				<h2>Clicks: {count}</h2>
+				<button
+					onClick={() => setCount((count) => count + 1)}
+					// You need to stop the pointer down event on buttons
+					// that should prevent shape selection or click and drag
+					onPointerDown={(e) => e.stopPropagation()}
+				>
+					{bounds.w.toFixed()}x{bounds.h.toFixed()}
+				</button>
 			</HTMLContainer>
 		)
 	}
diff --git a/apps/examples/src/3-custom-config/custom-shapes.ts b/apps/examples/src/3-custom-config/custom-shapes.ts
index 7c026fae4..36f91797f 100644
--- a/apps/examples/src/3-custom-config/custom-shapes.ts
+++ b/apps/examples/src/3-custom-config/custom-shapes.ts
@@ -1,3 +1,3 @@
-import { CardShape } from '../16-custom-styles/CardShape'
+import { CardShape } from './CardShape/CardShape'
 
 export const customShapes = [CardShape]
diff --git a/packages/editor/api-report.md b/packages/editor/api-report.md
index 4f267aa61..131a5af12 100644
--- a/packages/editor/api-report.md
+++ b/packages/editor/api-report.md
@@ -1821,6 +1821,37 @@ export const REMOVE_SYMBOL: unique symbol;
 // @public (undocumented)
 export type RequiredKeys<T, K extends keyof T> = Pick<T, K> & Partial<T>;
 
+// @public (undocumented)
+export function resizeBox(shape: TLBaseBoxShape, info: {
+    newPoint: Vec2dModel;
+    handle: TLResizeHandle;
+    mode: TLResizeMode;
+    scaleX: number;
+    scaleY: number;
+    initialBounds: Box2d;
+    initialShape: TLBaseBoxShape;
+}, opts?: Partial<{
+    minWidth: number;
+    maxWidth: number;
+    minHeight: number;
+    maxHeight: number;
+}>): {
+    x: number;
+    y: number;
+    props: {
+        w: number;
+        h: number;
+    };
+};
+
+// @public (undocumented)
+export type ResizeBoxOptions = Partial<{
+    minWidth: number;
+    maxWidth: number;
+    minHeight: number;
+    maxHeight: number;
+}>;
+
 // @internal (undocumented)
 export const RICH_TYPES: Record<string, boolean>;
 
diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
index 214865d1d..5a4ed9235 100644
--- a/packages/editor/src/index.ts
+++ b/packages/editor/src/index.ts
@@ -139,6 +139,7 @@ export { LineShape } from './lib/editor/shapes/line/LineShape'
 export { LineShapeUtil, getSplineForLineShape } from './lib/editor/shapes/line/LineShapeUtil'
 export { NoteShape } from './lib/editor/shapes/note/NoteShape'
 export { NoteShapeUtil } from './lib/editor/shapes/note/NoteShapeUtil'
+export { resizeBox, type ResizeBoxOptions } from './lib/editor/shapes/shared/resizeBox'
 export { TextShape } from './lib/editor/shapes/text/TextShape'
 export { INDENT, TextShapeUtil } from './lib/editor/shapes/text/TextShapeUtil'
 export { VideoShape } from './lib/editor/shapes/video/VideoShape'
diff --git a/packages/editor/src/lib/editor/shapes/shared/resizeBox.ts b/packages/editor/src/lib/editor/shapes/shared/resizeBox.ts
index 9a34e7668..0b792265d 100644
--- a/packages/editor/src/lib/editor/shapes/shared/resizeBox.ts
+++ b/packages/editor/src/lib/editor/shapes/shared/resizeBox.ts
@@ -4,6 +4,7 @@ import { TLResizeHandle } from '../../types/selection-types'
 import { TLBaseBoxShape } from '../BaseBoxShapeUtil'
 import { TLResizeMode } from '../ShapeUtil'
 
+/** @public */
 export type ResizeBoxOptions = Partial<{
 	minWidth: number
 	maxWidth: number
@@ -11,6 +12,7 @@ export type ResizeBoxOptions = Partial<{
 	maxHeight: number
 }>
 
+/** @public */
 export function resizeBox(
 	shape: TLBaseBoxShape,
 	info: {