Adjust Webpack settings, bump version number.

package.json

@@ -1,8 +1,8 @@
 {
   "name": "digitaljs",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Digital logic simulator",
-  "main": "index.js",
+  "main": "dist/main.js",
   "scripts": {
     "dev": "webpack --mode development",
     "prod": "webpack --mode production",
@@ -16,6 +16,7 @@
     "babel-loader": "^7.1.5",
     "babel-preset-env": "^1.7.0",
     "base64-inline-loader": "^1.1.1",
+    "clean-webpack-plugin": "^0.1.19",
     "css-loader": "^1.0.0",
     "expose-loader": "^0.7.5",
     "file-loader": "^1.1.11",

src/style.css

@@ -527,21 +527,26 @@ body {
     fill: black;
 }
 
-foreignObject body {
+.joint-element foreignObject {
+    overflow: hidden;
+}
+
+.joint-element foreignObject body {
+    background-color: transparent;
     display: block;
     margin: 0;
     position: relative;
     width: 100%;
     height: 100%;
 }
 
-foreignObject body input,
-foreignObject body select {
+.joint-element foreignObject body input,
+.joint-element foreignObject body select {
     pointer-events: all;
 }
 
-foreignObject body input[type='text'],
-foreignObject body select {
+.joint-element foreignObject body input[type='text'],
+.joint-element foreignObject body select {
     font-size: 8pt;
     border: 1px solid gray;
     box-sizing: border-box;
@@ -550,29 +555,29 @@ foreignObject body select {
     top: 50%;
 }
 
-foreignObject body input[type='text'] {
+.joint-element foreignObject body input[type='text'] {
     font-family: 'monospace';
     width: 100%;
 }
 
-input.invalid {
+.joint-element input.invalid {
     background: #ffaaaa;
 }
 
-foreignObject.tooltip {
+.joint-element foreignObject.tooltip {
     visibility: hidden;
     opacity:0;
     transition:visibility 0s linear 0.5s,opacity 0.5s linear;
 }
 
-foreignObject.tooltip:hover,
+.joint-element foreignObject.tooltip:hover,
 g:hover > foreignObject.tooltip {
     visibility: visible;
     opacity:1;
     transition-delay:0s;
 }
 
-foreignObject.tooltip body {
+.joint-element foreignObject.tooltip body {
     border: 1px solid gray;
     box-sizing: border-box;
     background: white;

webpack.config.js

@@ -1,10 +1,19 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+
+const outputDirectory = 'dist';
 
 module.exports = {
     output: {
-        library: 'digitaljs'
+        path: path.resolve(__dirname, outputDirectory),
+        filename: 'main.js',
+        library: 'digitaljs',
+        libraryTarget: 'umd',
+        umdNamedDefine: true,
+        globalObject: 'this'
     },
+    entry: "./src/index.js",
     devtool: "source-map",
     resolve: {
         extensions: ['.js', '.jsx', '.json', '.css'],
@@ -38,7 +47,7 @@ module.exports = {
                 loader: 'babel-loader',
                 exclude: /node_modules/,
                 query: {
-                    presets: ['env']
+                    presets: ['env'],
                 }
             }, {
                 test: require.resolve('jquery'),
@@ -50,6 +59,7 @@ module.exports = {
         ]
     },
     plugins: [
+        new CleanWebpackPlugin([outputDirectory]),
         new HtmlWebpackPlugin({
             title: 'Full Adder',
             template: 'src/test/template.html',