From 75fb610dcad5848a87f7a2337a43b08c65b91834 Mon Sep 17 00:00:00 2001
From: baletiballo <75846481+baletiballo@users.noreply.github.com>
Date: Fri, 24 Jan 2025 18:58:07 +0100
Subject: [PATCH] Add assigned PointFacts to MathMind as well
---
.../scroll_interaction/Drop_facts.js | 9 ++-
.../scroll_interaction/Math_Mind.js | 63 +++++++++++--------
.../scroll_interaction/SetScrollContent.js | 14 ++++-
3 files changed, 56 insertions(+), 30 deletions(-)
diff --git a/Assets/StreamingAssets/ScrollView_Server/scroll_interaction/Drop_facts.js b/Assets/StreamingAssets/ScrollView_Server/scroll_interaction/Drop_facts.js
index fb09f7cc..7a11e5f0 100644
--- a/Assets/StreamingAssets/ScrollView_Server/scroll_interaction/Drop_facts.js
+++ b/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")
diff --git a/Assets/StreamingAssets/ScrollView_Server/scroll_interaction/Math_Mind.js b/Assets/StreamingAssets/ScrollView_Server/scroll_interaction/Math_Mind.js
index 246e1687..fb3352ce 100644
--- a/Assets/StreamingAssets/ScrollView_Server/scroll_interaction/Math_Mind.js
+++ b/Assets/StreamingAssets/ScrollView_Server/scroll_interaction/Math_Mind.js
@@ -1,35 +1,46 @@
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)
+ })
+});
diff --git a/Assets/StreamingAssets/ScrollView_Server/scroll_interaction/SetScrollContent.js b/Assets/StreamingAssets/ScrollView_Server/scroll_interaction/SetScrollContent.js
index d2ba962b..f75dec69 100644
--- a/Assets/StreamingAssets/ScrollView_Server/scroll_interaction/SetScrollContent.js
+++ b/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
--
GitLab