diff --git a/README.md b/README.md index 7b2adf33..a92c6b50 100644 --- a/README.md +++ b/README.md @@ -30,17 +30,6 @@ Note that the *dicom-microscopy-viewer* package is **not** a viewer application, Below is an example for the most basic usage: a web page that displays a collection of DICOM VL Whole Slide Microscopy Image instances of a digital slide. For more advanced usage, take a look at the [Slim](https://github.com/imagingdatacommons/slim) viewer. -## Packaging - -The library is packaged as two different builds, one using dynamic import, and the other bundling into one -larger library. The dynamic import version uses a public path of `/dicom-microscopy-viewer/` so that they can be used by simply adding an alias to the appropriate version, and then deploying that version. In a straight web application, this can be loaded as: - -```javascript - const DICOMMicroscopyViewer = (await('/dicom-microscopy-viewer/dicomMicroscopyViewer.min.js')).default -``` - -The point of using the sub-directory here is to isolate the dependencies that unique to `dicom-microscopy-viewer`. - ### Basic usage The viewer can be embedded in any website, one only needs to diff --git a/config/webpack/webpack-dynamic-import.js b/config/webpack/webpack-dynamic-import.js index 46589fab..e9024854 100644 --- a/config/webpack/webpack-dynamic-import.js +++ b/config/webpack/webpack-dynamic-import.js @@ -3,7 +3,7 @@ const merge = require('./merge') const rootPath = process.cwd() const baseConfig = require('./webpack-base') const TerserPlugin = require('terser-webpack-plugin') -const outputPath = path.join(rootPath, 'dist', 'dynamic-import', 'dicom-microscopy-viewer') +const outputPath = path.join(rootPath, 'dist', 'dynamic-import') const prodConfig = { mode: 'production', @@ -12,15 +12,11 @@ const prodConfig = { }, output: { path: outputPath, - library: { - name: 'dicomMicroscopyViewer', - type: 'window', - }, - filename: '[name].min.js', - publicPath: '/dicom-microscopy-viewer/', + libraryTarget: 'umd', + globalObject: 'this', + filename: '[name].min.js' }, optimization: { - // minimize: false, minimizer: [ new TerserPlugin({ parallel: true diff --git a/package-lock.json b/package-lock.json index eda7f7ff..46b76c45 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "@babel/plugin-transform-runtime": "^7.15.0", "@babel/preset-env": "^7.16", "@babel/runtime-corejs3": "^7.15.4", + "@webpack-cli/serve": "^1.5.2", "babel-eslint": "10.1.0", "babel-jest": "27.5", "babel-loader": "^8.2.3", @@ -43,7 +44,7 @@ "terser-webpack-plugin": "^5.2.2", "webpack": "^5.68", "webpack-bundle-analyzer": "^4.4.2", - "webpack-cli": "^5.1.4", + "webpack-cli": "^4.9", "webpack-dev-server": "^4.9.0", "worker-loader": "^3.0.8" } @@ -3201,29 +3202,39 @@ } }, "node_modules/@webpack-cli/configtest": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz", - "integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.1.tgz", + "integrity": "sha512-1FBc1f9G4P/AxMqIgfZgeOTuRnwZMten8E7zap5zgpPInnCrP8D4Q81+4CWIch8i/Nf7nXjP0v6CjjbHOrXhKg==", "dev": true, - "engines": { - "node": ">=14.15.0" - }, "peerDependencies": { - "webpack": "5.x.x", - "webpack-cli": "5.x.x" + "webpack": "4.x.x || 5.x.x", + "webpack-cli": "4.x.x" } }, "node_modules/@webpack-cli/info": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz", - "integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==", + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.1.tgz", + "integrity": "sha512-PKVGmazEq3oAo46Q63tpMr4HipI3OPfP7LiNOEJg963RMgT0rqheag28NCML0o3GIzA3DmxP1ZIAv9oTX1CUIA==", "dev": true, - "engines": { - "node": ">=14.15.0" + "dependencies": { + "envinfo": "^7.7.3" }, "peerDependencies": { - "webpack": "5.x.x", - "webpack-cli": "5.x.x" + "webpack-cli": "4.x.x" + } + }, + "node_modules/@webpack-cli/serve": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.1.tgz", + "integrity": "sha512-gNGTiTrjEVQ0OcVnzsRSqTxaBSr+dmTfm+qJsCDluky8uhdLWep7Gcr62QsAKHTMxjCS/8nEITsmFAhfIx+QSw==", + "dev": true, + "peerDependencies": { + "webpack-cli": "4.x.x" + }, + "peerDependenciesMeta": { + "webpack-dev-server": { + "optional": true + } } }, "node_modules/@xtuc/ieee754": { @@ -5178,9 +5189,9 @@ } }, "node_modules/envinfo": { - "version": "7.11.1", - "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.11.1.tgz", - "integrity": "sha512-8PiZgZNIB4q/Lw4AhOvAfB/ityHAd2bli3lESSWmWSzSsl5dKpy5N1d1Rfkd2teq/g9xN90lc6o98DOjMeYHpg==", + "version": "7.8.1", + "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz", + "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==", "dev": true, "bin": { "envinfo": "dist/cli.js" @@ -7167,12 +7178,12 @@ } }, "node_modules/interpret": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz", - "integrity": "sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz", + "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==", "dev": true, "engines": { - "node": ">=10.13.0" + "node": ">= 0.10" } }, "node_modules/iota-array": { @@ -11327,15 +11338,15 @@ } }, "node_modules/rechoir": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz", - "integrity": "sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==", + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz", + "integrity": "sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==", "dev": true, "dependencies": { - "resolve": "^1.20.0" + "resolve": "^1.9.0" }, "engines": { - "node": ">= 10.13.0" + "node": ">= 0.10" } }, "node_modules/redent": { @@ -13240,75 +13251,55 @@ } }, "node_modules/webpack-cli": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz", - "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==", + "version": "4.9.2", + "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.2.tgz", + "integrity": "sha512-m3/AACnBBzK/kMTcxWHcZFPrw/eQuY4Df1TxvIWfWM2x7mRqBQCqKEd96oCUa9jkapLBaFfRce33eGDb4Pr7YQ==", "dev": true, "dependencies": { "@discoveryjs/json-ext": "^0.5.0", - "@webpack-cli/configtest": "^2.1.1", - "@webpack-cli/info": "^2.0.2", - "@webpack-cli/serve": "^2.0.5", + "@webpack-cli/configtest": "^1.1.1", + "@webpack-cli/info": "^1.4.1", + "@webpack-cli/serve": "^1.6.1", "colorette": "^2.0.14", - "commander": "^10.0.1", - "cross-spawn": "^7.0.3", - "envinfo": "^7.7.3", + "commander": "^7.0.0", + "execa": "^5.0.0", "fastest-levenshtein": "^1.0.12", "import-local": "^3.0.2", - "interpret": "^3.1.1", - "rechoir": "^0.8.0", + "interpret": "^2.2.0", + "rechoir": "^0.7.0", "webpack-merge": "^5.7.3" }, "bin": { "webpack-cli": "bin/cli.js" }, "engines": { - "node": ">=14.15.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" + "node": ">=10.13.0" }, "peerDependencies": { - "webpack": "5.x.x" + "webpack": "4.x.x || 5.x.x" }, "peerDependenciesMeta": { "@webpack-cli/generators": { "optional": true }, - "webpack-bundle-analyzer": { + "@webpack-cli/migrate": { "optional": true }, - "webpack-dev-server": { + "webpack-bundle-analyzer": { "optional": true - } - } - }, - "node_modules/webpack-cli/node_modules/@webpack-cli/serve": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz", - "integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==", - "dev": true, - "engines": { - "node": ">=14.15.0" - }, - "peerDependencies": { - "webpack": "5.x.x", - "webpack-cli": "5.x.x" - }, - "peerDependenciesMeta": { + }, "webpack-dev-server": { "optional": true } } }, "node_modules/webpack-cli/node_modules/commander": { - "version": "10.0.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz", - "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", "dev": true, "engines": { - "node": ">=14" + "node": ">= 10" } }, "node_modules/webpack-dev-middleware": { diff --git a/package.json b/package.json index 36347158..685d7472 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "@babel/plugin-transform-runtime": "^7.15.0", "@babel/preset-env": "^7.16", "@babel/runtime-corejs3": "^7.15.4", + "@webpack-cli/serve": "^1.5.2", "babel-eslint": "10.1.0", "babel-jest": "27.5", "babel-loader": "^8.2.3", @@ -71,7 +72,7 @@ "terser-webpack-plugin": "^5.2.2", "webpack": "^5.68", "webpack-bundle-analyzer": "^4.4.2", - "webpack-cli": "^5.1.4", + "webpack-cli": "^4.9", "webpack-dev-server": "^4.9.0", "worker-loader": "^3.0.8" }, diff --git a/src/viewer.js b/src/viewer.js index 36f37470..2c27847f 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -687,7 +687,7 @@ function _getColorPaletteStyleForPointLayer ({ return { color: expression } } -const _affine = Symbol.for('affine') +const _affine = Symbol('affine') const _affineInverse = Symbol('affineInverse') const _annotationManager = Symbol('annotationManager') const _annotationGroups = Symbol('annotationGroups') @@ -698,8 +698,8 @@ const _drawingLayer = Symbol('drawingLayer') const _drawingSource = Symbol('drawingSource') const _features = Symbol('features') const _imageLayer = Symbol('imageLayer') -const _interactions = Symbol.for('interactions') -const _map = Symbol.for('map') +const _interactions = Symbol('interactions') +const _map = Symbol('map') const _mappings = Symbol('mappings') const _metadata = Symbol('metadata') const _opticalPaths = Symbol('opticalPaths')