ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Franknoirot/sketch light mode (#2328)

Browse Source
This commit is contained in:
Frank Noirot
2024-05-09 08:38:42 -04:00
committed by GitHub
parent c45eb1e3e3
commit 253744867b
7 changed files with 65 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/clientSideScene/ClientSideSceneComp.tsx
View File

@ -90,7 +90,8 @@ export const ClientSideScene = ({
cursor = 'grabbing'
} else if (
state.matches('Sketch.Line tool') ||
state.matches('Sketch.Tangential arc to')
state.matches('Sketch.Tangential arc to') ||
state.matches('Sketch.Rectangle tool')
) {
cursor = 'crosshair'
} else {
@ -104,9 +105,9 @@ export const ClientSideScene = ({
style={{ cursor: cursor }}
className={`absolute inset-0 h-full w-full transition-all duration-300 ${
hideClient ? 'opacity-0' : 'opacity-100'
} ${hideServer ? 'bg-black' : ''} ${
} ${hideServer ? 'bg-chalkboard-10 dark:bg-chalkboard-100' : ''} ${
!hideClient && !hideServer && state.matches('Sketch')
? 'bg-black/80'
? 'bg-chalkboard-10/80 dark:bg-chalkboard-100/80'
: ''
}`}
></div>

9
src/clientSideScene/sceneEntities.ts
View File

@ -97,6 +97,7 @@ import {
getRectangleCallExpressions,
updateRectangleSketch,
} from 'lib/rectangleTool'
import { getThemeColorForThreeJs } from 'lib/theme'
type DraftSegment = 'line' | 'tangentialArcTo'
@ -356,6 +357,7 @@ export class SceneEntities {
id: sketchGroup.start.__geoMeta.id,
pathToNode: segPathToNode,
scale: factor,
theme: sceneInfra._theme,
})
_profileStart.layers.set(SKETCH_LAYER)
_profileStart.traverse((child) => {
@ -406,6 +408,7 @@ export class SceneEntities {
isDraftSegment,
scale: factor,
texture: sceneInfra.extraSegmentTexture,
theme: sceneInfra._theme,
})
} else {
seg = straightSegment({
@ -417,6 +420,7 @@ export class SceneEntities {
scale: factor,
callExpName,
texture: sceneInfra.extraSegmentTexture,
theme: sceneInfra._theme,
})
}
seg.layers.set(SKETCH_LAYER)
@ -1503,7 +1507,10 @@ export class SceneEntities {
const isSelected = parent?.userData?.isSelected
colorSegment(
selected,
isSelected ? 0x0000ff : parent?.userData?.baseColor || 0xffffff
isSelected
? 0x0000ff
: parent?.userData?.baseColor ||
getThemeColorForThreeJs(sceneInfra._theme)
)
const extraSegmentGroup = parent?.getObjectByName(EXTRA_SEGMENT_HANDLE)
if (extraSegmentGroup) {

5
src/clientSideScene/sceneInfra.ts
View File

@ -30,6 +30,7 @@ import { CameraControls } from './CameraControls'
import { EngineCommandManager } from 'lang/std/engineConnection'
import { settings } from 'lib/settings/initialSettings'
import { MouseState } from 'machines/modelingMachine'
import { Themes } from 'lib/theme'
type SendType = ReturnType<typeof useModelingContext>['send']
@ -101,6 +102,7 @@ export class SceneInfra {
isFovAnimationInProgress = false
_baseUnit: BaseUnit = 'mm'
_baseUnitMultiplier = 1
_theme: Themes = Themes.System
extraSegmentTexture: Texture
lastMouseState: MouseState = { type: 'idle' }
onDragStartCallback: (arg: OnDragCallbackArgs) => void = () => {}
@ -137,6 +139,9 @@ export class SceneInfra {
this._baseUnitMultiplier
)
}
set theme(theme: Themes) {
this._theme = theme
}
resetMouseListeners = () => {
this.setCallbacks({
onDragStart: () => {},

39
src/clientSideScene/segments.ts
View File

@ -37,22 +37,26 @@ import {
} from './sceneEntities'
import { getTangentPointFromPreviousArc } from 'lib/utils2d'
import { ARROWHEAD } from './sceneInfra'
import { Themes, getThemeColorForThreeJs } from 'lib/theme'
export function profileStart({
from,
id,
pathToNode,
scale = 1,
theme,
}: {
from: Coords2d
id: string
pathToNode: PathToNode
scale?: number
theme: Themes
}) {
const group = new Group()
const geometry = new BoxGeometry(12, 12, 12) // in pixels scaled later
const body = new MeshBasicMaterial({ color: 0xffffff })
const baseColor = getThemeColorForThreeJs(theme)
const body = new MeshBasicMaterial({ color: baseColor })
const mesh = new Mesh(geometry, body)
group.add(mesh)
@ -79,6 +83,7 @@ export function straightSegment({
scale = 1,
callExpName,
texture,
theme,
}: {
from: Coords2d
to: Coords2d
@ -88,6 +93,7 @@ export function straightSegment({
scale?: number
callExpName: string
texture: Texture
theme: Themes
}): Group {
const group = new Group()
@ -111,7 +117,8 @@ export function straightSegment({
})
}
const baseColor = callExpName === 'close' ? 0x444444 : 0xffffff
const baseColor =
callExpName === 'close' ? 0x444444 : getThemeColorForThreeJs(theme)
const body = new MeshBasicMaterial({ color: baseColor })
const mesh = new Mesh(geometry, body)
mesh.userData.type = isDraftSegment
@ -134,7 +141,7 @@ export function straightSegment({
const length = Math.sqrt(
Math.pow(to[0] - from[0], 2) + Math.pow(to[1] - from[1], 2)
)
const arrowGroup = createArrowhead(scale)
const arrowGroup = createArrowhead(scale, theme)
arrowGroup.position.set(to[0], to[1], 0)
const dir = new Vector3()
.subVectors(new Vector3(to[0], to[1], 0), new Vector3(from[0], from[1], 0))
@ -147,7 +154,7 @@ export function straightSegment({
group.add(mesh)
if (callExpName !== 'close') group.add(arrowGroup)
const extraSegmentGroup = createExtraSegmentHandle(scale, texture)
const extraSegmentGroup = createExtraSegmentHandle(scale, texture, theme)
const offsetFromBase = new Vector2(to[0] - from[0], to[1] - from[1])
.normalize()
.multiplyScalar(EXTRA_SEGMENT_OFFSET_PX * scale)
@ -162,8 +169,10 @@ export function straightSegment({
return group
}
function createArrowhead(scale = 1): Group {
const arrowMaterial = new MeshBasicMaterial({ color: 0xffffff })
function createArrowhead(scale = 1, theme: Themes): Group {
const arrowMaterial = new MeshBasicMaterial({
color: getThemeColorForThreeJs(theme),
})
// specify the size of the geometry in pixels (i.e. cone height = 20px, cone radius = 4.5px)
// we'll scale the group to the correct size later to match these sizes in screen space
const arrowheadMesh = new Mesh(new ConeGeometry(4.5, 20, 12), arrowMaterial)
@ -179,7 +188,11 @@ function createArrowhead(scale = 1): Group {
return arrowGroup
}
function createExtraSegmentHandle(scale: number, texture: Texture): Group {
function createExtraSegmentHandle(
scale: number,
texture: Texture,
theme: Themes
): Group {
const particleMaterial = new PointsMaterial({
size: 12, // in pixels
map: texture,
@ -189,7 +202,7 @@ function createExtraSegmentHandle(scale: number, texture: Texture): Group {
})
const mat = new MeshBasicMaterial({
transparent: true,
color: 0xffffff,
color: getThemeColorForThreeJs(theme),
opacity: 0,
})
const particleGeometry = new BufferGeometry().setFromPoints([
@ -218,6 +231,7 @@ export function tangentialArcToSegment({
isDraftSegment,
scale = 1,
texture,
theme,
}: {
prevSegment: SketchGroup['value'][number]
from: Coords2d
@ -227,6 +241,7 @@ export function tangentialArcToSegment({
isDraftSegment?: boolean
scale?: number
texture: Texture
theme: Themes
}): Group {
const group = new Group()
@ -257,7 +272,8 @@ export function tangentialArcToSegment({
scale,
})
const body = new MeshBasicMaterial({ color: 0xffffff })
const baseColor = getThemeColorForThreeJs(theme)
const body = new MeshBasicMaterial({ color: baseColor })
const mesh = new Mesh(geometry, body)
mesh.userData.type = isDraftSegment
? TANGENTIAL_ARC_TO__SEGMENT_DASH
@ -271,10 +287,11 @@ export function tangentialArcToSegment({
prevSegment,
pathToNode,
isSelected: false,
baseColor,
}
group.name = TANGENTIAL_ARC_TO_SEGMENT
const arrowGroup = createArrowhead(scale)
const arrowGroup = createArrowhead(scale, theme)
arrowGroup.position.set(to[0], to[1], 0)
const arrowheadAngle = endAngle + (Math.PI / 2) * (ccw ? 1 : -1)
arrowGroup.quaternion.setFromUnitVectors(
@ -285,7 +302,7 @@ export function tangentialArcToSegment({
const shouldHide = pxLength < HIDE_SEGMENT_LENGTH
arrowGroup.visible = !shouldHide
const extraSegmentGroup = createExtraSegmentHandle(scale, texture)
const extraSegmentGroup = createExtraSegmentHandle(scale, texture, theme)
const circumferenceInPx = (2 * Math.PI * radius) / scale
const extraSegmentAngleDelta =
(EXTRA_SEGMENT_OFFSET_PX / circumferenceInPx) * Math.PI * 2

4
src/components/SettingsAuthProvider.tsx
View File

@ -134,6 +134,10 @@ export const SettingsAuthProviderBase = ({
},
})
},
setClientTheme: (context) => {
const opposingTheme = getOppositeTheme(context.app.theme.current)
sceneInfra.theme = opposingTheme
},
setEngineEdges: (context) => {
engineCommandManager.sendSceneCommand({
cmd_id: uuidv4(),

12
src/lib/theme.ts
View File

@ -65,3 +65,15 @@ export function getThemeColorForEngine(theme: Themes) {
? { r: dark, g: dark, b: dark, a: 1 }
: { r: light, g: light, b: light, a: 1 }
}
/**
* ThreeJS uses hex values for colors
* @param theme
* @returns
*/
export function getThemeColorForThreeJs(theme: Themes) {
const resolvedTheme = getResolvedTheme(theme)
const dark = 0x1c1c1c
const light = 0xf9f9f9
return resolvedTheme === Themes.Dark ? dark : light
}

5
src/machines/settingsMachine.ts
View File

@ -11,7 +11,7 @@ import {
export const settingsMachine = createMachine(
{
/** @xstate-layout N4IgpgJg5mDOIC5QGUwBc0EsB2VYDpMIAbMAYlnXwFsB7CMYnKfAV20zVgG0AGAXUSgADrVidMtbEJAAPRABYAHAFZ8vAEwA2FVq0aNAZgCcARl0B2ADQgAnolO8LvfBYUXT+48YW+tCgF8Am1QMZgIiUgoqAENhYXw0AAswajA+QSQQUXEsKRl5BCM1DQUDMo0VQwVjJxt7BFMDJXwNWo0LFSU3c0DgkFCsXAiScgAlOHQAAkow4YyZHIl8rMKAWn18Q39q3ScVFQ1NFXqHXiVTfGNqhSdeXi1DJQ1TIJD0IbxCUbIAKgWsks8tJVopjFp8KZjEpqi9lKZDE0TnYzgZXO5PG0fH4+u85l9IuRQlMYsRiFNsGAAO4zD7hAEiMTLEGgda6fAKJoIiyIkwWYwWawoxpGFxaHkKFS1a7woL9bD0OAyQbhRZM4EFRBrUyOLY7SVafaHTSnBDGDqQiz6DRKbwqTxvAZ04bfUhq3KSFlyBxHdQIhR6HTQmoC02OUwKPW7GrPdy8QxygJAA */
/** @xstate-layout N4IgpgJg5mDOIC5QGUwBc0EsB2VYDpMIAbMAYlnXwEMAHW-Ae2wCNHqAnCHKZNatAFdYAbQAMAXUShajWJizNpIAB6IAbAFZN+AOwAWAIwAOYwE4AzGYBM+-ZosAaEAE9Eh62LP51ls+v0LMWt1awMAX3DnVAweAiJSCio6BjQACzAAWzAAYUZiRg5xKSQQWXlFbGU1BA9vQ0N1CwCxdVbdY1DnNwQzPp8zTTFje1D1QwtjSOj0LFx4knJKNHxMxggwYh58DYAzakFiNABVbAVi5XKFTCVSmotNY3w7YysHRuNDTXV1bvdG7w-IKTcbaazWCzTEAxOZ4QiLJIrFL4dJZMAXUpXSrVDTGazPMQPR4GXRBAx-XoGfDWIadMx4n6EqEwuLwxLLVbrTbbNKYKBpLb8tAAUWgcAxMjk11uoHumn0+DEw2sJkMulCgWsFL6YnwfX0ELsYg61jMumZs1ZCXIACU4OgAATLWGiSSXKXYu4aLz4UwWBr6DqBYYUzSePXqUlBLxmyZmC2xeZs8gxB3UYjEJ2W+YSsoem5VL0IKy6z6EsJifQ2Czq0MTHzq8Yjfz6MQmBMu5NkABUuaxBZxCDD+DD5lJgUjxssFP0xl0I+0pm06uMmg8kSiIGwXPgpRZ83dFQHRYAtA0LCO2tZjGIHJNdB5fq5EK3dc1OsNGkrA+oO1bFoe0qFrKiAnlol7BDed5zo+FK+Doc7qhCNaVv4UwbkAA */
id: 'Settings',
predictableActionArguments: true,
context: {} as ReturnType<typeof createSettings>,
@ -59,6 +59,7 @@ export const settingsMachine = createMachine(
'setThemeClass',
'setEngineTheme',
'persistSettings',
'setClientTheme',
],
},
@ -83,6 +84,7 @@ export const settingsMachine = createMachine(
'setClientSideSceneUnits',
'Execute AST',
'persistSettings',
'setClientTheme',
],
},
@ -96,6 +98,7 @@ export const settingsMachine = createMachine(
'setClientSideSceneUnits',
'Execute AST',
'persistSettings',
'setClientTheme',
],
},
},