@ccp-nc/crystvis-js 0.7.1 → 0.7.2

package/lib/render.js

@@ -27,6 +27,7 @@ import {
 
 // Ratio of secondary directional light intensity to primary
 const SECONDARY_LIGHT_INTENSITY_RATIO = 0.4;
+const DRAG_THRESHOLD_SQ = 25;
 
 // themes:
 const themes = {
@@ -116,8 +117,34 @@ class Renderer {
 
         // Raycast for clicks
         this._rcastlist = [];
-        this._boundRaycastClick = this._raycastClick.bind(this);
-        this._r.domElement.addEventListener('pointerdown', this._boundRaycastClick);
+        this._raycaster = new THREE.Raycaster();
+        this._ndcVector = new THREE.Vector2();
+        this._clickDownX = 0;
+        this._clickDownY = 0;
+        this._pointerDownValid = false;
+        this._boundClickDown = (e) => {
+            if (!e.isPrimary) return;
+            this._clickDownX = e.clientX;
+            this._clickDownY = e.clientY;
+            this._pointerDownValid = true;
+        };
+        this._boundClickUp = (e) => {
+            if (!e.isPrimary) return;
+            if (!this._pointerDownValid) return;
+            this._pointerDownValid = false;
+            const dx = e.clientX - this._clickDownX;
+            const dy = e.clientY - this._clickDownY;
+            if (dx * dx + dy * dy <= DRAG_THRESHOLD_SQ) {
+                this._raycastClick(e);
+            }
+        };
+        this._boundClickCancel = (e) => {
+            if (!e.isPrimary) return;
+            this._pointerDownValid = false;
+        };
+        this._r.domElement.addEventListener('pointerdown', this._boundClickDown);
+        this._r.domElement.addEventListener('pointerup', this._boundClickUp);
+        this._r.domElement.addEventListener('pointercancel', this._boundClickCancel);
 
         // Groups
         this._groups = {
@@ -170,7 +197,6 @@ class Renderer {
     _updateSize() {
         this._w = this._w || this._div.innerWidth();
         this._h = this._h || this._div.innerHeight();
-        this._offset = this._div.offset();
     }
 
     _resize() {
@@ -191,11 +217,10 @@ class Renderer {
         // We create a 2D vector
         var vector = this.documentToWorld(e.clientX, e.clientY);
 
-        // We create a raycaster, which is some kind of laser going through your scene
-        var raycaster = new THREE.Raycaster();
+        // Reuse the shared raycaster instance
         // We apply two parameters to the 'laser', its origin (where the user clicked) 
         // and the direction (what the camera 'sees')
-        raycaster.setFromCamera(vector, this._c);
+        this._raycaster.setFromCamera(vector, this._c);
 
         // We get all the objects the 'laser' find on its way (it returns an array containing the objects)
         for (var i = 0; i < this._rcastlist.length; ++i) {
@@ -205,7 +230,7 @@ class Renderer {
             var filter = this._rcastlist[i][2];
 
             targ = targ || this._s;
-            var intersects = raycaster.intersectObjects(targ.children);
+            var intersects = this._raycaster.intersectObjects(targ.children);
 
             var objects = [];
             for (var j = 0; j < intersects.length; ++j) {
@@ -349,8 +374,10 @@ class Renderer {
             this._animFrameId = null;
         }
 
-        // 2. Remove the raycaster's own pointerdown listener
-        this._r.domElement.removeEventListener('pointerdown', this._boundRaycastClick);
+        // 2. Remove the raycaster's own pointer listeners
+        this._r.domElement.removeEventListener('pointerdown', this._boundClickDown);
+        this._r.domElement.removeEventListener('pointerup', this._boundClickUp);
+        this._r.domElement.removeEventListener('pointercancel', this._boundClickCancel);
         this._rcastlist = [];
         this._sboxlist = [];
 
@@ -525,15 +552,14 @@ class Renderer {
      * Convert coordinates in the dom element frame to coordinates in the world frame
      */
     documentToWorld(x, y) {
-        // We create a 2D vector
-        var vector = new THREE.Vector2();
+        const rect = this._r.domElement.getBoundingClientRect();
         // We set its position where the user clicked and we convert it to a number between -1 & 1
-        vector.set(
-            2 * ((x - this._offset.left) / this._w) - 1,
-            1 - 2 * ((y - this._offset.top) / this._h)
+        this._ndcVector.set(
+            2 * ((x - rect.left) / rect.width) - 1,
+            1 - 2 * ((y - rect.top) / rect.height)
         );
 
-        return vector;
+        return this._ndcVector;
     }
 
     // Style

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ccp-nc/crystvis-js",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "A Three.js based crystallographic visualisation tool",
   "main": "index.js",
   "type": "module",

package/test/render.js

@@ -0,0 +1,168 @@
+'use strict';
+
+import * as chai from 'chai';
+import { Renderer } from '../lib/render.js';
+
+const expect = chai.expect;
+
+function dispatchPointerEvent(target, type, x, y, { isPrimary = true } = {}) {
+    const event = new window.MouseEvent(type, {
+        bubbles: true,
+        clientX: x,
+        clientY: y,
+    });
+    Object.defineProperty(event, 'isPrimary', { value: isPrimary });
+    target.dispatchEvent(event);
+}
+
+describe('Renderer click drag guard', function () {
+    let renderer;
+    let originalAnimate;
+
+    before(function () {
+        originalAnimate = Renderer.prototype._animate;
+        Renderer.prototype._animate = function () {};
+    });
+
+    after(function () {
+        Renderer.prototype._animate = originalAnimate;
+    });
+
+    beforeEach(function () {
+        const host = document.getElementById('crystvis');
+        host.innerHTML = '';
+        renderer = new Renderer('#crystvis', 320, 240);
+        renderer._r.dispose = () => {};
+    });
+
+    afterEach(function () {
+        if (renderer && renderer._r) {
+            renderer.dispose();
+        }
+        renderer = null;
+        const host = document.getElementById('crystvis');
+        host.innerHTML = '';
+    });
+
+    it('should raycast on pointerup when the pointer stays within the drag threshold', function () {
+        let raycastCalls = 0;
+        renderer._raycastClick = () => {
+            raycastCalls++;
+        };
+
+        dispatchPointerEvent(renderer._r.domElement, 'pointerdown', 100, 100);
+        dispatchPointerEvent(renderer._r.domElement, 'pointerup', 103, 104);
+
+        expect(raycastCalls).to.equal(1);
+    });
+
+    it('should not raycast on pointerup after a drag larger than the threshold', function () {
+        let raycastCalls = 0;
+        renderer._raycastClick = () => {
+            raycastCalls++;
+        };
+
+        dispatchPointerEvent(renderer._r.domElement, 'pointerdown', 100, 100);
+        dispatchPointerEvent(renderer._r.domElement, 'pointerup', 110, 100);
+
+        expect(raycastCalls).to.equal(0);
+    });
+
+    it('should remove pointer listeners during dispose', function () {
+        let raycastCalls = 0;
+        const canvas = renderer._r.domElement;
+        renderer._raycastClick = () => {
+            raycastCalls++;
+        };
+
+        renderer.dispose();
+        renderer = null;
+
+        dispatchPointerEvent(canvas, 'pointerdown', 100, 100);
+        dispatchPointerEvent(canvas, 'pointerup', 100, 100);
+
+        expect(raycastCalls).to.equal(0);
+    });
+
+    it('should ignore non-primary pointer events', function () {
+        let raycastCalls = 0;
+        renderer._raycastClick = () => {
+            raycastCalls++;
+        };
+
+        dispatchPointerEvent(renderer._r.domElement, 'pointerdown', 100, 100, { isPrimary: false });
+        dispatchPointerEvent(renderer._r.domElement, 'pointerup', 100, 100, { isPrimary: false });
+
+        expect(raycastCalls).to.equal(0);
+    });
+
+    it('should not raycast after pointercancel', function () {
+        let raycastCalls = 0;
+        renderer._raycastClick = () => {
+            raycastCalls++;
+        };
+
+        dispatchPointerEvent(renderer._r.domElement, 'pointerdown', 100, 100);
+        dispatchPointerEvent(renderer._r.domElement, 'pointercancel', 100, 100);
+        dispatchPointerEvent(renderer._r.domElement, 'pointerup', 100, 100);
+
+        expect(raycastCalls).to.equal(0);
+    });
+
+    it('should convert document coordinates using the canvas bounding rect', function () {
+        renderer._r.domElement.getBoundingClientRect = () => ({
+            left: 40,
+            top: 20,
+            width: 200,
+            height: 100,
+        });
+
+        const vector = renderer.documentToWorld(140, 70);
+
+        expect(vector.x).to.equal(0);
+        expect(vector.y).to.equal(0);
+    });
+
+    it('should reuse the shared NDC vector', function () {
+        renderer._r.domElement.getBoundingClientRect = () => ({
+            left: 0,
+            top: 0,
+            width: 320,
+            height: 240,
+        });
+
+        const first = renderer.documentToWorld(160, 120);
+        const second = renderer.documentToWorld(80, 60);
+
+        expect(second).to.equal(first);
+        expect(second.x).to.equal(-0.5);
+        expect(second.y).to.equal(0.5);
+    });
+
+    it('should reuse the shared raycaster instance', function () {
+        let setFromCameraCalls = 0;
+        const sharedRaycaster = {
+            setFromCamera(vector, camera) {
+                setFromCameraCalls++;
+                expect(camera).to.equal(renderer._c);
+                expect(vector.x).to.equal(0);
+                expect(vector.y).to.equal(0);
+            },
+            intersectObjects() {
+                return [];
+            },
+        };
+
+        renderer._r.domElement.getBoundingClientRect = () => ({
+            left: 0,
+            top: 0,
+            width: 320,
+            height: 240,
+        });
+        renderer._raycaster = sharedRaycaster;
+
+        renderer._raycastClick({ clientX: 160, clientY: 120 });
+
+        expect(setFromCameraCalls).to.equal(1);
+    });
+});

package/test/setup-dom.cjs

@@ -31,6 +31,8 @@ setGlobal('document',          dom.window.document);
 setGlobal('navigator',         dom.window.navigator);
 setGlobal('HTMLElement',       dom.window.HTMLElement);
 setGlobal('HTMLCanvasElement', dom.window.HTMLCanvasElement);
+setGlobal('AbortController',   dom.window.AbortController);
+setGlobal('AbortSignal',       dom.window.AbortSignal);
 setGlobal('Image',             dom.window.Image);
 setGlobal('ImageData',         dom.window.ImageData);
 setGlobal('XMLHttpRequest',    dom.window.XMLHttpRequest);
@@ -48,19 +50,73 @@ const _origGetContext = canvasProto.getContext;
 canvasProto.getContext = function (type, ...args) {
     if (type === 'webgl' || type === 'webgl2' || type === 'experimental-webgl') {
         // Return a minimal WebGL stub that THREE can interrogate without causing
-        // errors.  Only the methods referenced during renderer initialisation
+        // errors. Only the methods referenced during renderer initialisation
         // need to be present.
-        return {
+        const gl = {
+            VERSION: 0x1F02,
+            VENDOR: 0x1F00,
+            RENDERER: 0x1F01,
+            SHADING_LANGUAGE_VERSION: 0x8B8C,
+            MAX_TEXTURE_IMAGE_UNITS: 0x8872,
+            MAX_VERTEX_TEXTURE_IMAGE_UNITS: 0x8B4C,
+            MAX_TEXTURE_SIZE: 0x0D33,
+            MAX_CUBE_MAP_TEXTURE_SIZE: 0x851C,
+            MAX_VERTEX_ATTRIBS: 0x8869,
+            MAX_VERTEX_UNIFORM_VECTORS: 0x8DFB,
+            MAX_VARYING_VECTORS: 0x8DFC,
+            MAX_FRAGMENT_UNIFORM_VECTORS: 0x8DFD,
+            MAX_SAMPLES: 0x8D57,
+            FRAMEBUFFER: 0x8D40,
+            FRAMEBUFFER_COMPLETE: 0x8CD5,
             canvas: this,
             drawingBufferWidth: 300,
             drawingBufferHeight: 150,
+            getContextAttributes: () => ({
+                alpha: true,
+                depth: true,
+                stencil: true,
+                antialias: false,
+                premultipliedAlpha: true,
+                preserveDrawingBuffer: false,
+                powerPreference: 'default',
+                failIfMajorPerformanceCaveat: false,
+            }),
+            getSupportedExtensions: () => [],
             getExtension: () => null,
-            getParameter: () => null,
+            getParameter: (pname) => {
+                switch (pname) {
+                case gl.VERSION:
+                    return 'WebGL 1.0';
+                case gl.VENDOR:
+                    return 'jsdom';
+                case gl.RENDERER:
+                    return 'jsdom WebGL stub';
+                case gl.SHADING_LANGUAGE_VERSION:
+                    return 'WebGL GLSL ES 1.0';
+                case gl.MAX_TEXTURE_IMAGE_UNITS:
+                case gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS:
+                    return 16;
+                case gl.MAX_TEXTURE_SIZE:
+                case gl.MAX_CUBE_MAP_TEXTURE_SIZE:
+                    return 4096;
+                case gl.MAX_VERTEX_ATTRIBS:
+                    return 16;
+                case gl.MAX_VERTEX_UNIFORM_VECTORS:
+                case gl.MAX_VARYING_VECTORS:
+                case gl.MAX_FRAGMENT_UNIFORM_VECTORS:
+                    return 1024;
+                case gl.MAX_SAMPLES:
+                    return 4;
+                default:
+                    return 0;
+                }
+            },
             getShaderPrecisionFormat: () => ({ rangeMin: 127, rangeMax: 127, precision: 23 }),
             createTexture: () => ({}),
             bindTexture: () => {},
             texParameteri: () => {},
             pixelStorei: () => {},
+            activeTexture: () => {},
             enable: () => {},
             disable: () => {},
             blendEquation: () => {},
@@ -93,14 +149,18 @@ canvasProto.getContext = function (type, ...args) {
             compileShader: () => {},
             attachShader: () => {},
             linkProgram: () => {},
+            getProgramInfoLog: () => '',
             getProgramParameter: (p, pname) => {
                 // LINK_STATUS
                 if (pname === 35714) return true;
                 return null;
             },
             getShaderParameter: () => true,
+            getShaderInfoLog: () => '',
             getUniformLocation: () => ({}),
             getAttribLocation: () => 0,
+            getActiveAttrib: () => null,
+            getActiveUniform: () => null,
             uniform1i: () => {},
             uniform1f: () => {},
             uniform2f: () => {},
@@ -132,6 +192,7 @@ canvasProto.getContext = function (type, ...args) {
             blitFramebuffer: () => {},
             readBuffer: () => {},
             drawBuffers: () => {},
+            checkFramebufferStatus: () => gl.FRAMEBUFFER_COMPLETE,
             renderbufferStorageMultisample: () => {},
             createSampler: () => ({}),
             deleteSampler: () => {},
@@ -139,6 +200,7 @@ canvasProto.getContext = function (type, ...args) {
             samplerParameteri: () => {},
             samplerParameterf: () => {},
         };
+        return gl;
     }
     if (_origGetContext) {
         return _origGetContext.call(this, type, ...args);