styles: run prettier

2026-05-27 22:24:09 +00:00 · 2022-11-01 10:26:52 +02:00
parent 73424da281
commit 7573ae709e
12 changed files with 83 additions and 50 deletions
--- a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
@@ -57,7 +57,14 @@ const contextBarActionMapping = new Map<ContextBarActionType, React.FC>()
 type ShapeType = Shape['props']['type']

 export const shapeMapping: Partial<Record<ShapeType, ContextBarActionType[]>> = {
-  'logseq-portal': ['Swatch', 'Edit', 'LogseqPortalViewMode', 'ScaleLevel', 'OpenPage', 'AutoResizing'],
+  'logseq-portal': [
+    'Swatch',
+    'Edit',
+    'LogseqPortalViewMode',
+    'ScaleLevel',
+    'OpenPage',
+    'AutoResizing',
+  ],
  youtube: ['YoutubeLink'],
  iframe: ['IFrameSource'],
  box: ['Swatch', 'NoFill', 'StrokeType'],
@@ -346,7 +353,15 @@ const SwatchAction = observer(() => {
  }, [])

  const color = shapes[0].props.noFill ? shapes[0].props.stroke : shapes[0].props.fill
-  return <ColorInput title="Color Picker" color={color} opacity={shapes[0].props.opacity} setOpacity={handleSetOpacity} setColor={handleSetColor} />
+  return (
+    <ColorInput
+      title="Color Picker"
+      color={color}
+      opacity={shapes[0].props.opacity}
+      setOpacity={handleSetOpacity}
+      setColor={handleSetColor}
+    />
+  )
 })

 const StrokeTypeAction = observer(() => {
--- a/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
-import * as Popover from '@radix-ui/react-popover';
-import * as Slider from '@radix-ui/react-slider';
+import * as Popover from '@radix-ui/react-popover'
+import * as Slider from '@radix-ui/react-slider'
 import { TablerIcon } from '../icons'
 import { Color } from '@tldraw/core'
 interface ColorInputProps extends React.InputHTMLAttributes<HTMLButtonElement> {
@@ -14,41 +14,45 @@ export function ColorInput({ color, opacity, setColor, setOpacity, ...rest }: Co
  const ref = React.useRef<HTMLDivElement>(null)

  function renderColor(color: string) {
-    return color ?
-      <div className="tl-color-bg" style={{backgroundColor: color}}>
+    return color ? (
+      <div className="tl-color-bg" style={{ backgroundColor: color }}>
        <div className={`w-full h-full bg-${color}-500`}></div>
-      </div> :
-      <div className={"tl-color-bg"}><TablerIcon name="color-swatch" /></div>
+      </div>
+    ) : (
+      <div className={'tl-color-bg'}>
+        <TablerIcon name="color-swatch" />
+      </div>
+    )
  }

  return (
    <Popover.Root>
-
      <Popover.Trigger>
-        <button className="tl-color-drip mx-1">
-          {renderColor(color)}
-        </button>
+        <button className="tl-color-drip mx-1">{renderColor(color)}</button>
      </Popover.Trigger>

      <Popover.Portal>
-        <Popover.Content
-          className="tl-popover-content"
-          side="top"
-          sideOffset={15}
-        >
-          <div className={"tl-color-palette"}>
-            {Object.values(Color).map(value =>
+        <Popover.Content className="tl-popover-content" side="top" sideOffset={15}>
+          <div className={'tl-color-palette'}>
+            {Object.values(Color).map(value => (
              <button
-                className={`tl-color-drip m-1${value === color ? " active" : ""}`}
-                onClick={()=>setColor(value)}
+                className={`tl-color-drip m-1${value === color ? ' active' : ''}`}
+                onClick={() => setColor(value)}
              >
                {renderColor(value)}
              </button>
-            )}
+            ))}
          </div>

          <div className="m-1">
-            <Slider.Root defaultValue={[opacity]} onValueCommit={(value)=>setOpacity(value[0])} max={1} step={0.1} aria-label="Opacity" className="tl-slider-root">
+            <Slider.Root
+              defaultValue={[opacity]}
+              onValueCommit={value => setOpacity(value[0])}
+              max={1}
+              step={0.1}
+              aria-label="Opacity"
+              className="tl-slider-root"
+            >
              <Slider.Track className="tl-slider-track">
                <Slider.Range className="tl-slider-range" />
              </Slider.Track>
@@ -57,7 +61,6 @@ export function ColorInput({ color, opacity, setColor, setOpacity, ...rest }: Co
          </div>

          <Popover.Arrow className="tl-popover-arrow" />
-
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
--- a/tldraw/apps/tldraw-logseq/src/lib/color.ts
+++ b/tldraw/apps/tldraw-logseq/src/lib/color.ts
@@ -16,7 +16,7 @@ function getMeasurementDiv() {

 export function getComputedColor(color: string, type: string): string {
  if (Object.values(Color).includes(color)) {
-    return `var(--ls-wb-${type}-color-${color ? color : "default"})`;
+    return `var(--ls-wb-${type}-color-${color ? color : 'default'})`
  }

  return color
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx
@@ -64,9 +64,9 @@ export class BoxShape extends TLBoxShape<BoxShapeProps> {
          width={Math.max(0.01, w - strokeWidth)}
          height={Math.max(0.01, h - strokeWidth)}
          strokeWidth={strokeWidth}
-          stroke={getComputedColor(stroke, "stroke")}
+          stroke={getComputedColor(stroke, 'stroke')}
          strokeDasharray={strokeType === 'dashed' ? '8 2' : undefined}
-          fill={noFill ? 'none' : getComputedColor(fill, "background")}
+          fill={noFill ? 'none' : getComputedColor(fill, 'background')}
        />
      </SVGContainer>
    )
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx
@@ -52,9 +52,9 @@ export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
          rx={Math.max(0.01, (w - strokeWidth) / 2)}
          ry={Math.max(0.01, (h - strokeWidth) / 2)}
          strokeWidth={strokeWidth}
-          stroke={getComputedColor(stroke, "stroke")}
+          stroke={getComputedColor(stroke, 'stroke')}
          strokeDasharray={strokeType === 'dashed' ? '8 2' : undefined}
-          fill={noFill ? 'none' : getComputedColor(fill, "background")}
+          fill={noFill ? 'none' : getComputedColor(fill, 'background')}
        />
      </SVGContainer>
    )
@@ -106,9 +106,9 @@ export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
          rx={Math.max(0.01, (w - strokeWidth) / 2)}
          ry={Math.max(0.01, (h - strokeWidth) / 2)}
          strokeWidth={strokeWidth}
-          stroke={getComputedColor(stroke, "stroke")}
+          stroke={getComputedColor(stroke, 'stroke')}
          strokeDasharray={strokeType === 'dashed' ? '8 2' : undefined}
-          fill={noFill ? 'none' : getComputedColor(fill, "background")}
+          fill={noFill ? 'none' : getComputedColor(fill, 'background')}
        />
      </g>
    )
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/HighlighterShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/HighlighterShape.tsx
@@ -49,7 +49,7 @@ export class HighlighterShape extends TLDrawShape<HighlighterShapeProps> {
        <path
          d={pointsPath}
          strokeWidth={strokeWidth * 16}
-          stroke={getComputedColor(stroke, "stroke")}
+          stroke={getComputedColor(stroke, 'stroke')}
          fill="none"
          pointerEvents="all"
          strokeLinejoin="round"
--- 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<LineShapeProps> {
        <TextLabel
          font={font}
          text={label}
-          color={getComputedColor(stroke, "text")}
+          color={getComputedColor(stroke, 'text')}
          offsetX={offset[0]}
          offsetY={offset[1]}
          scale={scale}
@@ -162,7 +162,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
      <>
        <Arrow
          style={{
-            stroke: getComputedColor(stroke, "stroke"),
+            stroke: getComputedColor(stroke, 'stroke'),
            fill,
            strokeWidth,
            strokeType,
@@ -182,8 +182,8 @@ export class LineShape extends TLLineShape<LineShapeProps> {
              fontSize={20}
              transform={`translate(${midPoint[0]}, ${midPoint[1]})`}
              textAnchor="middle"
-              fill={getComputedColor(stroke, "text")}
-              stroke={getComputedColor(stroke, "text")}
+              fill={getComputedColor(stroke, 'text')}
+              stroke={getComputedColor(stroke, 'text')}
            >
              {label}
            </text>
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx
@@ -73,10 +73,25 @@ const LogseqTypeTag = ({

 const LogseqPortalShapeHeader = observer(
  ({ type, fill, children }: { type: 'P' | 'B'; fill: string; children: React.ReactNode }) => {
-    const bgColor = getComputedColor(fill, "background");
+    const bgColor = getComputedColor(fill, 'background')

-    return <div className={`tl-logseq-portal-header tl-logseq-portal-header-${type === "P" ? "page" : "block"}`}
-      style={{background: type === "P" ? bgColor : `linear-gradient(0deg, var(--ls-highlight-color-${fill ? fill : "default"}), ${bgColor}`}}>{children}</div>
+    return (
+      <div
+        className={`tl-logseq-portal-header tl-logseq-portal-header-${
+          type === 'P' ? 'page' : 'block'
+        }`}
+        style={{
+          background:
+            type === 'P'
+              ? bgColor
+              : `linear-gradient(0deg, var(--ls-highlight-color-${
+                  fill ? fill : 'default'
+                }), ${bgColor}`,
+        }}
+      >
+        {children}
+      </div>
+    )
  }
 )

@@ -711,7 +726,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
        ref={cpRefContainer}
        className="tl-logseq-cp-container"
        style={{
-          background: fill ? `var(--ls-highlight-color-${fill})` : "transparent",
+          background: fill ? `var(--ls-highlight-color-${fill})` : 'transparent',
          overflow: this.props.isAutoResizing ? 'visible' : 'auto',
        }}
      >
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/PenShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/PenShape.tsx
@@ -57,8 +57,8 @@ export class PenShape extends TLDrawShape<PenShapeProps> {
        <path
          d={pointsPath}
          strokeWidth={strokeWidth}
-          stroke={getComputedColor(stroke, "stroke")}
-          fill={getComputedColor(stroke, "stroke")}
+          stroke={getComputedColor(stroke, 'stroke')}
+          fill={getComputedColor(stroke, 'stroke')}
          pointerEvents="all"
        />
      </SVGContainer>
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/PencilShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/PencilShape.tsx
@@ -132,8 +132,8 @@ export class PencilShape extends TLDrawShape<PencilShapeProps> {
        strokeWidth={strokeWidth / 2}
        strokeLinejoin="round"
        strokeLinecap="round"
-        stroke={getComputedColor(stroke, "stroke")}
-        fill={getComputedColor(stroke, "stroke")}
+        stroke={getComputedColor(stroke, 'stroke')}
+        fill={getComputedColor(stroke, 'stroke')}
        strokeDasharray={strokeType === 'dashed' ? '12 4' : undefined}
      />
    )
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx
@@ -44,8 +44,8 @@ export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
          />
          <polygon
            points={path}
-            stroke={getComputedColor(stroke, "stroke")}
-            fill={noFill ? 'none' : getComputedColor(fill, "background")}
+            stroke={getComputedColor(stroke, 'stroke')}
+            fill={noFill ? 'none' : getComputedColor(fill, 'background')}
            strokeWidth={strokeWidth}
            rx={2}
            ry={2}
@@ -92,8 +92,8 @@ export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
        <polygon className={!noFill ? 'tl-hitarea-fill' : 'tl-hitarea-stroke'} points={path} />
        <polygon
          points={path}
-          stroke={getComputedColor(stroke, "stroke")}
-          fill={noFill ? 'none' : getComputedColor(fill, "background")}
+          stroke={getComputedColor(stroke, 'stroke')}
+          fill={noFill ? 'none' : getComputedColor(fill, 'background')}
          strokeWidth={strokeWidth}
          rx={2}
          ry={2}
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/TextShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/TextShape.tsx
@@ -193,7 +193,7 @@ export class TextShape extends TLTextShape<TextShapeProps> {
            fontWeight,
            padding,
            lineHeight,
-            color: getComputedColor(stroke, "text"),
+            color: getComputedColor(stroke, 'text'),
          }}
        >
          {isEditing ? (
@@ -320,7 +320,7 @@ export class TextShape extends TLTextShape<TextShapeProps> {
      <foreignObject width={bounds.width} height={bounds.height}>
        <div
          style={{
-            color: getComputedColor(stroke, "text"),
+            color: getComputedColor(stroke, 'text'),
            fontSize,
            fontFamily,
          }}