Allow laserpointer to move over applet

Author: martenrichter

src/index.css

@@ -181,6 +181,11 @@ code {
   transition: left 0.05s ease, top 0.05s ease, width 0.05s ease, height 0.05s ease;
 }
 
+.appletMain.appletMainLaserPointer{
+  cursor: none;
+  pointer-events: none;
+}
+
 .appletIframe{
   background-color: #efefef;
   color: black;

src/ui/blackboard/blackboard.jsx

@@ -1049,7 +1049,7 @@ export class Blackboard extends Component {
             <SVGSpotlight
               ref={this.spotlight}
               bbwidth={this.props.bbwidth}
-              zIndex={51 + zoffset}
+              zIndex={152 + zoffset}
             ></SVGSpotlight>
             {this.props.experimental && this.state.appon && (
               <JupyterHublet
@@ -1060,6 +1060,7 @@ export class Blackboard extends Component {
                 appids={this.state.appids}
                 ipynb={this.state.appipynb}
                 master={this.state.appletMaster}
+                laserPointerOn={this.state.cursor.mode === 'laserpointer'}
                 makeAppletMaster={this.props.makeAppletMaster}
                 screenShotSaver={this.props.screenShotSaver}
                 closeApp={this.props.closeApp}

src/ui/blackboard/jupyterhublet.jsx

@@ -1035,14 +1035,13 @@ export class JupyterHublet extends Component {
               (this.state.resize?.height ?? 0))
       )
     )
+    let className = 'appletMain'
+    if (this.state.movepos || this.state.resize) className += ' appletMainMove'
+    if (this.props.laserPointerOn) className += ' appletMainLaserPointer'
     return (
       <Fragment>
         <div
-          className={
-            this.state.movepos || this.state.resize
-              ? 'appletMain appletMainMove'
-              : 'appletMain'
-          }
+          className={className}
           key='appletMain'
           style={{
             position: 'absolute',