diff --git a/modules/ui/components/controls/CheckboxControl.jsx b/modules/ui/components/controls/CheckboxControl.jsx
index 78f4efe5..af186f14 100644
--- a/modules/ui/components/controls/CheckboxControl.jsx
+++ b/modules/ui/components/controls/CheckboxControl.jsx
@@ -5,7 +5,7 @@ export default class CheckboxControl extends React.Component {
   render() {
     let {onChange, value} = this.props;
     return <input type='checkbox' 
-              defaultValue={value} 
+              checked={value}
               onChange={e => onChange(e.target.checked)}  /> 
   }
 }
diff --git a/web/app/sketcher/actions/constraintActions.js b/web/app/sketcher/actions/constraintActions.js
index 22059371..468c06af 100644
--- a/web/app/sketcher/actions/constraintActions.js
+++ b/web/app/sketcher/actions/constraintActions.js
@@ -263,6 +263,48 @@ export default [
     }
   },
 
+  {
+    id: 'DistancePL',
+    shortName: 'Point to Line Distance',
+    description: 'Distance between Point and Line',
+    selectionMatcher: (selection, sortedByType) => matchTypes(sortedByType, EndPoint, 1, Segment, 1),
+
+    invoke: ctx => {
+      const {viewer} = ctx;
+
+      const [pt, seg] = sortSelectionByType(viewer.selected);
+
+      const constr = new AlgNumConstraint(ConstraintDefinitions.DistancePL, [pt, seg]);
+      constr.initConstants();
+
+      editConstraint(ctx, constr, () => {
+        const pm = viewer.parametricManager;
+        pm.add(constr);
+      });
+    }
+  },
+
+  {
+    id: 'DistancePP',
+    shortName: 'Two Point Distance',
+    description: 'Distance between two Points',
+    selectionMatcher: (selection, sortedByType) => matchTypes(sortedByType, EndPoint, 2),
+
+    invoke: ctx => {
+      const {viewer} = ctx;
+
+      const [p1, p2] = sortSelectionByType(viewer.selected);
+
+      const constr = new AlgNumConstraint(ConstraintDefinitions.DistancePP, [p1, p2]);
+      constr.initConstants();
+
+      editConstraint(ctx, constr, () => {
+        const pm = viewer.parametricManager;
+        pm.add(constr);
+      });
+    }
+  },
+
   {
     id: 'Lock',
     shortName: 'Lock',
diff --git a/web/app/sketcher/components/ConstraintEditor.jsx b/web/app/sketcher/components/ConstraintEditor.jsx
index 3aeddd78..008b8923 100644
--- a/web/app/sketcher/components/ConstraintEditor.jsx
+++ b/web/app/sketcher/components/ConstraintEditor.jsx
@@ -5,6 +5,7 @@ import Stack from "ui/components/Stack";
 import ButtonGroup from "ui/components/controls/ButtonGroup";
 import Button from "ui/components/controls/Button";
 import {useStream} from "../../../../modules/ui/effects";
+import CheckboxControl from "../../../../modules/ui/components/controls/CheckboxControl";
 
 export function ConstraintEditor() {
 
@@ -46,6 +47,8 @@ export function ConstraintEditor() {
             const val = values[name];
             if (def.type === 'number') {
               return <NumberControl value={val} onChange={value => setValue(name, value)}/>
+            } else if (def.type === 'boolean') {
+              return <CheckboxControl value={val} onChange={value => setValue(name, value)}/>
             } else {
               return <span>{val}</span>;
             }
diff --git a/web/app/sketcher/constr/ANConstraints.js b/web/app/sketcher/constr/ANConstraints.js
index cb3215c1..1b3dabd3 100644
--- a/web/app/sketcher/constr/ANConstraints.js
+++ b/web/app/sketcher/constr/ANConstraints.js
@@ -131,6 +131,51 @@ export const ConstraintDefinitions = {
 
   },
 
+  DistancePL: {
+    id: 'DistancePL',
+    name: 'Distance Between Point And Line',
+    constants: {
+      distance: {
+        type: 'number',
+        description: 'the distance between two points',
+        initialValue: ([p, l]) => {
+          return Math.abs(l.nx * p.x + l.ny* p.y - l.nx * l.a.x - l.ny * l.a.y);
+        },
+      },
+      inverted: {
+        type: 'boolean',
+        description: 'whether constraint is being calculated on opposite side of the line',
+        initialValue: ([p, l]) => {
+          return l.nx * p.x + l.ny* p.y - l.nx * l.a.x - l.ny * l.a.y < 0;
+        },
+      }
+
+    },
+
+    defineParamsScope: ([p, l], callback) => {
+      p.visitParams(callback);
+      callback(l.params.ang);
+      l.a.visitParams(callback);
+    },
+
+    collectPolynomials: (polynomials, [x, y, ang, ax, ay], {distance, inverted}) => {
+      polynomials.push(new Polynomial( - (inverted ? -1:1) * distance )
+        .monomial(-1)
+          .term(x, POW_1_FN)
+          .term(ang, SIN_FN)
+        .monomial(1)
+          .term(y, POW_1_FN)
+          .term(ang, COS_FN)
+        .monomial(1)
+          .term(ax, POW_1_FN)
+          .term(ang, SIN_FN)
+        .monomial(-1)
+          .term(ay, POW_1_FN)
+          .term(ang, COS_FN));
+    },
+
+  },
+
   Angle: {
     id: 'Angle',
     name: 'Absolute Line Angle',
@@ -490,12 +535,12 @@ export const ConstraintDefinitions = {
 
 function tangentLCPolynomial(ang, ax, ay, cx, cy, r, inverted) {
   return new Polynomial(0)
-    .monomial(1)
+    .monomial(-1)
       .term(cx, POW_1_FN)
-      .term(ang, COS_FN)
+      .term(ang, SIN_FN)
     .monomial(1)
       .term(cy, POW_1_FN)
-      .term(ang, SIN_FN)
+      .term(ang, COS_FN)
     .monomial(1)
       .term(ax, POW_1_FN)
       .term(ang, SIN_FN)
diff --git a/web/app/sketcher/sketcher-app.js b/web/app/sketcher/sketcher-app.js
index c78d83c6..e9ceb3dc 100644
--- a/web/app/sketcher/sketcher-app.js
+++ b/web/app/sketcher/sketcher-app.js
@@ -218,7 +218,7 @@ function App2D() {
   });
 
   this.registerAction('P2LDistanceConstraint', "Distance Between Point and Line", function () {
-    app.viewer.parametricManager.p2lDistance(app.viewer.selected, prompt);
+    getActionIfAvailable('DistancePL', app.viewer.selected, action => action.invoke(app.context));
   });
 
   this.registerAction('mirrorConstraint', "Mirror Constraint", function () {
@@ -226,7 +226,7 @@ function App2D() {
   });
 
   this.registerAction('P2PDistanceConstraint', "Distance Between two Points", function () {
-    app.viewer.parametricManager.p2pDistance(app.viewer.selected, prompt);
+    getActionIfAvailable('DistancePP', app.viewer.selected, action => action.invoke(app.context));
   });
 
   this.registerAction('RadiusConstraint', "Radius Constraint", function () {