From a304b276b10594f9da0063824a0750ee7565cd30 Mon Sep 17 00:00:00 2001
From: Duane Nykamp <nykamp@umn.edu>
Date: Mon, 27 Feb 2023 13:09:09 -0600
Subject: [PATCH] EmphasizeRightAngle attribute for angle (#1924)

---
 cypress/e2e/DoenetML/tagSpecific/angle.cy.js | 46 ++++++++++++++++++++
 src/Core/components/Angle.js                 |  8 ++++
 src/Viewer/renderers/angle.jsx               |  5 ++-
 3 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/cypress/e2e/DoenetML/tagSpecific/angle.cy.js b/cypress/e2e/DoenetML/tagSpecific/angle.cy.js
index 87672fa1a3..3a08971b11 100644
--- a/cypress/e2e/DoenetML/tagSpecific/angle.cy.js
+++ b/cypress/e2e/DoenetML/tagSpecific/angle.cy.js
@@ -2244,4 +2244,50 @@ describe('Angle Tag Tests', function () {
 
   })
 
+  it('emphasize right angle', () => {
+    cy.window().then(async (win) => {
+      win.postMessage({
+        doenetML: `
+  <graph>
+    <angle name="a1" through="(-5,0) (0,0) (0,-5)" />
+    <angle name="a2" through="(5,0) (0,0) (0,-5)" emphasizeRightAngle="false" />
+    <angle name="a3" through="(5,0) (0,0) (0,5)" emphasizeRightAngle="$bi3" />
+  </graph>
+
+  <p>Emphasize right angle 1: <booleanInput name="bi1" bindValueTo="$a1.emphasizeRightAngle" /></p>
+  <p>Emphasize right angle 2: <booleanInput name="bi2" bindValueTo="$a2.emphasizeRightAngle" /></p>
+  <p>Emphasize right angle 3: <booleanInput name="bi3" /></p>
+
+  <p name="emphasize">Emphasize right angle: $a1.emphasizeRightAngle, $a2.emphasizeRightAngle, $a3.emphasizeRightAngle</p>
+  
+  `}, "*");
+    });
+
+    // TODO: How to check renderer itself?
+
+    cy.get('#\\/emphasize').should("have.text", "Emphasize right angle: true, false, false");
+
+    cy.window().then(async (win) => {
+      let stateVariables = await win.returnAllStateVariables1();
+      expect(stateVariables['/a1'].stateValues.emphasizeRightAngle).eq(true);
+      expect(stateVariables['/a2'].stateValues.emphasizeRightAngle).eq(false);
+      expect(stateVariables['/a3'].stateValues.emphasizeRightAngle).eq(false);
+    })
+
+    cy.get('#\\/bi1').click();
+    cy.get('#\\/bi2').click();
+    cy.get('#\\/bi3').click();
+
+
+    cy.get('#\\/emphasize').should("have.text", "Emphasize right angle: false, true, true");
+
+    cy.window().then(async (win) => {
+      let stateVariables = await win.returnAllStateVariables1();
+      expect(stateVariables['/a1'].stateValues.emphasizeRightAngle).eq(false);
+      expect(stateVariables['/a2'].stateValues.emphasizeRightAngle).eq(true);
+      expect(stateVariables['/a3'].stateValues.emphasizeRightAngle).eq(true);
+    })
+
+  })
+
 });
diff --git a/src/Core/components/Angle.js b/src/Core/components/Angle.js
index 3eb02475ac..49cfd41cc7 100644
--- a/src/Core/components/Angle.js
+++ b/src/Core/components/Angle.js
@@ -78,6 +78,14 @@ export default class Angle extends GraphicalComponent {
       public: true,
     };
 
+    attributes.emphasizeRightAngle = {
+      createComponentOfType: "boolean",
+      createStateVariable: "emphasizeRightAngle",
+      defaultValue: true,
+      public: true,
+      forRenderer: true,
+    }
+
     return attributes;
   }
 
diff --git a/src/Viewer/renderers/angle.jsx b/src/Viewer/renderers/angle.jsx
index 132d20d0c0..322cbcf6c7 100644
--- a/src/Viewer/renderers/angle.jsx
+++ b/src/Viewer/renderers/angle.jsx
@@ -55,7 +55,8 @@ export default React.memo(function Angle(props) {
       radius: SVs.numericalRadius,
       fillColor: SVs.selectedStyle.fillColor,
       strokeColor: SVs.selectedStyle.lineColor,
-      highlight: false
+      highlight: false,
+      orthoType: SVs.emphasizeRightAngle ? "square" : "sector",
     };
 
     jsxAngleAttributes.label = {
@@ -150,6 +151,8 @@ export default React.memo(function Angle(props) {
         previousWithLabel.current = withlabel;
       }
 
+      angleJXG.current.visProp.orthotype = SVs.emphasizeRightAngle ? "square" : "sector";
+
       angleJXG.current.needsUpdate = true;
       angleJXG.current.update();