mirror
/
Tldraw
kopia lustrzana https://github.com/Tldraw/Tldraw
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

add note preview shapes

pull/3301/head
Taha 2024-03-28 15:52:22 +00:00
rodzic f333edddb0
commit effb19c610
5 zmienionych plików z 169 dodań i 5 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

13
packages/editor/src/lib/components/default-components/DefaultHandle.tsx
Wyświetl plik

@ -16,6 +16,19 @@ export function DefaultHandle({ handle, isCoarse, className, zoom }: TLHandlePro
const bgRadius = (isCoarse ? COARSE_HANDLE_RADIUS : HANDLE_RADIUS) / zoom
const fgRadius = (handle.type === 'create' && isCoarse ? 3 : 4) / zoom
// todo: this is bad
// @ts-expect-error
if (handle.type === 'note-create') {
return (
<rect
className="tl-handle tl-handle__create"
width={200}
height={200}
fill="rgba(255,192,120,0.2)"
/>
)
}
return (
<g
className={classNames(

7
packages/tldraw/api-report.md
Wyświetl plik

@ -1169,8 +1169,15 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
typeName: "shape";
} | undefined;
// (undocumented)
onDoubleClickHandle: (shape: TLNoteShape) => TLNoteShape;
// (undocumented)
onEditEnd: TLOnEditEndHandler<TLNoteShape>;
// (undocumented)
onHandlePointerDown: ({ shape, handleId }: {
shape: TLNoteShape;
handleId: NoteHandleId;
}) => void;
// (undocumented)
static props: {
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;

92
packages/tldraw/api/api.json
Wyświetl plik

@ -13441,6 +13441,50 @@
"isProtected": false,
"isAbstract": false
},
{
"kind": "Property",
"canonicalReference": "tldraw!NoteShapeUtil#onDoubleClickHandle:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "onDoubleClickHandle: "
},
{
"kind": "Content",
"text": "(shape: "
},
{
"kind": "Reference",
"text": "TLNoteShape",
"canonicalReference": "@tldraw/tlschema!TLNoteShape:type"
},
{
"kind": "Content",
"text": ") => "
},
{
"kind": "Reference",
"text": "TLNoteShape",
"canonicalReference": "@tldraw/tlschema!TLNoteShape:type"
},
{
"kind": "Content",
"text": ";"
}
],
"isReadonly": false,
"isOptional": false,
"releaseTag": "Public",
"name": "onDoubleClickHandle",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 5
},
"isStatic": false,
"isProtected": false,
"isAbstract": false
},
{
"kind": "Property",
"canonicalReference": "tldraw!NoteShapeUtil#onEditEnd:member",
@ -13485,6 +13529,54 @@
"isProtected": false,
"isAbstract": false
},
{
"kind": "Property",
"canonicalReference": "tldraw!NoteShapeUtil#onHandlePointerDown:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "onHandlePointerDown: "
},
{
"kind": "Content",
"text": "({ shape, handleId }: {\n shape: "
},
{
"kind": "Reference",
"text": "TLNoteShape",
"canonicalReference": "@tldraw/tlschema!TLNoteShape:type"
},
{
"kind": "Content",
"text": ";\n handleId: "
},
{
"kind": "Reference",
"text": "NoteHandleId",
"canonicalReference": "tldraw!~NoteHandleId:type"
},
{
"kind": "Content",
"text": ";\n }) => void"
},
{
"kind": "Content",
"text": ";"
}
],
"isReadonly": false,
"isOptional": false,
"releaseTag": "Public",
"name": "onHandlePointerDown",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 6
},
"isStatic": false,
"isProtected": false,
"isAbstract": false
},
{
"kind": "Property",
"canonicalReference": "tldraw!NoteShapeUtil.props:member",

47
packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx
Wyświetl plik

@ -20,6 +20,15 @@ import { getFontDefForExport } from '../shared/defaultStyleDefs'
export const NOTE_SIZE = 200
export const NOTE_GRID_OFFSET = 230
type NoteHandleId =
| 'note-button-up'
| 'note-preview-up'
| 'note-button-down'
| 'note-preview-down'
| 'note-button-left'
| 'note-preview-left'
| 'note-button-right'
| 'note-preview-right'
/** @public */
export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
@ -47,7 +56,12 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
{ x: 0.5, y: 1.1 },
{ x: -0.1, y: 0.5 },
],
previews: [{ x: 0, y: 0 }],
previews: [
{ x: 0, y: -1.14 },
{ x: 1.14, y: 0 },
{ x: 0, y: 1.14 },
{ x: -1.14, y: 0 },
],
}
}
@ -64,10 +78,10 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
}))
const previewsArr = previews.map((preview, i) => ({
id: 'note-preview-' + directionArr[i],
type: 'create',
type: 'note-create',
index: `${i}`,
x: preview.x,
y: preview.y,
x: preview.x * NOTE_SIZE,
y: preview.y * NOTE_SIZE,
canSnap: true,
}))
return [...previewsArr, ...buttonsArr] as TLHandle[]
@ -208,6 +222,31 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
])
}
}
onHandlePointerDown = ({ shape, handleId }: { shape: TLNoteShape; handleId: NoteHandleId }) => {
const getOffset = (handleId: NoteHandleId, shape: TLNoteShape) => {
switch (handleId) {
case 'note-button-right':
case 'note-preview-right':
return { x: shape.x + NOTE_GRID_OFFSET, y: shape.y }
case 'note-button-left':
case 'note-preview-left':
return { x: shape.x - NOTE_GRID_OFFSET, y: shape.y }
case 'note-button-up':
case 'note-preview-up':
return { x: shape.x, y: shape.y - NOTE_GRID_OFFSET }
case 'note-button-down':
case 'note-preview-down':
return { x: shape.x, y: shape.y + NOTE_GRID_OFFSET }
default:
throw new Error('this should not happen')
}
}
const offset = getOffset(handleId, shape)
this.editor.createShape({ type: 'note', x: offset.x, y: offset.y })
}
override onDoubleClickHandle = (shape: TLNoteShape) => {
return shape
}
}
function getGrowY(editor: Editor, shape: TLNoteShape, prevGrowY = 0) {

15
packages/tldraw/src/lib/tools/SelectTool/childStates/PointingHandle.ts
Wyświetl plik

@ -1,4 +1,10 @@
import { StateNode, TLArrowShape, TLEventHandlers, TLPointerEventInfo } from '@tldraw/editor'
import {
StateNode,
TLArrowShape,
TLEventHandlers,
TLNoteShape,
TLPointerEventInfo,
} from '@tldraw/editor'
export class PointingHandle extends StateNode {
static override id = 'pointing_handle'
@ -16,6 +22,13 @@ export class PointingHandle extends StateNode {
this.editor.setHintingShapes([initialTerminal.boundShapeId])
}
}
if (this.editor.isShapeOfType<TLNoteShape>(shape, 'note')) {
this.editor
.getShapeUtil<TLNoteShape>(shape)
// todo: fix this
// @ts-expect-error
.onHandlePointerDown({ shape, handleId: this.info.handle.id })
}
this.editor.updateInstanceState(
{ cursor: { type: 'grabbing', rotation: 0 } },