alignVertically/Horizontally (#106)

src/Toolbar.tsx

@@ -171,10 +171,14 @@ export const Toolbar = () => {
       <HorzVert horOrVert="vertical" />
       <EqualLength />
       <EqualAngle />
-      <SetHorzVertDistance horOrVert="setHorzDistance" />
+      <SetHorzVertDistance buttonType="alignEndsVertically" />
-      <SetAbsDistance disType="xAbs" />
+      <SetHorzVertDistance buttonType="setHorzDistance" />
-      <SetHorzVertDistance horOrVert="setVertDistance" />
+      <SetAbsDistance buttonType="snapToYAxis" />
-      <SetAbsDistance disType="yAbs" />
+      <SetAbsDistance buttonType="xAbs" />
+      <SetHorzVertDistance buttonType="alignEndsHorizontally" />
+      <SetAbsDistance buttonType="snapToXAxis" />
+      <SetHorzVertDistance buttonType="setVertDistance" />
+      <SetAbsDistance buttonType="yAbs" />
       <SetAngleLength angleOrLength="setAngle" />
       <SetAngleLength angleOrLength="setLength" />
       <Intersect />

src/components/Toolbar/SetAbsDistance.tsx

@@ -10,14 +10,22 @@ import {
   TransformInfo,
   getTransformInfos,
   transformAstSketchLines,
+  ConstraintType,
 } from '../../lang/std/sketchcombos'
 import { SetAngleLengthModal } from '../SetAngleLengthModal'
-import { createVariableDeclaration } from '../../lang/modifyAst'
+import {
+  createIdentifier,
+  createVariableDeclaration,
+} from '../../lang/modifyAst'
 import { removeDoubleNegatives } from '../AvailableVarsHelpers'
 
 const getModalInfo = create(SetAngleLengthModal as any)
 
-export const SetAbsDistance = ({ disType }: { disType: 'xAbs' | 'yAbs' }) => {
+export const SetAbsDistance = ({
+  buttonType,
+}: {
+  buttonType: 'xAbs' | 'yAbs' | 'snapToYAxis' | 'snapToXAxis'
+}) => {
   const {
     guiMode,
     selectionRanges: selections,
@@ -31,6 +39,12 @@ export const SetAbsDistance = ({ disType }: { disType: 'xAbs' | 'yAbs' }) => {
     selectionRanges: s.selectionRanges,
     programMemory: s.programMemory,
   }))
+  const disType: ConstraintType =
+    buttonType === 'xAbs' || buttonType === 'yAbs'
+      ? buttonType
+      : buttonType === 'snapToYAxis'
+      ? 'xAbs'
+      : 'yAbs'
   const [enableAngLen, setEnableAngLen] = useState(false)
   const [transformInfos, setTransformInfos] = useState<TransformInfo[]>()
   useEffect(() => {
@@ -69,6 +83,8 @@ export const SetAbsDistance = ({ disType }: { disType: 'xAbs' | 'yAbs' }) => {
   }, [guiMode, selections])
   if (guiMode.mode !== 'sketch') return null
 
+  const isAlign = buttonType === 'snapToYAxis' || buttonType === 'snapToXAxis'
+
   return (
     <button
       onClick={async () => {
@@ -83,11 +99,14 @@ export const SetAbsDistance = ({ disType }: { disType: 'xAbs' | 'yAbs' }) => {
         try {
           let forceVal = valueUsedInTransform || 0
           const { valueNode, variableName, newVariableInsertIndex, sign } =
-            await getModalInfo({
+            await (!isAlign &&
+              getModalInfo({
                 value: forceVal,
                 valueName: disType === 'yAbs' ? 'yDis' : 'xDis',
-            } as any)
+              } as any))
-          let finalValue = removeDoubleNegatives(valueNode, sign, variableName)
+          let finalValue = isAlign
+            ? createIdentifier('_0')
+            : removeDoubleNegatives(valueNode, sign, variableName)
 
           const { modifiedAst: _modifiedAst } = transformAstSketchLines({
             ast: JSON.parse(JSON.stringify(ast)),
@@ -117,7 +136,7 @@ export const SetAbsDistance = ({ disType }: { disType: 'xAbs' | 'yAbs' }) => {
       }`}
       disabled={!enableAngLen}
     >
-      {disType}
+      {buttonType}
     </button>
   )
 }

src/components/Toolbar/SetHorzVertDistance.tsx

@@ -15,17 +15,22 @@ import {
   TransformInfo,
   transformSecondarySketchLinesTagFirst,
   getTransformInfos,
+  ConstraintType,
 } from '../../lang/std/sketchcombos'
 import { GetInfoModal } from '../SetHorVertDistanceModal'
-import { createVariableDeclaration } from '../../lang/modifyAst'
+import { createLiteral, createVariableDeclaration } from '../../lang/modifyAst'
 import { removeDoubleNegatives } from '../AvailableVarsHelpers'
 
 const getModalInfo = create(GetInfoModal as any)
 
 export const SetHorzVertDistance = ({
-  horOrVert,
+  buttonType,
 }: {
-  horOrVert: 'setHorzDistance' | 'setVertDistance'
+  buttonType:
+    | 'setHorzDistance'
+    | 'setVertDistance'
+    | 'alignEndsHorizontally'
+    | 'alignEndsVertically'
 }) => {
   const { guiMode, selectionRanges, ast, programMemory, updateAst } = useStore(
     (s) => ({
@@ -36,6 +41,12 @@ export const SetHorzVertDistance = ({
       programMemory: s.programMemory,
     })
   )
+  const constraint: ConstraintType =
+    buttonType === 'setHorzDistance' || buttonType === 'setVertDistance'
+      ? buttonType
+      : buttonType === 'alignEndsHorizontally'
+      ? 'setVertDistance'
+      : 'setHorzDistance'
   const [enable, setEnable] = useState(false)
   const [transformInfos, setTransformInfos] = useState<TransformInfo[]>()
   useEffect(() => {
@@ -74,7 +85,7 @@ export const SetHorzVertDistance = ({
         codeBasedSelections: selectionRanges.codeBasedSelections.slice(1),
       },
       ast,
-      horOrVert
+      constraint
     )
     setTransformInfos(theTransforms)
 
@@ -87,6 +98,10 @@ export const SetHorzVertDistance = ({
   }, [guiMode, selectionRanges])
   if (guiMode.mode !== 'sketch') return null
 
+  const isAlign =
+    buttonType === 'alignEndsHorizontally' ||
+    buttonType === 'alignEndsVertically'
+
   return (
     <button
       onClick={async () => {
@@ -112,17 +127,20 @@ export const SetHorzVertDistance = ({
             variableName?: string
             newVariableInsertIndex: number
             sign: number
-          } = await getModalInfo({
+          } = await (!isAlign &&
+            getModalInfo({
               segName: tagInfo?.tag,
               isSegNameEditable: !tagInfo?.isTagExisting,
               value: valueUsedInTransform,
               initialVariableName:
-              horOrVert === 'setHorzDistance' ? 'xDis' : 'yDis',
+                constraint === 'setHorzDistance' ? 'xDis' : 'yDis',
-          } as any)
+            } as any))
           if (segName === tagInfo?.tag && value === valueUsedInTransform) {
             updateAst(modifiedAst)
           } else {
-            const finalValue = removeDoubleNegatives(
+            let finalValue = isAlign
+              ? createLiteral(0)
+              : removeDoubleNegatives(
                   valueNode as BinaryPart,
                   sign,
                   variableName
@@ -155,7 +173,7 @@ export const SetHorzVertDistance = ({
       }`}
       disabled={!enable}
     >
-      {horOrVert}
+      {buttonType}
     </button>
   )
 }

src/lang/queryAst.ts

@@ -399,3 +399,13 @@ function isTypeInArrayExp(
 ): boolean {
   return node.elements.some((el) => isTypeInValue(el, syntaxType))
 }
+
+export function isValueZero(val?: Value): boolean {
+  return (
+    (val?.type === 'Literal' && Number(val.value) === 0) ||
+    (val?.type === 'UnaryExpression' &&
+      val.operator === '-' &&
+      val.argument.type === 'Literal' &&
+      Number(val.argument.value) === 0)
+  )
+}

src/lang/std/sketchcombos.ts

@@ -1,16 +1,17 @@
 import { TransformCallback } from './stdTypes'
 import { Selections, toolTips, TooTip, Selection } from '../../useStore'
 import {
-  BinaryPart,
   CallExpression,
   Program,
   Value,
+  BinaryPart,
   VariableDeclarator,
 } from '../abstractSyntaxTree'
 import {
   getNodeFromPath,
   getNodeFromPathCurry,
   getNodePathFromSourceRange,
+  isValueZero,
 } from '../queryAst'
 import {
   createBinaryExpression,
@@ -252,14 +253,17 @@ const setHorzVertDistanceCreateNode =
         getArgLiteralVal(args?.[index]) - (referencedSegment?.to?.[index] || 0),
         2
       )
-      const makeBinExp = createBinaryExpressionWithUnary([
+      let finalValue: Value = createBinaryExpressionWithUnary([
         createSegEnd(referenceSegName, !index),
         (forceValueUsedInTransform as BinaryPart) ||
           createLiteral(valueUsedInTransform),
       ])
+      if (isValueZero(forceValueUsedInTransform)) {
+        finalValue = createSegEnd(referenceSegName, !index)
+      }
       return createCallWrapper(
         'lineTo',
-        !index ? [makeBinExp, args[1]] : [args[0], makeBinExp],
+        !index ? [finalValue, args[1]] : [args[0], finalValue],
         tag,
         valueUsedInTransform
       )