wip, added 'tests' that run in the browser

b7cf4282 · Alexander Rose · 4332d131 · b7cf4282 · b7cf4282 · b7cf4282
Commit b7cf4282 authored 6 years ago by Alexander Rose
--- a/src/tests/browser/index.html
+++ b/src/tests/browser/index.html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+        <title>Mol* Browser Test</title>
+        <style>
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+            html, body {
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="text/javascript">
+            function urlQueryParameter (id) {
+                if (typeof window === 'undefined') return undefined
+                const a = new RegExp(`${id}=([^&#=]*)`)
+                const m = a.exec(window.location.search)
+                return m ? decodeURIComponent(m[1]) : undefined
+            }
+
+            const name = urlQueryParameter('name')
+            if (name) {
+                const script = document.createElement('script')
+                script.src = name + '.js'
+                document.body.appendChild(script)
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
--- a/src/tests/browser/render-mesh.ts
+++ b/src/tests/browser/render-mesh.ts
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import './index.html'
+import { Canvas3D } from 'mol-canvas3d/canvas3d';
+import { MeshBuilder } from 'mol-geo/geometry/mesh/mesh-builder';
+import { Sphere } from 'mol-geo/primitive/sphere';
+import { Mat4 } from 'mol-math/linear-algebra';
+import { Mesh } from 'mol-geo/geometry/mesh/mesh';
+import { Geometry } from 'mol-geo/geometry/geometry';
+import { createMeshRenderObject } from 'mol-gl/render-object';
+import { Representation } from 'mol-repr/representation';
+import { Color } from 'mol-util/color';
+
+const parent = document.getElementById('app')!
+parent.style.width = '100%'
+parent.style.height = '100%'
+
+const canvas = document.createElement('canvas')
+canvas.style.width = '100%'
+canvas.style.height = '100%'
+parent.appendChild(canvas)
+
+const canvas3d = Canvas3D.create(canvas, parent)
+canvas3d.animate()
+
+const builderState = MeshBuilder.createState()
+const t = Mat4.identity()
+const sphere = Sphere(2)
+MeshBuilder.addPrimitive(builderState, t, sphere)
+const mesh = MeshBuilder.getMesh(builderState)
+
+const values = Mesh.createValuesSimple(mesh, {}, Color(0xFF0000))
+const state = Geometry.createRenderableState()
+const renderObject = createMeshRenderObject(values, state)
+const repr = Representation.fromRenderObject('sphere-mesh', renderObject)
+
+canvas3d.add(repr)
+canvas3d.resetCamera()
\ No newline at end of file
--- a/src/tests/browser/render-spheres.ts
+++ b/src/tests/browser/render-spheres.ts
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import './index.html'
+import { Canvas3D } from 'mol-canvas3d/canvas3d';
+import { SpheresBuilder } from 'mol-geo/geometry/spheres/spheres-builder';
+import { Geometry } from 'mol-geo/geometry/geometry';
+import { createSpheresRenderObject } from 'mol-gl/render-object';
+import { Representation } from 'mol-repr/representation';
+import { Spheres } from 'mol-geo/geometry/spheres/spheres';
+import { Color } from 'mol-util/color';
+
+const parent = document.getElementById('app')!
+parent.style.width = '100%'
+parent.style.height = '100%'
+
+const canvas = document.createElement('canvas')
+canvas.style.width = '100%'
+canvas.style.height = '100%'
+parent.appendChild(canvas)
+
+const canvas3d = Canvas3D.create(canvas, parent)
+canvas3d.animate()
+
+function spheresRepr() {
+    const spheresBuilder = SpheresBuilder.create(3, 1)
+    spheresBuilder.add(0, 0, 0, 0)
+    spheresBuilder.add(5, 0, 0, 0)
+    spheresBuilder.add(-4, 1, 0, 0)
+    const spheres = spheresBuilder.getSpheres()
+
+    const values = Spheres.createValuesSimple(spheres, {}, Color(0xFF0000), 1)
+    const state = Geometry.createRenderableState()
+    const renderObject = createSpheresRenderObject(values, state)
+    console.log(renderObject)
+    const repr = Representation.fromRenderObject('spheres', renderObject)
+    return repr
+}
+
+canvas3d.add(spheresRepr())
+canvas3d.resetCamera()
\ No newline at end of file
--- a/src/tests/browser/text-atlas.ts
+++ b/src/tests/browser/text-atlas.ts
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import './index.html'
+import { TextAtlas } from 'mol-geo/geometry/text/text-atlas';
+import { printImageData } from 'mol-gl/renderable/util';
+
+function test() {
+    console.time('TextAtlas')
+    const textAtlas = new TextAtlas()
+    console.timeEnd('TextAtlas')
+    const ctx = textAtlas.context
+    const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height)
+    printImageData(imageData)
+}
+
+test();
\ No newline at end of file
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,7 +2,8 @@ const path = require('path');
 const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 // const CircularDependencyPlugin = require('circular-dependency-plugin');
-module.exports = {
+
+const sharedConfig = {
    module: {
        rules: [
            {
@@ -46,5 +47,26 @@ module.exports = {
            ],
        }),
        new MiniCssExtractPlugin({ filename: "app.css" })
-    ],
-}
\ No newline at end of file
+    ]
+}
+
+function createEntryPoint(name, dir, out) {
+    return {
+        entry: path.resolve(__dirname, `build/node_modules/${dir}/${name}.js`),
+        output: { filename: `${name}.js`, path: path.resolve(__dirname, `build/${out}`) },
+        ...sharedConfig
+    }
+}
+
+function createApp(name) { return createEntryPoint('index', `apps/${name}`, name) }
+function createBrowserTest(name) { return createEntryPoint(name, 'tests/browser', 'tests') }
+
+module.exports = [
+    createApp('viewer'),
+    createApp('model-server-query'),
+
+    createBrowserTest('text-atlas'),
+    createBrowserTest('render-text'),
+    createBrowserTest('render-spheres'),
+    createBrowserTest('render-mesh')
+]
\ No newline at end of file