Konstantinos Kaloutas 3 лет назад
Родитель
Сommit
ec3e865836

+ 2 - 10
tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx

@@ -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>

+ 48 - 8
tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx

@@ -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" />
             </>

+ 4 - 1
tldraw/apps/tldraw-logseq/src/components/PrimaryTools/PrimaryTools.tsx

@@ -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"

+ 1 - 5
tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx

@@ -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}

+ 2 - 2
tldraw/apps/tldraw-logseq/src/styles.css

@@ -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,

+ 13 - 10
tldraw/packages/core/src/lib/TLApp/TLApp.ts

@@ -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)

+ 0 - 1
tldraw/packages/core/src/utils/SvgPathUtils.ts

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