[pull] master from DefinitelyTyped:master

types/desmos/desmos-tests.ts

@@ -1,6 +1,15 @@
+// 2D Graphing Calculator
+// —————————————————————————————————————————————————————————————————————
+
 const elt = document.getElementById("calculator") as HTMLDivElement;
 const calculator = Desmos.GraphingCalculator(elt);
-calculator.setExpression({ id: "graph1", latex: "y=x^2" });
+
+// Set expression
+calculator.setExpression({ id: "graph1", type: "expression", latex: "y=x^2" });
+// Set note
+calculator.setExpression({ id: "graph2", type: "text", text: "Desmos is cool!" });
+// Set table
+calculator.setExpression({ id: "graph3", type: "table", columns: [] });
 
 // Save the current state of a calculator instance
 const state = calculator.getState();
@@ -95,11 +104,16 @@ calculator.setExpression({ id: "m", latex: "m=3" });
 // Inequality to shade a circle at the origin
 calculator.setExpression({ id: "circle1", latex: "x^2 + y^2 < 1" });
 
-// Restrict the slider for the m variable to the integers from 1 to 10
+// Set slider bounds
 calculator.setExpression({
     id: "m",
     sliderBounds: { min: 1, max: 10, step: 1 },
 });
+// Omit slider step
+calculator.setExpression({
+    id: "m",
+    sliderBounds: { min: 1, max: 10 },
+});
 
 // Table with three columns. Note that the first two columns have explicitly
 // specified values, and the third column is computed from the first.
@@ -118,6 +132,19 @@ calculator.setExpression({
     ],
 });
 
+// Observe helper expressions
+var a = calculator.HelperExpression({ latex: "a" });
+
+a.observe("numericValue", function() {
+    console.log(a.numericValue);
+});
+
+var L = calculator.HelperExpression({ latex: "L" });
+
+L.observe("listValue", function() {
+    console.log(L.listValue);
+});
+
 // Set the x axis to have arrows on both ends
 calculator.updateSettings({ xAxisArrowMode: Desmos.AxisArrowModes.BOTH });
 
@@ -163,7 +190,15 @@ document.addEventListener("mousemove", (evt) => {
     );
 });
 
-// Add three different observers to the 'xAxisLabel' property
+// Observe change
+calculator.observeEvent("change", function(eventName, event) {
+    console.log("Change occurred");
+    if (event.isUserInitiated) {
+        // throttledSave();
+    }
+});
+
+// Add three different observers to the "xAxisLabel" property
 calculator.settings.observe("xAxisLabel.foo", () => {});
 calculator.settings.observe("xAxisLabel.bar", () => {});
 calculator.settings.observe("xAxisLabel.baz", () => {});
@@ -192,13 +227,6 @@ calculator.setExpression({
     color: calculator.colors.customBlue,
 });
 
-// Text expression
-calculator.setExpression({
-    type: "text",
-    id: "4",
-    text: "Hello World",
-});
-
 // Make a dashed line
 calculator.setExpression({
     id: "line",
@@ -241,7 +269,7 @@ calculator.updateSettings({ fontSize: Desmos.FontSizes.LARGE });
 calculator.updateSettings({ fontSize: 11 });
 
 // Inspect available languages
-Desmos.supportedLanguages; // ['es', 'fr']
+Desmos.supportedLanguages; // ["es", "fr"]
 
 // Set a calculator instance to French
 calculator.updateSettings({ language: "fr" });
@@ -262,15 +290,23 @@ Desmos.enabledFeatures.GraphingCalculator
     && !Desmos.enabledFeatures.GeometryCalculator
     && !Desmos.enabledFeatures.ScientificCalculator;
 
+// Four-Function Calculator
+// —————————————————————————————————————————————————————————————————————
+
 const elt1 = document.getElementById(
     "four-function-calculator",
 ) as HTMLDivElement;
 const fourFunctionCalculator = Desmos.FourFunctionCalculator(elt1);
 
+// Scientific Calculator
+// —————————————————————————————————————————————————————————————————————
+
 const elt2 = document.getElementById("scientific-calculator") as HTMLDivElement;
 const scientificCalculator = Desmos.ScientificCalculator(elt2);
 
-// 3d calculator
+// 3D Graphing Calculator
+// —————————————————————————————————————————————————————————————————————
+
 const elt3 = document.getElementById("calculator-3d") as HTMLDivElement;
 const calculator3d = Desmos.Calculator3D(elt3);
 
@@ -280,7 +316,9 @@ calculator3d.setExpression({
     color: Desmos.Colors.BLUE,
 });
 
-// geometry calculator
+// Geometry Calculator
+// —————————————————————————————————————————————————————————————————————
+
 const eltGeometry = document.getElementById(
     "calculator-geometry",
 ) as HTMLDivElement;