style: run prettier

pull/6802/head
Konstantinos Kaloutas 2022-09-21 14:12:40 +03:00
parent 09fd3a752f
commit ec3e865836
7 changed files with 70 additions and 37 deletions

View File

@ -234,11 +234,7 @@ const OpenPageAction = observer(() => {
>
<TablerIcon name="layout-sidebar-right" />
</Button>
<Button
title="Open Page"
type="button"
onClick={() => handlers?.redirectToPage(pageId)}
>
<Button title="Open Page" type="button" onClick={() => handlers?.redirectToPage(pageId)}>
<TablerIcon name="external-link" />
</Button>
</span>
@ -269,11 +265,7 @@ const IFrameSourceAction = observer(() => {
value={`${shape.props.url}`}
onChange={handleChange}
/>
<Button
title="Open website url"
type="button"
onClick={() => window.open(shape.props.url)}
>
<Button title="Open website url" type="button" onClick={() => window.open(shape.props.url)}>
<TablerIcon name="external-link" />
</Button>
</span>

View File

@ -42,18 +42,58 @@ export const ContextMenu = observer(function ContextMenu({
{app.selectedShapes?.size > 1 && (
<>
<div className="tl-menu-button-row pb-0">
<Button title="Align left" onClick={() => runAndTransition(() => app.align(AlignType.Left))}><TablerIcon name="layout-align-left" /></Button>
<Button title="Align center horizontally" onClick={() => runAndTransition(() => app.align(AlignType.CenterHorizontal))}><TablerIcon name="layout-align-center" /></Button>
<Button title="Align right" onClick={() => runAndTransition(() => app.align(AlignType.Right))}><TablerIcon name="layout-align-right" /></Button>
<Button
title="Align left"
onClick={() => runAndTransition(() => app.align(AlignType.Left))}
>
<TablerIcon name="layout-align-left" />
</Button>
<Button
title="Align center horizontally"
onClick={() => runAndTransition(() => app.align(AlignType.CenterHorizontal))}
>
<TablerIcon name="layout-align-center" />
</Button>
<Button
title="Align right"
onClick={() => runAndTransition(() => app.align(AlignType.Right))}
>
<TablerIcon name="layout-align-right" />
</Button>
<Separator.Root className="tl-toolbar-separator" orientation="vertical" />
<Button title="Distribute horizontally" onClick={() => runAndTransition(() => app.distribute(DistributeType.Horizontal))}><TablerIcon name="layout-distribute-vertical" /></Button>
<Button
title="Distribute horizontally"
onClick={() => runAndTransition(() => app.distribute(DistributeType.Horizontal))}
>
<TablerIcon name="layout-distribute-vertical" />
</Button>
</div>
<div className="tl-menu-button-row pt-0">
<Button title="Align top" onClick={() => runAndTransition(() => app.align(AlignType.Top))}><TablerIcon name="layout-align-top" /></Button>
<Button title="Align center vertically" onClick={() => runAndTransition(() => app.align(AlignType.CenterVertical))}><TablerIcon name="layout-align-middle" /></Button>
<Button title="Align bottom" onClick={() => runAndTransition(() => app.align(AlignType.Bottom))}><TablerIcon name="layout-align-bottom" /></Button>
<Button
title="Align top"
onClick={() => runAndTransition(() => app.align(AlignType.Top))}
>
<TablerIcon name="layout-align-top" />
</Button>
<Button
title="Align center vertically"
onClick={() => runAndTransition(() => app.align(AlignType.CenterVertical))}
>
<TablerIcon name="layout-align-middle" />
</Button>
<Button
title="Align bottom"
onClick={() => runAndTransition(() => app.align(AlignType.Bottom))}
>
<TablerIcon name="layout-align-bottom" />
</Button>
<Separator.Root className="tl-toolbar-separator" orientation="vertical" />
<Button title="Distribute vertically" onClick={() => runAndTransition(() => app.distribute(DistributeType.Vertical ))}><TablerIcon name="layout-distribute-horizontal" /></Button>
<Button
title="Distribute vertically"
onClick={() => runAndTransition(() => app.distribute(DistributeType.Vertical))}
>
<TablerIcon name="layout-distribute-horizontal" />
</Button>
</div>
<ReactContextMenu.Separator className="menu-separator" />
</>

View File

@ -95,7 +95,10 @@ export const PrimaryTools = observer(function PrimaryTools() {
return (
<div className="tl-primary-tools">
<div className="tl-toolbar tl-tools-floating-panel" data-tool-locked={app.settings.isToolLocked}>
<div
className="tl-toolbar tl-tools-floating-panel"
data-tool-locked={app.settings.isToolLocked}
>
<ToolButton title="Select" id="select" icon="select-cursor" />
<ToolButton
title="Move"

View File

@ -14,11 +14,7 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
<DropdownMenuPrimitive.Trigger className="tl-button text-sm w-auto px-2" id="tl-zoom">
{(app.viewport.camera.zoom * 100).toFixed(0) + '%'}
</DropdownMenuPrimitive.Trigger>
<DropdownMenuPrimitive.Content
className="tl-menu"
id="zoomPopup"
sideOffset={12}
>
<DropdownMenuPrimitive.Content className="tl-menu" id="zoomPopup" sideOffset={12}>
<DropdownMenuPrimitive.Item
className="tl-menu-item"
onSelect={preventEvent}

View File

@ -496,7 +496,7 @@ button.tl-select-input-trigger {
transition-delay: 0;
}
&[data-recently-changed=true] {
&[data-recently-changed='true'] {
i.tie {
transition-delay: 0.5s;
}
@ -801,7 +801,7 @@ html[data-theme='dark'] {
.tl-toolbar-separator {
background-color: var(--ls-border-color);
width: 1px;
opacity: .5;
opacity: 0.5;
}
.tl-youtube-link,

View File

@ -381,8 +381,8 @@ export class TLApp<
align = (type: AlignType, shapes: S[] = this.selectedShapesArray): this => {
if (shapes.length < 2) return this
const boundsForShapes = shapes.map((shape) => {
const bounds = shape.getBounds();
const boundsForShapes = shapes.map(shape => {
const bounds = shape.getBounds()
return {
id: shape.id,
point: [bounds.minX, bounds.minY],
@ -414,27 +414,30 @@ export class TLApp<
})
)
shapes.forEach(shape => shape.update(deltaMap[shape.id] ? { point: deltaMap[shape.id].next } : shape))
shapes.forEach(shape =>
shape.update(deltaMap[shape.id] ? { point: deltaMap[shape.id].next } : shape)
)
this.persist()
return this
}
distribute = (type: DistributeType, shapes: S[] = this.selectedShapesArray): this => {
if (shapes.length < 2) return this
const deltaMap = Object.fromEntries(this.getDistributions(shapes, type).map((d) => [d.id, d]))
const deltaMap = Object.fromEntries(this.getDistributions(shapes, type).map(d => [d.id, d]))
shapes.forEach(shape => shape.update(deltaMap[shape.id] ? { point: deltaMap[shape.id].next } : shape))
shapes.forEach(shape =>
shape.update(deltaMap[shape.id] ? { point: deltaMap[shape.id].next } : shape)
)
this.persist()
return this
}
getDistributions = (shapes: TLShape[], type: DistributeType) => {
const entries = shapes.map((shape) => {
const bounds = shape.getBounds();
const entries = shapes.map(shape => {
const bounds = shape.getBounds()
return {
id: shape.id,
point: [bounds.minX, bounds.minY],
@ -458,7 +461,7 @@ export class TLApp<
const right = entries.sort((a, b) => b.bounds.maxX - a.bounds.maxX)[0]
const entriesToMove = entries
.filter((a) => a !== left && a !== right)
.filter(a => a !== left && a !== right)
.sort((a, b) => a.center[0] - b.center[0])
const step = (right.center[0] - left.center[0]) / (len - 1)
@ -494,7 +497,7 @@ export class TLApp<
const bottom = entries.sort((a, b) => b.bounds.maxY - a.bounds.maxY)[0]
const entriesToMove = entries
.filter((a) => a !== top && a !== bottom)
.filter(a => a !== top && a !== bottom)
.sort((a, b) => a.center[1] - b.center[1])
const step = (bottom.center[1] - top.center[1]) / (len - 1)

View File

@ -1,4 +1,3 @@
export class SvgPathUtils {
static getCurvedPathForPolygon(points: number[][]) {
if (points.length < 3) {