PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

[fix] brush appearance when using CAD mode (#609)

Browse source 
* Update Tldraw.tsx

* Uses color rather than dash for brush in CAD mode

* improves colors for dark mode

* Update Tldraw.tsx
This commit is contained in:
Steve Ruiz 2022-03-09 11:02:46 +00:00 committed by GitHub
parent 2781aa4e0d
commit 1544ce3e20
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/tldraw/src/Tldraw.tsx
View file

@ -333,13 +333,25 @@ const InnerTldraw = React.memo(function InnerTldraw({
return { isDarkMode: settings.isDarkMode }
}, [settings.isDarkMode])
const showDashedBrush = settings.isCadSelectMode
? !appState.selectByContain
: appState.selectByContain
// Custom theme, based on darkmode
const theme = React.useMemo(() => {
if (settings.isDarkMode) {
const { selectByContain } = appState
const { isDarkMode, isCadSelectMode } = settings
if (isDarkMode) {
const brushBase = isCadSelectMode
? selectByContain
? '69, 155, 255'
: '105, 209, 73'
: '180, 180, 180'
return {
brushFill: 'rgba(180, 180, 180, .05)',
brushStroke: 'rgba(180, 180, 180, .25)',
brushDashStroke: 'rgba(180, 180, 180, .6)',
brushFill: `rgba(${brushBase}, ${isCadSelectMode ? 0.08 : 0.05})`,
brushStroke: `rgba(${brushBase}, ${isCadSelectMode ? 0.5 : 0.25})`,
brushDashStroke: `rgba(${brushBase}, .6)`,
selected: 'rgba(38, 150, 255, 1.000)',
selectFill: 'rgba(38, 150, 255, 0.05)',
background: '#212529',
@ -347,8 +359,14 @@ const InnerTldraw = React.memo(function InnerTldraw({
}
}
return {}
}, [settings.isDarkMode])
const brushBase = isCadSelectMode ? (selectByContain ? '0, 89, 242' : '51, 163, 23') : '0,0,0'
return {
brushFill: `rgba(${brushBase}, ${isCadSelectMode ? 0.08 : 0.05})`,
brushStroke: `rgba(${brushBase}, ${isCadSelectMode ? 0.4 : 0.25})`,
brushDashStroke: `rgba(${brushBase}, .6)`,
}
}, [settings.isDarkMode, settings.isCadSelectMode, appState.selectByContain])
const isInSession = app.session !== undefined
@ -395,7 +413,7 @@ const InnerTldraw = React.memo(function InnerTldraw({
hideCloneHandles={hideCloneHandles}
hideRotateHandles={!settings.showRotateHandles}
hideGrid={!settings.showGrid}
showDashedBrush={appState.selectByContain}
showDashedBrush={showDashedBrush}
performanceMode={app.session?.performanceMode}
onPinchStart={app.onPinchStart}
onPinchEnd={app.onPinchEnd}