Add assigned PointFacts to MathMind as well

Assets/StreamingAssets/ScrollView_Server/scroll_interaction/Drop_facts.js

@@ -142,7 +142,7 @@ function dropHandler(event) {
     if (element.hasAttribute("data-allowed-types")) {
     //const allowedTypesStr = element.dataset["allowed-types"]
     const allowedTypesStr = element.getAttribute("data-allowed-types")
-    const allowedTypes = allowedTypesStr.split(",")
+    const allowedTypes = allowedTypesStr.split(" ")
 
     if (!allowedTypes.includes(fact.s_type)) {
         console.warn(`The drop target data-type '${fact.s_type}' is not a member of the allowed types '${allowedTypesStr}'`)
@@ -153,6 +153,12 @@ function dropHandler(event) {
     element.innerHTML = fact.label
     element.fact = fact
     element.dataset.factId = fact.id
+
+    const mathMind = document.querySelector('#math-mind-canvas')
+    if (fact.s_type == "PointFact") {
+        mathMind.dispatchEvent(new CustomEvent("PointAssigned", {detail: fact.point}))
+    }
+    
 }
 
 /** @param {MouseEvent} event  */
@@ -165,6 +171,7 @@ function clickHandler(event) {
         console.log("Left button clicked")
         event.target.fact = null
         event.target.dataset.factId = null
+        element.dispatchEvent(new Event("factUnassigned"))
         break
     case 1:
         console.log("Middle button clicked")

Assets/StreamingAssets/ScrollView_Server/scroll_interaction/Math_Mind.js

 import * as THREE from 'three';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-const scene = new THREE.Scene();
-const camera = new THREE.PerspectiveCamera(75, 4/3, 0.1, 1000);
+$(function () {
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(75, 4 / 3, 0.1, 1000);
 
-const renderer = new THREE.WebGLRenderer({
-    canvas: document.querySelector('#math-mind-canvas')
-});
-// The canvas is initially hidden, in case the three.js import fails
-// If we reach this code, it obviously didn't
-renderer.domElement.removeAttribute("hidden");
-const controls = new OrbitControls( camera, renderer.domElement );
+    const renderer = new THREE.WebGLRenderer({
+        canvas: document.querySelector('#math-mind-canvas')
+    });
+    // The canvas is initially hidden, in case the three.js import fails
+    // If we reach this code, it obviously didn't
+    renderer.domElement.removeAttribute("hidden");
+    const controls = new OrbitControls(camera, renderer.domElement);
+    const gridHelper = new THREE.GridHelper();
+    scene.add(gridHelper);
 
-const pointGeo = new THREE.SphereGeometry(0.1);
-const material = new THREE.MeshBasicMaterial({ color: 0xf0f0f0 });
+    camera.position.set(5, -5, 5);
+    controls.update();
 
-camera.position.set(5,-5,5);
-controls.update();
+    function animate() {
+        renderer.render(scene, camera);
+        controls.update();
+    }
+    renderer.setAnimationLoop(animate);
 
-function animate() {
-    renderer.render(scene, camera);
-    controls.update();
-}
-renderer.setAnimationLoop(animate);
 
-function addPointFact(x, y, z) {
-    const point = new THREE.Mesh(pointGeo, material);
-    scene.add(point);
-    point.position.set(x, y, z);
-}
+    const pointGeo = new THREE.SphereGeometry(0.1);
+    const material = new THREE.MeshBasicMaterial({ color: 0xf0f0f0 });
+    /**
+     * 
+     * @param {PointFact} point 
+     */
+    function addPointFact(point) {
+        console.log(point)
+        const point_visual = new THREE.Mesh(pointGeo, material);
+        scene.add(point_visual);
+        point_visual.position.set(point.x, point.y, point.z);
+        console.log("added point to Math_Mind", point)
+    }
 
-addPointFact(0, 0, 0);
-addPointFact(-4, 0, 0);
-addPointFact(0, 2, 0);
\ No newline at end of file
+    document.querySelector('#math-mind-canvas').addEventListener("PointAssigned", function (event) {
+        console.log(event)
+        addPointFact(event.detail)
+    })
+});

Assets/StreamingAssets/ScrollView_Server/scroll_interaction/SetScrollContent.js

@@ -28,7 +28,7 @@ let currentScrollRef = "" // ref of the scroll currently displayed
 function RenderScroll() {
     /** @type {MMTScroll} */
     const scroll = JSON.parse(document.querySelector("#Unity-Data-Interface").dataset.scrollDynamic);
-    console.log(scroll.requiredFacts);
+    //console.log(scroll.requiredFacts);
     const scrollContainer = document.querySelector("#scrollContainer");
 
     // replace the description if the scroll changed, otherwise only its content needs update
@@ -37,12 +37,20 @@ function RenderScroll() {
         scrollContainer.innerHTML = scroll.description;
     }
 
-    // go through the facts in the scroll, show their labels and add dropzones
+    // go through the facts in the scroll, show their labels, add dropzones and limit the allowed types
     scroll.requiredFacts.forEach(fact => {
         $("[data-slot-id='" + fact.ref.uri + "']")
             .text(fact.label)
             .attr("dropzone", "copy")
-            //.attr("data-fact-id", fact.df == null ? "" : fact.df.ref.uri)
+            .attr("data-allowed-types", function (_, _) {
+                // Since MMT types are extremely expressive, many things can go wrong here. Luckily this means the fact is certainly not a PointFact, and we are done.
+                try {
+                    if (fact.tp.uri = "http://mathhub.info/MitM/core/geometry?3DGeometry?point") { return "PointFact"; }
+
+                }
+                catch (err) { }
+            })
+        //.attr("data-fact-id", fact.df == null ? "" : fact.df.ref.uri)
     })
 
     // acquired facts only need updated labels