add example how to use Drawflow in a custom element

kusigit · kusigit · commit 8bdb5e568b5a · 2021-03-17T08:17:53.000+01:00
diff --git a/README.md b/README.md
@@ -387,7 +387,8 @@ Example of exported data:
 ```
 
 ## Example
-View the complete example in folder [docs](https://github.com/jerosoler/Drawflow/tree/master/docs).
+View the complete example in folder [docs](https://github.com/jerosoler/Drawflow/tree/master/docs).  
+There is also an [example](docs/drawflow-element.html) how to use Drawflow in a custom element. (based on [LitElement](https://lit-element.polymer-project.org)).  
 
 ## License
 MIT License
diff --git a/docs/drawflow-element.html b/docs/drawflow-element.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <script type="module" src="drawflow-element.js"></script>
+    <title>Drawflow Element</title>
+  </head>
+  <body>
+    <drawflow-element></drawflow-element>
+  </body>
+</html>
diff --git a/docs/drawflow-element.js b/docs/drawflow-element.js
@@ -0,0 +1,48 @@
+import { css, LitElement, html } from 'lit-element';
+import { style } from '../dist/drawflow.style';
+import '../dist/drawflow.min';
+
+class DrawflowElement extends LitElement {
+  static get styles() {
+    return [
+      style,
+      css`
+        #drawflow {
+          display: block;
+          position: relative;
+          width: 100%;
+          height: 800px;
+        }
+      `
+    ];
+  }
+
+  render() {
+    return html`
+      <div id="drawflow"></div>
+    `;
+  }
+
+  firstUpdated() {
+    const container = this.shadowRoot?.getElementById('drawflow');
+    const editor = new Drawflow(container);
+
+    editor.reroute = true;
+    editor.reroute_fix_curvature = true;
+
+    editor.start();
+
+    const data = {
+      name: ''
+    };
+
+    editor.addNode('foo', 1, 1, 100, 200, 'foo', data, 'Foo');
+    editor.addNode('bar', 1, 1, 400, 100, 'bar', data, 'Bar A');
+    editor.addNode('bar', 1, 1, 400, 300, 'bar', data, 'Bar B');
+
+    editor.addConnection(1, 2, "output_1", "input_1");
+    editor.addConnection(1, 3, "output_1", "input_1");
+  }
+}
+
+customElements.define("drawflow-element", DrawflowElement);
diff --git a/gulpfile.js b/gulpfile.js
@@ -1,30 +1,24 @@
 const gulp = require('gulp');
-const minify = require('gulp-minify');
 const concat = require('gulp-concat');
 const minifyCSS = require('gulp-minify-css');
+const replace = require('gulp-replace');
 
-
-
-/*
-gulp.task('js', done => {
-   return gulp.src('src/*.js')
-  .pipe(minify({noSource: true}))
-  .pipe(concat('drawflow.min.js'))
+gulp.task('style', () => {
+  return gulp.src('dist/drawflow.min.css')
+  .pipe(replace(/^(.*)$/, 'import {css} from "lit-element"; export const style = css`$1`;'))
+  .pipe(concat('drawflow.style.js'))
   .pipe(gulp.dest('dist/'))
-
 });
-*/
-
 
-gulp.task('css', done => {
+gulp.task('css', () => {
   return gulp.src('src/*.css')
   .pipe(minifyCSS())
   .pipe(concat('drawflow.min.css'))
   .pipe(gulp.dest('dist/'))
 });
 
-gulp.task('default', gulp.parallel(
-        /*'js',*/
-        'css'
+gulp.task('default', gulp.series(
+    'css', 
+    'style'
   )
 );
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
   <title>Drawflow</title>
 </head>
 <body>
-  <script src="drawflow.min.js"></script>
+  <script src="dist/drawflow.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
   <link rel="stylesheet" type="text/css" href="src/drawflow.css" />
   <link rel="stylesheet" type="text/css" href="docs/beautiful.css" />
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
