@xviewer.js/core 1.0.4-alpha.7 → 1.0.4-alpha.9

package/dist/main.cjs

@@ -2807,14 +2807,16 @@ class DeviceInput extends Component {
         const isDocument = target instanceof Document;
         const width = isDocument ? window.innerWidth : target.offsetWidth;
         const height = isDocument ? window.innerHeight : target.offsetHeight;
-        this._pointer.x = e.clientX / width * 2 - 1;
-        this._pointer.y = 1 - e.clientY / height * 2;
-        this._pointerPixel.set(e.clientX, e.clientY);
+        this._pointer.x = e.pageX / width * 2 - 1;
+        this._pointer.y = 1 - e.pageY / height * 2;
+        this._pointerPixel.set(e.pageX, e.pageY);
     }
     _onPointerDown(e) {
         e = this._remapPointer(e);
         this._pointerButton = e.button;
         this._computePointer(e);
+        this._prePointer.copy(this._pointer);
+        this._prePointerPixel.copy(this._pointerPixel);
         this._pressability.pointerDown(this._pointer, this.viewer.camera);
         this.viewer.emit(DeviceInput.POINTER_DOWN, e);
     }
@@ -2861,6 +2863,7 @@ class DeviceInput extends Component {
                 preTouches[i].position.copy(touches[i].position);
             }
         }
+        this._touchCount = curr.length;
         this.viewer.emit(DeviceInput.TOUCH_START, e);
     }
     _onTouchEnd(e) {
@@ -5886,10 +5889,698 @@ function getFilesFromItemList(items, onDone) {
     }
 }
 
+const newline = /\n/;
+const newlineChar = '\n';
+const whitespace = /\s/;
+function wordwrap(text, opt) {
+    opt = opt || {};
+    //zero width results in nothing visible
+    if (opt.width === 0 && opt.mode !== 'nowrap') return [];
+    text = text || '';
+    const width = typeof opt.width === 'number' ? opt.width : Number.MAX_VALUE;
+    const start = Math.max(0, opt.start || 0);
+    const end = typeof opt.end === 'number' ? opt.end : text.length;
+    const mode = opt.mode;
+    const letterSpacing = opt.letterSpacing || 0;
+    const measure = opt.measure || monospace;
+    if (mode === 'pre') return pre(measure, text, start, end, width, letterSpacing);
+    else return greedy(measure, text, start, end, width, mode, letterSpacing);
+}
+function idxOf(text, chr, start, end) {
+    var idx = text.indexOf(chr, start);
+    if (idx === -1 || idx > end) return end;
+    return idx;
+}
+function isWhitespace(chr) {
+    return whitespace.test(chr);
+}
+function pre(measure, text, start, end, width, letterSpacing) {
+    var lines = [];
+    var lineStart = start;
+    for(var i = start; i < end && i < text.length; i++){
+        var chr = text.charAt(i);
+        var isNewline = newline.test(chr);
+        //If we've reached a newline, then step down a line
+        //Or if we've reached the EOF
+        if (isNewline || i === end - 1) {
+            var lineEnd = isNewline ? i : i + 1;
+            var measured = measure(text, lineStart, lineEnd, width, letterSpacing);
+            lines.push(measured);
+            lineStart = i + 1;
+        }
+    }
+    return lines;
+}
+function greedy(measure, text, start, end, width, mode, letterSpacing) {
+    //A greedy word wrapper based on LibGDX algorithm
+    //https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/BitmapFontCache.java
+    var lines = [];
+    var testWidth = width;
+    //if 'nowrap' is specified, we only wrap on newline chars
+    if (mode === 'nowrap') testWidth = Number.MAX_VALUE;
+    while(start < end && start < text.length){
+        //get next newline position
+        var newLine = idxOf(text, newlineChar, start, end);
+        //eat whitespace at start of line
+        while(start < newLine){
+            if (!isWhitespace(text.charAt(start))) break;
+            start++;
+        }
+        //determine visible # of glyphs for the available width
+        var measured = measure(text, start, newLine, testWidth, letterSpacing);
+        var lineEnd = start + (measured.end - measured.start);
+        var nextStart = lineEnd + newlineChar.length;
+        //if we had to cut the line before the next newline...
+        if (lineEnd < newLine) {
+            //find char to break on
+            while(lineEnd > start){
+                if (isWhitespace(text.charAt(lineEnd))) break;
+                lineEnd--;
+            }
+            if (lineEnd === start) {
+                if (nextStart > start + newlineChar.length) nextStart--;
+                lineEnd = nextStart; // If no characters to break, show all.
+            } else {
+                nextStart = lineEnd;
+                //eat whitespace at end of line
+                while(lineEnd > start){
+                    if (!isWhitespace(text.charAt(lineEnd - newlineChar.length))) break;
+                    lineEnd--;
+                }
+            }
+        }
+        if (lineEnd >= start) {
+            var result = measure(text, start, lineEnd, testWidth);
+            lines.push(result);
+        }
+        start = nextStart;
+    }
+    return lines;
+}
+//determines the visible number of glyphs within a given width
+function monospace(text, start, end, width) {
+    var glyphs = Math.min(width, end - start);
+    return {
+        start: start,
+        end: start + glyphs
+    };
+}
+
+const X_HEIGHTS = [
+    'x',
+    'e',
+    'a',
+    'o',
+    'n',
+    's',
+    'r',
+    'c',
+    'u',
+    'm',
+    'v',
+    'w',
+    'z'
+];
+const M_WIDTHS = [
+    'm',
+    'w'
+];
+const CAP_HEIGHTS = [
+    'H',
+    'I',
+    'N',
+    'E',
+    'F',
+    'K',
+    'L',
+    'T',
+    'U',
+    'V',
+    'W',
+    'X',
+    'Y',
+    'Z'
+];
+const TAB_ID = '\t'.charCodeAt(0);
+const SPACE_ID = ' '.charCodeAt(0);
+const ALIGN_LEFT = 0, ALIGN_CENTER = 1, ALIGN_RIGHT = 2;
+function findChar(array, value, start) {
+    start = start || 0;
+    for(let i = start; i < array.length; i++){
+        if (array[i].id === value) {
+            return i;
+        }
+    }
+    return -1;
+}
+function getGlyphById(font, id) {
+    if (!font.chars || font.chars.length === 0) return null;
+    let glyphIdx = findChar(font.chars, id);
+    if (glyphIdx >= 0) return font.chars[glyphIdx];
+    return null;
+}
+function getXHeight(font) {
+    for(let i = 0; i < X_HEIGHTS.length; i++){
+        let id = X_HEIGHTS[i].charCodeAt(0);
+        let idx = findChar(font.chars, id);
+        if (idx >= 0) return font.chars[idx].height;
+    }
+    return 0;
+}
+function getMGlyph(font) {
+    for(let i = 0; i < M_WIDTHS.length; i++){
+        let id = M_WIDTHS[i].charCodeAt(0);
+        let idx = findChar(font.chars, id);
+        if (idx >= 0) return font.chars[idx];
+    }
+    return 0;
+}
+function getCapHeight(font) {
+    for(let i = 0; i < CAP_HEIGHTS.length; i++){
+        let id = CAP_HEIGHTS[i].charCodeAt(0);
+        let idx = findChar(font.chars, id);
+        if (idx >= 0) return font.chars[idx].height;
+    }
+    return 0;
+}
+function getKerning(font, left, right) {
+    if (!font.kernings || font.kernings.length === 0) return 0;
+    let table = font.kernings;
+    for(let i = 0; i < table.length; i++){
+        let kern = table[i];
+        if (kern.first === left && kern.second === right) return kern.amount;
+    }
+    return 0;
+}
+function getAlignType(align) {
+    if (align === 'center') return ALIGN_CENTER;
+    else if (align === 'right') return ALIGN_RIGHT;
+    return ALIGN_LEFT;
+}
+class BMFontTextLayout {
+    get width() {
+        return this._width;
+    }
+    get height() {
+        return this._height;
+    }
+    get descender() {
+        return this._descender;
+    }
+    get ascender() {
+        return this._ascender;
+    }
+    get xHeight() {
+        return this._xHeight;
+    }
+    get baseline() {
+        return this._baseline;
+    }
+    get capHeight() {
+        return this._capHeight;
+    }
+    get lineHeight() {
+        return this._lineHeight;
+    }
+    get glyphs() {
+        return this._glyphs;
+    }
+    get linesTotal() {
+        return this._linesTotal;
+    }
+    update(font, text, setting) {
+        setting = Object.assign({
+            tabSize: 4,
+            width: 0,
+            letterSpacing: 0,
+            mode: "nowrap",
+            align: "left"
+        }, setting);
+        this._font = font;
+        const measure = this._computeMetrics.bind(this);
+        const lines = wordwrap(text, {
+            measure,
+            ...setting
+        });
+        const minWidth = setting.width || 0;
+        const glyphs = this._glyphs;
+        const maxLineWidth = lines.reduce((prev, line)=>Math.max(prev, line.width, minWidth), 0);
+        var _setting_lineHeight;
+        //the pen position
+        const lineHeight = (_setting_lineHeight = setting.lineHeight) != null ? _setting_lineHeight : font.common.lineHeight;
+        const baseline = font.common.base;
+        const descender = lineHeight - baseline;
+        const letterSpacing = setting.letterSpacing || 0;
+        const height = lineHeight * lines.length - descender;
+        const align = getAlignType(setting.align);
+        var _setting_anchor;
+        const anchor = (_setting_anchor = setting.anchor) != null ? _setting_anchor : [
+            0.5,
+            0.5
+        ];
+        this._setupSpaceGlyphs(font, setting);
+        //the metrics for this text layout
+        this._width = maxLineWidth;
+        this._height = height;
+        this._descender = descender;
+        this._baseline = baseline;
+        this._xHeight = getXHeight(font);
+        this._capHeight = getCapHeight(font);
+        this._lineHeight = lineHeight;
+        this._ascender = baseline - this._xHeight; //lineHeight - descender - this._xHeight
+        const anchorOffset = [
+            -maxLineWidth * anchor[0],
+            2 * lineHeight * anchor[1] - baseline
+        ];
+        let x = 0, y = 0;
+        //draw text along baseline
+        y -= height;
+        glyphs.length = 0;
+        for(let k = 0; k < lines.length; k++){
+            const line = lines[k];
+            let start = line.start;
+            let end = line.end;
+            let lineWidth = line.width;
+            let lastGlyph;
+            //for each glyph in that line...
+            for(let i = start; i < end; i++){
+                let id = text.charCodeAt(i);
+                let glyph = this._getGlyph(font, id);
+                if (glyph) {
+                    if (lastGlyph) x += getKerning(font, lastGlyph.id, glyph.id);
+                    let tx = x;
+                    if (align === ALIGN_CENTER) tx += (maxLineWidth - lineWidth) / 2;
+                    else if (align === ALIGN_RIGHT) tx += maxLineWidth - lineWidth;
+                    glyphs.push({
+                        position: [
+                            tx + anchorOffset[0],
+                            y + anchorOffset[1]
+                        ],
+                        data: glyph,
+                        index: i,
+                        line: k
+                    });
+                    //move pen forward
+                    x += glyph.xadvance + letterSpacing;
+                    lastGlyph = glyph;
+                }
+            }
+            //next line down
+            y += lineHeight;
+            x = 0;
+        }
+        this._linesTotal = lines.length;
+    }
+    _setupSpaceGlyphs(font, setting) {
+        //These are fallbacks, when the font doesn't include
+        //' ' or '\t' glyphs
+        if (!font.chars || font.chars.length === 0) return;
+        //try to get space glyph
+        //then fall back to the 'm' or 'w' glyphs
+        //then fall back to the first glyph available
+        const space = Object.assign({}, getGlyphById(font, SPACE_ID) || getMGlyph(font) || font.chars[0]);
+        //and create a fallback for tab
+        const tabWidth = setting.tabSize * space.xadvance;
+        this._fallbackSpaceGlyph = space;
+        this._fallbackTabGlyph = Object.assign(space, {
+            x: 0,
+            y: 0,
+            xadvance: tabWidth,
+            id: TAB_ID,
+            xoffset: 0,
+            yoffset: 0,
+            width: 0,
+            height: 0
+        });
+    }
+    _getGlyph(font, id) {
+        let glyph = getGlyphById(font, id);
+        if (glyph) return glyph;
+        else if (id === TAB_ID) return this._fallbackTabGlyph;
+        else if (id === SPACE_ID) return this._fallbackSpaceGlyph;
+        return null;
+    }
+    _computeMetrics(text, start, end, width, letterSpacing = 0) {
+        let font = this._font;
+        let curPen = 0;
+        let curWidth = 0;
+        let count = 0;
+        let lastGlyph;
+        if (!font.chars || font.chars.length === 0) {
+            return {
+                start: start,
+                end: start,
+                width: 0
+            };
+        }
+        end = Math.min(text.length, end);
+        for(let i = start; i < end; i++){
+            let id = text.charCodeAt(i);
+            let glyph = this._getGlyph(font, id);
+            if (glyph) {
+                //move pen forward
+                glyph.xoffset;
+                let kern = lastGlyph ? getKerning(font, lastGlyph.id, glyph.id) : 0;
+                curPen += kern;
+                let nextPen = curPen + glyph.xadvance + letterSpacing;
+                let nextWidth = curPen + glyph.width;
+                //we've hit our limit; we can't move onto the next glyph
+                if (nextWidth >= width || nextPen >= width) break;
+                //otherwise continue along our line
+                curPen = nextPen;
+                curWidth = nextWidth;
+                lastGlyph = glyph;
+            }
+            count++;
+        }
+        //make sure rightmost edge lines up with rendered glyphs
+        if (lastGlyph) curWidth += lastGlyph.xoffset;
+        return {
+            start: start,
+            end: start + count,
+            width: curWidth
+        };
+    }
+    constructor(){
+        this._width = 0;
+        this._height = 0;
+        this._descender = 0;
+        this._ascender = 0;
+        this._xHeight = 0;
+        this._baseline = 0;
+        this._capHeight = 0;
+        this._lineHeight = 0;
+        this._linesTotal = 0;
+        this._glyphs = [];
+        this._fallbackSpaceGlyph = null;
+        this._fallbackTabGlyph = null;
+        this._font = null;
+    }
+}
+
+const itemSize = 2;
+const box = {
+    min: [
+        0,
+        0
+    ],
+    max: [
+        0,
+        0
+    ]
+};
+function bounds(positions) {
+    const count = positions.length / itemSize;
+    box.min[0] = positions[0];
+    box.min[1] = positions[1];
+    box.max[0] = positions[0];
+    box.max[1] = positions[1];
+    for(let i = 0; i < count; i++){
+        const x = positions[i * itemSize + 0];
+        const y = positions[i * itemSize + 1];
+        box.min[0] = Math.min(x, box.min[0]);
+        box.min[1] = Math.min(y, box.min[1]);
+        box.max[0] = Math.max(x, box.max[0]);
+        box.max[1] = Math.max(y, box.max[1]);
+    }
+}
+function computeBox(positions, output) {
+    bounds(positions);
+    output.min.set(box.min[0], box.min[1], 0);
+    output.max.set(box.max[0], box.max[1], 0);
+}
+function computeSphere(positions, output) {
+    bounds(positions);
+    const minX = box.min[0];
+    const minY = box.min[1];
+    const maxX = box.max[0];
+    const maxY = box.max[1];
+    const width = maxX - minX;
+    const height = maxY - minY;
+    const length = Math.sqrt(width * width + height * height);
+    output.center.set(minX + width / 2, minY + height / 2, 0);
+    output.radius = length / 2;
+}
+
+class BMFontTextGeometry extends THREE.BufferGeometry {
+    update(fontAtlas, text, setting) {
+        this.layout.update(fontAtlas.info, text, setting);
+        const { indice, position, uv } = fontAtlas.build(this.layout, setting);
+        this.setIndex(new THREE.BufferAttribute(indice, 1));
+        this.setAttribute("position", new THREE.BufferAttribute(position, 2));
+        this.setAttribute("uv", new THREE.BufferAttribute(uv, 2));
+    }
+    computeBoundingSphere() {
+        if (this.boundingSphere === null) {
+            this.boundingSphere = new THREE.Sphere();
+        }
+        const positions = this.attributes.position.array;
+        const itemSize = this.attributes.position.itemSize;
+        if (!positions || !itemSize || positions.length < 2) {
+            this.boundingSphere.radius = 0;
+            this.boundingSphere.center.set(0, 0, 0);
+            return;
+        }
+        computeSphere(positions, this.boundingSphere);
+        if (isNaN(this.boundingSphere.radius)) {
+            console.error('THREE.BufferGeometry.computeBoundingSphere(): ' + 'Computed radius is NaN. The ' + '"position" attribute is likely to have NaN values.');
+        }
+    }
+    computeBoundingBox() {
+        if (this.boundingBox === null) {
+            this.boundingBox = new THREE.Box3();
+        }
+        const bbox = this.boundingBox;
+        const positions = this.attributes.position["array"];
+        const itemSize = this.attributes.position.itemSize;
+        if (!positions || !itemSize || positions.length < 2) {
+            bbox.makeEmpty();
+            return;
+        }
+        computeBox(positions, bbox);
+    }
+    constructor(...args){
+        super(...args), this.layout = new BMFontTextLayout();
+    }
+}
+
+class Label extends Component {
+    get text() {
+        return this._text;
+    }
+    set text(v) {
+        if (this._text !== v) {
+            this._text = v;
+            this.needsUpdate = true;
+        }
+    }
+    get font() {
+        return this._font;
+    }
+    set font(v) {
+        if (this._font !== v) {
+            this._font = v;
+            this.needsUpdate = true;
+        }
+    }
+    get setting() {
+        return this._setting;
+    }
+    set setting(v) {
+        if (JSON.stringify(this._setting) !== JSON.stringify(v)) {
+            this._setting = v;
+            this.needsUpdate = true;
+        }
+    }
+    get layout() {
+        return this.node.geometry.layout;
+    }
+    forceUpdate() {
+        this.node.geometry.update(this.font, this.text, this.setting);
+    }
+    update(dt) {
+        if (this.needsUpdate) {
+            this.needsUpdate = false;
+            this.forceUpdate();
+        }
+    }
+    constructor({ text = "", font, material, ...setting }){
+        super(), this.needsUpdate = false, this._text = "", this._font = null, this._setting = null;
+        this.text = text;
+        this.font = font;
+        this.setting = setting;
+        this.node = new THREE.Mesh(new BMFontTextGeometry(), material || font.material);
+        this.node.geometry.update(this.font, this.text, this.setting);
+    }
+}
+
+const vert_MSDF = `
+varying vec2 v_uv;
+
+void main() {
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    v_uv = uv;
+}
+`;
+const frag_MSDF = `
+uniform sampler2D u_fontTexture;
+varying vec2  v_uv;
+
+uniform vec3  u_color;
+uniform float u_opacity;
+uniform vec3  u_strokeColor;
+uniform float u_strokeWidth;
+uniform vec3  u_shadowColor;
+uniform float u_shadowBlur;
+uniform vec2  u_shadowOffset;
+uniform float u_weight;
+
+float median(in float r, in float g, in float b) {
+    return max(min(r, g), min(max(r, g), b));
+}
+
+float signedDistance(in vec2 uv) {
+    vec4 texel = texture2D(u_fontTexture, uv);
+    return median(texel.r, texel.g, texel.b) - 0.5;
+}
+
+void main() {
+    vec4  color = vec4(u_color, 1.);
+    float d = signedDistance(v_uv) + u_weight;
+    float w = fwidth(d);
+
+    vec4 stroke = vec4(u_strokeColor, smoothstep(-w, w, d));
+    color.a *= smoothstep(-w, w, d - u_strokeWidth);
+    color = mix(stroke, color, color.a);
+
+    float sd = signedDistance(v_uv + u_shadowOffset) + u_weight;
+    vec4  shadow = vec4(u_shadowColor, smoothstep(-w - u_shadowBlur, w + u_shadowBlur, sd));
+    color = mix(shadow, color, color.a);
+
+    color.a *= u_opacity;
+    gl_FragColor = color;
+}
+`;
+class BMFontAtlas {
+    build(layout, setting) {
+        const info = this.info;
+        const texWidth = info.common.scaleW;
+        const texHeight = info.common.scaleH;
+        const glyphs = layout.glyphs.filter((glyph)=>glyph.data.width * glyph.data.height > 0);
+        const flipY = setting.flipY !== false;
+        const position = new Float32Array(glyphs.length * 8);
+        const uv = new Float32Array(glyphs.length * 8);
+        const indice = new Uint16Array(glyphs.length * 6);
+        for(let k = 0, i0 = 0, i1 = 0, i2 = 0, i = 0; i < glyphs.length; i++, k += 4){
+            const glyph = glyphs[i];
+            const bitmap = glyph.data;
+            // bottom left position
+            let x = glyph.position[0] + bitmap.xoffset;
+            let y = glyph.position[1] + bitmap.yoffset;
+            // quad size
+            let w = bitmap.width;
+            let h = bitmap.height;
+            // BL
+            position[i0++] = x;
+            position[i0++] = y;
+            // BR
+            position[i0++] = x + w;
+            position[i0++] = y;
+            // TR
+            position[i0++] = x + w;
+            position[i0++] = y + h;
+            // TL
+            position[i0++] = x;
+            position[i0++] = y + h;
+            let bw = bitmap.x + bitmap.width;
+            let bh = bitmap.y + bitmap.height;
+            // top left position
+            let u0 = bitmap.x / texWidth;
+            let v0 = bitmap.y / texHeight;
+            let u1 = bw / texWidth;
+            let v1 = bh / texHeight;
+            if (flipY) {
+                v0 = 1 - v0;
+                v1 = 1 - v1;
+            }
+            // BL
+            uv[i1++] = u0;
+            uv[i1++] = v0;
+            // BR
+            uv[i1++] = u1;
+            uv[i1++] = v0;
+            // TR
+            uv[i1++] = u1;
+            uv[i1++] = v1;
+            // TL
+            uv[i1++] = u0;
+            uv[i1++] = v1;
+            indice[i2++] = k + 0;
+            indice[i2++] = k + 1;
+            indice[i2++] = k + 2;
+            indice[i2++] = k + 0;
+            indice[i2++] = k + 2;
+            indice[i2++] = k + 3;
+        }
+        return {
+            position,
+            uv,
+            indice
+        };
+    }
+    constructor({ info, texture, uniforms, ...props }){
+        this.uniforms = {
+            u_color: {
+                value: new THREE.Color(0xffffff)
+            },
+            u_opacity: {
+                value: 1
+            },
+            u_weight: {
+                value: 0.2
+            },
+            u_strokeColor: {
+                value: new THREE.Color(0xff0000)
+            },
+            u_strokeWidth: {
+                value: 0
+            },
+            u_shadowColor: {
+                value: new THREE.Color(0xff0000)
+            },
+            u_shadowBlur: {
+                value: 0
+            },
+            u_shadowOffset: {
+                value: new THREE.Vector2()
+            },
+            u_fontTexture: {
+                value: null
+            }
+        };
+        this.info = info;
+        this.uniforms.u_fontTexture.value = texture;
+        this.material = new THREE.ShaderMaterial(Object.assign({
+            vertexShader: vert_MSDF,
+            fragmentShader: frag_MSDF,
+            transparent: true,
+            depthWrite: false,
+            blending: THREE.NormalBlending,
+            uniforms: {
+                ...this.uniforms,
+                ...uniforms
+            }
+        }, props));
+    }
+}
+
 exports.AccumulativeShadows = AccumulativeShadows;
 exports.Animation = Animation;
 exports.AnimationCurve = AnimationCurve;
 exports.BINLoader = BINLoader;
+exports.BMFontAtlas = BMFontAtlas;
+exports.BMFontTextGeometry = BMFontTextGeometry;
+exports.BMFontTextLayout = BMFontTextLayout;
 exports.Box = Box;
 exports.BoxProjection = BoxProjection;
 exports.Center = Center;
@@ -5910,6 +6601,7 @@ exports.GLTFLoader = GLTFLoader;
 exports.HDRLoader = HDRLoader;
 exports.JSONLoader = JSONLoader;
 exports.KTX2Loader = KTX2Loader;
+exports.Label = Label;
 exports.Loader = Loader;
 exports.Logger = Logger;
 exports.ObjectInstance = ObjectInstance;