Updated version number.

README.md

@@ -12,11 +12,16 @@ and some dependencies locally
 
 ## Build
 
-To build the two iwmlib files type
+To build the iwmlib files type
 
 `npm run build`
 
-The files will be generated in the dist folder (iwmlib.js and iwmlib.pixi.js). If you want to watch the files for a continuously build type
+The files
+
+- imwlib.js
+- iwmlib.pixi.js
+
+will be generated in the dist folder. If you want to build the files continuously type
 
 `npm run watch`
 

dist/iwmlib.js

@@ -4149,12 +4149,12 @@
             e.preventDefault();
             let event = new CustomEvent('resizeStarted');
 
-            let oldPostition = {x: this.element.offsetLeft, y: this.element.offsetTop};
+            let oldPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};
             this.bringToFront();
 
             this.element.style.transformOrigin = "0% 0%";
 
-            let newPostition = {x: this.element.offsetLeft, y: this.element.offsetTop};
+            let newPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};
 
             let offset = Points.subtract(oldPostition, newPostition);
 
@@ -4207,9 +4207,9 @@
             e.preventDefault();
 
             let event = new CustomEvent('resizeEnded');
-            let oldPostition = {x: this.element.offsetLeft, y: this.element.offsetTop};
+            let oldPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};
             this.element.style.transformOrigin = "50% 50%";
-            let newPostition = {x: this.element.offsetLeft, y: this.element.offsetTop};
+            let newPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};
             let offset = Points.subtract(oldPostition, newPostition);
 
             TweenLite.to(this.element, 0, { css: { left: "+=" + offset.x + "px" } });

dist/iwmlib.pixi.js

@@ -13758,11 +13758,11 @@
             if (this.opts.app) {
                 const app = this.opts.app;
                 app.view.addEventListener('mousewheel', event => {
-                    event.preventDefault();
                     const bounds = this.mask ? this.mask.getBounds() : this.getBounds();
                     const x = event.clientX - app.view.getBoundingClientRect().left;
                     const y = event.clientY - app.view.getBoundingClientRect().top;
                     if (bounds.contains(x, y)) {
+                        event.preventDefault();
                         this.emit('scroll', event);
                     }
                 });

lib/3rdparty/systemjs/babel-helpers/asyncGenerator.js

@@ -0,0 +1,112 @@
+export default (function () {
+  function AwaitValue(value) {
+    this.value = value;
+  }
+
+  function AsyncGenerator(gen) {
+    var front, back;
+
+    function send(key, arg) {
+      return new Promise(function (resolve, reject) {
+        var request = {
+          key: key,
+          arg: arg,
+          resolve: resolve,
+          reject: reject,
+          next: null
+        };
+
+        if (back) {
+          back = back.next = request;
+        } else {
+          front = back = request;
+          resume(key, arg);
+        }
+      });
+    }
+
+    function resume(key, arg) {
+      try {
+        var result = gen[key](arg);
+        var value = result.value;
+
+        if (value instanceof AwaitValue) {
+          Promise.resolve(value.value).then(function (arg) {
+            resume("next", arg);
+          }, function (arg) {
+            resume("throw", arg);
+          });
+        } else {
+          settle(result.done ? "return" : "normal", result.value);
+        }
+      } catch (err) {
+        settle("throw", err);
+      }
+    }
+
+    function settle(type, value) {
+      switch (type) {
+        case "return":
+          front.resolve({
+            value: value,
+            done: true
+          });
+          break;
+
+        case "throw":
+          front.reject(value);
+          break;
+
+        default:
+          front.resolve({
+            value: value,
+            done: false
+          });
+          break;
+      }
+
+      front = front.next;
+
+      if (front) {
+        resume(front.key, front.arg);
+      } else {
+        back = null;
+      }
+    }
+
+    this._invoke = send;
+
+    if (typeof gen.return !== "function") {
+      this.return = undefined;
+    }
+  }
+
+  if (typeof Symbol === "function" && Symbol.asyncIterator) {
+    AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
+      return this;
+    };
+  }
+
+  AsyncGenerator.prototype.next = function (arg) {
+    return this._invoke("next", arg);
+  };
+
+  AsyncGenerator.prototype.throw = function (arg) {
+    return this._invoke("throw", arg);
+  };
+
+  AsyncGenerator.prototype.return = function (arg) {
+    return this._invoke("return", arg);
+  };
+
+  return {
+    wrap: function (fn) {
+      return function () {
+        return new AsyncGenerator(fn.apply(this, arguments));
+      };
+    },
+    await: function (value) {
+      return new AwaitValue(value);
+    }
+  };
+})();

lib/3rdparty/systemjs/babel-helpers/asyncGeneratorDelegate.js

@@ -0,0 +1,51 @@
+export default (function (inner, awaitWrap) {
+  var iter = {},
+      waiting = false;
+
+  function pump(key, value) {
+    waiting = true;
+    value = new Promise(function (resolve) {
+      resolve(inner[key](value));
+    });
+    return {
+      done: false,
+      value: awaitWrap(value)
+    };
+  }
+
+  ;
+
+  if (typeof Symbol === "function" && Symbol.iterator) {
+    iter[Symbol.iterator] = function () {
+      return this;
+    };
+  }
+
+  iter.next = function (value) {
+    if (waiting) {
+      waiting = false;
+      return value;
+    }
+
+    return pump("next", value);
+  };
+
+  if (typeof inner.throw === "function") {
+    iter.throw = function (value) {
+      if (waiting) {
+        waiting = false;
+        throw value;
+      }
+
+      return pump("throw", value);
+    };
+  }
+
+  if (typeof inner.return === "function") {
+    iter.return = function (value) {
+      return pump("return", value);
+    };
+  }
+
+  return iter;
+});

lib/3rdparty/systemjs/babel-helpers/asyncIterator.js

@@ -0,0 +1,14 @@
+export default (function (iterable) {
+  if (typeof Symbol === "function") {
+    if (Symbol.asyncIterator) {
+      var method = iterable[Symbol.asyncIterator];
+      if (method != null) return method.call(iterable);
+    }
+
+    if (Symbol.iterator) {
+      return iterable[Symbol.iterator]();
+    }
+  }
+
+  throw new TypeError("Object is not async iterable");
+});

lib/3rdparty/systemjs/babel-helpers/asyncToGenerator.js

@@ -0,0 +1,28 @@
+export default (function (fn) {
+  return function () {
+    var gen = fn.apply(this, arguments);
+    return new Promise(function (resolve, reject) {
+      function step(key, arg) {
+        try {
+          var info = gen[key](arg);
+          var value = info.value;
+        } catch (error) {
+          reject(error);
+          return;
+        }
+
+        if (info.done) {
+          resolve(value);
+        } else {
+          return Promise.resolve(value).then(function (value) {
+            step("next", value);
+          }, function (err) {
+            step("throw", err);
+          });
+        }
+      }
+
+      return step("next");
+    });
+  };
+});

lib/3rdparty/systemjs/babel-helpers/classCallCheck.js

@@ -0,0 +1,5 @@
+export default (function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+});

lib/3rdparty/systemjs/babel-helpers/createClass.js

@@ -0,0 +1,17 @@
+export default (function () {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  return function (Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+})();

lib/3rdparty/systemjs/babel-helpers/defaults.js

@@ -0,0 +1,14 @@
+export default (function (obj, defaults) {
+  var keys = Object.getOwnPropertyNames(defaults);
+
+  for (var i = 0; i < keys.length; i++) {
+    var key = keys[i];
+    var value = Object.getOwnPropertyDescriptor(defaults, key);
+
+    if (value && value.configurable && obj[key] === undefined) {
+      Object.defineProperty(obj, key, value);
+    }
+  }
+
+  return obj;
+});

lib/3rdparty/systemjs/babel-helpers/defineEnumerableProperties.js

@@ -0,0 +1,10 @@
+export default (function (obj, descs) {
+  for (var key in descs) {
+    var desc = descs[key];
+    desc.configurable = desc.enumerable = true;
+    if ("value" in desc) desc.writable = true;
+    Object.defineProperty(obj, key, desc);
+  }
+
+  return obj;
+});

lib/3rdparty/systemjs/babel-helpers/defineProperty.js

@@ -0,0 +1,14 @@
+export default (function (obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+});

lib/3rdparty/systemjs/babel-helpers/extends.js

@@ -0,0 +1,13 @@
+export default Object.assign || function (target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i];
+
+    for (var key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        target[key] = source[key];
+      }
+    }
+  }
+
+  return target;
+};

lib/3rdparty/systemjs/babel-helpers/get.js

@@ -0,0 +1,24 @@
+export default (function get(object, property, receiver) {
+  if (object === null) object = Function.prototype;
+  var desc = Object.getOwnPropertyDescriptor(object, property);
+
+  if (desc === undefined) {
+    var parent = Object.getPrototypeOf(object);
+
+    if (parent === null) {
+      return undefined;
+    } else {
+      return get(parent, property, receiver);
+    }
+  } else if ("value" in desc) {
+    return desc.value;
+  } else {
+    var getter = desc.get;
+
+    if (getter === undefined) {
+      return undefined;
+    }
+
+    return getter.call(receiver);
+  }
+});

lib/3rdparty/systemjs/babel-helpers/inherits.js

@@ -0,0 +1,15 @@
+export default (function (subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      enumerable: false,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+});

lib/3rdparty/systemjs/babel-helpers/instanceof.js

@@ -0,0 +1,7 @@
+export default (function (left, right) {
+  if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+    return right[Symbol.hasInstance](left);
+  } else {
+    return left instanceof right;
+  }
+});

lib/3rdparty/systemjs/babel-helpers/interopRequireDefault.js

@@ -0,0 +1,5 @@
+export default (function (obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+});

lib/3rdparty/systemjs/babel-helpers/interopRequireWildcard.js

@@ -0,0 +1,16 @@
+export default (function (obj) {
+  if (obj && obj.__esModule) {
+    return obj;
+  } else {
+    var newObj = {};
+
+    if (obj != null) {
+      for (var key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
+      }
+    }
+
+    newObj.default = obj;
+    return newObj;
+  }
+});

lib/3rdparty/systemjs/babel-helpers/jsx.js

@@ -0,0 +1,42 @@
+export default (function () {
+  var REACT_ELEMENT_TYPE = typeof Symbol === "function" && Symbol.for && Symbol.for("react.element") || 0xeac7;
+  return function createRawReactElement(type, props, key, children) {
+    var defaultProps = type && type.defaultProps;
+    var childrenLength = arguments.length - 3;
+
+    if (!props && childrenLength !== 0) {
+      props = {};
+    }
+
+    if (props && defaultProps) {
+      for (var propName in defaultProps) {
+        if (props[propName] === void 0) {
+          props[propName] = defaultProps[propName];
+        }
+      }
+    } else if (!props) {
+      props = defaultProps || {};
+    }
+
+    if (childrenLength === 1) {
+      props.children = children;
+    } else if (childrenLength > 1) {
+      var childArray = Array(childrenLength);
+
+      for (var i = 0; i < childrenLength; i++) {
+        childArray[i] = arguments[i + 3];
+      }
+
+      props.children = childArray;
+    }
+
+    return {
+      $$typeof: REACT_ELEMENT_TYPE,
+      type: type,
+      key: key === undefined ? null : '' + key,
+      ref: null,
+      props: props,
+      _owner: null
+    };
+  };
+})();

lib/3rdparty/systemjs/babel-helpers/newArrowCheck.js

@@ -0,0 +1,5 @@
+export default (function (innerThis, boundThis) {
+  if (innerThis !== boundThis) {
+    throw new TypeError("Cannot instantiate an arrow function");
+  }
+});

lib/3rdparty/systemjs/babel-helpers/objectDestructuringEmpty.js

@@ -0,0 +1,3 @@
+export default (function (obj) {
+  if (obj == null) throw new TypeError("Cannot destructure undefined");
+});

lib/3rdparty/systemjs/babel-helpers/objectWithoutProperties.js

@@ -0,0 +1,11 @@
+export default (function (obj, keys) {
+  var target = {};
+
+  for (var i in obj) {
+    if (keys.indexOf(i) >= 0) continue;
+    if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
+    target[i] = obj[i];
+  }
+
+  return target;
+});

lib/3rdparty/systemjs/babel-helpers/possibleConstructorReturn.js

@@ -0,0 +1,7 @@
+export default (function (self, call) {
+  if (!self) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return call && (typeof call === "object" || typeof call === "function") ? call : self;
+});

lib/3rdparty/systemjs/babel-helpers/selfGlobal.js

@@ -0,0 +1 @@
+export default typeof global === "undefined" ? self : global;

lib/3rdparty/systemjs/babel-helpers/set.js

@@ -0,0 +1,21 @@
+export default (function set(object, property, value, receiver) {
+  var desc = Object.getOwnPropertyDescriptor(object, property);
+
+  if (desc === undefined) {
+    var parent = Object.getPrototypeOf(object);
+
+    if (parent !== null) {
+      set(parent, property, value, receiver);
+    }
+  } else if ("value" in desc && desc.writable) {
+    desc.value = value;
+  } else {
+    var setter = desc.set;
+
+    if (setter !== undefined) {
+      setter.call(receiver, value);
+    }
+  }
+
+  return value;
+});

lib/3rdparty/systemjs/babel-helpers/slicedToArray.js

@@ -0,0 +1,37 @@
+export default (function () {
+  function sliceIterator(arr, i) {
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _e = undefined;
+
+    try {
+      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+        _arr.push(_s.value);
+
+        if (i && _arr.length === i) break;
+      }
+    } catch (err) {
+      _d = true;
+      _e = err;
+    } finally {
+      try {
+        if (!_n && _i["return"]) _i["return"]();
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+
+    return _arr;
+  }
+
+  return function (arr, i) {
+    if (Array.isArray(arr)) {
+      return arr;
+    } else if (Symbol.iterator in Object(arr)) {
+      return sliceIterator(arr, i);
+    } else {
+      throw new TypeError("Invalid attempt to destructure non-iterable instance");
+    }
+  };
+})();

lib/3rdparty/systemjs/babel-helpers/slicedToArrayLoose.js

@@ -0,0 +1,17 @@
+export default (function (arr, i) {
+  if (Array.isArray(arr)) {
+    return arr;
+  } else if (Symbol.iterator in Object(arr)) {
+    var _arr = [];
+
+    for (var _iterator = arr[Symbol.iterator](), _step; !(_step = _iterator.next()).done;) {
+      _arr.push(_step.value);
+
+      if (i && _arr.length === i) break;
+    }
+
+    return _arr;
+  } else {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance");
+  }
+});

lib/3rdparty/systemjs/babel-helpers/taggedTemplateLiteral.js

@@ -0,0 +1,7 @@
+export default (function (strings, raw) {
+  return Object.freeze(Object.defineProperties(strings, {
+    raw: {
+      value: Object.freeze(raw)
+    }
+  }));
+});

lib/3rdparty/systemjs/babel-helpers/taggedTemplateLiteralLoose.js

@@ -0,0 +1,4 @@
+export default (function (strings, raw) {
+  strings.raw = raw;
+  return strings;
+});

lib/3rdparty/systemjs/babel-helpers/temporalRef.js

@@ -0,0 +1,7 @@
+export default (function (val, name, undef) {
+  if (val === undef) {
+    throw new ReferenceError(name + " is not defined - temporal dead zone");
+  } else {
+    return val;
+  }
+});

lib/3rdparty/systemjs/babel-helpers/temporalUndefined.js

@@ -0,0 +1 @@
+export default {};

lib/3rdparty/systemjs/babel-helpers/toArray.js

@@ -0,0 +1,3 @@
+export default (function (arr) {
+  return Array.isArray(arr) ? arr : Array.from(arr);
+});

lib/3rdparty/systemjs/babel-helpers/toConsumableArray.js

@@ -0,0 +1,9 @@
+export default (function (arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+
+    return arr2;
+  } else {
+    return Array.from(arr);
+  }
+});

lib/3rdparty/systemjs/babel-helpers/typeof.js

@@ -0,0 +1,5 @@
+export default typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+  return typeof obj;
+} : function (obj) {
+  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+};

lib/3rdparty/systemjs/plugin-babel.js

@@ -0,0 +1,222 @@
+var babel = require('systemjs-babel-build').babel;
+
+// the SystemJS babel build includes standard presets
+var es2015 = require('systemjs-babel-build').presetES2015;
+var es2015Register = require('systemjs-babel-build').presetES2015Register;
+var modulesRegister = require('systemjs-babel-build').modulesRegister;
+var stage3 = require('systemjs-babel-build').pluginsStage3;
+var stage2 = require('systemjs-babel-build').pluginsStage2;
+var stage1 = require('systemjs-babel-build').pluginsStage1;
+var react = require('systemjs-babel-build').pluginsReact;
+
+var externalHelpers = require('systemjs-babel-build').externalHelpers;
+var runtimeTransform = require('systemjs-babel-build').runtimeTransform;
+
+var babelRuntimePath;
+var modularHelpersPath = System.decanonicalize('./babel-helpers/', module.id);
+var externalHelpersPath = System.decanonicalize('./babel-helpers.js', module.id);
+var regeneratorRuntimePath = System.decanonicalize('./regenerator-runtime.js', module.id);
+
+if (modularHelpersPath.substr(modularHelpersPath.length - 3, 3) == '.js')
+  modularHelpersPath = modularHelpersPath.substr(0, modularHelpersPath.length - 3);
+
+// in builds we want to embed canonical names to helpers
+if (System.getCanonicalName) {
+  modularHelpersPath = System.getCanonicalName(modularHelpersPath);
+  externalHelpersPath = System.getCanonicalName(externalHelpersPath);
+  regeneratorRuntimePath = System.getCanonicalName(regeneratorRuntimePath);
+}
+
+// disable SystemJS runtime detection
+SystemJS._loader.loadedTranspilerRuntime = true;
+
+function prepend(a, b) {
+  for (var p in b)
+    if (!(p in a))
+      a[p] = b[p];
+  return a;
+}
+
+/*
+ * babelOptions:
+ *   modularRuntime: true / false (whether to use babel-runtime or babel/external-helpers respectively)
+ *   sourceMaps: true / false (defaults to true)
+ *   es2015: true / false (defaults to true)
+ *   stage3: true / false (defaults to true)
+ *   stage2: true / false (defaults to true)
+ *   stage1: true / false (defaults to false)
+ *   react: true / false (defaults to false)
+ *   plugins: array of custom plugins (objects or module name strings)
+ *   presets: array of custom presets (objects or module name strings)
+ *   compact: as in Babel
+ *   comments: as in Babel
+ *
+ * babelOptions can be set at SystemJS.babelOptions OR on the metadata object for a given module
+ */
+var defaultBabelOptions = {
+  modularRuntime: true,
+  sourceMaps: true,
+  es2015: true,
+  stage3: true,
+  stage2: true,
+  stage1: false,
+  react: false,
+  compact: false,
+  comments: true
+};
+
+exports.translate = function(load, traceOpts) {
+  // we don't transpile anything other than CommonJS or ESM
+  if (load.metadata.format == 'global' || load.metadata.format == 'amd' || load.metadata.format == 'json')
+    throw new TypeError('plugin-babel cannot transpile ' + load.metadata.format + ' modules. Ensure "' + load.name + '" is configured not to use this loader.');
+
+  var loader = this;
+  var pluginLoader = loader.pluginLoader || loader;
+
+  // we only output ES modules when running in the builder
+  var outputESM = traceOpts ? traceOpts.outputESM : loader.builder;
+
+  var babelOptions = {};
+
+  if (load.metadata.babelOptions)
+    prepend(babelOptions, load.metadata.babelOptions);
+
+  if (loader.babelOptions)
+    prepend(babelOptions, loader.babelOptions);
+
+  prepend(babelOptions, defaultBabelOptions);
+
+  // determine any plugins or preset strings which need to be imported as modules
+  var pluginAndPresetModuleLoads = [];
+
+  if (babelOptions.presets)
+    babelOptions.presets.forEach(function(preset) {
+      if (typeof preset == 'string')
+        pluginAndPresetModuleLoads.push(pluginLoader['import'](preset, module.id));
+    });
+
+  if (babelOptions.plugins)
+    babelOptions.plugins.forEach(function(plugin) {
+      plugin = typeof plugin == 'string' ? plugin : Array.isArray(plugin) && typeof plugin[0] == 'string' && plugin[0];
+      if (!plugin)
+        return;
+      pluginAndPresetModuleLoads.push(pluginLoader.import(plugin, module.id).then(function (m) {
+        return m.default || m;
+      }));
+    });
+
+  return Promise.all(pluginAndPresetModuleLoads)
+  .then(function(pluginAndPresetModules) {
+    var curPluginOrPresetModule = 0;
+
+    var presets = [];
+    var plugins = [];
+
+    if (babelOptions.modularRuntime) {
+      if (load.metadata.format == 'cjs')
+        throw new TypeError('plugin-babel does not support modular runtime for CJS module transpilations. Set babelOptions.modularRuntime: false if needed.');
+      presets.push(runtimeTransform);
+    }
+    else {
+      if (load.metadata.format == 'cjs')
+        load.source = 'var babelHelpers = require("' + externalHelpersPath + '");' + load.source;
+      else
+        load.source = 'import babelHelpers from "' + externalHelpersPath + '";' + load.source;
+      presets.push(externalHelpers);
+    }
+
+    if (babelOptions.es2015)
+      presets.push((outputESM || load.metadata.format == 'cjs') ? es2015 : es2015Register);
+    else if (!(outputESM || load.metadata.format == 'cjs'))
+      presets.push(modulesRegister);
+
+    if (babelOptions.stage3)
+      presets.push({
+        plugins: stage3
+      });
+
+    if (babelOptions.stage2)
+      presets.push({
+        plugins: stage2
+      });
+
+    if (babelOptions.stage1)
+      presets.push({
+        plugins: stage1
+      });
+
+    if (babelOptions.react)
+      presets.push({
+        plugins: react
+      });
+
+    if (babelOptions.presets)
+      babelOptions.presets.forEach(function(preset) {
+        if (typeof preset == 'string')
+          presets.push(pluginAndPresetModules[curPluginOrPresetModule++]);
+        else
+          presets.push(preset);
+      });
+
+    if (babelOptions.plugins)
+      babelOptions.plugins.forEach(function(plugin) {
+        if (typeof plugin == 'string')
+          plugins.push(pluginAndPresetModules[curPluginOrPresetModule++]);
+        else if (Array.isArray(plugin) && typeof plugin[0] == 'string')
+          plugins.push([pluginAndPresetModules[curPluginOrPresetModule++], plugin[1]]);
+        else
+          plugins.push(plugin);
+      });
+
+    var output = babel.transform(load.source, {
+      babelrc: false,
+      plugins: plugins,
+      presets: presets,
+      filename: load.address,
+      sourceFileName: load.address,
+      moduleIds: false,
+      sourceMaps: traceOpts && traceOpts.sourceMaps || babelOptions.sourceMaps,
+      inputSourceMap: load.metadata.sourceMap,
+      compact: babelOptions.compact,
+      comments: babelOptions.comments,
+      code: true,
+      ast: true,
+      resolveModuleSource: function(m) {
+        if (m.substr(0, 22) == 'babel-runtime/helpers/') {
+          m = modularHelpersPath + m.substr(22) + '.js';
+        }
+        else if (m == 'babel-runtime/regenerator') {
+          m = regeneratorRuntimePath;
+        }
+        else if (m.substr(0, 14) == 'babel-runtime/') {
+          if (!babelRuntimePath) {
+            babelRuntimePath = System.decanonicalize('babel-runtime/', module.id);
+            if (babelRuntimePath[babelRuntimePath.length - 1] !== '/')
+              babelRuntimePath += '/';
+            if (babelRuntimePath.substr(babelRuntimePath.length - 3, 3) == '.js')
+              babelRuntimePath = babelRuntimePath.substr(0, babelRuntimePath.length - 3);
+            if (loader.getCanonicalName)
+              babelRuntimePath = loader.getCanonicalName(babelRuntimePath);
+            if (babelRuntimePath == 'babel-runtime/')
+              throw new Error('The babel-runtime module must be mapped to support modular helpers and builtins. If using jspm run jspm install npm:babel-runtime.');
+          }
+          m = babelRuntimePath + m.substr(14) + '.js';
+        }
+        return m;
+      }
+    });
+
+    // add babelHelpers as a dependency for non-modular runtime
+    if (!babelOptions.modularRuntime)
+      load.metadata.deps.push(externalHelpersPath);
+
+    // set output module format
+    // (in builder we output modules as esm)
+    if (!load.metadata.format || load.metadata.format == 'detect' || load.metadata.format == 'esm')
+      load.metadata.format = outputESM ? 'esm' : 'register';
+
+    load.metadata.sourceMap = output.map;
+
+    return output.code;
+  });
+};

lib/3rdparty/systemjs/system-config-es2015.js

@@ -0,0 +1,23 @@
+SystemJS.config({
+    baseURL: '../../',
+    map: {
+        'plugin-babel': 'lib/3rdparty/systemjs/plugin-babel.js',
+        'systemjs-babel-build': 'lib/3rdparty/systemjs/systemjs-babel-browser.js',
+        '3rdparty': 'lib/3rdparty/3rdparty.js',
+        /* Don't know why these should be mapped?!? */
+        'd3-selection': 'lib/3rdparty/d3/d3.js',
+        'd3-transition': 'lib/3rdparty/d3/d3.js',
+        'TweenLite': 'lib/3rdparty/greensock/src/uncompressed/TweenLite.js',
+        'CustomEase': 'lib/3rdparty/greensock/src/uncompressed/easing/CustomEase.js',
+        'CSSPlugin': 'lib/3rdparty/greensock/src/uncompressed/plugins/CSSPlugin.js'
+    },
+    transpiler: 'plugin-babel',
+    meta: {
+        '*.js': {
+            authorization: true,
+            babelOptions: {
+                es2015: true
+            }
+        }
+    }
+})

lib/3rdparty/systemjs/system-config.js

@@ -0,0 +1,23 @@
+SystemJS.config({
+	baseURL: '../../',
+	map: {
+		"plugin-babel": "lib/3rdparty/systemjs/plugin-babel.js",
+		"systemjs-babel-build": "lib/3rdparty/systemjs/systemjs-babel-browser.js",
+		"3rdparty": "lib/3rdparty/3rdparty.js",
+		/* Don't know why these should be mapped?!? */
+		"d3-selection": "lib/3rdparty/d3/d3.js",
+		"d3-transition": "lib/3rdparty/d3/d3.js",
+		"TweenLite": "lib/3rdparty/greensock/src/uncompressed/TweenLite.js",
+		"CustomEase": "lib/3rdparty/greensock/src/uncompressed/easing/CustomEase.js",
+		"CSSPlugin": "lib/3rdparty/greensock/src/uncompressed/plugins/CSSPlugin.js"
+	},
+	transpiler: "plugin-babel",
+	meta: {
+		"*.js": {
+			authorization: true,
+			babelOptions: {
+				es2015: false
+			}
+		}
+	}
+})

lib/pixi/list.js

@@ -107,11 +107,11 @@ export default class List extends PIXI.Container {
         if (this.opts.app) {
             const app = this.opts.app
             app.view.addEventListener('mousewheel', event => {
-                event.preventDefault()
                 const bounds = this.mask ? this.mask.getBounds() : this.getBounds()
                 const x = event.clientX - app.view.getBoundingClientRect().left
                 const y = event.clientY - app.view.getBoundingClientRect().top
                 if (bounds.contains(x, y)) {
+                    event.preventDefault()
                     this.emit('scroll', event)
                 }
             })

lib/scatter.js

@@ -1386,12 +1386,12 @@ export class DOMScatter extends AbstractScatter {
         e.preventDefault()
         let event = new CustomEvent('resizeStarted')
 
-        let oldPostition = {x: this.element.offsetLeft, y: this.element.offsetTop}
+        let oldPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};
         this.bringToFront()
 
         this.element.style.transformOrigin = "0% 0%"
 
-        let newPostition = {x: this.element.offsetLeft, y: this.element.offsetTop}
+        let newPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};
 
         let offset = Points.subtract(oldPostition, newPostition)
 
@@ -1444,9 +1444,9 @@ export class DOMScatter extends AbstractScatter {
         e.preventDefault()
 
         let event = new CustomEvent('resizeEnded')
-        let oldPostition = {x: this.element.offsetLeft, y: this.element.offsetTop}
+        let oldPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};
         this.element.style.transformOrigin = "50% 50%"
-        let newPostition = {x: this.element.offsetLeft, y: this.element.offsetTop}
+        let newPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};
         let offset = Points.subtract(oldPostition, newPostition)
 
         TweenLite.to(this.element, 0, { css: { left: "+=" + offset.x + "px" } })

lib/stylus/README.txt

@@ -0,0 +1,13 @@
+
+
+https://mattdesl.svbtle.com/drawing-lines-is-hard
+http://perfectionkills.com/exploring-canvas-drawing-techniques/
+
+
+
+https://github.com/mattdesl/polyline-normals
+
+var path = [ [0, 122], [0, 190], [90, 190] ]
+
+//get the normals as a closed loop
+var normals = getNormals(path, true)

lib/stylus/index.html

@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+
+  <!-- disable zooming -->
+  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
+  <title>Stylus Functional Tests</title>
+  <style media="screen">
+
+    html, body {
+        margin:0;
+        padding:0;
+
+        height:100%;
+        width: 100%;
+        /* See http://stackoverflow.com/questions/9280258/prevent-body-scrolling-but-allow-overlay-scrolling */
+        position:fixed;
+        overflow: hidden;
+        font-size: 18px;
+        background:gray;
+        font-family:arial,sans-serif;
+        color:#FFF;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        -webkit-overflow-scrolling: auto;
+        user-select: none;
+        touch-action: manipulation;
+    }
+
+    .site {
+        display: flex;
+        min-height: 100%;
+        flex-direction: column;
+    }
+/*
+
+    .interactive {
+        -ms-content-zooming: none;
+        touch-action: none;
+    }
+ */
+
+    main {
+        flex-grow: 1;
+        overflow: hidden;
+        position:relative
+    }
+
+    .container {
+        position:absolute;
+        width: 100%;
+        height: 100%;
+        min-height: 100%;
+    }
+    </style>
+
+    <script src="../../lib/3rdparty/all.js"></script>
+	<script src="../../lib/bootstrap.js"></script>
+</head>
+<body class="site" oncontextmenu="return false" >
+<main id="main" class="container">
+    <canvas id="canvas" width="100%" height="100%" style="position: absolute; z-index:10000; user-select: none;">
+	    Get a better browser, bro.
+    </canvas>
+</main>
+<script>
+    Bootstrap.import('./main.js')
+</script>
+</body>
+</html>

lib/stylus/main.js

@@ -0,0 +1,90 @@
+import PIXIApp from '../../lib/pixi/app.js'
+import Button from '../../lib/pixi/button.js'
+import ButtonGroup from '../../lib/pixi/buttongroup.js'
+import Stylus from './stylus.js'
+
+class StylusApp extends PIXIApp {
+
+    sceneFactory() {
+        return new Stylus(this.renderer)
+    }
+
+    setup() {
+        let buttonColor = 0x666666
+        super.setup()
+
+        this.tools = new ButtonGroup({
+            type: 'checkbox',
+            margin: 0,
+            x: 16,
+            y: 16,
+            fill: buttonColor,
+            buttons: [{icon: 'edit',
+                        iconColorActive: 0xFFFF00,
+                        action: (event, button) => this.toggleEditMode() },
+               {icon: 'undo',
+                        action: (event, button) => this.undo(button) },
+               {icon: 'redo',
+                        action: (event, button) => this.redo(button) },
+               {icon: 'delete',
+                        action: (event, button) => this.clear(button) }
+            ]
+        })
+        this.scene.addChild(this.tools)
+
+        let defaults = { icon: 'brightness_1',
+                    action: (event, button) => this.selectColor(button),
+                    fillAlpha: 0,
+                    strokeAlpha: 0,
+                    fillActiveAlpha: 0,
+                    strokeActiveAlpha: 0}
+
+        this.palette = new ButtonGroup( {
+            type: "radio",
+            x: 200,
+            y: 16,
+            margin: 0,
+            strokeAlpha: 0,
+            fill: buttonColor,
+            buttons: [
+                Object.assign({}, defaults, { iconColor: 0x111111,
+                                                iconColorActive: 0x111111}),     // tooltip: "Black",
+                Object.assign({}, defaults, { iconColor: 0xFFFF00,
+                                                iconColorActive: 0xFFFF00}),     // tooltip: "Yellow",
+                Object.assign({}, defaults, { iconColor: 0x00FF00,
+                                                iconColorActive:0x00FF00}),          // tooltip: "Green",
+                Object.assign({}, defaults, { iconColor: 0xFF00FF,
+                                                iconColorActive:0xFF00FF})     // tooltip: "Violet",
+            ]
+        })
+        this.scene.addChild(this.palette)
+    }
+
+    selectColor(button) {
+        this.scene.color = button.opts.iconColor
+    }
+
+    undo(button) {
+        this.scene.undo()
+        setTimeout(() => {
+            button.active = false}, 200)
+    }
+
+    redo(button) {
+        this.scene.redo()
+        setTimeout(() => {
+            button.active = false}, 200)
+    }
+
+    clear(button) {
+        this.scene.clearAll()
+        setTimeout(() => {
+            button.active = false}, 200)
+    }
+}
+
+const app = new StylusApp({ view: canvas })
+window.app = app
+app.setup()
+app.run()
+

lib/stylus/stylus.js

@@ -0,0 +1,398 @@
+import Events from '../events.js'
+import { Angle } from '../utils.js'
+
+class StylusCommand extends Object {
+
+    constructor() {
+        super()
+    }
+
+    do(stylus) {
+        stylus.commandStack.push(this)
+    }
+
+    undo(stylus) {
+        stylus.undoCommandStack.push(this)
+    }
+
+    redo(stylus) {
+        this.do(stylus)
+    }
+}
+
+class StrokeCommand extends StylusCommand {
+
+    constructor(stroke) {
+        super()
+        this.stroke = stroke
+    }
+
+    do(stylus) {
+        if (this.stroke.length > 0) {
+            super.do(stylus)
+            stylus.stroke = []
+            stylus.strokes.push(this.stroke)
+            stylus.redraw()
+            stylus.changed()
+        }
+    }
+
+    undo(stylus) {
+        if (this.stroke.length > 0) {
+            super.undo(stylus)
+            stylus.strokes.pop()
+            stylus.redraw()
+            stylus.changed()
+        }
+    }
+}
+
+class ClearCommand extends StylusCommand {
+
+    do(stylus) {
+        // Clears the command stack
+        stylus.commandStack = []
+        super.do(stylus)
+        this.strokes = stylus.strokes
+        stylus.stroke = []
+        stylus.strokes = []
+        stylus.redraw()
+        stylus.changed()
+    }
+
+    undo(stylus) {
+        //super.undo(stylus) // Clear all is not redoable
+        stylus.stroke = []
+        stylus.strokes = this.strokes
+        stylus.redraw()
+        stylus.changed()
+    }
+}
+
+
+export default class Stylus extends PIXI.Graphics {
+
+    constructor({ width = window.innerWidth,
+        height = window.innerHeight,
+        interactive = true,
+        color = 0x000000,
+        tiltX = 0,
+        tiltY = 0,
+        backgroundAlpha = 1,
+        backgroundFill = 0xFFFFFF,
+        colorAlpha = 1,
+        captureEvents = true,
+        acceptMouseEvents = true } = {}) {
+        super()
+        this.wantedWidth = width
+        this.wantedHeight = height
+        this.backgroundAlpha = backgroundAlpha
+        this.backgroundFill = backgroundFill
+        this.colorAlpha = colorAlpha
+        this.color = color
+        this.interactive = interactive
+        this.debug = false
+        this.tiltX = tiltX  // degrees -90 ... 90
+        this.tiltY = tiltY  // degrees -90 ... 90
+        this.captureEvents = captureEvents
+        this.commandStack = []
+        this.undoCommandStack = []
+        this.strokes = []
+        this.stroke = []
+        if (captureEvents)
+            this.registerEventHandler(acceptMouseEvents)
+        this.drawBackground()
+    }
+
+    drawBackground() {
+        this.clear()
+        this.beginFill(this.backgroundFill, this.backgroundAlpha)
+        this.drawRect(0, 0, this.wantedWidth, this.wantedHeight)
+        this.endFill()
+    }
+
+    touchToPoint(t) {
+        return { x: t.clientX, y: t.clientY }
+    }
+
+    isStylusPointer(event) {
+        let identifier = event.data.identifier
+        if (typeof (event.data.originalEvent.changedTouches) !== 'undefined') {
+            for (let touch of event.data.originalEvent.changedTouches) {
+                if (touch.identifier === identifier && touch.touchType === 'stylus') {
+                    this.tiltX = Angle.radian2degree(touch.azimuthAngle)
+                    this.tiltY = 90.0 - Angle.radian2degree(touch.altitudeAngle)
+                    return true
+                }
+            }
+        }
+        // UO: Not tested since the Sprot delivered "mouse" events to Chrome
+        if (event.data.originalEvent.pointerType === 'pen') {
+            this.tiltX = event.data.originalEvent.tiltX
+            this.tiltY = event.data.originalEvent.tiltY
+            return true
+        }
+        return false
+    }
+
+    isStylusTouch(event) {
+        let identifier = event.data.identifier
+        if (typeof (event.data.originalEvent.changedTouches) !== 'undefined') {
+            for (let touch of event.data.originalEvent.changedTouches) {
+                if (touch.identifier === identifier && touch.pointerType === 'touch') {
+                    return true
+                }
+            }
+        }
+        return false
+    }
+
+    getPointerID(event) {
+        let identifier = event.data.identifier
+        for (let touch of event.data.originalEvent.changedTouches) {
+            if (touch.identifier === identifier) {
+                return touch.pointerId
+            }
+        }
+    }
+
+    registerEventHandler() {
+        window.addEventListener('keydown', (e) => {
+            switch (e.keyCode) {
+                case 38:  // up arrow
+                    this.tiltX += 5
+                    break
+                case 40:  // down arrow
+                    this.tiltX -= 5
+                    break
+                case 37:  // left arrow
+                    this.tiltY -= 5
+                    break
+                case 39:  // right arrow
+                    this.tiltY += 5
+                    break
+            }
+            if (this.debug) console.log("keydown", e.keyCode, this.tiltX, this.tiltY)
+        })
+
+        this.on('pointerdown', (e) => {
+            if (this.debug) console.log("pointerdown", e)
+            if (this.eventInside(e))
+                this.startStroke(this.toStroke(e))
+        })
+        this.on('pointermove', (e) => {
+            if (Events.isPointerDown(e.data.originalEvent) || this.isStylusPointer(e) || this.isStylusTouch(e)) {
+                if (this.debug) console.log("pointermove", e, this.eventInside(e))
+                if (this.eventInside(e))
+                    this.moveStroke(this.toStroke(e))
+            }
+        })
+        this.on('pointerup', (e) => {
+            if (this.debug) console.log("pointerup", e)
+            if (this.eventInside(e))
+                this.endStroke(this.toStroke(e))
+        })
+        this.on('pointerleave', (e) => {
+            this.endStroke(this.toStroke(e))
+        })
+        this.on('pointercancel', (e) => {
+            this.endStroke(this.toStroke(e))
+        })
+    }
+
+    undoable() {
+        return this.commandStack.length > 0
+    }
+
+    redoable() {
+        return this.undoCommandStack.length > 0
+    }
+
+    undo() {
+        if (this.undoable()) {
+            let cmd = this.commandStack.pop()
+            cmd.undo(this)
+        }
+    }
+
+    redo() {
+        if (this.redoable()) {
+            let cmd = this.undoCommandStack.pop()
+            cmd.redo(this)
+        }
+    }
+
+    eventInside(event) {
+
+        let local = this.toLocal(event.data.global)
+        for (let child of this.children) {
+            let r = child.getBounds()
+            if (r.contains(local.x, local.y)) {
+                console.log("Child touched")
+                return false
+            }
+        }
+        if (local.x < 0 || local.x > this.wantedWidth)
+            return false
+        if (local.y < 0 || local.y > this.wantedHeight)
+            return false
+        event.stopPropagation()
+        if (this.debug) console.log("stopPropagation", event)
+        if (event.data.originalEvent.claimedByScatter) {
+            return false
+        }
+        return true
+    }
+
+    toLocalPoint(event) {
+        return this.toLocal(event.data.global)
+    }
+
+    toStroke(event) {
+        let local = this.toLocalPoint(event)
+        let x = Math.max(0, Math.min(local.x, this.wantedWidth))
+        let y = Math.max(0, Math.min(local.y, this.wantedHeight))
+        let desc = {
+            x, y,
+            pressure: event.pressure || null,
+            tiltX: this.tiltX, tiltY: this.tiltY,
+            color: this.color
+        }
+        return desc
+    }
+
+    startStroke(info) {
+        this.stroke = [info]
+        this.redraw()
+    }
+
+    moveStroke(info) {
+        this.stroke.push(info)
+        this.redraw()
+    }
+
+    endStroke(info) {
+        if (this.stroke.length > 1) {
+            let cmd = new StrokeCommand(this.stroke)
+            cmd.do(this)
+        }
+    }
+
+    tiltToLineWidth(value) {
+        return Math.round(Math.abs(value / 10) + 1)
+    }
+
+    drawStroke(stroke) {
+        if (stroke.length) {
+            let start = stroke[0]
+            this.beginFill(0, 0)
+            this.moveTo(start.x, start.y)
+            for (let i = 1; i < stroke.length; i++) {
+                let info = stroke[i]
+                this.lineStyle(this.tiltToLineWidth(info.tiltY),
+                    info.color, this.colorAlpha)
+                this.lineTo(info.x, info.y)
+            }
+            this.endFill()
+        }
+    }
+
+    drawTouch(point) {
+        this.beginFill(0, 0)
+        this.drawCircle(point.x, point.y, 22)
+        this.endFill()
+    }
+
+    drawStrokes() {
+        this.drawBackground()
+        this.lineStyle(1.0, 0xFF0000, 1)
+        for (let stroke of this.iterStrokes()) {
+            this.drawStroke(stroke)
+        }
+    }
+
+    redraw() {
+        this.drawStrokes()
+    }
+
+    // Can be overwritten if different levels of strokes are necessary
+    *iterStrokes() {
+        for (let stroke of this.strokes) {
+            yield stroke
+        }
+        yield this.stroke
+    }
+
+    changed() {
+        // Can be overwritten
+    }
+
+    clearAll() {
+        let cmd = new ClearCommand()
+        cmd.do(this)
+    }
+
+    normalizeInfo(info) {
+        let { x, y, pressure, tiltX, tiltY, color } = info
+        x /= this.wantedWidth
+        y /= this.wantedHeight
+        return { x, y, pressure, tiltX, tiltY, color }
+    }
+
+    denormalizeInfo(info) {
+        let { x, y, pressure, tiltX, tiltY, color } = info
+        x = x * this.wantedWidth
+        y = y * this.wantedHeight
+        return { x, y, pressure, tiltX, tiltY, color }
+    }
+
+    // Convert strokes into an object that can be stored in an Indexed DB.
+    // Returns normalized strokes
+    toObject() {
+        let result = []
+        for (let stroke of this.strokes) {
+            let normalized = []
+            for (let info of stroke) {
+                normalized.push(this.normalizeInfo(info))
+            }
+            result.push(normalized)
+        }
+        return result
+    }
+
+    // Read normalized strokes from an object from an Indexed DB.
+    fromObject(normalizedStrokes) {
+        this.strokes = []
+        for (let stroke of normalizedStrokes) {
+            let denormalized = []
+            for (let info of stroke) {
+                denormalized.push(this.denormalizeInfo(info))
+            }
+            this.strokes.push(denormalized)
+        }
+    }
+
+    // Convert strokes into a JSON object that can be stored in an Indexed DB
+    toJSON() {
+        return JSON.stringify(this.toObject())
+    }
+
+    // Convert strokes from a JSON
+    fromJSON(json) {
+        this.fromObject(JSON.parse(json))
+    }
+
+    // Returns a set of used colors
+    usedColors() {
+        let used = new Set()
+        for (let info of this.stroke) {
+            used.add(info.color)
+        }
+        for (let stroke of this.strokes) {
+            for (let info of stroke) {
+                used.add(info.color)
+            }
+        }
+        return used.values()
+    }
+}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "iwmlib",
-    "version": "1.1.0",
+    "version": "1.3.0",
     "description": "An Open Source library for multi-touch, WebGL powered applications.",
     "main": "index.js",
     "directories": {