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

Bring constraints overlay in front of line labels; leave arrowheads when zooming out

Browse Source
This commit is contained in:
49lf
2024-09-25 10:21:32 -04:00
parent 9388e09c47
commit f105044a47
3 changed files with 50 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/clientSideScene/ClientSideSceneComp.tsx
View File

@ -233,6 +233,9 @@ const Overlay = ({
state.matches({ Sketch: 'Rectangle tool' })
)
// The constraint overlays need to go over the line labels.
const zIndex = 10
return (
<div className={`absolute w-0 h-0`}>
<div
@ -243,6 +246,7 @@ const Overlay = ({
data-overlay-angle={overlay.angle}
className="pointer-events-auto absolute w-0 h-0"
style={{
zIndex,
transform: `translate3d(${overlay.windowCoords[0]}px, ${overlay.windowCoords[1]}px, 0)`,
}}
></div>
@ -251,6 +255,7 @@ const Overlay = ({
data-overlay-toolbar-index={overlayIndex}
className={`px-0 pointer-events-auto absolute flex gap-1`}
style={{
zIndex,
transform: `translate3d(calc(${
overlay.windowCoords[0] + xOffset
}px + ${xAlignment}), calc(${
@ -292,6 +297,7 @@ const Overlay = ({
*/}
{callExpression?.callee?.name !== 'circle' && (
<SegmentMenu
style={{ zIndex }}
verticalPosition={
overlay.windowCoords[1] > window.innerHeight / 2
? 'top'
@ -433,15 +439,17 @@ const SegmentMenu = ({
verticalPosition,
pathToNode,
stdLibFnName,
style,
}: {
verticalPosition: 'top' | 'bottom'
pathToNode: PathToNode
stdLibFnName: string
style?: CSSProperties
}) => {
const { send } = useModelingContext()
const dependentSourceRanges = findUsesOfTagInPipe(kclManager.ast, pathToNode)
return (
<Popover className="relative">
<Popover className="relative" style={style}>
{({ open }) => (
<>
<Popover.Button

1
src/clientSideScene/sceneInfra.ts
View File

@ -52,6 +52,7 @@ export const Y_AXIS = 'yAxis'
export const AXIS_GROUP = 'axisGroup'
export const SKETCH_GROUP_SEGMENTS = 'sketch-group-segments'
export const ARROWHEAD = 'arrowhead'
export const ADD_SEGMENT_DOT = 'add-segment-dot'
export const SEGMENT_LENGTH_LABEL = 'segment-length-label'
export const SEGMENT_LENGTH_LABEL_TEXT = 'segment-length-label-text'
export const SEGMENT_LENGTH_LABEL_OFFSET_PX = 30

46
src/clientSideScene/segments.ts
View File

@ -45,6 +45,7 @@ import {
import { getTangentPointFromPreviousArc } from 'lib/utils2d'
import {
ARROWHEAD,
ADD_SEGMENT_DOT,
SceneInfra,
SEGMENT_LENGTH_LABEL,
SEGMENT_LENGTH_LABEL_OFFSET_PX,
@ -166,6 +167,8 @@ class StraightSegment implements SegmentUtils {
if (callExpName !== 'close') {
// an arrowhead that appears at the end of the segment
const arrowGroup = createArrowhead(scale, theme, color)
const dotGroup = createAddNewSegmentDot(scale, theme, color)
// A length indicator that appears at the midpoint of the segment
const lengthIndicatorGroup = createLengthIndicator({
from,
@ -173,6 +176,7 @@ class StraightSegment implements SegmentUtils {
scale,
})
segmentGroup.add(arrowGroup)
segmentGroup.add(dotGroup)
segmentGroup.add(lengthIndicatorGroup)
}
@ -207,6 +211,7 @@ class StraightSegment implements SegmentUtils {
shape.moveTo(0, (-SEGMENT_WIDTH_PX / 2) * scale) // The width of the line in px (2.4px in this case)
shape.lineTo(0, (SEGMENT_WIDTH_PX / 2) * scale)
const arrowGroup = group.getObjectByName(ARROWHEAD) as Group
const dotGroup = group.getObjectByName(ADD_SEGMENT_DOT) as Group
const labelGroup = group.getObjectByName(SEGMENT_LENGTH_LABEL) as Group
const length = Math.sqrt(
@ -225,9 +230,21 @@ class StraightSegment implements SegmentUtils {
isHandlesVisible = !shouldHideHover
}
if (dotGroup) {
dotGroup.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)
)
.normalize()
dotGroup.quaternion.setFromUnitVectors(new Vector3(0, 1, 0), dir)
dotGroup.scale.set(scale, scale, scale)
dotGroup.visible = isHandlesVisible
}
if (arrowGroup) {
arrowGroup.position.set(to[0], to[1], 0)
const dir = new Vector3()
.subVectors(
new Vector3(to[0], to[1], 0),
@ -236,7 +253,6 @@ class StraightSegment implements SegmentUtils {
.normalize()
arrowGroup.quaternion.setFromUnitVectors(new Vector3(0, 1, 0), dir)
arrowGroup.scale.set(scale, scale, scale)
arrowGroup.visible = isHandlesVisible
}
const extraSegmentGroup = group.getObjectByName(EXTRA_SEGMENT_HANDLE)
@ -341,6 +357,7 @@ class TangentialArcToSegment implements SegmentUtils {
const body = new MeshBasicMaterial({ color })
const mesh = new Mesh(geometry, body)
const arrowGroup = createArrowhead(scale, theme, color)
const dotGroup = createAddNewSegmentDot(scale, theme, color)
const extraSegmentGroup = createExtraSegmentHandle(scale, texture, theme)
group.name = TANGENTIAL_ARC_TO_SEGMENT
@ -358,7 +375,7 @@ class TangentialArcToSegment implements SegmentUtils {
baseColor,
}
group.add(mesh, arrowGroup, extraSegmentGroup)
group.add(mesh, arrowGroup, dotGroup, extraSegmentGroup)
const updateOverlaysCallback = this.update({
prevSegment,
input,
@ -516,6 +533,7 @@ class CircleSegment implements SegmentUtils {
const arcMesh = new Mesh(geometry, mat)
const meshType = isDraftSegment ? CIRCLE_SEGMENT_DASH : CIRCLE_SEGMENT_BODY
const arrowGroup = createArrowhead(scale, theme, color)
const dotGroup = createAddNewSegmentDot(scale, theme, color)
const circleCenterGroup = createCircleCenterHandle(scale, theme, color)
// A radius indicator that appears from the center to the perimeter
const radiusIndicatorGroup = createLengthIndicator({
@ -541,7 +559,7 @@ class CircleSegment implements SegmentUtils {
}
group.name = CIRCLE_SEGMENT
group.add(arcMesh, arrowGroup, circleCenterGroup, radiusIndicatorGroup)
group.add(arcMesh, arrowGroup, dotGroup, circleCenterGroup)
const updateOverlaysCallback = this.update({
prevSegment,
input,
@ -723,6 +741,22 @@ export function createProfileStartHandle({
return group
}
function createAddNewSegmentDot(scale = 1, theme: Themes, color?: number): Group {
const baseColor = getThemeColorForThreeJs(theme)
const arrowMaterial = new MeshBasicMaterial({
color: color || baseColor,
})
const sphereMesh = new Mesh(new SphereGeometry(4, 12, 12), arrowMaterial)
const dotGroup = new Group()
dotGroup.userData.type = ADD_SEGMENT_DOT
dotGroup.name = ADD_SEGMENT_DOT
dotGroup.add(sphereMesh)
dotGroup.lookAt(new Vector3(0, 1, 0))
dotGroup.scale.set(scale, scale, scale)
return dotGroup
}
function createArrowhead(scale = 1, theme: Themes, color?: number): Group {
const baseColor = getThemeColorForThreeJs(theme)
const arrowMaterial = new MeshBasicMaterial({
@ -732,16 +766,16 @@ function createArrowhead(scale = 1, theme: Themes, color?: number): Group {
// 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)
arrowheadMesh.position.set(0, -9, 0)
const sphereMesh = new Mesh(new SphereGeometry(4, 12, 12), arrowMaterial)
const arrowGroup = new Group()
arrowGroup.userData.type = ARROWHEAD
arrowGroup.name = ARROWHEAD
arrowGroup.add(arrowheadMesh, sphereMesh)
arrowGroup.add(arrowheadMesh)
arrowGroup.lookAt(new Vector3(0, 1, 0))
arrowGroup.scale.set(scale, scale, scale)
return arrowGroup
}
function createCircleCenterHandle(
scale = 1,
theme: Themes,