IE 11 Support

[jerosoler]

IE 11 not support.

Comment: https://github.com/jerosoler/Drawflow/issues/22#issuecomment-671062283

[dangerousromeo]

@jerosoler Is there a solution for this...Since I require draw to work on IE 11 ..Please help and let me know if any work around available

[jerosoler]

Hi there @dangerousromeo

The death of internet explorer 11 is already announced. https://death-to-ie11.com/

I don't think it ends up giving support.

I have been playing with webpack.

In the end I got something like this:

module.exports = {
  entry: './src/drawflow.js',
  output: {
    library: 'Drawflow',
    libraryTarget: 'umd',
    libraryExport: 'default',
    filename: 'drawflow.min.js',
    globalObject: `(typeof self !== 'undefined' ? self : this)`
  },
  module: {
    rules: [{
      test: /\.m?js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env', {
              useBuiltIns: 'usage'
            }]
          ]
        }
      }
    }]
  }
};

And genereate this js.

Attacha in zip.

drawflow.min.zip

You will also need polyfills.

Some javascript from polyfills that have served me.

Even though it doesn't quite work 100%, polyfills will still have to be added.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.20171210/classList.min.js"></script>
    <script>
    if (!Element.prototype.matches) {
  Element.prototype.matches =
    Element.prototype.msMatchesSelector ||
    Element.prototype.webkitMatchesSelector;
}

if (!Element.prototype.closest) {
  Element.prototype.closest = function(s) {
    var el = this;

    do {
      if (Element.prototype.matches.call(el, s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}

//make sure we have Node.children and Element.children available
(function (constructor) {
    if (constructor &&
        constructor.prototype &&
        constructor.prototype.children == null) {
        Object.defineProperty(constructor.prototype, 'children', {
            get: function () {
                var i = 0, node, nodes = this.childNodes, children = [];
                //iterate all childNodes
                while (node = nodes[i++]) {
                    //remenber those, that are Node.ELEMENT_NODE (1)
                    if (node.nodeType === 1) { children.push(node); }
                }
                return children;
            }
        });
    }
  //apply the fix to all HTMLElements (window.Element) and to SVG/XML (window.Node)
})(window.Node || window.Element);
    </script>

I hope it helps you.

You can also look at exporting with support, with webpack, parcel, snowapack, rollup ...

Regards, Jero

[dangerousromeo]

Thanks @jerosoler for the great package , I followed the similar steps by adding required polyfills in drawflow.js src and generated the file, For now there is no issue

[jerosoler]

Pefect! @dangerousromeo If I could recreate the steps in case someone else needs it that would be great.

[jerosoler]

We remove the support IE11.

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md