fix: shape preview

tldraw/apps/tldraw-logseq/src/lib/color.ts

@@ -1,23 +0,0 @@
-import { Color } from '@tldraw/core'
-
-let melm: any
-
-function getMeasurementDiv() {
-  // A div used for measurement
-  document.getElementById('__colorMeasure')?.remove()
-
-  const div = document.createElement('div')
-  div.id = '__colorMeasure'
-  div.tabIndex = -1
-
-  document.body.appendChild(div)
-  return div
-}
-
-export function getComputedColor(color: string, type: string): string {
-  if (Object.values(Color).includes(color)) {
-    return `var(--ls-wb-${type}-color-${color ? color : 'default'})`
-  }
-
-  return color
-}

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

@@ -1,10 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { SVGContainer, TLComponentProps } from '@tldraw/react'
-import { TLBoxShape, TLBoxShapeProps } from '@tldraw/core'
+import { TLBoxShape, TLBoxShapeProps, getComputedColor } from '@tldraw/core'
 import { observer } from 'mobx-react-lite'
 import { CustomStyleProps, withClampedStyles } from './style-props'
 import { BindingIndicator } from './BindingIndicator'
-import { getComputedColor } from '../color'
 
 export interface BoxShapeProps extends TLBoxShapeProps, CustomStyleProps {
   borderRadius: number

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

@@ -1,9 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { TLEllipseShapeProps, TLEllipseShape, Color } from '@tldraw/core'
+import { TLEllipseShapeProps, TLEllipseShape, getComputedColor } from '@tldraw/core'
 import { SVGContainer, TLComponentProps } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
 import { CustomStyleProps, withClampedStyles } from './style-props'
-import { getComputedColor } from '../color'
 
 export interface EllipseShapeProps extends TLEllipseShapeProps, CustomStyleProps {
   type: 'ellipse'

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

@@ -1,10 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { SvgPathUtils, TLDrawShape, TLDrawShapeProps } from '@tldraw/core'
+import { SvgPathUtils, TLDrawShape, TLDrawShapeProps, getComputedColor } from '@tldraw/core'
 import { SVGContainer, TLComponentProps } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
 import { computed, makeObservable } from 'mobx'
 import { CustomStyleProps, withClampedStyles } from './style-props'
-import { getComputedColor } from '../color'
 
 export interface HighlighterShapeProps extends TLDrawShapeProps, CustomStyleProps {
   type: 'highlighter'

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Decoration, TLLineShape, TLLineShapeProps } from '@tldraw/core'
-import { SVGContainer, TLComponentProps, useApp } from '@tldraw/react'
+import { Decoration, TLLineShape, TLLineShapeProps, getComputedColor } from '@tldraw/core'
+import { SVGContainer, TLComponentProps } from '@tldraw/react'
 import Vec from '@tldraw/vec'
 import { observer } from 'mobx-react-lite'
 import * as React from 'react'
@@ -10,7 +10,6 @@ import { CustomStyleProps, withClampedStyles } from './style-props'
 import { getTextLabelSize } from '@tldraw/core'
 import { LabelMask } from './text/LabelMask'
 import { TextLabel } from './text/TextLabel'
-import { getComputedColor } from '../color'
 
 interface LineShapeProps extends CustomStyleProps, TLLineShapeProps {
   type: 'line'

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

@@ -6,6 +6,7 @@ import {
   TLResetBoundsInfo,
   TLResizeInfo,
   validUUID,
+  getComputedColor,
 } from '@tldraw/core'
 import { Virtuoso } from 'react-virtuoso'
 import { HTMLContainer, TLComponentProps, useApp } from '@tldraw/react'
@@ -21,7 +22,6 @@ import { useCameraMovingRef } from '../../hooks/useCameraMoving'
 import { LogseqContext, type SearchResult } from '../logseq-context'
 import { BindingIndicator } from './BindingIndicator'
 import { CustomStyleProps, withClampedStyles } from './style-props'
-import { getComputedColor } from '../color'
 
 const HEADER_HEIGHT = 40
 const AUTO_RESIZE_THRESHOLD = 1

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

@@ -1,11 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { getStroke } from 'perfect-freehand'
-import { SvgPathUtils, TLDrawShape, TLDrawShapeProps } from '@tldraw/core'
+import { SvgPathUtils, TLDrawShape, TLDrawShapeProps, getComputedColor } from '@tldraw/core'
 import { SVGContainer, TLComponentProps } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
 import { computed, makeObservable } from 'mobx'
 import { CustomStyleProps, withClampedStyles } from './style-props'
-import { getComputedColor } from '../color'
 
 export interface PenShapeProps extends TLDrawShapeProps, CustomStyleProps {
   type: 'pen'

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { SvgPathUtils, TLDrawShape, TLDrawShapeProps } from '@tldraw/core'
+import { SvgPathUtils, TLDrawShape, TLDrawShapeProps, getComputedColor } from '@tldraw/core'
 import { SVGContainer, TLComponentProps } from '@tldraw/react'
 import Vec from '@tldraw/vec'
 import { computed, makeObservable } from 'mobx'
@@ -11,7 +11,6 @@ import getStroke, {
   StrokePoint,
 } from 'perfect-freehand'
 import { CustomStyleProps, withClampedStyles } from './style-props'
-import { getComputedColor } from '../color'
 
 export interface PencilShapeProps extends TLDrawShapeProps, CustomStyleProps {
   type: 'pencil'

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

@@ -1,9 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { TLPolygonShape, TLPolygonShapeProps } from '@tldraw/core'
+import { TLPolygonShape, TLPolygonShapeProps, getComputedColor } from '@tldraw/core'
 import { SVGContainer, TLComponentProps } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
 import { CustomStyleProps, withClampedStyles } from './style-props'
-import { getComputedColor } from '../color'
 
 interface PolygonShapeProps extends TLPolygonShapeProps, CustomStyleProps {
   type: 'polygon'

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

@@ -6,6 +6,7 @@ import {
   TLResizeStartInfo,
   TLTextShape,
   TLTextShapeProps,
+  getComputedColor,
 } from '@tldraw/core'
 import { HTMLContainer, TLComponentProps } from '@tldraw/react'
 import { action, computed } from 'mobx'
@@ -14,7 +15,6 @@ import * as React from 'react'
 import type { SizeLevel } from '.'
 import { CustomStyleProps, withClampedStyles } from './style-props'
 import { TextAreaUtils } from './text/TextAreaUtils'
-import { getComputedColor } from '../color'
 
 export interface TextShapeProps extends TLTextShapeProps, CustomStyleProps {
   borderRadius: number

tldraw/packages/core/src/lib/shapes/TLShape/TLShape.tsx

@@ -10,7 +10,7 @@ import Vec from '@tldraw/vec'
 import { action, computed, makeObservable, observable, toJS, transaction } from 'mobx'
 import { BINDING_DISTANCE } from '../../../constants'
 import type { TLHandle, TLResizeEdge, TLResizeCorner, TLAsset } from '../../../types'
-import { BoundsUtils, PointUtils, deepCopy } from '../../../utils'
+import { BoundsUtils, PointUtils, deepCopy, getComputedColor } from '../../../utils'
 
 export type TLShapeModel<P extends TLShapeProps = TLShapeProps> = {
   nonce?: number
@@ -370,8 +370,8 @@ export abstract class TLShape<P extends TLShapeProps = TLShapeProps, M = any> {
       .props as any
     return (
       <rect
-        fill={noFill ? 'none' : fill}
-        stroke={noFill ? fill : stroke}
+        fill={noFill ? 'none' : getComputedColor(fill, 'background')}
+        stroke={getComputedColor(stroke, 'stroke')}
         strokeWidth={strokeWidth ?? 2}
         strokeDasharray={strokeType === 'dashed' ? '8 2' : undefined}
         fillOpacity={opacity ?? 0.2}

tldraw/packages/core/src/utils/ColorUtils.ts

@@ -0,0 +1,9 @@
+import { Color } from '../types'
+
+export function getComputedColor(color: string, type: string): string {
+  if (Object.values(Color).includes(color)) {
+    return `var(--ls-wb-${type}-color-${color ? color : 'default'})`
+  }
+
+  return color
+}

tldraw/packages/core/src/utils/index.ts

@@ -8,6 +8,7 @@ export * from './SvgPathUtils'
 export * from './BindingUtils'
 export * from './DataUtils'
 export * from './TextUtils'
+export * from './ColorUtils'
 export * from './getTextSize'
 export * from './cache'