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

fix single selection angle constraint (#2555)

Browse Source 
* fix single selection angle constraint

* fix angle for multi selections

* make test more robust for makos
This commit is contained in:
Kurt Hutten
2024-05-31 11:36:08 +10:00
committed by GitHub
parent 8c3af1a72a
commit bd16902f02
10 changed files with 262 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
e2e/playwright/flow-tests.spec.ts
View File

@ -2440,6 +2440,186 @@ test('Extrude from command bar selects extrude line after', async ({
})
test.describe('Testing constraints', () => {
test.describe('Test Angle constraint double segment selection', () => {
const cases = [
{
testName: 'Add variable',
addVariable: true,
axisSelect: false,
value: "segAng('seg01', %) + angle001",
},
{
testName: 'No variable',
addVariable: false,
axisSelect: false,
value: "segAng('seg01', %) + 22.69",
},
{
testName: 'Add variable, selecting axis',
addVariable: true,
axisSelect: true,
value: 'QUARTER_TURN - angle001',
},
{
testName: 'No variable, selecting axis',
addVariable: false,
axisSelect: true,
value: 'QUARTER_TURN - 7',
},
] as const
for (const { testName, addVariable, value, axisSelect } of cases) {
test(`${testName}`, async ({ page }) => {
await page.addInitScript(async () => {
localStorage.setItem(
'persistCode',
`const yo = 5
const part001 = startSketchOn('XZ')
|> startProfileAt([-7.54, -26.74], %)
|> line([74.36, 130.4], %)
|> line([78.92, -120.11], %)
|> line([9.16, 77.79], %)
|> line([41.19, 28.97], %)
const part002 = startSketchOn('XZ')
|> startProfileAt([299.05, 231.45], %)
|> xLine(-425.34, %, 'seg-what')
|> yLine(-264.06, %)
|> xLine(segLen('seg-what', %), %)
|> lineTo([profileStartX(%), profileStartY(%)], %)`
)
})
const u = await getUtils(page)
await page.setViewportSize({ width: 1200, height: 500 })
await page.goto('/')
await u.waitForAuthSkipAppStart()
await page.getByText('line([74.36, 130.4], %)').click()
await page.getByRole('button', { name: 'Edit Sketch' }).click()
const [line1, line3] = await Promise.all([
u.getSegmentBodyCoords(`[data-overlay-index="${0}"]`),
u.getSegmentBodyCoords(`[data-overlay-index="${2}"]`),
])
if (axisSelect) {
await page.mouse.click(600, 130)
} else {
await page.mouse.click(line1.x, line1.y)
}
await page.keyboard.down('Shift')
await page.mouse.click(line3.x, line3.y)
await page.waitForTimeout(100) // this wait is needed for webkit - not sure why
await page.keyboard.up('Shift')
await page
.getByRole('button', {
name: 'Constrain',
})
.click()
await page.getByTestId('angle').click()
const createNewVariableCheckbox = page.getByTestId(
'create-new-variable-checkbox'
)
const isChecked = await createNewVariableCheckbox.isChecked()
;((isChecked && !addVariable) || (!isChecked && addVariable)) &&
(await createNewVariableCheckbox.click())
await page
.getByRole('button', { name: 'Add constraining value' })
.click()
// checking activeLines assures the cursors are where they should be
const codeAfter = [
"|> line([74.36, 130.4], %, 'seg01')",
`|> angledLine([${value}, 78.33], %)`,
]
if (axisSelect) codeAfter.shift()
const activeLinesContent = await page.locator('.cm-activeLine').all()
await Promise.all(
activeLinesContent.map(async (line, i) => {
await expect(page.locator('.cm-content')).toContainText(
codeAfter[i]
)
// if the code is an active line then the cursor should be on that line
await expect(line).toHaveText(codeAfter[i])
})
)
// checking the count of the overlays is a good proxy check that the client sketch scene is in a good state
await expect(page.getByTestId('segment-overlay')).toHaveCount(4)
})
}
})
test.describe('Test Angle constraint single selection', () => {
const cases = [
{
testName: 'Add variable',
addVariable: true,
value: 'angle001',
},
{
testName: 'No variable',
addVariable: false,
value: '83',
},
] as const
for (const { testName, addVariable, value } of cases) {
test(`${testName}`, async ({ page }) => {
await page.addInitScript(async () => {
localStorage.setItem(
'persistCode',
`const yo = 5
const part001 = startSketchOn('XZ')
|> startProfileAt([-7.54, -26.74], %)
|> line([74.36, 130.4], %)
|> line([78.92, -120.11], %)
|> line([9.16, 77.79], %)
|> line([41.19, 28.97], %)
const part002 = startSketchOn('XZ')
|> startProfileAt([299.05, 231.45], %)
|> xLine(-425.34, %, 'seg-what')
|> yLine(-264.06, %)
|> xLine(segLen('seg-what', %), %)
|> lineTo([profileStartX(%), profileStartY(%)], %)`
)
})
const u = await getUtils(page)
await page.setViewportSize({ width: 1200, height: 500 })
await page.goto('/')
await u.waitForAuthSkipAppStart()
await page.getByText('line([74.36, 130.4], %)').click()
await page.getByRole('button', { name: 'Edit Sketch' }).click()
const line3 = await u.getSegmentBodyCoords(
`[data-overlay-index="${2}"]`
)
await page.mouse.click(line3.x, line3.y)
await page
.getByRole('button', {
name: 'Constrain',
})
.click()
await page.getByTestId('angle').click()
if (!addVariable) {
await page.getByTestId('create-new-variable-checkbox').click()
}
await page
.getByRole('button', { name: 'Add constraining value' })
.click()
const changedCode = `|> angledLine([${value}, 78.33], %)`
await expect(page.locator('.cm-content')).toContainText(changedCode)
// checking active assures the cursor is where it should be
await expect(page.locator('.cm-activeLine')).toHaveText(changedCode)
// checking the count of the overlays is a good proxy check that the client sketch scene is in a good state
await expect(page.getByTestId('segment-overlay')).toHaveCount(4)
})
}
})
test.describe('Many segments - no modal constraints', () => {
const cases = [
{

13
e2e/playwright/test-utils.ts
View File

@ -132,6 +132,19 @@ export async function getUtils(page: Page) {
},
waitForCmdReceive: (commandType: string) =>
waitForCmdReceive(page, commandType),
getSegmentBodyCoords: async (locator: string, px = 30) => {
const overlay = page.locator(locator)
const bbox = await overlay
.boundingBox()
.then((box) => ({ ...box, x: box?.x || 0, y: box?.y || 0 }))
const angle = Number(await overlay.getAttribute('data-overlay-angle'))
const angleXOffset = Math.cos(((angle - 180) * Math.PI) / 180) * px
const angleYOffset = Math.sin(((angle - 180) * Math.PI) / 180) * px
return {
x: bbox.x + angleXOffset,
y: bbox.y - angleYOffset,
}
},
getBoundingBox: async (locator: string) =>
page
.locator(locator)

3
src/clientSideScene/ClientSideSceneComp.tsx
View File

@ -531,8 +531,7 @@ const ConstraintSymbol = ({
varNameMap[_type as LineInputsType]?.implicitConstraintDesc
const node = useMemo(
() =>
getNodeFromPath<Value>(parse(recast(kclManager.ast)), pathToNode).node,
() => getNodeFromPath<Value>(kclManager.ast, pathToNode).node,
[kclManager.ast, pathToNode]
)
const range: SourceRange = node ? [node.start, node.end] : [0, 0]

1
src/components/ActionButtonDropdown.tsx
View File

@ -39,6 +39,7 @@ export function ActionButtonDropdown({
onClick={item.onClick}
className="block px-3 py-1 hover:bg-primary/10 dark:hover:bg-chalkboard-80 border-0 m-0 text-sm w-full rounded-none text-left disabled:!bg-transparent dark:disabled:text-chalkboard-60"
disabled={item.disabled}
data-testid={item.label}
>
<span className="capitalize">{item.label}</span>
{item.shortcut && (

6
src/components/AvailableVarsHelpers.tsx
View File

@ -214,13 +214,17 @@ export const CreateNewVariable = ({
}) => {
return (
<>
<label htmlFor="create-new-variable" className="block mt-3 font-mono">
<label
htmlFor="create-new-variable"
className="block mt-3 font-mono text-chalkboard-90"
>
Create new variable
</label>
<div className="mt-1 flex gap-2 items-center">
{showCheckbox && (
<input
type="checkbox"
data-testid="create-new-variable-checkbox"
checked={shouldCreateVariable}
onChange={(e) => {
setShouldCreateVariable(e.target.checked)

39
src/components/ModelingMachineProvider.tsx
View File

@ -11,7 +11,10 @@ import {
import { SetSelections, modelingMachine } from 'machines/modelingMachine'
import { useSetupEngineManager } from 'hooks/useSetupEngineManager'
import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
import { isCursorInSketchCommandRange } from 'lang/util'
import {
isCursorInSketchCommandRange,
updatePathToNodeFromMap,
} from 'lang/util'
import {
kclManager,
sceneInfra,
@ -34,7 +37,6 @@ import {
handleSelectionBatch,
isSelectionLastLine,
isSketchPipe,
updateSelections,
} from 'lib/selections'
import { applyConstraintIntersect } from './Toolbar/Intersect'
import { applyConstraintAbsDistance } from './Toolbar/SetAbsDistance'
@ -54,7 +56,6 @@ import {
} from 'lang/modifyAst'
import {
Program,
Value,
VariableDeclaration,
coreDump,
parse,
@ -75,7 +76,6 @@ import { useSearchParams } from 'react-router-dom'
import { letEngineAnimateAndSyncCamAfter } from 'clientSideScene/CameraControls'
import { getVarNameModal } from 'hooks/useToolbarGuards'
import useHotkeyWrapper from 'lib/hotkeyWrapper'
import { applyConstraintEqualAngle } from './Toolbar/EqualAngle'
type MachineContext<T extends AnyStateMachine> = {
state: StateFrom<T>
@ -221,7 +221,7 @@ export const ModelingMachineProvider = ({
}
: {}
),
'Set selection': assign(({ selectionRanges }, event) => {
'Set selection': assign(({ selectionRanges, sketchDetails }, event) => {
const setSelections = event.data as SetSelections // this was needed for ts after adding 'Set selection' action to on done modal events
if (!editorManager.editorView) return {}
const dispatchSelection = (selection?: EditorSelection) => {
@ -311,9 +311,20 @@ export const ModelingMachineProvider = ({
}
if (setSelections.selectionType === 'completeSelection') {
editorManager.selectRange(setSelections.selection)
if (!sketchDetails)
return {
selectionRanges: setSelections.selection,
}
return {
selectionRanges: setSelections.selection,
sketchDetails: {
...sketchDetails,
sketchPathToNode:
setSelections.updatedPathToNode ||
sketchDetails?.sketchPathToNode ||
[],
},
}
}
return {}
@ -533,6 +544,7 @@ export const ModelingMachineProvider = ({
},
'Get angle info': async ({
selectionRanges,
sketchDetails,
}): Promise<SetSelections> => {
const { modifiedAst, pathToNodeMap } = await (angleBetweenInfo({
selectionRanges,
@ -544,14 +556,27 @@ export const ModelingMachineProvider = ({
selectionRanges,
angleOrLength: 'setAngle',
}))
await kclManager.updateAst(modifiedAst, true)
const _modifiedAst = parse(recast(modifiedAst))
if (!sketchDetails) throw new Error('No sketch details')
const updatedPathToNode = updatePathToNodeFromMap(
sketchDetails.sketchPathToNode,
pathToNodeMap
)
await sceneEntitiesManager.updateAstAndRejigSketch(
updatedPathToNode,
_modifiedAst,
sketchDetails.zAxis,
sketchDetails.yAxis,
sketchDetails.origin
)
return {
selectionType: 'completeSelection',
selection: pathMapToSelections(
kclManager.ast,
_modifiedAst,
selectionRanges,
pathToNodeMap
),
updatedPathToNode,
}
},
'Get length info': async ({

10
src/components/Toolbar/SetAngleBetween.tsx
View File

@ -98,7 +98,11 @@ export async function applyConstraintAngleBetween({
value: valueUsedInTransform,
initialVariableName: 'angle',
} as any)
if (segName === tagInfo?.tag && Number(value) === valueUsedInTransform) {
if (
segName === tagInfo?.tag &&
Number(value) === valueUsedInTransform &&
!variableName
) {
return {
modifiedAst,
pathToNodeMap,
@ -128,6 +132,10 @@ export async function applyConstraintAngleBetween({
createVariableDeclaration(variableName, valueNode)
)
_modifiedAst.body = newBody
Object.values(_pathToNodeMap).forEach((pathToNode) => {
const index = pathToNode.findIndex((a) => a[0] === 'body') + 1
pathToNode[index][0] = Number(pathToNode[index][0]) + 1
})
}
return {
modifiedAst: _modifiedAst,

4
src/components/Toolbar/setAngleLength.tsx
View File

@ -138,6 +138,10 @@ export async function applyConstraintAngleLength({
createVariableDeclaration(variableName, valueNode)
)
_modifiedAst.body = newBody
Object.values(pathToNodeMap).forEach((pathToNode) => {
const index = pathToNode.findIndex((a) => a[0] === 'body') + 1
pathToNode[index][0] = Number(pathToNode[index][0]) + 1
})
}
return {
modifiedAst: _modifiedAst,

16
src/lang/util.ts
View File

@ -26,6 +26,22 @@ export function pathMapToSelections(
return newSelections
}
export function updatePathToNodeFromMap(
oldPath: PathToNode,
pathToNodeMap: { [key: number]: PathToNode }
): PathToNode {
const updatedPathToNode = JSON.parse(JSON.stringify(oldPath))
let max = 0
Object.values(pathToNodeMap).forEach((path) => {
const index = Number(path[1][0])
if (index > max) {
max = index
}
})
updatedPathToNode[1][0] = max
return updatedPathToNode
}
export function isCursorInSketchCommandRange(
artifactMap: ArtifactMap,
selectionRanges: Selections

1
src/machines/modelingMachine.ts
View File

@ -64,6 +64,7 @@ export type SetSelections =
| {
selectionType: 'completeSelection'
selection: Selections
updatedPathToNode?: PathToNode
}
| {
selectionType: 'mirrorCodeMirrorSelections'