viewer asset support

2022-05-26 16:55:09 +03:00
parent 482862d896
commit be87f88ff6
10 changed files with 544 additions and 2416 deletions
@@ -1,4 +1,9 @@
 import { Viewer, DefaultViewerParams } from '@speckle/viewer'
+
+// TODO: Just examples, delete!
+import Image from '@speckle/viewer/assets/random.png'
+// import ImageHdr from '@speckle/viewer/dist/image.hdr';
+
 import './style.css'
 import Sandbox from './Sandbox'

@@ -9,9 +14,19 @@ if (!container) {

 // Viewer setup
 const params = DefaultViewerParams
-params.environmentSrc =
-  // 'https://speckle-xyz-assets.ams3.digitaloceanspaces.com/studio010.hdr'
-  'http://localhost:3033/sample-hdri.exr'
+// params.environmentSrc =
+//   // 'https://speckle-xyz-assets.ams3.digitaloceanspaces.com/studio010.hdr'
+//   'http://localhost:3033/sample-hdri.exr'
+
+// TODO: Remove this, just a test of image bundling capabilities!
+const testImg = document.createElement('img')
+
+// TODO: TEST, REMOVE
+testImg.src = Image // Image manually imported from speckle/viewer
+// testImg.src = DefaultViewerParams.environmentSrc // Image that always gets bundled due to the import in speckle/viewer (remove it)
+
+document.getElementsByTagName('body')[0].appendChild(testImg)
+
 const viewer = new Viewer(container, params)
 await viewer.init()

@@ -11,7 +11,9 @@
  "main": "dist/speckleviewer.js",
  "module": "dist/speckleviewer.esm.js",
  "exports": {
-    ".": "./dist/speckleviewer.esm.js"
+    ".": "./dist/speckleviewer.esm.js",
+    "./dist/assets/*": "./dist/assets/*",
+    "./assets/*": "./dist/assets/*"
  },
  "types": "./dist/index.d.ts",
  "sourceType": "module",
@@ -59,6 +61,8 @@
    "prettier": "^2.5.1",
    "rollup": "^2.70.1",
    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-rebase": "^4.1.1",
+    "rollup-plugin-copy": "^3.4.0",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-typescript2": "^0.31.2",
    "typescript": "^4.5.4"
@@ -4,6 +4,8 @@ import { terser } from 'rollup-plugin-terser'
 import clean from 'rollup-plugin-delete'
 import pkg from './package.json'
 import typescript2 from 'rollup-plugin-typescript2'
+import rebasePlugin from 'rollup-plugin-rebase'
+import copyPlugin from 'rollup-plugin-copy'

 const isProd = process.env.NODE_ENV === 'production'
 const isExample = !!process.env.EXAMPLE_BUILD
@@ -36,6 +38,10 @@ function buildConfig(isWebBuild = false) {
          ])
    ],
    plugins: [
+      rebasePlugin({ keepName: true }),
+      copyPlugin({
+        targets: [{ src: './always-bundled-assets/**/*', dest: 'dist/assets' }]
+      }),
      typescript2({
        tsconfigOverride: {
          sourceMap: sourcemap
@@ -1,3 +1,8 @@
+// TODO: JUST A TEST, REMOVE SO WE DON'T BUNDLE IT! This image is only going to be bundled, if imported, unlike
+// everything in 'always-bundled-assets'. Also unlike those, the filename for these is going
+// to be changed with a hash while assets in 'always-bundled-assets' remain with the same names
+import RandomImportThing from './assets/only-bundled-if-imported.png'
+
 export interface ViewerParams {
  postprocessing: boolean
  reflections: boolean
@@ -9,7 +14,7 @@ export const DefaultViewerParams: ViewerParams = {
  postprocessing: false,
  reflections: true,
  showStats: true,
-  environmentSrc: null
+  environmentSrc: RandomImportThing
 }
 /**
 * Carried over from the old Viewer. To be extended/changed
@@ -1,97 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>Speckle Viewer</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
-      rel="stylesheet"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
-      integrity="sha512-EZLkOqwILORob+p0BXZc+Vm3RgJBOe1Iq/0fiI7r/wJgzOFZMlsqTa29UEl6v6U6gsV4uIpsNZoV32YZqrCRCQ=="
-      crossorigin="anonymous"
-    />
-    <style type="text/css">
-      #renderer {
-        height: 700px;
-        width: 100%;
-      }
-    </style>
-  </head>
-
-  <body style="background: #e4e4e4">
-    <div class="container">
-      <div class="row" style="padding-top: 20px">
-        <div class="twelve columns">
-          <h3>Viewer</h3>
-          <h5>Controls summary:</h5>
-          <p class="text-sm">
-            Click an object to select it. Double click it to focus on it. Press `esc` to
-            clear the selection. Press `shift-s` to toggle a section plane. Press `s`
-            while the section plane is active to toggle its control mode. Double click
-            anywhere outside an object to zoom extents to the entire scene.
-          </p>
-        </div>
-        <div class="twelve columns">
-          <button onclick="v.postprocessing = !v.postprocessing">
-            Postprocessing Toggle
-          </button>
-          <button onclick="v.interactions.zoomExtents()">Zoom Extents</button>
-          <button onclick="v.toggleSectionBox()">Toggle Section Box</button>
-          <button onclick="v.interactions.rotateCamera(undefined, undefined, false)">
-            Rotate
-          </button>
-          <button onclick="viewerScreenshot()">Screenshot</button>
-        </div>
-        <div class="twelve columns">
-          <input
-            id="objectUrlInput"
-            type="text"
-            name="objectId"
-            placeholder="Object Url"
-            style="width: 49%"
-            value="https://latest.speckle.dev/streams/010b3af4c3/objects/a401baf38fe5809d0eb9d3c902a36e8f"
-          />
-          <button class="" onclick="loadData()" style="width: 49%">
-            Load Object URL
-          </button>
-        </div>
-        <div class="twelve columns">
-          <button onclick="v.unloadAll()">Dispose Everything</button>
-          View:
-          <button onclick="v.toggleCameraProjection()">Ortho/Perspective</button>
-          <button onclick="v.interactions.rotateTo()">3D</button>
-          <button onclick="v.interactions.rotateTo('top')">Top</button>
-          <button onclick="v.interactions.rotateTo('front')">Front</button>
-          <button onclick="v.interactions.rotateTo('back')">Back</button>
-          <button onclick="v.interactions.rotateTo('left')">Left</button>
-          <button onclick="v.interactions.rotateTo('right')">Right</button>
-        </div>
-
-        <div class="twelve columns">
-          Used Memory (MB):
-          <span id="info-mem">-</span>
-          / LoadProgress:
-          <span id="info-progress">-</span>
-          / ViewerBusy:
-          <span id="info-busy">idle</span>
-          / Draw Calls:
-          <span id="info-draws">-</span>
-        </div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="twelve columns">
-        <div id="renderer"></div>
-      </div>
-    </div>
-  </body>
-</html>
@@ -0,0 +1,9 @@
+declare module '*.png' {
+  const value: string
+  export default value
+}
+
+declare module '*.hdr' {
+  const value: string
+  export default value
+}