fix: stroke color fix

tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx

@@ -1,7 +1,6 @@
 import { debounce, Decoration, isNonNullable } from '@tldraw/core'
 import { useApp } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
-import { darken } from 'polished'
 import React from 'react'
 import { TablerIcon } from '~components/icons'
 import { ColorInput } from '~components/inputs/ColorInput'
@@ -62,7 +61,7 @@ const shapeMapping: Partial<Record<ShapeType, ContextBarActionType[]>> = {
   html: ['ScaleLevel', 'AutoResizing'],
 }
 
-const noStrokeShapes = Object.entries(shapeMapping)
+export const noStrokeShapes = Object.entries(shapeMapping)
   .filter(([key, types]) => {
     return !types.includes('NoFill') && types.includes('Swatch')
   })
@@ -302,14 +301,8 @@ const SwatchAction = observer(() => {
   const handleChange = React.useMemo(() => {
     let latestValue = ''
     const handler: React.ChangeEventHandler<HTMLInputElement> = e => {
-      const strokeColor = darken(0.3, latestValue)
       shapes.forEach(s => {
-        const strokeOnly = noStrokeShapes.includes(s.props.type)
-        s.update(
-          strokeOnly
-            ? { stroke: latestValue, fill: latestValue }
-            : { fill: latestValue, stroke: strokeColor }
-        )
+        s.update({ fill: latestValue })
       })
       app.persist(true)
     }
@@ -416,7 +409,7 @@ const TextStyleAction = observer(() => {
   return (
     <span className="flex gap-1">
       <ToggleInput
-        title='Bold'
+        title="Bold"
         className="tl-contextbar-button"
         pressed={bold}
         onPressedChange={v => {
@@ -432,7 +425,7 @@ const TextStyleAction = observer(() => {
         <TablerIcon name="bold" />
       </ToggleInput>
       <ToggleInput
-        title='Italic'
+        title="Italic"
         className="tl-contextbar-button"
         pressed={italic}
         onPressedChange={v => {

tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx

@@ -87,6 +87,6 @@ export class BoxShape extends TLBoxShape<BoxShapeProps> {
       props.size[1] = Math.max(props.size[1], 1)
     }
     if (props.borderRadius !== undefined) props.borderRadius = Math.max(0, props.borderRadius)
-    return withClampedStyles(props)
+    return withClampedStyles(this, props)
   }
 }

tldraw/apps/tldraw-logseq/src/lib/shapes/DotShape.tsx

@@ -50,6 +50,6 @@ export class DotShape extends TLDotShape<DotShapeProps> {
 
   validateProps = (props: Partial<DotShapeProps>) => {
     if (props.radius !== undefined) props.radius = Math.max(props.radius, 1)
-    return withClampedStyles(props)
+    return withClampedStyles(this, props)
   }
 }

tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx

@@ -74,7 +74,7 @@ export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
       props.size[0] = Math.max(props.size[0], 1)
       props.size[1] = Math.max(props.size[1], 1)
     }
-    return withClampedStyles(props)
+    return withClampedStyles(this, props)
   }
 
   /**

tldraw/apps/tldraw-logseq/src/lib/shapes/HTMLShape.tsx

@@ -146,6 +146,6 @@ export class HTMLShape extends TLBoxShape<HTMLShapeProps> {
       props.size[0] = Math.max(props.size[0], 1)
       props.size[1] = Math.max(props.size[1], 1)
     }
-    return withClampedStyles(props)
+    return withClampedStyles(this, props)
   }
 }

tldraw/apps/tldraw-logseq/src/lib/shapes/HighlighterShape.tsx

@@ -66,7 +66,7 @@ export class HighlighterShape extends TLDrawShape<HighlighterShapeProps> {
   })
 
   validateProps = (props: Partial<HighlighterShapeProps>) => {
-    props = withClampedStyles(props)
+    props = withClampedStyles(this, props)
     if (props.strokeWidth !== undefined) props.strokeWidth = Math.max(props.strokeWidth, 1)
     return props
   }

tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx

@@ -145,7 +145,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
   })
 
   validateProps = (props: Partial<LineShapeProps>) => {
-    return withClampedStyles(props)
+    return withClampedStyles(this, props)
   }
 
   getShapeSVGJsx({ preview }: any) {

tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx

@@ -607,7 +607,8 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
 
     React.useEffect(() => {
       if (this.props.isAutoResizing) {
-        const newHeight = innerHeight + this.getHeaderHeight()
+        const latestInnerHeight = this.getInnerHeight?.() ?? innerHeight
+        const newHeight = latestInnerHeight + this.getHeaderHeight()
         if (innerHeight && Math.abs(newHeight - this.props.size[1]) > AUTO_RESIZE_THRESHOLD) {
           this.update({
             size: [this.props.size[0], newHeight],
@@ -802,7 +803,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
       props.size[0] = Math.max(props.size[0], 240 * scale)
       props.size[1] = Math.max(props.size[1], HEADER_HEIGHT * scale)
     }
-    return withClampedStyles(props)
+    return withClampedStyles(this, props)
   }
 
   getShapeSVGJsx({ preview }: any) {

tldraw/apps/tldraw-logseq/src/lib/shapes/PenShape.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import * as React from 'react'
 import { getStroke } from 'perfect-freehand'
 import { SvgPathUtils, TLDrawShape, TLDrawShapeProps } from '@tldraw/core'
 import { SVGContainer, TLComponentProps } from '@tldraw/react'
@@ -71,7 +70,7 @@ export class PenShape extends TLDrawShape<PenShapeProps> {
   })
 
   validateProps = (props: Partial<PenShapeProps>) => {
-    props = withClampedStyles(props)
+    props = withClampedStyles(this, props)
     if (props.strokeWidth !== undefined) props.strokeWidth = Math.max(props.strokeWidth, 1)
     return props
   }

tldraw/apps/tldraw-logseq/src/lib/shapes/PencilShape.tsx

@@ -63,7 +63,7 @@ export class PencilShape extends TLDrawShape<PencilShapeProps> {
   })
 
   validateProps = (props: Partial<PencilShapeProps>) => {
-    props = withClampedStyles(props)
+    props = withClampedStyles(this, props)
     if (props.strokeWidth !== undefined) props.strokeWidth = Math.max(props.strokeWidth, 1)
     return props
   }

tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx

@@ -72,7 +72,7 @@ export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
 
   validateProps = (props: Partial<PolygonShapeProps>) => {
     if (props.sides !== undefined) props.sides = Math.max(props.sides, 3)
-    return withClampedStyles(props)
+    return withClampedStyles(this, props)
   }
 
   /**

tldraw/apps/tldraw-logseq/src/lib/shapes/TextShape.tsx

@@ -253,7 +253,7 @@ export class TextShape extends TLTextShape<TextShapeProps> {
     if (props.isSizeLocked || this.props.isSizeLocked) {
       // props.size = this.getAutoSizedBoundingBox(props)
     }
-    return withClampedStyles(props)
+    return withClampedStyles(this, props)
   }
 
   // Custom

tldraw/apps/tldraw-logseq/src/lib/shapes/YouTubeShape.tsx

@@ -128,6 +128,6 @@ export class YouTubeShape extends TLBoxShape<YouTubeShapeProps> {
       props.size[0] = Math.max(props.size[0], 1)
       props.size[1] = Math.max(props.size[0] * this.aspectRatio, 1)
     }
-    return withClampedStyles(props)
+    return withClampedStyles(this, props)
   }
 }

tldraw/apps/tldraw-logseq/src/lib/shapes/index.ts

@@ -12,6 +12,7 @@ import { PencilShape } from './PencilShape'
 import { PolygonShape } from './PolygonShape'
 import { TextShape } from './TextShape'
 import { YouTubeShape } from './YouTubeShape'
+import type { PenShape } from './PenShape'
 
 export type Shape =
   | BoxShape
@@ -21,6 +22,7 @@ export type Shape =
   | ImageShape
   | VideoShape
   | LineShape
+  | PenShape
   | PencilShape
   | PolygonShape
   | TextShape

tldraw/apps/tldraw-logseq/src/lib/shapes/style-props.tsx

@@ -1,3 +1,7 @@
+import { darken } from 'polished'
+import { noStrokeShapes } from '~components/ContextBar/contextBarActionFactory'
+import type { Shape } from '~lib'
+
 export interface CustomStyleProps {
   stroke: string
   fill: string
@@ -7,8 +11,16 @@ export interface CustomStyleProps {
   opacity: number
 }
 
-export function withClampedStyles<P>(props: P & Partial<CustomStyleProps>) {
+export function withClampedStyles<P>(self: Shape, props: P & Partial<CustomStyleProps>) {
   if (props.strokeWidth !== undefined) props.strokeWidth = Math.max(props.strokeWidth, 1)
   if (props.opacity !== undefined) props.opacity = Math.min(1, Math.max(props.opacity, 0))
+
+  const fill = props.fill ?? (self.props as any).fill
+  if (fill !== undefined) {
+    const strokeOnly = noStrokeShapes.includes(self.props.type)
+    const strokeColor = darken(0.3, fill)
+    props.stroke = strokeOnly ? fill : strokeColor
+  }
+
   return props
 }

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

@@ -271,6 +271,7 @@ button.tl-select-input-trigger {
 .tl-select-input-select-item {
   cursor: default;
   padding: 4px 12px;
+  outline-offset: -1px;
 
   color: var(--ls-secondary-text-color);
 

tldraw/packages/react/src/components/ContextBarContainer/ContextBarContainer.tsx

@@ -3,6 +3,7 @@ import { observer } from 'mobx-react-lite'
 import { TLBounds, BoundsUtils, TLOffset } from '@tldraw/core'
 import { useCounterScaledPosition, useRendererContext } from '~hooks'
 import type { TLReactShape } from '~lib'
+import { useDebouncedValue } from '~hooks/useDebounced'
 
 const stopEventPropagation = (e: React.PointerEvent) => e.stopPropagation()
 
@@ -15,7 +16,7 @@ export interface TLContextBarContainerProps<S extends TLReactShape> {
 
 export const ContextBarContainer = observer(function ContextBarContainer<S extends TLReactShape>({
   shapes,
-  hidden,
+  hidden: _hidden,
   bounds,
   rotation = 0,
 }: TLContextBarContainerProps<S>) {
@@ -34,6 +35,8 @@ export const ContextBarContainer = observer(function ContextBarContainer<S exten
   const rotatedBounds = BoundsUtils.getRotatedBounds(bounds, rotation)
   const scaledBounds = BoundsUtils.multiplyBounds(rotatedBounds, zoom)
 
+  const hidden = useDebouncedValue(_hidden, 200)
+
   useCounterScaledPosition(rBounds, bounds, rotation, 10003)
 
   if (!ContextBar) throw Error('Expected a ContextBar component.')

tldraw/packages/react/src/hooks/useDebounced.ts

@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react'
+
+export function useDebouncedValue<T>(value: T, ms = 0) {
+  const [debouncedValue, setDebouncedValue] = useState(value)
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value)
+    }, ms)
+    return () => {
+      clearTimeout(handler)
+    }
+  }, [value, ms])
+  return debouncedValue
+}