From 56ad161825eaea83af8068bab70baae02ab34e17 Mon Sep 17 00:00:00 2001 From: "Lu[ke] Wilson" Date: Wed, 20 Mar 2024 09:54:50 +0000 Subject: [PATCH] surface experiment --- .../src/examples/surface/SurfaceExample.tsx | 28 ++++---- packages/tldraw/api-report.md | 6 +- packages/tldraw/api/api.json | 66 ++++++++++++++++++- .../src/lib/shapes/frame/FrameShapeUtil.tsx | 42 ++++++++---- .../Toolbar/DefaultToolbarContent.tsx | 2 +- .../tldraw/src/lib/ui/context/actions.tsx | 3 +- 6 files changed, 116 insertions(+), 31 deletions(-) diff --git a/apps/examples/src/examples/surface/SurfaceExample.tsx b/apps/examples/src/examples/surface/SurfaceExample.tsx index 56b540412..6ecdf0145 100644 --- a/apps/examples/src/examples/surface/SurfaceExample.tsx +++ b/apps/examples/src/examples/surface/SurfaceExample.tsx @@ -4,7 +4,6 @@ import { DefaultKeyboardShortcutsDialogContent, DefaultToolbar, DefaultToolbarContent, - HTMLContainer, Rectangle2d, ShapeUtil, T, @@ -18,6 +17,7 @@ import { useIsToolSelected, useTools, } from 'tldraw' +import { getRotatedBoxShadow } from 'tldraw/src/lib/shapes/shared/rotated-box-shadow' import 'tldraw/tldraw.css' export type SurfaceShape = TLBaseShape< @@ -51,19 +51,21 @@ export class SurfaceShapeUtil extends ShapeUtil { } component(shape: SurfaceShape) { + const pageRotation = this.editor.getShapePageTransform(shape)!.rotation() + return ( - + <> +
+ ) } diff --git a/packages/tldraw/api-report.md b/packages/tldraw/api-report.md index 5b45dafe6..ad49add09 100644 --- a/packages/tldraw/api-report.md +++ b/packages/tldraw/api-report.md @@ -642,7 +642,11 @@ export class FrameShapeUtil extends BaseBoxShapeUtil { // (undocumented) getGeometry(shape: TLFrameShape): Geometry2d; // (undocumented) - indicator(shape: TLFrameShape): JSX_2.Element; + hideResizeHandles: () => boolean; + // (undocumented) + hideSelectionBoundsFg: () => boolean; + // (undocumented) + indicator(shape: TLFrameShape): JSX_2.Element | null; // (undocumented) static migrations: Migrations; // (undocumented) diff --git a/packages/tldraw/api/api.json b/packages/tldraw/api/api.json index 48b0f4a74..15556838e 100644 --- a/packages/tldraw/api/api.json +++ b/packages/tldraw/api/api.json @@ -7374,6 +7374,66 @@ "isAbstract": false, "name": "getGeometry" }, + { + "kind": "Property", + "canonicalReference": "tldraw!FrameShapeUtil#hideResizeHandles:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "hideResizeHandles: " + }, + { + "kind": "Content", + "text": "() => boolean" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": false, + "releaseTag": "Public", + "name": "hideResizeHandles", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isStatic": false, + "isProtected": false, + "isAbstract": false + }, + { + "kind": "Property", + "canonicalReference": "tldraw!FrameShapeUtil#hideSelectionBoundsFg:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "hideSelectionBoundsFg: " + }, + { + "kind": "Content", + "text": "() => boolean" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": false, + "releaseTag": "Public", + "name": "hideSelectionBoundsFg", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isStatic": false, + "isProtected": false, + "isAbstract": false + }, { "kind": "Method", "canonicalReference": "tldraw!FrameShapeUtil#indicator:member(1)", @@ -7401,6 +7461,10 @@ "text": "JSX.Element", "canonicalReference": "@types/react!JSX.Element:interface" }, + { + "kind": "Content", + "text": " | null" + }, { "kind": "Content", "text": ";" @@ -7409,7 +7473,7 @@ "isStatic": false, "returnTypeTokenRange": { "startIndex": 3, - "endIndex": 5 + "endIndex": 6 }, "releaseTag": "Public", "isProtected": false, diff --git a/packages/tldraw/src/lib/shapes/frame/FrameShapeUtil.tsx b/packages/tldraw/src/lib/shapes/frame/FrameShapeUtil.tsx index 8d540c14b..b2bdf681c 100644 --- a/packages/tldraw/src/lib/shapes/frame/FrameShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/frame/FrameShapeUtil.tsx @@ -1,8 +1,8 @@ import { BaseBoxShapeUtil, Geometry2d, + HTMLContainer, Rectangle2d, - SVGContainer, SelectionEdge, SvgExportContext, TLFrameShape, @@ -20,10 +20,9 @@ import { toDomPrecision, useValue, } from '@tldraw/editor' -import classNames from 'classnames' import { useDefaultColorTheme } from '../shared/ShapeFill' import { createTextSvgElementFromSpans } from '../shared/createTextSvgElementFromSpans' -import { FrameHeading } from './components/FrameHeading' +import { getRotatedBoxShadow } from '../shared/rotated-box-shadow' export function defaultEmptyAs(str: string, dflt: string) { if (str.match(/^\s*$/)) { @@ -38,6 +37,10 @@ export class FrameShapeUtil extends BaseBoxShapeUtil { static override props = frameShapeProps static override migrations = frameShapeMigrations + // override canResize = () => false + override hideSelectionBoundsFg = () => true + override hideResizeHandles = () => true + override canBind = () => true override canEdit = () => true @@ -73,26 +76,36 @@ export class FrameShapeUtil extends BaseBoxShapeUtil { }, [shape.id] ) + const pageRotation = this.editor.getShapePageTransform(shape)!.rotation() return ( <> - - +
- - {isCreating ? null : ( + + {/* {isCreating ? null : ( - )} + )} */} ) } @@ -188,9 +201,10 @@ export class FrameShapeUtil extends BaseBoxShapeUtil { indicator(shape: TLFrameShape) { const bounds = this.editor.getShapeGeometry(shape).bounds - + return null return ( + return } /** @public */ diff --git a/packages/tldraw/src/lib/ui/context/actions.tsx b/packages/tldraw/src/lib/ui/context/actions.tsx index 9fef8816e..5737e3fb5 100644 --- a/packages/tldraw/src/lib/ui/context/actions.tsx +++ b/packages/tldraw/src/lib/ui/context/actions.tsx @@ -559,7 +559,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) { { id: 'remove-frame', label: 'action.remove-frame', - kbd: '$!f', + kbd: '\\', onSelect(source) { if (!canApplySelectionAction()) return @@ -574,6 +574,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) { editor, selectedShapes.map((shape) => shape.id) ) + editor.selectNone() } }, },