Skip to content
Snippets Groups Projects
scrollView.html 8.76 KiB
Newer Older
  • Learn to ignore specific revisions
  • <!DOCTYPE html>
    <head>
      <meta charset="utf-8">
      <title>Scroll View</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
        [dropzone] {
    
          background-color: grey;
    
          margin: 1px;
          border-width: 1px;
          border-style: dashed;
        }
        [data-fact-id] {
            background-color: lightgray;
        }
        [data-hint-available] {
          background-color: yellow
        }
        math {
          display: inline-flex;
          align-items: center;
          flex-wrap: wrap;
    
        }
        .lagacySlot {
          width: 100px;
          height: 100px;
          margin: 50px;
          border-width: 1px;
    
        }
        #rectangle {
          width: 10px;
          height: 10px;
          position: absolute;
          background-color: red;
        }
      </style>
    </head>
    <body>
    
      <div id="scrollContainer">
    
        <div>No scroll selected</div>
    
        <math>
          <mi>E</mi>
          <mo>=</mo>
          <mfenced>
          <mtable>
            <mtr>
              <mtd>
                <mi dropzone="copy" data-allowed-types="PointFact,AngleFact" data-slot-id="http://mathhub.info/FrameIT/frameworld?Example?A">a</mi>
              </mtd>
              <mtd>
                  <mi dropzone="copy" data-slot-id="http://mathhub.info/FrameIT/frameworld?Example?B">b</mi>
              </mtd>
              <mtd>
                <mn>0</mn>
              </mtd>
            </mtr>
            <mtr>
              <mtd>
                <mn>0</mn>
              </mtd>
              <mtd>
                <mn>1</mn>
              </mtd>
              <mtd>
                <mn>0</mn>
              </mtd>
            </mtr>
            <mtr>
              <mtd>
                <mn>0</mn>
              </mtd>
              <mtd>
                <mn>0</mn>
              </mtd>
              <mtd>
                <mn>1</mn>
              </mtd>
            </mtr>
          </mtable>
        </math>
      </div>
    
      <button type="button" title="Apply the scroll" onclick="applyScroll('')">Magic</button><br>
    
      <p>You can right click on yellow slots to get a hint.</p>
    
    </body>
      <script>
        /**
       * @typedef Point
       * @type {object}
       * @property {number} x
       * @property {number} y
       * @property {number} z
       */
      
      /**
       * @property {Point} point
       * @property {Point} normal
       * @property {string} s_type
       * @property {string} label
       * @property {string|null} _CustomLabel
       * @property {boolean} hasCustomLabel
       * @property {number} labelId
       */
      
      class Fact {
          /** @property {string} id Fact id */
          id = ""
          /** @property {string} s_type Fact type */
          s_type = ""
          /** @property {string} label used in unity */
          label = ""
          /** @property {string | null} _CustomLabel Custom label */
          _CustomLabel = null
          /** @property {boolean} hasCustomLabel */
          hasCustomLabel = false
          /** @property {number} labelId */
          labelId = 0
      }
      
      class Point {
          /** @property {number} x */
          x = 0
          /** @property {number} y */
          y = 0
          /** @property {number} z */
          z = 0
      }
      /**
      s_type: PointFact,
      label: A,
      _CustomLabel: null,
      hasCustomLabel: false,
      labelId: 0,
      point: {x: -1.66086578, y: -0.00494432449, z: -2.17682648},
      normal: {x: 0, y: 1, z: 0}
       */
      class PointFact extends Fact {
          s_type = "PointFact";
          /** @property {Point} point */
          point = new Point()
          /** @property {Point} normal */
          normal = new Point()
      }
      
      /**
       * pid1: http://mathhub.info/FrameIT/frameworld?DefaultSituationSpace/SituationTheory1?fact252,
      pid2: http://mathhub.info/FrameIT/frameworld?DefaultSituationSpace/SituationTheory1?fact254,
      pid3: http://mathhub.info/FrameIT/frameworld?DefaultSituationSpace/SituationTheory1?fact256,
      s_type: AngleFact,
      label: ∠BDF,
      _CustomLabel: null,
      is_right_angle: false,
      hasCustomLabel: false,
      labelId: 0
       */
      class AngleFact extends Fact {
          s_type = "AngleFact";
          pid1 = "";
          pid2 = "";
          pid3 = "";
          is_right_angle = false;
      }
      
      /**
       * s_type: LineFact,
      pid1: http://mathhub.info/FrameIT/frameworld?DefaultSituationSpace/SituationTheory1?fact255,
      pid2: http://mathhub.info/FrameIT/frameworld?DefaultSituationSpace/SituationTheory1?fact256,
      dir: [object Object],
      label: [EF],
      _CustomLabel: null,
      hasCustomLabel: false,
      labelId: 0
       */
      class LineFact extends Fact {
          s_type = "LineFact";
          pid1 = "";
          pid2 = "";
          dir = new Point();
      }
      
      /**
       * s_type: RayFact,
      pid1: http://mathhub.info/FrameIT/frameworld?DefaultSituationSpace/SituationTheory1?fact256,
      pid2: http://mathhub.info/FrameIT/frameworld?DefaultSituationSpace/SituationTheory1?fact252,
      dir: [object Object],
      label: FB,
      _CustomLabel: null,
      hasCustomLabel: false,
      labelId: 0
       */
      class RayFact extends Fact {
          s_type = "RayFact";
          pid1 = "";
          pid2 = "";
          dir = new Point();
      }
      
      
      
      /** @param {DragEvent} event  */
      function dropHandler(event) {
    
        event.preventDefault()
        console.log("dropHandler", event)
    
        const data = event.dataTransfer.getData("application/json")
        //const data = event.dataTransfer.getData("text/plain")
        console.log(`Droped data: '${event.dataTransfer.types}'`, event.dataTransfer.types)
    
        /** @type {Fact} */
        const fact = JSON.parse(data)
        console.warn(`Droped Fact '${fact.label}':`, fact)
    
        /** @type {HTMLElement} */
        const element = event.target
    
        if (element.hasAttribute("data-allowed-types")) {
          //const allowedTypesStr = element.dataset["allowed-types"]
          const allowedTypesStr = element.getAttribute("data-allowed-types")
          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}'`)
            return
    
        }
    
        element.innerHTML = fact.label
        element.fact = fact
        element.dataset.factId = fact.id
    
    
      /** @param {MouseEvent} event  */
      function clickHandler(event) {
        event.preventDefault()
        console.log("clickHandler")
        console.log("clickHandler", event)
        switch (event.button) {
          case 0:
            console.log("Left button clicked")
            event.target.fact = null
            event.target.dataset.factId = null
            break
          case 1:
            console.log("Middle button clicked")
            break
          case 2:
            console.log("Right button clicked")
            getHint(event.target.dataset.slotId)
            break
          default:
            console.log("Unknown button clicked")
        }
    
      /*
      * register the drag event listeners
      */
      //document.addEventListener("dragstart", ev => printHandler(ev, "DragStartEvent"))
      //document.addEventListener("dragenter", ev => printHandler(ev, "DragEnterEvent"))
      //document.addEventListener("drag", ev => printHandler(ev, "DragEvent"))
      document.addEventListener("dragover", ev => ev.preventDefault())
      //document.addEventListener("dragover", ev => printPreventDefaultHandler(ev, "DragOverEvent"))
      //document.addEventListener("dragleave", ev => printHandler(ev, "DragLeaveEvent"))
      //document.addEventListener("dragend", ev => printHandler(ev, "DragEndEvent"))
      
      // select all dropzones and add drop event listeners
    
      //let dropZones = document.querySelectorAll('[dropzone="copy"]')
      //dropZones.forEach( dropZone => dropZone.addEventListener("drop", ev => dropHandler(ev, "DropEvent")) )
      
      /** select all dropzones and add drop event listeners */
      function addDropZoneEventListeners() {
        console.log("addDropZoneEventListeners")
        document.querySelectorAll('[dropzone="copy"]')
          .forEach( dropZone => {
            dropZone.removeEventListener("drop", dropHandler)
            dropZone.removeEventListener("click", clickHandler)
            dropZone.removeEventListener("contextmenu", clickHandler)
            //dropZone.addEventListener("dragover", ev => ev.preventDefault())
            dropZone.addEventListener("drop", dropHandler)
            dropZone.addEventListener("click", clickHandler)
            dropZone.addEventListener("contextmenu", clickHandler)
          })
      }
      //addDropZoneEventListeners()
    
      <!--<script src="visualiseCursor.mjs" defer type="module"></script>-->
      <!--<script>
      /* mouse and pointer event handling */
      const rectangle = document.createElement("div");
      rectangle.id = "rectangle";
      
      console.log("appendChild to", document.body)
      document.body.appendChild(rectangle);
      
      function followCursor(event) {
      const cursorX = event.clientX;
      const cursorY = event.clientY +5;
      //console.log(`MouseEvent X: ${cursorX}, Y: ${cursorY}, Event type: ${event.type}`, event);
      rectangle.style.left = `${cursorX}px`;
      rectangle.style.top = `${cursorY}px`;
      }
      
      document.addEventListener("mousemove", followCursor);
      document.addEventListener("pointermove", followCursor);
      
      document.addEventListener("mouseover", followCursor);
      document.addEventListener("pointerover", followCursor);
      
      document.addEventListener("mouseout", followCursor);
      document.addEventListener("pointerout", followCursor);
      </script>-->
    </html>