From 78c3427923229ffcad9f8337b4c4c97fb783bb3e Mon Sep 17 00:00:00 2001 From: Konstantinos Kaloutas Date: Tue, 18 Apr 2023 17:12:32 +0300 Subject: [PATCH] style: run prettier --- .../components/ContextMenu/ContextMenu.tsx | 323 +++++++++--------- .../tldraw-logseq/src/lib/shapes/BoxShape.tsx | 9 +- .../tldraw-logseq/src/lib/shapes/DotShape.tsx | 10 +- .../src/lib/shapes/EllipseShape.tsx | 10 +- .../src/lib/shapes/HTMLShape.tsx | 9 +- .../src/lib/shapes/HighlighterShape.tsx | 4 +- .../src/lib/shapes/IFrameShape.tsx | 11 +- .../src/lib/shapes/ImageShape.tsx | 9 +- .../src/lib/shapes/LineShape.tsx | 10 +- .../src/lib/shapes/LogseqPortalShape.tsx | 24 +- .../tldraw-logseq/src/lib/shapes/PenShape.tsx | 2 +- .../src/lib/shapes/PencilShape.tsx | 2 +- .../src/lib/shapes/PolygonShape.tsx | 2 +- .../src/lib/shapes/TextShape.tsx | 2 +- .../src/lib/shapes/TweetShape.tsx | 26 +- .../src/lib/shapes/VideoShape.tsx | 9 +- .../src/lib/shapes/YouTubeShape.tsx | 11 +- tldraw/packages/core/src/lib/TLApp/TLApp.ts | 6 +- .../src/components/Indicator/Indicator.tsx | 6 +- .../SelectionForeground.tsx | 206 +++++------ 20 files changed, 395 insertions(+), 296 deletions(-) diff --git a/tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx b/tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx index a89e16ec9..7b957307f 100644 --- a/tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx +++ b/tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx @@ -56,77 +56,81 @@ export const ContextMenu = observer(function ContextMenu({ tabIndex={-1} >
- {app.selectedShapes?.size > 1 && !app.readOnly && app.selectedShapesArray?.some(s => !s.props.isLocked) && ( - <> - -
- - - - - -
-
- - - - - -
- - - runAndTransition(app.packIntoRectangle)} - > - - Pack into rectangle - - - - )} + {app.selectedShapes?.size > 1 && + !app.readOnly && + app.selectedShapesArray?.some(s => !s.props.isLocked) && ( + <> + +
+ + + + + +
+
+ + + + + +
+ + + runAndTransition(app.packIntoRectangle)} + > + + Pack into rectangle + + + + )} {app.selectedShapes?.size > 0 && ( <> )} - {app.selectedShapesArray.length > 1 && app.selectedShapesArray?.some(s => !s.props.isLocked) && ( - runAndTransition(app.api.doGroup)} - > - - Group -
- - {MOD_KEY} G - -
- - )} + {app.selectedShapesArray.length > 1 && + app.selectedShapesArray?.some(s => !s.props.isLocked) && ( + runAndTransition(app.api.doGroup)} + > + + Group +
+ + {MOD_KEY} G + +
+ + )} )} @@ -295,83 +300,85 @@ export const ContextMenu = observer(function ContextMenu({ Unlock )} - {app.selectedShapes?.size > 0 && !app.readOnly && app.selectedShapesArray?.some(s => !s.props.isLocked) && ( - <> - runAndTransition(app.api.deleteShapes)} - > - - Delete -
- - Del - -
- - {app.selectedShapes?.size > 1 && !app.readOnly && ( - <> - - runAndTransition(app.flipHorizontal)} - > - - Flip horizontally - - runAndTransition(app.flipVertical)} - > - - Flip vertically - - - )} - {!app.readOnly && ( - <> - - runAndTransition(app.bringToFront)} - > - Move to front -
- - ⇧ ] - -
- - runAndTransition(app.sendToBack)} - > - Move to back -
- - ⇧ [ - -
- - - )} - - {developerMode && ( + {app.selectedShapes?.size > 0 && + !app.readOnly && + app.selectedShapesArray?.some(s => !s.props.isLocked) && ( + <> { - if (app.selectedShapesArray.length === 1) { - console.log(toJS(app.selectedShapesArray[0].serialized)) - } else { - console.log(app.selectedShapesArray.map(s => toJS(s.serialized))) - } - }} + onClick={() => runAndTransition(app.api.deleteShapes)} > - (Dev) Print shape props + + Delete +
+ + Del + +
- )} - - )} + {app.selectedShapes?.size > 1 && !app.readOnly && ( + <> + + runAndTransition(app.flipHorizontal)} + > + + Flip horizontally + + runAndTransition(app.flipVertical)} + > + + Flip vertically + + + )} + {!app.readOnly && ( + <> + + runAndTransition(app.bringToFront)} + > + Move to front +
+ + ⇧ ] + +
+ + runAndTransition(app.sendToBack)} + > + Move to back +
+ + ⇧ [ + +
+ + + )} + + {developerMode && ( + { + if (app.selectedShapesArray.length === 1) { + console.log(toJS(app.selectedShapesArray[0].serialized)) + } else { + console.log(app.selectedShapesArray.map(s => toJS(s.serialized))) + } + }} + > + (Dev) Print shape props + + )} + + )}
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx index a60bad947..876068ca3 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx @@ -172,7 +172,14 @@ export class BoxShape extends TLBoxShape { return ( - + ) }) diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/DotShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/DotShape.tsx index 38fa01545..26edd9a9d 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/shapes/DotShape.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/DotShape.tsx @@ -44,7 +44,15 @@ export class DotShape extends TLDotShape { ReactIndicator = observer(() => { const { radius, isLocked } = this.props - return + return ( + + ) }) validateProps = (props: Partial) => { diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx index f0500dd3d..3fb4a3c51 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx @@ -159,7 +159,15 @@ export class EllipseShape extends TLEllipseShape { return ( - + ) }) diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/HTMLShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/HTMLShape.tsx index 17d4e7ce3..90af1dcd4 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/shapes/HTMLShape.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/HTMLShape.tsx @@ -139,7 +139,14 @@ export class HTMLShape extends TLBoxShape { isLocked, }, } = this - return + return ( + + ) }) validateProps = (props: Partial) => { diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/HighlighterShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/HighlighterShape.tsx index d4eaa7903..968263fae 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/shapes/HighlighterShape.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/HighlighterShape.tsx @@ -84,7 +84,9 @@ export class HighlighterShape extends TLDrawShape { ReactIndicator = observer(() => { const { pointsPath, props } = this - return + return ( + + ) }) validateProps = (props: Partial) => { diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx index c75fda9ba..939f8da63 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx @@ -85,6 +85,15 @@ export class IFrameShape extends TLBoxShape { isLocked, }, } = this - return + return ( + + ) }) } diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/ImageShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/ImageShape.tsx index e9c3dc5d6..0a6f970e4 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/shapes/ImageShape.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/ImageShape.tsx @@ -77,7 +77,14 @@ export class ImageShape extends TLImageShape { isLocked, }, } = this - return + return ( + + ) }) getShapeSVGJsx({ assets }: { assets: TLAsset[] }) { diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx index 4a7b04ea7..9f3f0ec84 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx @@ -77,7 +77,7 @@ export class LineShape extends TLLineShape { const labelSize = label || isEditing ? getTextLabelSize( - label || "Enter text", + label || 'Enter text', { fontFamily: 'var(--ls-font-family)', fontSize, lineHeight: 1, fontWeight }, 6 ) @@ -99,7 +99,11 @@ export class LineShape extends TLLineShape { [label] ) return ( -
+
{ decorations?.start, decorations?.end )} - strokeDasharray={isLocked ? "8 2" : "undefined"} + strokeDasharray={isLocked ? '8 2' : 'undefined'} /> {label && !isEditing && (
{children}
@@ -536,7 +537,16 @@ export class LogseqPortalShape extends TLBoxShape { ReactIndicator = observer(() => { const bounds = this.getBounds() - return + return ( + + ) }) validateProps = (props: Partial) => { diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/PenShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/PenShape.tsx index 347809993..31126ac08 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/shapes/PenShape.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/PenShape.tsx @@ -66,7 +66,7 @@ export class PenShape extends TLDrawShape { ReactIndicator = observer(() => { const { pointsPath } = this - return + return }) validateProps = (props: Partial) => { diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/PencilShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/PencilShape.tsx index ee019870d..f59afe7b6 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/shapes/PencilShape.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/PencilShape.tsx @@ -133,7 +133,7 @@ export class PencilShape extends TLDrawShape { ReactIndicator = observer(() => { const { pointsPath } = this - return + return }) validateProps = (props: Partial) => { diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx index c14f00c9e..b5a36565d 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx @@ -176,7 +176,7 @@ export class PolygonShape extends TLPolygonShape { ) diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/TextShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/TextShape.tsx index 5654ad894..25f64a095 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/shapes/TextShape.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/TextShape.tsx @@ -250,7 +250,7 @@ export class TextShape extends TLTextShape { rx={borderRadius} ry={borderRadius} fill="transparent" - strokeDasharray={isLocked ? "8 2" : "undefined"} + strokeDasharray={isLocked ? '8 2' : 'undefined'} /> ) }) diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/TweetShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/TweetShape.tsx index 5c7d4eb1e..77d560ef5 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/shapes/TweetShape.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/TweetShape.tsx @@ -90,10 +90,10 @@ export class TweetShape extends TLBoxShape { }} > {this.embedId ? ( -
- -
- ) : (null)} +
+ +
+ ) : null}
) @@ -106,7 +106,16 @@ export class TweetShape extends TLBoxShape { isLocked, }, } = this - return + return ( + + ) }) useComponentSize(ref: React.RefObject | null, selector = '') { @@ -192,12 +201,7 @@ export class TweetShape extends TLBoxShape { if (embedId) { return ( - + { isLocked, }, } = this - return + return ( + + ) }) } diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/YouTubeShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/YouTubeShape.tsx index 6f1ed4906..0d636fd5c 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/shapes/YouTubeShape.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/YouTubeShape.tsx @@ -122,7 +122,16 @@ export class YouTubeShape extends TLBoxShape { isLocked, }, } = this - return + return ( + + ) }) validateProps = (props: Partial) => { diff --git a/tldraw/packages/core/src/lib/TLApp/TLApp.ts b/tldraw/packages/core/src/lib/TLApp/TLApp.ts index fcfdd9409..9e83e6900 100644 --- a/tldraw/packages/core/src/lib/TLApp/TLApp.ts +++ b/tldraw/packages/core/src/lib/TLApp/TLApp.ts @@ -336,9 +336,11 @@ export class TLApp< } @action updateShapes = (shapes: ({ id: string } & Partial)[]): this => { - if (this.readOnly ) return this + if (this.readOnly) return this - const shapesToUpdate = shapes.map(shape => this.getShapeById(shape.id)).filter(shape => shape?.props.isLocked) + const shapesToUpdate = shapes + .map(shape => this.getShapeById(shape.id)) + .filter(shape => shape?.props.isLocked) if (shapesToUpdate.length === 0) return this diff --git a/tldraw/packages/react/src/components/Indicator/Indicator.tsx b/tldraw/packages/react/src/components/Indicator/Indicator.tsx index 6e1155e33..c40b28e2e 100644 --- a/tldraw/packages/react/src/components/Indicator/Indicator.tsx +++ b/tldraw/packages/react/src/components/Indicator/Indicator.tsx @@ -40,7 +40,11 @@ export const Indicator = observer(function Shape({ zIndex={isEditing ? 1000 : 10000} > - + - {shapes.length > 0 && - {!app.editingShape && ()} - - - - - - - - - {canResize?.every(r => r) && ( - <> - 0 && ( + + {!app.editingShape && ( + + )} + + + + + - - - - + {canResize?.every(r => r) && ( + <> + + + + + + )} + )} - } ) })