kopia lustrzana https://github.com/Tldraw/Tldraw
surface experiment
Lu[ke] Wilson
rodzic
7128b9b55c
commit
56ad161825
|
|
@ -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<SurfaceShape> {
|
|||
}
|
||||
|
||||
component(shape: SurfaceShape) {
|
||||
const pageRotation = this.editor.getShapePageTransform(shape)!.rotation()
|
||||
|
||||
return (
|
||||
<HTMLContainer
|
||||
id={shape.id}
|
||||
style={{
|
||||
border: '1px solid black',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
pointerEvents: 'all',
|
||||
backgroundColor: 'blue',
|
||||
}}
|
||||
></HTMLContainer>
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
backgroundColor: 'var(--color-background)',
|
||||
boxShadow: getRotatedBoxShadow(pageRotation),
|
||||
borderRadius: 'var(--radius-2)',
|
||||
}}
|
||||
></div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -642,7 +642,11 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
|
|||
// (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)
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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<TLFrameShape> {
|
|||
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<TLFrameShape> {
|
|||
},
|
||||
[shape.id]
|
||||
)
|
||||
const pageRotation = this.editor.getShapePageTransform(shape)!.rotation()
|
||||
|
||||
return (
|
||||
<>
|
||||
<SVGContainer>
|
||||
<rect
|
||||
className={classNames('tl-frame__body', { 'tl-frame__creating': isCreating })}
|
||||
width={bounds.width}
|
||||
height={bounds.height}
|
||||
fill={theme.solid}
|
||||
stroke={theme.text}
|
||||
<HTMLContainer>
|
||||
<div
|
||||
// className={classNames('tl-frame__body', { 'tl-frame__creating': isCreating })}
|
||||
// width={bounds.width}
|
||||
// height={bounds.height}
|
||||
// fill={theme.solid}
|
||||
// stroke={theme.text}
|
||||
// rx="15"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
backgroundColor: isCreating ? 'transparent' : 'var(--color-background)',
|
||||
boxShadow: getRotatedBoxShadow(pageRotation),
|
||||
borderRadius: 'var(--radius-2)',
|
||||
}}
|
||||
/>
|
||||
</SVGContainer>
|
||||
{isCreating ? null : (
|
||||
</HTMLContainer>
|
||||
{/* {isCreating ? null : (
|
||||
<FrameHeading
|
||||
id={shape.id}
|
||||
name={shape.props.name}
|
||||
width={bounds.width}
|
||||
height={bounds.height}
|
||||
/>
|
||||
)}
|
||||
)} */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -188,9 +201,10 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
|
|||
|
||||
indicator(shape: TLFrameShape) {
|
||||
const bounds = this.editor.getShapeGeometry(shape).bounds
|
||||
|
||||
return null
|
||||
return (
|
||||
<rect
|
||||
rx="6"
|
||||
width={toDomPrecision(bounds.width)}
|
||||
height={toDomPrecision(bounds.height)}
|
||||
className={`tl-frame-indicator`}
|
||||
|
|
|
|||
|
|
@ -239,7 +239,7 @@ export function HighlightToolbarItem() {
|
|||
export function FrameToolbarItem() {
|
||||
const tools = useTools()
|
||||
const isSelected = useIsToolSelected(tools['frame'])
|
||||
return <TldrawUiMenuItem {...tools['frame']} isSelected={isSelected} />
|
||||
return <TldrawUiMenuItem {...tools['frame']} isSelected={isSelected} icon="group" />
|
||||
}
|
||||
|
||||
/** @public */
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue