Merge fix/save-over-association

Gruntfile.js

@@ -1,13 +1,30 @@
 "use strict";
 const webpack = require("webpack");
-const webpackConfig = require("./webpack.config");
 const merge = require("webpack-merge");
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+const webpackConfig = require("./webpack.config");
+const packageJson = require("./package.json");
+
+const widgetName = packageJson.widgetName;
+const name = widgetName.toLowerCase();
 
 const webpackConfigRelease = webpackConfig.map(config => merge(config, {
     devtool: false,
     mode: "production"
 }));
 
+webpackConfigRelease[0].plugins.push(new ExtractTextPlugin({
+    filename: `./widgets/com/mendix/widget/custom/${name}/ui/${widgetName}.css`
+}));
+
+webpackConfigRelease[0].module.rules[1] = {
+    test: /\.css$/, loader: ExtractTextPlugin.extract({
+        fallback: "style-loader",
+        use: [ "css-loader", "sass-loader" ]
+    })
+};
+
 module.exports = function(grunt) {
     const pkg = grunt.file.readJSON("package.json");
     grunt.initConfig({
@@ -33,7 +50,7 @@ module.exports = function(grunt) {
                     expand: true,
                     date: new Date(),
                     store: false,
-                    cwd: "./dist/tmp/src",
+                    cwd: "./dist/tmp/widgets",
                     src: [ "**/*" ]
                 } ]
             }
@@ -43,7 +60,7 @@ module.exports = function(grunt) {
             distDeployment: {
                 files: [ {
                     dest: "./dist/MxTestProject/deployment/web/widgets",
-                    cwd: "./dist/tmp/src/",
+                    cwd: "./dist/tmp/widgets/",
                     src: [ "**/*" ],
                     expand: true
                 } ]
@@ -62,7 +79,7 @@ module.exports = function(grunt) {
             addSourceURL: {
                 files: [ {
                     append: `\n\n//# sourceURL=${pkg.widgetName}.webmodeler.js\n`,
-                    input: `dist/tmp/src/${pkg.widgetName}.webmodeler.js`
+                    input: `dist/tmp/widgets/${pkg.widgetName}.webmodeler.js`
                 } ]
             }
         },

README.md

@@ -1,3 +1,9 @@
+[![Build Status](https://travis-ci.org/mendixlabs/signature.svg?branch=master)](https://travis-ci.org/mendixlabs/signature)
+[![Dependency Status](https://david-dm.org/mendixlabs/signature.svg)](https://david-dm.org/mendixlabs/signature)
+[![Dev Dependency Status](https://david-dm.org/mendixlabs/signature.svg#info=devDependencies)](https://david-dm.org/mendixlabs/signature#info=devDependencies)
+[![codecov](https://codecov.io/gh/mendixlabs/signature/branch/master/graph/badge.svg)](https://codecov.io/gh/mendixlabs/signature)
+![badge](https://img.shields.io/badge/mendix-7.21.0-green.svg)
+
 ## Signature
 A signature pad for capturing signatures.  
 The widget implements bezier curves and velocity for the smooth drawing of the signature.
@@ -14,16 +20,32 @@ Add the widget to a dataview.
 [https://signature101.mxapps.io](https://signature101.mxapps.io)
 
 ## Usage
-
-* Add the **Has signature** attribute to toggle when clearing the canvas.  
+* Add an entity to the domain model which should inherit from Mendix **System.image**
+* Create a page with a data view, and place the widget inside
+* Optional, add the **Has signature** attribute to the entity, to toggle in order to clear the canvas.  
 ![Canvas](/assets/signature-attribute.png)
 
 * Under the pen tab, you can customize your own pen size by choosing the different pen types, the pen color.  
 ![Pen](/assets/signature-pen.png)
 
 * Run the application  
-* After signing on the canvas the **Has signature** attribute is toggled to show that the canvas has a signature, you can toggle to **no** inorder to clear the signature
+* After signing on the canvas the **Has signature** attribute is toggled to show that the canvas has a signature, you can toggle to **no** in order to clear the signature
 ![Data source](/assets/signature-image.png)
+* When the form is submitted, that can be triggered by start of a microflow or a save, the signature is captured and stored as an image.
+* To view the result, a `image viewer` widget could be used
+
+## Notion / Limitations
+- The widget behaves similar as the file upload widget:
+The trigger to save the image is caused by a from submit, which happen on before a start of a microflow or on save.
+To store the signature image in the object the Mendix platform forces a commit if the object is new. That behavior might have influence on a `Cancel` action.
+So a rollback in a microflow will not rollback the creation of the signature object. And the rollback will not fall back to the previous signature.
+
+- Previous signatures can not be edited:
+When the signature is captured and stored as an image, the widget could not be used on a new/other page for editing the existing widget.
+The widget will display an empty canvas and when the signature is saved it will overwrite the previous image.
+
+- Resized signature is captured
+Please note if the canvas is resized, the strokes outside the visible canvas are not shown, but they are stored.
 
 ### Properties
 * **Pen** | **color** - HTML color code of the pen.

karma.conf.js

@@ -17,7 +17,7 @@ module.exports = function(config) {
         Object.assign(webpackConfig, {
             module: Object.assign(webpackConfig.module, {
                 rules: webpackConfig.module.rules.concat([ {
-                    test: /\.ts$/,
+                    test: /\.+(ts|tsx)$/,
                     enforce: "post",
                     loader: "istanbul-instrumenter-loader",
                     include: path.resolve(__dirname, "src"),