Migrate web2d to storybook

jsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": ".",
     "module": "ES6",
   },
   "exclude": ["node_modules"]

packages/editor/cypress/e2e/topicIcon.cy.ts

@@ -7,6 +7,9 @@ describe('Topic Icon Suite', () => {
 
   it('Open panel', () => {
     cy.onClickToolbarButton('Add Icon');
+    // Icon images must be loaded. No better solution than wait.
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(5000);
     cy.matchImageSnapshot('icons-pannel');
   });
 

packages/mindplot/package.json

@@ -26,6 +26,7 @@
         "lint": "eslint src --ext js,ts",
         "playground": "webpack serve --config webpack.playground.js",
         "cy:run": "cypress run",
+        "cy:open": "cypress open",
         "test:unit": "jest ./test/unit/export/*.ts ./test/unit/import/*.ts ./test/unit/layout/*.js --verbose --silent --detectOpenHandles",
         "test:integration": "start-server-and-test playground http-get://localhost:8083 cy:run",
         "test": "yarn test:unit && yarn test:integration"

packages/mindplot/src/components/IconGroupRemoveTip.ts

@@ -1,5 +1,5 @@
 import { $assert } from '@wisemapping/core-js';
-import { Group, Rect, Line } from '@wisemapping/web2d';
+import { Group, Rect, StraightLine } from '@wisemapping/web2d';
 import ImageIcon from './ImageIcon';
 
 class IconGroupRemoveTip {
@@ -115,12 +115,12 @@ class IconGroupRemoveTip {
     });
     result.append(innerRect);
 
-    const line = new Line({ stroke: '1 solid white' });
+    const line = new StraightLine({ stroke: '1 solid white' });
     line.setFrom(1, 1);
     line.setTo(9, 9);
     result.append(line);
 
-    const line2 = new Line({ stroke: '1 solid white' });
+    const line2 = new StraightLine({ stroke: '1 solid white' });
     line2.setFrom(1, 9);
     line2.setTo(9, 1);
     result.append(line2);

packages/mindplot/src/components/RelationshipControlPoints.ts

@@ -16,7 +16,7 @@
  *   limitations under the License.
  */
 // eslint-disable-next-line max-classes-per-file
-import { Elipse, Line } from '@wisemapping/web2d';
+import { Elipse, StraightLine } from '@wisemapping/web2d';
 import Shape from './util/Shape';
 import ActionDispatcher from './ActionDispatcher';
 import Workspace from './Workspace';
@@ -32,7 +32,7 @@ export enum PivotType {
 class ControlPivotLine {
   private _dot: Elipse;
 
-  private _line: Line;
+  private _line: StraightLine;
 
   private _pivotType: PivotType;
 
@@ -79,7 +79,7 @@ class ControlPivotLine {
     );
 
     // Build line ...
-    this._line = new Line({ strokeColor: '#6589de', strokeWidth: 1, opacity: 0.3 });
+    this._line = new StraightLine({ strokeColor: '#6589de', strokeWidth: 1, opacity: 0.3 });
 
     const mouseClick = (event: MouseEvent): boolean => {
       event.preventDefault();

packages/mindplot/src/components/widget/LineTopicShape.ts

@@ -15,11 +15,11 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import { Line } from '@wisemapping/web2d';
+import { StraightLine } from '@wisemapping/web2d';
 import SizeType from '../SizeType';
 import Topic from '../Topic';
 
-class LineTopicShape extends Line {
+class LineTopicShape extends StraightLine {
   private _size: SizeType | null;
 
   constructor(topic: Topic) {

packages/web2d/.storybook/main.js

@@ -0,0 +1,15 @@
+module.exports = {
+  "stories": [
+    "../storybook/src/**/*.stories.mdx",
+    "../storybook/src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/html",
+  "core": {
+    "builder": "@storybook/builder-webpack5"
+  }
+}

packages/web2d/.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

packages/web2d/cypress.config.js

@@ -7,8 +7,8 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      return require('./cypress/plugins/index.js')(on, config)
+      return require('./cypress/plugins/index.js')(on, config);
     },
-    baseUrl: 'http://localhost:8080',
+    baseUrl: 'http://localhost:6006',
   },
-})
+});

packages/web2d/cypress/e2e/curvedline.cy.js

@@ -0,0 +1,17 @@
+describe('CurvedLine Suite', () => {
+  // CurvedLine tests ...
+  it('CurvedLine Width', () => {
+    cy.visit('/iframe.html?args=&id=shapes-curvedline--width&viewMode=story');
+    cy.matchImageSnapshot('curvedline-width');
+  });
+
+  it('CurvedLine Stroke', () => {
+    cy.visit('/iframe.html?args=&id=shapes-curvedline--stroke&viewMode=story');
+    cy.matchImageSnapshot('curvedline-stroke');
+  });
+
+  it('CurvedLine Middle Curved', () => {
+    cy.visit('/iframe.html?args=&id=shapes-curvedline--fill&viewMode=story');
+    cy.matchImageSnapshot('curvedline-fill');
+  });
+});

packages/web2d/cypress/e2e/element.opacity.cy.js

@@ -0,0 +1,7 @@
+describe('Element Opacity Suite', () => {
+  // Rect tests ...
+  it('Element Opacity', () => {
+    cy.visit('/iframe.html?args=&id=shapes-element--opacity&viewMode=story');
+    cy.matchImageSnapshot('element-opacity');
+  });
+});

packages/web2d/cypress/e2e/ellipse.cy.js

@@ -0,0 +1,17 @@
+describe('Ellipse Suite', () => {
+  // Ellipse tests ...
+  it('Ellipse Fill', () => {
+    cy.visit('/iframe.html?args=&id=shapes-ellipse--fill&viewMode=story');
+    cy.matchImageSnapshot('ellipse-fill');
+  });
+
+  it('Ellipse Stroke', () => {
+    cy.visit('/iframe.html?args=&id=shapes-ellipse--fill&viewMode=story');
+    cy.matchImageSnapshot('ellipse-stroke');
+  });
+
+  it('Ellipse Size', () => {
+    cy.visit('/iframe.html?args=&id=shapes-ellipse--size&viewMode=story');
+    cy.matchImageSnapshot('ellipse-size');
+  });
+});

packages/web2d/cypress/e2e/group.cy.js

@@ -0,0 +1,32 @@
+describe('Group Suite', () => {
+  // Rect tests ...
+  it('Group Fill', () => {
+    cy.visit('/iframe.html?args=&id=shapes-rectangle--fill&viewMode=story');
+    cy.matchImageSnapshot('group-fill');
+  });
+
+  it('Group Container', () => {
+    cy.visit('/iframe.html?args=&id=shapes-group--container&viewMode=story');
+    cy.matchImageSnapshot('group-container');
+  });
+
+  it('Group Bubbling', () => {
+    cy.visit('/iframe.html?args=&id=shapes-group--event-bubbling&viewMode=story');
+    cy.matchImageSnapshot('group-size');
+  });
+
+  it('Group Nested', () => {
+    cy.visit('/iframe.html?args=&id=shapes-group--nested&viewMode=story');
+    cy.matchImageSnapshot('group-nested');
+  });
+
+  it('Group Coord Size', () => {
+    cy.visit('/iframe.html?args=&id=shapes-group--coord-size&viewMode=story');
+    cy.matchImageSnapshot('group-coords-size');
+  });
+
+  it('Group Coord Origin', () => {
+    cy.visit('/iframe.html?args=&id=shapes-group--coord-origin&viewMode=story');
+    cy.matchImageSnapshot('group-coords-origin');
+  });
+});

packages/web2d/cypress/e2e/playground.cy.js

@@ -1,52 +0,0 @@
-context('Playground', () => {
-  describe('snapshots', () => {
-    it('Arrow', () => {
-      cy.visit('/arrow.html');
-      cy.matchImageSnapshot('Arrow');
-    });
-    it('Curved Line', () => {
-      cy.visit('/curvedLine.html');
-      cy.matchImageSnapshot('Curved Line');
-    });
-    it('Events', () => {
-      cy.visit('/events.html');
-      cy.matchImageSnapshot('Events');
-    });
-    it('Font', () => {
-      cy.visit('/font.html');
-      cy.matchImageSnapshot('Font');
-    });
-    it('Group', () => {
-      cy.visit('/group.html');
-      cy.matchImageSnapshot('Group');
-    });
-    it('Line', () => {
-      cy.visit('/line.html');
-      cy.matchImageSnapshot('Line');
-    });
-    it('Poly Line', () => {
-      cy.visit('/polyLine.html');
-      cy.matchImageSnapshot('Poly Line');
-    });
-    it('Prototype', () => {
-      cy.visit('/prototype.html');
-      cy.matchImageSnapshot('Prototype');
-    });
-    it('Rect', () => {
-      cy.visit('/rect.html');
-      cy.matchImageSnapshot('Rect');
-    });
-    it('Shapes', () => {
-      cy.visit('/shapes.html');
-      cy.matchImageSnapshot('Shapes');
-    });
-    it('Text', () => {
-      cy.visit('/text.html');
-      cy.matchImageSnapshot('Text');
-    });
-    it('Workspace', () => {
-      cy.visit('/workspace.html');
-      cy.matchImageSnapshot('Workspace');
-    });
-  });
-});

packages/web2d/cypress/e2e/polyline.cy.js

@@ -0,0 +1,27 @@
+describe('Polyline Suite', () => {
+  // Polyline tests ...
+  it('Polyline Stroke', () => {
+    cy.visit('/iframe.html?args=&id=shapes-polyline--stroke&viewMode=story');
+    cy.matchImageSnapshot('polyline-stroke');
+  });
+
+  it('Polyline Straight', () => {
+    cy.visit('/iframe.html?args=&id=shapes-polyline--straight&viewMode=story');
+    cy.matchImageSnapshot('polyline-straight');
+  });
+
+  it('Polyline Middle Straight', () => {
+    cy.visit('/iframe.html?args=&id=shapes-polyline--middle-straight&viewMode=story');
+    cy.matchImageSnapshot('polyline-middle-straight');
+  });
+
+  it('Polyline Curved', () => {
+    cy.visit('/iframe.html?args=&id=shapes-polyline--curved&viewMode=story');
+    cy.matchImageSnapshot('polyline-curved');
+  });
+
+  it('Polyline Middle Curved', () => {
+    cy.visit('/iframe.html?args=&id=shapes-polyline--middle-curved&viewMode=story');
+    cy.matchImageSnapshot('polyline-middle-curved');
+  });
+});

packages/web2d/cypress/e2e/rect.cy.js

@@ -0,0 +1,22 @@
+describe('Rect Suite', () => {
+  // Rect tests ...
+  it('Reactangle Fill', () => {
+    cy.visit('/iframe.html?args=&id=shapes-rectangle--fill&viewMode=story');
+    cy.matchImageSnapshot('rectangle-fill');
+  });
+
+  it('Reactangle Stroke', () => {
+    cy.visit('/iframe.html?args=&id=shapes-rectangle--stroke&viewMode=story');
+    cy.matchImageSnapshot('rectangle-stroke');
+  });
+
+  it('Reactangle Size', () => {
+    cy.visit('/iframe.html?args=&id=shapes-rectangle--size&viewMode=story');
+    cy.matchImageSnapshot('rectangle-size');
+  });
+
+  it('Reactangle Arc', () => {
+    cy.visit('/iframe.html?args=&id=shapes-rectangle--arc&viewMode=story');
+    cy.matchImageSnapshot('rectangle-arc');
+  });
+});

packages/web2d/cypress/e2e/straightLine.cy.js

@@ -0,0 +1,12 @@
+describe('StraightLine Suite', () => {
+  // StraightLine tests ...
+  it('StraightLine Stroke Width', () => {
+    cy.visit('/iframe.html?args=&id=shapes-straightline--stroke-width&viewMode=story');
+    cy.matchImageSnapshot('straightline-stroke-width');
+  });
+
+  it('StraightLine Stroke Color', () => {
+    cy.visit('/iframe.html?args=&id=shapes-straightline--stroke-color&viewMode=story');
+    cy.matchImageSnapshot('straightline-stroke-color');
+  });
+});

packages/web2d/cypress/e2e/text.cy.js

@@ -0,0 +1,7 @@
+describe('Text Suite', () => {
+  // Rect tests ...
+  it('Text Multiline', () => {
+    cy.visit('/iframe.html?args=&id=shapes-text--multiline&viewMode=story');
+    cy.matchImageSnapshot('text-multiline');
+  });
+});

packages/web2d/cypress/e2e/workspace.cy.js

@@ -0,0 +1,21 @@
+describe('Workspace Suite', () => {
+  it('Workspace Visibility', () => {
+    cy.visit('/iframe.html?args=&id=shapes-workspace--visibility&viewMode=story');
+    cy.matchImageSnapshot('workspace-visibility');
+  });
+
+  it('Workspace Position', () => {
+    cy.visit('/iframe.html?args=&id=shapes-workspace--position&viewMode=story');
+    cy.matchImageSnapshot('workspace-position');
+  });
+
+  it('Workspace Coords Size', () => {
+    cy.visit('/iframe.html?args=&id=shapes-workspace--coords-size&viewMode=story');
+    cy.matchImageSnapshot('workspace-coord-size');
+  });
+
+  it('Workspace Coords Origin', () => {
+    cy.visit('/iframe.html?args=&id=shapes-workspace--coords-origin&viewMode=story');
+    cy.matchImageSnapshot('workspace-coord-origin');
+  });
+});

packages/web2d/cypress/support/e2e.js

@@ -16,5 +16,14 @@
 // Import commands.js using ES2015 syntax:
 import './commands';
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+Cypress.on('window:before:load', (win) => {
+    cy.spy(win.console, 'error');
+    cy.spy(win.console, 'warn');
+  });
+
+  afterEach(() => {
+    cy.window().then((win) => {
+      expect(win.console.error).to.have.callCount(0);
+      expect(win.console.warn).to.have.callCount(0);
+    });
+  });

packages/web2d/package.json

@@ -1,40 +1,54 @@
 {
-    "name": "@wisemapping/web2d",
-    "version": "0.4.6",
-    "description": "WiseMapping - Web2D Render Library",
-    "homepage": "http://www.wisemapping.org/",
-    "license": "MIT",
-    "main": "dist/web2d.js",
-    "files": [
-        "src",
-        "dist"
-    ],
-    "publishConfig": {
-        "registry": "https://registry.yarnpkg.com"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git@bitbucket.org:wisemapping/wisemapping-frontend.git"
-    },
-    "scripts": {
-        "dev": "webpack --config webpack.dev.js",
-        "build": "webpack --config webpack.prod.js",
-        "lint": "eslint src",
-        "playground": "webpack serve --config webpack.playground.js",
-        "cy:run": "cypress run",
-        "test:integration": "start-server-and-test playground http-get://localhost:8080 cy:run",
-        "test": "yarn test:integration"
-    },
-    "devDependencies": {
-        "cypress": "12.3.0",
-        "cypress-image-snapshot": "^4.0.1"
-    },
-    "dependencies": {
-        "@wisemapping/core-js": "^0.4.0",
-        "jquery": "^3.6.0"
-    },
-    "peerDependencies": {
-        "@wisemapping/core-js": "^0.4.0",
-        "jquery": "^3.6.0"
-    }
+  "name": "@wisemapping/web2d",
+  "version": "0.4.6",
+  "description": "WiseMapping - Web2D Render Library",
+  "homepage": "http://www.wisemapping.org/",
+  "license": "MIT",
+  "main": "dist/web2d.js",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.yarnpkg.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@bitbucket.org:wisemapping/wisemapping-frontend.git"
+  },
+  "scripts": {
+    "dev": "webpack --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js",
+    "lint": "eslint src",
+    "playground": "webpack serve --config webpack.playground.js",
+    "cy:run": "cypress run",
+    "cy:open": "cypress open",
+    "test:integration": "start-server-and-test storybook http-get://localhost:6006 cy:run",
+    "test": "yarn test:integration",
+    "storybook": "start-storybook -p 6006 --no-open",
+    "build-storybook": "build-storybook"
+  },
+  "devDependencies": {
+    "@mdx-js/react": "^1.6.22",
+    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-docs": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-interactions": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/builder-webpack5": "^6.5.15",
+    "@storybook/html": "^6.5.15",
+    "@storybook/manager-webpack5": "^6.5.15",
+    "@storybook/testing-library": "^0.0.13",
+    "cypress": "12.3.0",
+    "cypress-image-snapshot": "^4.0.1",
+    "start-server-and-test": "^1.15.2"
+  },
+  "dependencies": {
+    "@wisemapping/core-js": "^0.4.0",
+    "jquery": "^3.6.0"
+  },
+  "peerDependencies": {
+    "@wisemapping/core-js": "^0.4.0",
+    "jquery": "^3.6.0"
+  }
 }

packages/web2d/src/components/StraightLine.js

@@ -20,9 +20,9 @@
 import ElementClass from './ElementClass';
 import Toolkit from './Toolkit';
 
-class Line extends ElementClass {
+class StraightLine extends ElementClass {
   constructor(attributes) {
-    const peer = Toolkit.createLine();
+    const peer = Toolkit.createStraightLine();
     const defaultAttributes = { strokeColor: '#495879', strokeWidth: 1, strokeOpacity: 1 };
     for (const key in attributes) {
       if (Object.prototype.hasOwnProperty.call(attributes, key)) {
@@ -52,14 +52,6 @@ class Line extends ElementClass {
     return this.peer.getTo();
   }
 
-  /**
-   * Defines the start and the end line arrow style.
-   * Can have values "none | block | classic | diamond | oval | open | chevron | doublechevron"
-   * */
-  setArrowStyle(startStyle, endStyle) {
-    this.peer.setArrowStyle(startStyle, endStyle);
-  }
-
   setPosition() {
     throw new Error('Unsupported operation');
   }
@@ -73,4 +65,4 @@ class Line extends ElementClass {
   }
 }
 
-export default Line;
+export default StraightLine;

packages/web2d/src/components/Toolkit.js

@@ -19,7 +19,7 @@ import FontPeer from './peer/svg/FontPeer';
 import WorkspacePeer from './peer/svg/WorkspacePeer';
 import GroupPeer from './peer/svg/GroupPeer';
 import ElipsePeer from './peer/svg/ElipsePeer';
-import LinePeer from './peer/svg/LinePeer';
+import StraightLinePeer from './peer/svg/StraightPeer';
 import PolyLinePeer from './peer/svg/PolyLinePeer';
 import CurvedLinePeer from './peer/svg/CurvedLinePeer';
 import ArrowPeer from './peer/svg/ArrowPeer';
@@ -40,8 +40,8 @@ class Toolkit {
     return new ElipsePeer();
   }
 
-  static createLine() {
-    return new LinePeer();
+  static createStraightLine() {
+    return new StraightLinePeer();
   }
 
   static createPolyLine() {

packages/web2d/src/components/peer/svg/ElementPeer.js

@@ -149,11 +149,11 @@ class ElementPeer {
   }
 
   getStroke() {
-    const vmlStroke = this._native;
-    const color = vmlStroke.getAttribute('stroke');
+    const stoke = this._native;
+    const color = stoke.getAttribute('stroke');
     const dashstyle = this._stokeStyle;
-    const opacity = vmlStroke.getAttribute('stroke-opacity');
-    const width = vmlStroke.getAttribute('stroke-width');
+    const opacity = stoke.getAttribute('stroke-opacity');
+    const width = stoke.getAttribute('stroke-width');
     return {
       color,
       style: dashstyle,
@@ -171,6 +171,28 @@ class ElementPeer {
     }
     if ($defined(style)) {
       this._stokeStyle = style;
+
+      switch (style) {
+        case 'dash':
+          this._native.setAttribute('stroke-dasharray', '5 5');
+          this._native.setAttribute('stroke-linecap', null);
+          break;
+        case 'dot':
+          this._native.setAttribute('stroke-dasharray', '1 8');
+          this._native.setAttribute('stroke-linecap', 'round');
+          break;
+        case 'dashdot':
+        case 'longdash':
+          this._native.setAttribute('stroke-dasharray', '10 5 2');
+          this._native.setAttribute('stroke-linecap', 'round');
+          break;
+        case 'solid':
+          this._native.setAttribute('stroke-dasharray', null);
+          this._native.setAttribute('stroke-linecap', null);
+          break;
+        default:
+          throw new Error(`Unsupported style: ${style}`);
+      }
     }
 
     if ($defined(opacity)) {

packages/web2d/src/components/peer/svg/StraightPeer.js

@@ -15,11 +15,10 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import { $defined } from '@wisemapping/core-js';
 import ElementPeer from './ElementPeer';
 import Point from '../../Point';
 
-class LinePeer extends ElementPeer {
+class StraightLinePeer extends ElementPeer {
   constructor() {
     const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'line');
     super(svgElement);
@@ -47,20 +46,6 @@ class LinePeer extends ElementPeer {
   getTo() {
     return new Point(this._x2, this._y2);
   }
-
-  /*
-   * http://www.zvon.org/HowTo/Output/howto_jj_svg_27.html?at=marker-end
-   */
-  // eslint-disable-next-line class-methods-use-this
-  setArrowStyle(startStyle, endStyle) {
-    if ($defined(startStyle)) {
-      // Todo: This must be implemented ...
-    }
-
-    if ($defined(endStyle)) {
-      // Todo: This must be implemented ...
-    }
-  }
 }
 
-export default LinePeer;
+export default StraightLinePeer;

packages/web2d/src/index.js

@@ -18,7 +18,7 @@
 
 import Workspace from './components/Workspace';
 import Elipse from './components/Elipse';
-import Line from './components/Line';
+import StraightLine from './components/StraightLine';
 import PolyLine from './components/PolyLine';
 import CurvedLine from './components/CurvedLine';
 import Arrow from './components/Arrow';
@@ -28,4 +28,4 @@ import Text from './components/Text';
 import Point from './components/Point';
 import Image from './components/Image';
 
-export { Arrow, CurvedLine, Elipse, Group, Image, Line, Point, PolyLine, Rect, Text, Workspace };
+export { Arrow, CurvedLine, Elipse, Group, Image, StraightLine, Point, PolyLine, Rect, Text, Workspace };

packages/web2d/storybook/src/stories/CurvedLine.js

@@ -0,0 +1,93 @@
+/* eslint-disable import/prefer-default-export */
+// eslint-disable-next-line import/prefer-default-export
+import CurvedLine from '../../../src/components/CurvedLine';
+import Elipse from '../../../src/components/Elipse';
+import Workspace from '../../../src/components/Workspace';
+import Point from '../../../src/components/Point';
+
+export const createCurvedLine = ({
+  fillColor,
+  strokeColor,
+  strokeWidth,
+  strokeStyle,
+  width,
+}) => {
+  const divElem = document.createElement('div');
+
+  const workspace = new Workspace();
+  workspace.setSize('400px', '400px');
+  workspace.setCoordSize(400, 400);
+  workspace.setCoordOrigin(-200, -200);
+
+  // Line 1 ...
+  const line1 = new CurvedLine();
+  line1.setFrom(0, 0);
+  line1.setTo(100, 100);
+  line1.setSrcControlPoint(new Point(100 / 2, 0));
+  line1.setDestControlPoint(new Point(-100 / 2, 0));
+  line1.setStroke(strokeWidth, strokeStyle, strokeColor, 1);
+  line1.setFill(fillColor, 1);
+  line1.setWidth(width);
+  workspace.append(line1);
+
+  const line2 = new CurvedLine();
+  line2.setFrom(0, 0);
+  line2.setTo(-100, -100);
+  line2.setSrcControlPoint(new Point(-100 / 2, 0));
+  line2.setDestControlPoint(new Point(100 / 2, 0));
+  line2.setStroke(strokeWidth, strokeStyle, strokeColor, 1);
+  line2.setFill(fillColor, 1);
+  line2.setWidth(width);
+  workspace.append(line2);
+
+  const line3 = new CurvedLine();
+  line3.setFrom(0, 0);
+  line3.setTo(100, -100);
+  line3.setSrcControlPoint(new Point(100 / 2, 0));
+  line3.setDestControlPoint(new Point(-100 / 2, 0));
+  line3.setStroke(strokeWidth, strokeStyle, strokeColor, 1);
+  line3.setFill(fillColor, 1);
+  line3.setWidth(width);
+  workspace.append(line3);
+
+  const line4 = new CurvedLine();
+  line4.setFrom(0, 0);
+  line4.setTo(-100, 100);
+  line4.setSrcControlPoint(new Point(-100 / 2, 0));
+  line4.setDestControlPoint(new Point(100 / 2, 0));
+  line4.setStroke(strokeWidth, strokeStyle, strokeColor, 1);
+  line4.setFill(fillColor, 1);
+  line4.setWidth(width);
+  workspace.append(line4);
+
+  // Add referene point ...
+  const e1 = new Elipse();
+  e1.setSize(5, 5);
+  e1.setPosition(0, 0);
+  e1.setFill('red');
+  workspace.append(e1);
+
+  const e2 = new Elipse();
+  e2.setPosition(-100, -100);
+  e2.setSize(10, 10);
+  workspace.append(e2);
+
+  const e3 = new Elipse();
+  e3.setPosition(100, 100);
+  e3.setSize(10, 10);
+  workspace.append(e3);
+
+  const e4 = new Elipse();
+  e4.setPosition(-100, 100);
+  e4.setSize(10, 10);
+  workspace.append(e4);
+
+  const e5 = new Elipse();
+  e5.setPosition(100, -100);
+  e5.setSize(10, 10);
+  workspace.append(e5);
+
+  workspace.addItAsChildTo(divElem);
+
+  return divElem;
+};

packages/web2d/storybook/src/stories/CurvedLine.stories.js

@@ -0,0 +1,45 @@
+import { createCurvedLine } from './CurvedLine';
+
+// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+export default {
+  title: 'Shapes/CurvedLine',
+  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
+  argTypes: {
+    fillColor: { control: 'color' },
+    width: { control: { type: 'number', min: 0, max: 100, step: 5 } },
+    strokeColor: { control: 'color' },
+    strokeStyle: {
+      control: { type: 'select' },
+      options: ['dash', 'dot', 'solid', 'longdash', 'dashdot'],
+    },
+    strokeWidth: { control: { type: 'number', min: 0, max: 30, step: 1 } },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
+const Template = ({ label, ...args }) => createCurvedLine({ label, ...args });
+
+export const Width = Template.bind({});
+Width.args = {
+  width: 10,
+  strokeWidth: 1,
+  strokeStyle: 'solid',
+  strokeColor: 'blue',
+  fillColor: 'red',
+};
+
+export const Stroke = Template.bind({});
+Stroke.args = {
+  width: 10,
+  strokeWidth: 1,
+  strokeStyle: 'longdash',
+  strokeColor: 'red',
+  fillColor: '#1212eb',
+};
+
+export const Fill = Template.bind({});
+Fill.args = {
+  width: 10,
+  strokeWidth: 0,
+  fillColor: 'red',
+};

packages/web2d/storybook/src/stories/Element.Events.stories.js

@@ -0,0 +1,20 @@
+import { createElement } from './Element';
+
+// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+export default {
+  title: 'Shapes/Element',
+  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
+  argTypes: {
+    onClick: { action: 'onClick' },
+    onMouseOver: { action: 'onMouseOver' },
+    onMouseMove: { action: 'onMouseMove' },
+    onMouseOut: { action: 'onMouseOut' },
+    onDblClick: { action: 'onDblClick' },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
+export const Events = (({ label, ...args }) => createElement({ label, ...args })).bind({});
+Events.args = {
+};
+

packages/web2d/storybook/src/stories/Element.EventsRegistration.stories.js

@@ -0,0 +1,25 @@
+import { createEventRegistration } from './Element';
+
+// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+export default {
+  title: 'Shapes/Element',
+  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
+  argTypes: {
+    enableForWorkspace: { control: 'boolean' },
+    enableForInnerCircle: { control: 'boolean' },
+    enableForOuterCircle: { control: 'boolean' },
+    stopEventPropagation: { control: 'boolean' },
+    onClick: { action: 'onClick' },
+    onMouseOver: { action: 'onMouseOver' },
+    onMouseOut: { action: 'onMouseOut' },
+    onDblClick: { action: 'onDblClick' },
+  },
+};
+
+export const EventsRegistration = (({ label, ...args }) => createEventRegistration({ label, ...args })).bind({});
+EventsRegistration.args = {
+  enableForWorkspace: false,
+  enableForInnerCircle: false,
+  enableForOuterCircle: false,
+  stopEventPropagation: true,
+};

packages/web2d/storybook/src/stories/Element.Opacity.stories.js

@@ -0,0 +1,21 @@
+import { createElement } from './Element';
+
+// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+export default {
+  title: 'Shapes/Element',
+  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
+  argTypes: {
+    fillOpacity: { control: { type: 'number', min: 0, max: 1, step: 0.1 } },
+    strokeOpacity: { control: { type: 'number', min: 0, max: 1, step: 0.1 } },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
+const Template = ({ label, ...args }) => createElement({ label, ...args });
+
+export const Opacity = Template.bind({});
+Opacity.args = {
+  fillOpacity: 0.5,
+  strokeOpacity: 0.5,
+  opacity: 1,
+};

packages/web2d/storybook/src/stories/Element.Visibility.stories.js

@@ -0,0 +1,20 @@
+import { createElement } from './Element';
+
+// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+export default {
+  title: 'Shapes/Element',
+  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
+  argTypes: {
+    visibility: { control: 'boolean' },
+    visibilityDelay: { control: { type: 'number', min: 1, max: 1000, step: 100 } },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
+const Template = ({ label, ...args }) => createElement({ label, ...args });
+
+export const Visibility = Template.bind({});
+Visibility.args = {
+  visibility: true,
+  visibilityDelay: 5000,
+};

packages/web2d/storybook/src/stories/Element.js

@@ -0,0 +1,116 @@
+/* eslint-disable import/prefer-default-export */
+// eslint-disable-next-line import/prefer-default-export
+import Rect from '../../../src/components/Rect';
+import Elipse from '../../../src/components/Elipse';
+import Workspace from '../../../src/components/Workspace';
+
+export const createElement = ({
+  visibility = true,
+  visibilityDelay = 0,
+  fillOpacity = 1,
+  strokeOpacity = 1,
+  onClick,
+  onMouseOver,
+  onMouseOut,
+  onDblClick,
+}) => {
+  const divElem = document.createElement('div');
+
+  const workspace = new Workspace();
+  workspace.setSize('400px', '400px');
+  workspace.setCoordSize(300, 300);
+  workspace.setCoordOrigin(-150, -150);
+
+  const rect = new Rect();
+  rect.setSize(100, 100);
+  rect.setPosition(-50, -50);
+  rect.setVisibility(visibility, visibilityDelay);
+  rect.setStroke(2, 'solid', 'red', strokeOpacity);
+  rect.setFill('gray', fillOpacity);
+
+  rect.addEvent('click', onClick);
+  rect.addEvent('mouseover', onMouseOver);
+  rect.addEvent('mouseout', onMouseOut);
+  rect.addEvent('dblclick', onDblClick);
+
+  // Add referene point ...
+  const e1 = new Elipse();
+  e1.setSize(70, 70);
+  e1.setPosition(0, 0);
+  e1.setFill('red', fillOpacity);
+  e1.setStroke(2, 'solid', 'blue', strokeOpacity);
+  e1.setVisibility(visibility, visibilityDelay);
+
+  e1.addEvent('click', onClick);
+  e1.addEvent('mouseover', onMouseOver);
+  e1.addEvent('mouseout', onMouseOut);
+  e1.addEvent('dblclick', onDblClick);
+
+  workspace.append(rect);
+  workspace.append(e1);
+  workspace.addItAsChildTo(divElem);
+
+  return divElem;
+};
+
+export const createEventRegistration = ({
+  enableForWorkspace,
+  enableForInnerCircle,
+  enableForOuterCircle,
+  stopEventPropagation,
+  onClick,
+  onMouseOver,
+  onMouseOut,
+  onDblClick,
+}) => {
+  const registerEvent = (type, elem, action) => {
+    elem.addEvent(type, (event) => {
+      action(event);
+      if (stopEventPropagation) {
+        event.stopPropagation();
+      }
+    });
+  };
+
+  const divElem = document.createElement('div');
+
+  // Workspace with CoordOrigin(100,100);
+  const workspace = new Workspace();
+  workspace.setSize('150px', '150px');
+  workspace.setCoordSize(150, 150);
+
+  const bigElipse = new Elipse();
+  bigElipse.setSize(100, 100);
+  bigElipse.setPosition(75, 75);
+  workspace.append(bigElipse);
+
+  const smallElipse = new Elipse();
+  smallElipse.setSize(50, 50);
+  smallElipse.setPosition(75, 75);
+  smallElipse.setFill('red');
+  workspace.append(smallElipse);
+
+  if (enableForWorkspace) {
+    registerEvent('click', workspace, onClick);
+    registerEvent('mouseover', workspace, onMouseOver);
+    registerEvent('mouseout', workspace, onMouseOut);
+    registerEvent('dblclick', workspace, onDblClick);
+  }
+
+  if (enableForInnerCircle) {
+    registerEvent('click', smallElipse, onClick);
+    registerEvent('mouseover', smallElipse, onMouseOver);
+    registerEvent('mouseout', smallElipse, onMouseOut);
+    registerEvent('dblclick', smallElipse, onDblClick);
+  }
+
+  if (enableForOuterCircle) {
+    registerEvent('click', bigElipse, onClick);
+    registerEvent('mouseover', bigElipse, onMouseOver);
+    registerEvent('mouseout', bigElipse, onMouseOut);
+    registerEvent('dblclick', bigElipse, onDblClick);
+  }
+
+  workspace.addItAsChildTo(divElem);
+  return divElem;
+};

packages/web2d/storybook/src/stories/Ellipse.js

@@ -0,0 +1,45 @@
+/* eslint-disable import/prefer-default-export */
+// eslint-disable-next-line import/prefer-default-export
+import Elipse from '../../../src/components/Elipse';
+import Workspace from '../../../src/components/Workspace';
+
+export const createEllipse = ({
+  backgroundColor,
+  strokeColor,
+  strokeWidth,
+  onClick,
+  strokeStyle,
+  size,
+  arc,
+}) => {
+  const divElem = document.createElement('div');
+
+  const workspace = new Workspace();
+  workspace.setSize('400px', '400px');
+  workspace.setCoordSize(300, 300);
+  workspace.setCoordOrigin(-150, -150);
+
+  const rect = new Elipse(arc);
+  rect.setFill(backgroundColor);
+
+  const parsedSize = JSON.parse(size);
+  rect.setSize(parsedSize.width, parsedSize.height);
+
+  rect.setPosition(0, 0);
+
+  rect.setStroke(strokeWidth, strokeStyle, strokeColor, 1);
+
+  rect.addEvent('click', onClick);
+
+  // Add referene point ...
+  const e1 = new Elipse();
+  e1.setSize(5, 5);
+  e1.setPosition(0, 0);
+  e1.setFill('red');
+
+  workspace.append(rect);
+  workspace.append(e1);
+  workspace.addItAsChildTo(divElem);
+
+  return divElem;
+};

packages/web2d/storybook/src/stories/Ellipse.stories.js

@@ -0,0 +1,58 @@
+import { createEllipse } from './Ellipse';
+
+// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+export default {
+  title: 'Shapes/Ellipse',
+  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    strokeColor: { control: 'color' },
+    strokeStyle: {
+      control: { type: 'select' },
+      options: ['dash', 'dot', 'solid', 'longdash', 'dashdot'],
+    },
+    strokeWidth: {
+      control: { type: 'select' },
+      options: [0, 1, 2, 4, 5],
+    },
+    arc: {
+      control: { type: 'select' },
+      options: [0, 0.2, 0.5, 0.8, 1],
+    },
+    onClick: { action: 'onClick' },
+    size: {
+      control: { type: 'select' },
+      options: ['{ "width": 50, "height": 50 }', '{ "width": 100, "height": 100 }', '{ "width": 50, "height": 100 }', '{ "width": 100, "height": 50 }'],
+    },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
+const Template = ({ label, ...args }) => createEllipse({ label, ...args });
+
+export const Fill = Template.bind({});
+Fill.args = {
+  backgroundColor: 'yellow',
+  size: '{ "width": 100, "height": 100 }',
+  strokeWidth: 1,
+  strokeStyle: 'solid',
+  strokeColor: 'blue',
+};
+
+export const Stroke = Template.bind({});
+Stroke.args = {
+  backgroundColor: 'blue',
+  size: '{ "width": 100, "height": 100 }',
+  strokeWidth: 5,
+  strokeStyle: 'dash',
+  strokeColor: 'red',
+};
+
+export const Size = Template.bind({});
+Size.args = {
+  backgroundColor: 'red',
+  size: '{ "width": 150, "height": 50 }',
+  strokeWidth: 5,
+  strokeStyle: 'solid',
+  strokeColor: 'blue',
+};

packages/web2d/storybook/src/stories/Group.stories.js

@@ -0,0 +1,296 @@
+import Group from '../../../src/components/Group';
+import Workspace from '../../../src/components/Workspace';
+import Elipse from '../../../src/components/Elipse';
+import StraightLine from '../../../src/components/StraightLine';
+
+// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+export default {
+  title: 'Shapes/Group',
+  argTypes: {
+    onClick: { action: 'onClick' },
+  },
+};
+
+export const Container = () => {
+  const container = document.createElement('div');
+
+  const div = document.createElement('div');
+  container.append(div);
+
+  const workspace = new Workspace();
+  workspace.setSize('400px', '400px');
+  workspace.setCoordSize(400, 400);
+  workspace.setCoordOrigin(-200, -200);
+
+  const group = new Group();
+  group.setSize(200, 200);
+  group.setPosition(-100, -100);
+  group.setCoordSize(200, 200);
+  group.setCoordOrigin(0, 0);
+  workspace.append(group);
+
+  const elipse = new Elipse();
+  elipse.setSize(200, 200);
+  elipse.setPosition(100, 100);
+  group.append(elipse);
+
+  let line = new StraightLine();
+  line.setFrom(0, 0);
+  line.setTo(200, 200);
+  line.setStroke('blue');
+  group.append(line);
+
+  line = new StraightLine();
+  line.setFrom(200, 0);
+  line.setTo(0, 200);
+  line.setStroke('blue');
+  group.append(line);
+
+  workspace.addItAsChildTo(div);
+
+  // @todo: Move this to storybook doc ...
+  const span = document.createElement('span');
+  span.innerHTML = 'A group object can be used to collect shapes. In this example, There is a group that contains an elipse and two lines as children. Changing the group position also change the position of all contained elements.';
+  container.append(span);
+
+  return container;
+};
+
+export const EventBubbling = (args) => {
+  const { onClick } = args;
+  const container = document.createElement('div');
+
+  const div = document.createElement('div');
+  container.append(div);
+
+  const workspace = new Workspace();
+  workspace.setSize('400px', '400px');
+  workspace.setCoordSize(100, 100);
+
+  const groupAttributes = {
+    width: 50,
+    height: 50,
+    x: 25,
+    y: 50,
+    coordSize: '200 200',
+    coordOrigin: '0 0',
+  };
+  const group = new Group(groupAttributes);
+  workspace.append(group);
+
+  const elipseLeft = new Elipse();
+  elipseLeft.setSize(200, 200);
+  elipseLeft.setPosition(200, 0);
+  group.append(elipseLeft);
+
+  const elipseRight = new Elipse();
+  elipseRight.setSize(200, 200);
+  elipseRight.setPosition(0, 0);
+  group.append(elipseRight);
+
+  group.addEvent('click', onClick);
+  elipseLeft.addEvent('click', onClick);
+  elipseRight.addEvent('click', onClick);
+  workspace.addItAsChildTo(div);
+
+  // @todo: Move this to storybook doc ...
+  const span = document.createElement('span');
+  span.innerHTML = 'Following the bubbling event pattern, all the events over a shape are propageted to its parent. In this example, both elipse objects are child of a group element and click event listeners have been added to the elipse and the group.';
+  container.append(span);
+
+  return container;
+};
+
+export const Nested = () => {
+  const container = document.createElement('div');
+  const div = document.createElement('div');
+  container.append(div);
+
+  const workspace = new Workspace();
+  workspace.setSize('400px', '400px');
+  workspace.setCoordSize(400, 400);
+  workspace.setCoordOrigin(-100, -100);
+
+  const groupOuter = new Group();
+  groupOuter.setSize(50, 50);
+  groupOuter.setPosition(25, 25);
+  groupOuter.setCoordSize(100, 100);
+  groupOuter.setCoordOrigin(0, 0);
+  workspace.append(groupOuter);
+
+  const elipseOuter = new Elipse();
+  elipseOuter.setSize(200, 200);
+  elipseOuter.setPosition(100, 100);
+  elipseOuter.setFill('red');
+  groupOuter.append(elipseOuter);
+
+  let line = new StraightLine();
+  line.setFrom(0, 0);
+  line.setTo(200, 200);
+  line.setStroke('red');
+  groupOuter.append(line);
+
+  line = new StraightLine();
+  line.setFrom(200, 0);
+  line.setTo(0, 200);
+  line.setStroke('red');
+  groupOuter.append(line);
+
+  const groupInner = new Group();
+  groupInner.setSize(50, 50);
+  groupInner.setPosition(25, 25);
+  groupInner.setCoordSize(100, 100);
+  groupInner.setCoordOrigin(0, 0);
+  groupOuter.append(groupInner);
+
+  const elipse = new Elipse();
+  elipse.setSize(200, 200);
+  elipse.setPosition(100, 100);
+  groupInner.append(elipse);
+
+  line = new StraightLine();
+  line.setFrom(0, 0);
+  line.setTo(200, 200);
+  line.setStroke('blue');
+  groupInner.append(line);
+
+  line = new StraightLine();
+  line.setFrom(200, 0);
+  line.setTo(0, 200);
+  line.setStroke('blue');
+  groupInner.append(line);
+  workspace.addItAsChildTo(container);
+
+  // @todo: Move this to storybook doc ...
+  const span = document.createElement('span');
+  span.innerHTML = `Groups can be nested as a regular shape. An important property of the groups is the ability to define their own coordSize, coorOrigin and size. 
+  In this example, both shapes have been created with the same properties. The red one has been added as a child element of a group with the following properties:
+
+    Size(50,50);
+    Position(25,25);
+    CoordSize(100,100);
+    CoordOrigin(0,0)
+    The blue one has been added as a child of another group with the following properties::
+    
+    Size(50,50);
+    Position(25,25);
+    CoordSize(100,100);
+    CoordOrigin(0,0);
+    
+    Finally, the second group has been added as a child of the first declared group.`;
+  container.append(span);
+
+  return container;
+};
+
+export const CoordSize = () => {
+  const groupSampleBuilder = (width, height) => {
+    // Group with CoordSize(50,50);
+    const workspace = new Workspace();
+    workspace.setSize('150px', '150px');
+    workspace.setCoordSize(150, 150);
+    workspace.setCoordOrigin(-20, -20);
+
+    const elipseOuter = new Elipse();
+    elipseOuter.setPosition(50, 50);
+    elipseOuter.setSize(100, 100);
+    workspace.append(elipseOuter);
+
+    const group = new Group();
+    group.setSize(100, 100);
+    group.setCoordSize(width, height);
+    group.setPosition(25, 25);
+    workspace.append(group);
+
+    const elipseInner = new Elipse();
+    elipseInner.setPosition(50, 50);
+    elipseInner.setSize(100, 100);
+    elipseInner.setFill('red');
+    group.append(elipseInner);
+
+    return workspace;
+  };
+
+  const container = document.createElement('div');
+  const div = document.createElement('div');
+  container.append(div);
+
+  const sample100x100 = groupSampleBuilder(100, 100);
+  sample100x100.addItAsChildTo(div);
+
+  const sample100x200 = groupSampleBuilder(100, 200);
+  sample100x200.addItAsChildTo(div);
+
+  const sample200x100 = groupSampleBuilder(200, 100);
+  sample200x100.addItAsChildTo(div);
+
+  // @todo: Move this to storybook doc ...
+  const span = document.createElement('span');
+  span.innerHTML = `Group coordsize defines how many units there are along the width of the containing block.
+  In all the examples, the coordsize of the workspaces have been set to (100,100) and the circles have
+  been
+  positioned
+  at (0,0),(0,100),(100,0),(100,100)(50,50).
+  1) Group with CoordSize(100,100)
+  2) Group with CoordSize(100,200)
+  3) Group with CoordSize(200,100)`;
+  container.append(span);
+
+  return container;
+};
+
+export const CoordOrigin = () => {
+  const groupSampleBuilder = (x, y) => {
+    const workspace = new Workspace();
+    workspace.setSize('200px', '200px');
+    workspace.setCoordSize(200, 200);
+    workspace.setCoordOrigin(-30, -30);
+
+    const elipseOuter = new Elipse();
+    elipseOuter.setPosition(50, 50);
+    elipseOuter.setSize(100, 100);
+    workspace.append(elipseOuter);
+
+    const group = new Group();
+    group.setSize(100, 100);
+    group.setCoordSize(100, 100);
+    group.setCoordOrigin(x, y);
+    group.setPosition(25, 25);
+    workspace.append(group);
+
+    const elipseInner = new Elipse();
+    elipseInner.setPosition(50, 50);
+    elipseInner.setSize(50, 50);
+    elipseInner.setFill('red');
+    group.append(elipseInner);
+
+    return workspace;
+  };
+
+  const container = document.createElement('div');
+  const div = document.createElement('div');
+  container.append(div);
+
+  const sample0x0 = groupSampleBuilder(0, 0);
+  sample0x0.addItAsChildTo(div);
+
+  const sample100x200 = groupSampleBuilder(0, 50);
+  sample100x200.addItAsChildTo(div);
+
+  const sample200x100 = groupSampleBuilder(50, 0);
+  sample200x100.addItAsChildTo(div);
+
+  // @todo: Move this to storybook doc ...
+  const span = document.createElement('span');
+  span.innerHTML = `Group coordorigin defines the coordinate at the top left corner of the containing block.
+  In all the examples,the coordsize of the groups have been set to (100,100) and the circles have been
+  positioned
+  at (0,0),(0,100),(100,0),(100,100)(50,50).
+  
+  1) Group with CoordOrigin(0,0)
+  2) Group with CoordOrigin(0,50)
+  3) Group with CoordOrigin(50,0)`;
+  container.append(span);
+
+  return container;
+};

packages/web2d/storybook/src/stories/Polyline.js

@@ -0,0 +1,83 @@
+/* eslint-disable import/prefer-default-export */
+// eslint-disable-next-line import/prefer-default-export
+import PolyLine from '../../../src/components/PolyLine';
+import Elipse from '../../../src/components/Elipse';
+import Workspace from '../../../src/components/Workspace';
+
+export const createPolyline = ({
+  backgroundColor: fillColor,
+  strokeColor,
+  strokeWidth,
+  strokeStyle,
+  style,
+}) => {
+  const divElem = document.createElement('div');
+
+  const workspace = new Workspace();
+  workspace.setSize('400px', '400px');
+  workspace.setCoordSize(400, 400);
+  workspace.setCoordOrigin(-200, -200);
+
+  // Add referene point ...
+  const e1 = new Elipse();
+  e1.setSize(10, 10);
+  e1.setPosition(0, 0);
+  workspace.append(e1);
+
+  const e2 = new Elipse();
+  e2.setPosition(-100, -100);
+  e2.setSize(10, 10);
+  workspace.append(e2);
+
+  const e3 = new Elipse();
+  e3.setPosition(100, 100);
+  e3.setSize(10, 10);
+  workspace.append(e3);
+
+  const e4 = new Elipse();
+  e4.setPosition(-100, 100);
+  e4.setSize(10, 10);
+  workspace.append(e4);
+
+  const e5 = new Elipse();
+  e5.setPosition(100, -100);
+  e5.setSize(10, 10);
+  workspace.append(e5);
+
+  // Line 1 ...
+  const line1 = new PolyLine();
+  line1.setFrom(0, 0);
+  line1.setTo(100, 100);
+  line1.setStyle(style);
+  line1.setStroke(strokeWidth, strokeStyle, strokeColor, 1);
+  line1.setFill(fillColor, 1);
+  workspace.append(line1);
+
+  const line2 = new PolyLine();
+  line2.setFrom(0, 0);
+  line2.setTo(-100, -100);
+  line2.setStyle(style);
+  line2.setStroke(strokeWidth, strokeStyle, strokeColor, 1);
+  line2.setFill(fillColor, 1);
+  workspace.append(line2);
+
+  const line3 = new PolyLine();
+  line3.setFrom(0, 0);
+  line3.setTo(100, -100);
+  line3.setStyle(style);
+  line3.setStroke(strokeWidth, strokeStyle, strokeColor, 1);
+  line3.setFill(fillColor, 1);
+  workspace.append(line3);
+
+  const line4 = new PolyLine();
+  line4.setFrom(0, 0);
+  line4.setTo(-100, 100);
+  line4.setStyle(style);
+  line4.setStroke(strokeWidth, strokeStyle, strokeColor, 1);
+  line4.setFill(fillColor, 1);
+  workspace.append(line4);
+
+  workspace.addItAsChildTo(divElem);
+
+  return divElem;
+};

packages/web2d/storybook/src/stories/Polyline.stories.js

@@ -0,0 +1,68 @@
+import { createPolyline } from './Polyline';
+
+// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+export default {
+  title: 'Shapes/Polyline',
+  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
+  argTypes: {
+    style: {
+      control: { type: 'select' },
+      options: ['Straight', 'MiddleStraight', 'MiddleCurved', 'Curved'],
+    },
+    strokeColor: { control: 'color' },
+    strokeStyle: {
+      control: { type: 'select' },
+      options: ['dash', 'dot', 'solid', 'longdash', 'dashdot'],
+    },
+    strokeWidth: { control: { type: 'number', min: 0, max: 100, step: 4 } },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
+const Template = ({ label, ...args }) => createPolyline({ label, ...args });
+
+export const Straight = Template.bind({});
+Straight.args = {
+  strokeWidth: 1,
+  strokeStyle: 'solid',
+  strokeColor: 'blue',
+  style: 'Straight',
+};
+
+export const MiddleStraight = Template.bind({});
+MiddleStraight.args = {
+  strokeWidth: 1,
+  strokeStyle: 'solid',
+  strokeColor: 'blue',
+  style: 'MiddleStraight',
+};
+
+export const MiddleCurved = Template.bind({});
+MiddleCurved.args = {
+  strokeWidth: 1,
+  strokeStyle: 'solid',
+  strokeColor: 'blue',
+  style: 'MiddleCurved',
+};
+
+export const Curved = Template.bind({});
+Curved.args = {
+  strokeWidth: 1,
+  strokeStyle: 'solid',
+  strokeColor: 'blue',
+  style: 'Curved',
+};
+
+export const Stroke = Template.bind({});
+Stroke.args = {
+  strokeWidth: 5,
+  strokeStyle: 'dash',
+  strokeColor: 'red',
+};
+
+export const Size = Template.bind({});
+Size.args = {
+  strokeWidth: 5,
+  strokeStyle: 'solid',
+  strokeColor: 'blue',
+};

packages/web2d/storybook/src/stories/Rectagle.stories.js

@@ -0,0 +1,71 @@
+import { createRectangle } from './Rectangle';
+
+// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+export default {
+  title: 'Shapes/Rectangle',
+  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    strokeColor: { control: 'color' },
+    strokeStyle: {
+      control: { type: 'select' },
+      options: ['dash', 'dot', 'solid', 'longdash', 'dashdot'],
+    },
+    strokeWidth: {
+      control: { type: 'select' },
+      options: [0, 1, 2, 4, 5],
+    },
+    arc: {
+      control: { type: 'select' },
+      options: [0, 0.2, 0.5, 0.8, 1],
+    },
+    onClick: { action: 'onClick' },
+    size: {
+      control: { type: 'select' },
+      options: ['{ "width": 50, "height": 50 }', '{ "width": 100, "height": 100 }', '{ "width": 50, "height": 100 }', '{ "width": 100, "height": 50 }'],
+    },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
+const Template = ({ label, ...args }) => createRectangle({ label, ...args });
+
+export const Fill = Template.bind({});
+Fill.args = {
+  backgroundColor: 'yellow',
+  size: '{ "width": 100, "height": 100 }',
+  strokeWidth: 1,
+  strokeStyle: 'solid',
+  strokeColor: 'blue',
+  arc: 0,
+};
+
+export const Stroke = Template.bind({});
+Stroke.args = {
+  backgroundColor: 'blue',
+  size: '{ "width": 100, "height": 100 }',
+  strokeWidth: 5,
+  strokeStyle: 'dash',
+  strokeColor: 'red',
+  arc: 0,
+};
+
+export const Size = Template.bind({});
+Size.args = {
+  backgroundColor: 'red',
+  size: '{ "width": 150, "height": 50 }',
+  strokeWidth: 5,
+  strokeStyle: 'solid',
+  strokeColor: 'blue',
+  arc: 0,
+};
+
+export const Arc = Template.bind({});
+Arc.args = {
+  backgroundColor: 'red',
+  size: '{ "width": 100, "height": 100 }',
+  strokeWidth: 5,
+  strokeStyle: 'solid',
+  strokeColor: 'blue',
+  arc: 0.5,
+};

packages/web2d/storybook/src/stories/Rectangle.js

@@ -0,0 +1,46 @@
+/* eslint-disable import/prefer-default-export */
+// eslint-disable-next-line import/prefer-default-export
+import Rect from '../../../src/components/Rect';
+import Elipse from '../../../src/components/Elipse';
+import Workspace from '../../../src/components/Workspace';
+
+export const createRectangle = ({
+  backgroundColor,
+  strokeColor,
+  strokeWidth,
+  onClick,
+  strokeStyle,
+  size,
+  arc,
+}) => {
+  const divElem = document.createElement('div');
+
+  const workspace = new Workspace();
+  workspace.setSize('400px', '400px');
+  workspace.setCoordSize(300, 300);
+  workspace.setCoordOrigin(-150, -150);
+
+  const rect = new Rect(arc);
+  rect.setFill(backgroundColor);
+
+  const parsedSize = JSON.parse(size);
+  rect.setSize(parsedSize.width, parsedSize.height);
+
+  rect.setPosition(-parsedSize.width / 2, -parsedSize.height / 2);
+
+  rect.setStroke(strokeWidth, strokeStyle, strokeColor, 1);
+
+  rect.addEvent('click', onClick);
+
+  // Add referene point ...
+  const e1 = new Elipse();
+  e1.setSize(5, 5);
+  e1.setPosition(0, 0);
+  e1.setFill('red');
+
+  workspace.append(rect);
+  workspace.append(e1);
+  workspace.addItAsChildTo(divElem);
+
+  return divElem;
+};

packages/web2d/storybook/src/stories/StraightLine.js

@@ -0,0 +1,27 @@
+/* eslint-disable import/prefer-default-export */
+// eslint-disable-next-line import/prefer-default-export
+import StraightLine from '../../../src/components/StraightLine';
+import Workspace from '../../../src/components/Workspace';
+
+export const createStraightLine = ({
+  strokeColor,
+  strokeWidth,
+  strokeStyle,
+}) => {
+  const divElem = document.createElement('div');
+
+  const workspace = new Workspace();
+  workspace.setSize('400px', '400px');
+  workspace.setCoordSize(300, 300);
+  workspace.setCoordOrigin(-150, -150);
+
+  const line = new StraightLine();
+  line.setFrom(100, 100);
+  line.setTo(-100, -100);
+
+  line.setStroke(strokeWidth, strokeStyle, strokeColor, 1);
+  workspace.append(line);
+
+  workspace.addItAsChildTo(divElem);
+  return divElem;
+};

packages/web2d/storybook/src/stories/StraightLine.stories.js

@@ -0,0 +1,32 @@
+import { createStraightLine } from './StraightLine';
+
+// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+export default {
+  title: 'Shapes/StraightLine',
+  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
+  argTypes: {
+    strokeColor: { control: 'color' },
+    strokeStyle: {
+      control: { type: 'select' },
+      options: ['dash', 'dot', 'solid', 'longdash', 'dashdot'],
+    },
+    strokeWidth: { control: { type: 'number', min: 0, max: 30, step: 1 } },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
+const Template = ({ label, ...args }) => createStraightLine({ label, ...args });
+
+export const StrokeColor = Template.bind({});
+StrokeColor.args = {
+  strokeWidth: 1,
+  strokeStyle: 'solid',
+  strokeColor: 'blue',
+};
+
+export const StrokeWidth = Template.bind({});
+StrokeWidth.args = {
+  strokeWidth: 4,
+  strokeStyle: 'solid',
+  strokeColor: 'red',
+};

packages/web2d/storybook/src/stories/Text.js

@@ -0,0 +1,32 @@
+/* eslint-disable import/prefer-default-export */
+// eslint-disable-next-line import/prefer-default-export
+import Text from '../../../src/components/Text';
+import Workspace from '../../../src/components/Workspace';
+
+export const createText = ({
+  text,
+  fontFamily,
+  color,
+  weight,
+  style,
+}) => {
+  const divElem = document.createElement('div');
+
+  const workspace = new Workspace();
+  workspace.setSize('400px', '400px');
+  workspace.setCoordSize('400', '400');
+  workspace.setCoordOrigin(0, 0);
+
+  [6, 8, 10, 15, 20].forEach((size, i) => {
+    const wText = new Text();
+    workspace.append(wText);
+
+    wText.setText(text);
+    wText.setFont(fontFamily, size, style, weight);
+    wText.setPosition(30, 70 * i);
+    wText.setColor(color);
+  });
+
+  workspace.addItAsChildTo(divElem);
+  return divElem;
+};

packages/web2d/storybook/src/stories/Text.stories.js

@@ -0,0 +1,37 @@
+import { createText } from './Text';
+
+// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+export default {
+  title: 'Shapes/Text',
+  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
+  argTypes: {
+    color: { control: 'color' },
+    fontFamily: {
+      control: { type: 'select' },
+      options: ['Arial', 'Tahoma', 'Verdana', 'Times', 'Brush Script MT'],
+    },
+    weight: {
+      control: { type: 'select' },
+      options: ['normal', 'bold'],
+    },
+    style: {
+      control: { type: 'select' },
+      options: ['normal', 'italic', 'oblique', 'oblique 40deg;'],
+    },
+    text: {
+      control: 'text',
+    },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
+const Template = ({ label, ...args }) => createText({ label, ...args });
+
+export const Multiline = Template.bind({});
+Multiline.args = {
+  fontFamily: 'blue',
+  text: 'This multine text.\nLine 1 :)\nLine2',
+  weight: 'normal',
+  color: 'red',
+  style: 'normal',
+};

packages/web2d/storybook/src/stories/Workspace.stories.js

@@ -0,0 +1,217 @@
+import Workspace from '../../../src/components/Workspace';
+import Elipse from '../../../src/components/Elipse';
+
+// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+export default {
+  title: 'Shapes/Workspace',
+  argTypes: {
+    enableAnimation: { control: 'boolean' },
+  },
+};
+
+export const Visibility = () => {
+  const container = document.createElement('div');
+
+  const overflowWorkspace = new Workspace();
+  overflowWorkspace.setSize('400px', '400px');
+  const elipse1 = new Elipse();
+  elipse1.setSize(300, 300);
+  elipse1.setPosition(0, 0);
+  overflowWorkspace.append(elipse1);
+
+  const div = document.createElement('div');
+  container.append(div);
+  overflowWorkspace.addItAsChildTo(div);
+
+  // @todo: Move this to storybook doc ...
+  const span = document.createElement('span');
+  span.innerHTML = `The Workspace's size defines the visible work area. If an element is outside the workspace, it must not be visible. In this example, The back circle is bigger than the workspace area. A big portion of the circle will not be displayed.`;
+  container.append(span);
+
+  return container;
+};
+
+export const Position = () => {
+  const container = document.createElement('div');
+
+  const elipseAttr = {
+    width: 100,
+    height: 100,
+    x: 100,
+    y: 100,
+  };
+
+  const div = document.createElement('div');
+  container.append(div);
+
+  const workPosition = new Workspace();
+  workPosition.setSize('400px', '400px');
+
+  const elipse = new Elipse(elipseAttr);
+  workPosition.append(elipse);
+  workPosition.addItAsChildTo(div);
+
+  // @todo: Move this to storybook doc ...
+  const span = document.createElement('span');
+  span.innerHTML = 'Workspace is added as child of a div element. That\'s why, It\'s parent will define this position.';
+  container.append(span);
+
+  return container;
+};
+
+export const CoordsSize = (args) => {
+  const { enableAnimation } = args;
+
+  const container = document.createElement('div');
+
+  const coordSizeSampleBuilder = (width, height) => {
+    const workspace = new Workspace();
+    workspace.setSize('100px', '100px');
+    workspace.setCoordSize(width, height);
+
+    let elipse = new Elipse();
+    elipse.setPosition(50, 50);
+    workspace.append(elipse);
+
+    elipse = new Elipse();
+    elipse.setPosition(0, 0);
+    workspace.append(elipse);
+
+    elipse = new Elipse();
+    elipse.setPosition(0, 100);
+    workspace.append(elipse);
+
+    elipse = new Elipse();
+    elipse.setPosition(100, 0);
+    workspace.append(elipse);
+
+    elipse = new Elipse();
+    elipse.setPosition(100, 100);
+    workspace.append(elipse);
+    return workspace;
+  };
+
+  const div = document.createElement('div');
+  container.append(div);
+
+  const workspace100x100 = coordSizeSampleBuilder(100, 100);
+  workspace100x100.addItAsChildTo(div);
+
+  const workspace100x200 = coordSizeSampleBuilder(100, 200);
+  workspace100x200.addItAsChildTo(div);
+
+  const workspace200x100 = coordSizeSampleBuilder(200, 100);
+  workspace200x100.addItAsChildTo(div);
+
+  const dynamicWorkspace = coordSizeSampleBuilder(100, 100);
+  dynamicWorkspace.addItAsChildTo(div);
+
+  let size = 100;
+  if (enableAnimation) {
+    const executer = () => {
+      size = (size + 1) % 100;
+      if (size < 30) {
+        size = 30;
+      }
+
+      dynamicWorkspace.setCoordSize(size, size);
+    };
+    setInterval(executer, 200);
+  }
+  dynamicWorkspace.setCoordSize(size, size);
+
+  // @todo: Move this to storybook doc ...
+  const span = document.createElement('span');
+  span.innerHTML = `Workspace coordsize defines how many units there are along the width of the containing block.
+  In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been
+  positioned
+  at (0,0),(0,100),(100,0),(100,100)(50,50).<br />
+  <br />
+  1) Workspace with CoordSize(100,100)<br />
+  2) Workspace with CoordSize(100,200)<br />
+  3) Workspace with CoordSize(200,100)<br />
+  4) Workspace animation changing the coordsize from (30,30) to (100,100)<br />`;
+  container.append(span);
+
+  return container;
+};
+
+export const CoordsOrigin = (args) => {
+  const container = document.createElement('div');
+  const { enableAnimation } = args;
+
+  const coordOriginSampleBuilder = (x, y) => {
+    // Workspace with CoordOrigin(100,100);
+    const workspace = new Workspace();
+    workspace.setSize('100px', '100px');
+    workspace.setCoordSize(100, 100);
+    workspace.setCoordOrigin(x, y);
+
+    let elipse = new Elipse();
+    elipse.setPosition(0, 0);
+    workspace.append(elipse);
+
+    elipse = new Elipse();
+    elipse.setPosition(0, 100);
+    workspace.append(elipse);
+
+    elipse = new Elipse();
+    elipse.setPosition(100, 0);
+    workspace.append(elipse);
+
+    elipse = new Elipse();
+    elipse.setPosition(100, 100);
+    workspace.append(elipse);
+
+    elipse = new Elipse();
+    elipse.setPosition(50, 50);
+    workspace.append(elipse);
+
+    elipse = new Elipse();
+    elipse.setPosition(100, 100);
+    workspace.append(elipse);
+
+    return workspace;
+  };
+
+  const div = document.createElement('div');
+  container.append(div);
+
+  const workspace0x0 = coordOriginSampleBuilder(0, 0);
+  workspace0x0.addItAsChildTo(div);
+
+  const workspace0x50 = coordOriginSampleBuilder(0, 50);
+  workspace0x50.addItAsChildTo(div);
+
+  const workspace50x0 = coordOriginSampleBuilder(50, 0);
+  workspace50x0.addItAsChildTo(div);
+
+  // Workspace animation changing the coordsize from (30,30) to (100,100)
+  const dynamicWorkspace = coordOriginSampleBuilder(100, 100);
+  dynamicWorkspace.addItAsChildTo(div);
+  if (enableAnimation) {
+    let x = 50;
+    let y = 50;
+    const executer = () => {
+      x = (x + 1) % 50;
+      y = (y + 1) % 50;
+
+      dynamicWorkspace.setCoordOrigin(x, y);
+    };
+    setInterval(executer, 100);
+  }
+  // @todo: Move this to storybook doc ...
+  const span = document.createElement('span');
+  span.innerHTML = `Workspace coordorigin defines the coordinate at the top left corner of the containing block.
+  In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been
+  positioned
+  at (0,0),(0,100),(100,0),(100,100)(50,50). <br />
+  <br />
+  1) Workspace with CoordOrigin(0,0)<br />
+  2) Workspace with CoordOrigin(0,50)<br />
+  3) Workspace with CoordOrigin(50,0)<br />
+  4) Workspace animation changing the coordorigin from (0,0) to (50,50)<br />`;
+  container.append(span);
+
+  return container;
+};

packages/web2d/storybook/src/stories/assets/code-brackets.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>

packages/web2d/storybook/src/stories/assets/comments.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/comments</title><g id="illustration/comments" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Path" fill="#96D07C" d="M2.52730803,17.9196415 C2.44329744,17.9745167 2.36370847,18.000488 2.29303375,18.000488 C2.1197031,18.000488 2,17.8443588 2,17.5752855 L2,4 C2,1.790861 3.790861,3.23296945e-13 6,3.23296945e-13 L33.9995117,3.23296945e-13 C36.2086507,3.23296945e-13 37.9995117,1.790861 37.9995117,4 L37.9995117,9.999512 C37.9995117,12.208651 36.2086507,13.999512 33.9995117,13.999512 L8,13.999512 C7.83499225,13.999512 7.6723181,13.9895206 7.51254954,13.9701099 L2.52730803,17.9196415 Z"/><path id="Path" fill="#73E1E0" d="M7.51066,44.9703679 L2.52730803,47.9186655 C2.44329744,47.9735407 2.36370847,47.999512 2.29303375,47.999512 C2.1197031,47.999512 2,47.8433828 2,47.5743095 L2,35 C2,32.790861 3.790861,31 6,31 L26,31 C28.209139,31 30,32.790861 30,35 L30,41 C30,43.209139 28.209139,45 26,45 L8,45 C7.8343417,45 7.67103544,44.9899297 7.51066,44.9703679 Z"/><path id="Path" fill="#FFD476" d="M46,19.5 L46,33.0747975 C46,33.3438708 45.8802969,33.5 45.7069663,33.5 C45.6362915,33.5 45.5567026,33.4740287 45.472692,33.4191535 L40.4887103,29.4704446 C40.3285371,29.489956 40.1654415,29.5 40,29.5 L18,29.5 C15.790861,29.5 14,27.709139 14,25.5 L14,19.5 C14,17.290861 15.790861,15.5 18,15.5 L42,15.5 C44.209139,15.5 46,17.290861 46,19.5 Z"/></g></svg>

packages/web2d/storybook/src/stories/assets/direction.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/direction</title><g id="illustration/direction" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFD476" d="M23.4917015,33.6030641 L2.93840258,31.4321033 C2.38917316,31.3740904 1.99096346,30.8818233 2.04897631,30.3325939 C2.0747515,30.0885705 2.18934861,29.8625419 2.37095722,29.6975265 L34.2609105,0.721285325 C34.6696614,0.349881049 35.3021022,0.38015648 35.6735064,0.788907393 C35.9232621,1.06377731 36.0001133,1.45442096 35.8730901,1.80341447 L24.5364357,32.9506164 C24.3793473,33.3822133 23.9484565,33.6513092 23.4917015,33.6030641 L23.4917015,33.6030641 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" d="M24.3163597,33.2881029 C24.0306575,33.0138462 23.9337246,32.5968232 24.069176,32.2246735 L35.091923,1.9399251 C35.2266075,1.56988243 35.5659249,1.31333613 35.9586669,1.28460955 C36.5094802,1.24432106 36.9886628,1.65818318 37.0289513,2.20899647 L40.2437557,46.1609256 C40.2644355,46.4436546 40.1641446,46.7218752 39.9678293,46.9263833 C39.5853672,47.3248067 38.9523344,47.3377458 38.5539111,46.9552837 L24.3163597,33.2881029 L24.3163597,33.2881029 Z"/></g></svg>

packages/web2d/storybook/src/stories/assets/flow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/flow</title><g id="illustration/flow" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" fill-rule="nonzero" d="M30,29 C32.7614237,29 35,26.7614237 35,24 C35,14.6111593 27.3888407,7 18,7 C8.61115925,7 1,14.6111593 1,24 C1,33.3888407 8.61115925,41 18,41 C19.3333404,41 20.6447683,40.8466238 21.9154603,40.5471706 C19.5096374,39.3319645 17.5510566,37.8612875 16.0456579,36.1314815 C14.1063138,33.9030427 12.769443,31.0725999 12.0293806,27.6556449 C11.360469,26.565281 11,25.3082308 11,24 C11,20.1340068 14.1340068,17 18,17 C21.8659932,17 25,20.1340068 25,24 C25,26.125 27.7040312,29 30,29 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" fill-rule="nonzero" d="M42,29 C44.7614237,29 47,26.7614237 47,24 C47,14.6111593 39.3888407,7 30,7 C20.6111593,7 13,14.6111593 13,24 C13,33.3888407 20.6111593,41 30,41 C31.3333404,41 32.6447683,40.8466238 33.9154603,40.5471706 C31.5096374,39.3319645 29.4051056,37.9781963 28.0456579,36.1314815 C26.0625,33.4375 23,27.1875 23,24 C23,20.1340068 26.1340068,17 30,17 C33.8659932,17 37,20.1340068 37,24 C37.02301,26.3435241 39.7040312,29 42,29 Z" transform="translate(30.000000, 24.000000) scale(-1, -1) translate(-30.000000, -24.000000)"/></g></svg>

packages/web2d/storybook/src/stories/assets/plugin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/plugin</title><g id="illustration/plugin" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" d="M26,15.3994248 C26,15.4091303 26,15.4188459 26,15.4285714 L26,21.4694881 C25.8463595,21.4969567 25.6941676,21.51275 25.5873784,21.51275 C25.4974117,21.51275 25.4230979,21.4768034 25.377756,21.4206259 L25.2660784,21.2822603 L25.1317423,21.1657666 C24.2436317,20.3956144 23.100098,19.9633214 21.895551,19.9633214 C19.2039137,19.9633214 17,22.1075558 17,24.7804643 C17,27.4533728 19.2039137,29.5976071 21.895551,29.5976071 C23.1972122,29.5976071 24.3149423,29.2878193 25.1231445,28.3613697 C25.4542273,27.9818463 25.568273,27.9073214 25.5873784,27.9073214 C25.681532,27.9073214 25.8352452,27.9239643 26,27.9524591 L26,32.5714286 C26,32.5811541 26,32.5908697 26,32.6005752 L26,33 C26,35.209139 24.209139,37 22,37 L4,37 C1.790861,37 0,35.209139 0,33 L0,15 C0,12.790861 1.790861,11 4,11 L22,11 C24.209139,11 26,12.790861 26,15 L26,15.3994248 Z"/><path id="Path" fill="#87E6E5" d="M27.9998779,32.5714286 C27.9998779,33.3604068 28.6572726,34 29.4682101,34 L46.5315458,34 C47.3424832,34 47.9998779,33.3604068 47.9998779,32.5714286 L47.9998779,15.4285714 C47.9998779,14.6395932 47.3424832,14 46.5315458,14 L29.4682101,14 C28.6572726,14 27.9998779,14.6395932 27.9998779,15.4285714 L27.9998779,21.8355216 C27.9334367,22.2650514 27.8567585,22.6454496 27.746391,22.8084643 C27.4245309,23.2838571 26.2402709,23.51275 25.5873784,23.51275 C24.8705773,23.51275 24.2322714,23.1857725 23.8214379,22.6767605 C23.3096996,22.2329909 22.6349941,21.9633214 21.895551,21.9633214 C20.2963823,21.9633214 19,23.2245992 19,24.7804643 C19,26.3363293 20.2963823,27.5976071 21.895551,27.5976071 C22.5398535,27.5976071 23.2399343,27.477727 23.6160247,27.0466112 C24.1396029,26.4464286 24.7367044,25.9073214 25.5873784,25.9073214 C26.2402709,25.9073214 27.5912951,26.1766031 27.8226692,26.6116071 C27.8819199,26.7230038 27.9403239,26.921677 27.9998779,27.1556219 L27.9998779,32.5714286 Z"/></g></svg>

packages/web2d/storybook/src/stories/assets/repo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/repo</title><g id="illustration/repo" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Rectangle-62-Copy" fill="#B7F0EF" d="M27.2217723,9.04506931 L41.2217723,6.2682098 C43.3886973,5.83840648 45.4937616,7.2466219 45.9235649,9.41354696 C45.9743993,9.66983721 46,9.93049166 46,10.1917747 L46,32.581381 C46,34.4904961 44.650862,36.1335143 42.7782277,36.5049459 L28.7782277,39.2818054 C26.6113027,39.7116087 24.5062384,38.3033933 24.0764351,36.1364682 C24.0256007,35.880178 24,35.6195235 24,35.3582405 L24,12.9686342 C24,11.0595191 25.349138,9.4165009 27.2217723,9.04506931 Z" opacity=".7"/><path id="Combined-Shape" fill="#87E6E5" d="M6.77822775,6.2682098 L20.7782277,9.04506931 C22.650862,9.4165009 24,11.0595191 24,12.9686342 L24,35.3582405 C24,37.5673795 22.209139,39.3582405 20,39.3582405 C19.738717,39.3582405 19.4780625,39.3326398 19.2217723,39.2818054 L5.22177225,36.5049459 C3.34913798,36.1335143 2,34.4904961 2,32.581381 L2,10.1917747 C2,7.98263571 3.790861,6.19177471 6,6.19177471 C6.26128305,6.19177471 6.5219375,6.21737537 6.77822775,6.2682098 Z"/><path id="Rectangle-63-Copy-2" fill="#61C1FD" d="M22,10 C23.1666667,10.2291667 24.0179036,10.625 24.5537109,11.1875 C25.0895182,11.75 25.5716146,12.875 26,14.5625 C26,29.3020833 26,37.5208333 26,39.21875 C26,40.9166667 26.4241536,42.9583333 27.2724609,45.34375 L24.5537109,41.875 L22.9824219,45.34375 C22.327474,43.1979167 22,41.2291667 22,39.4375 C22,37.6458333 22,27.8333333 22,10 Z"/></g></svg>

packages/web2d/storybook/src/stories/assets/stackalt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/stackalt</title><g id="illustration/stackalt" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFAE00" d="M23.8628277,0 L23.8628277,48 L3.32291648,36.2491883 L3.32155653,11.9499781 L23.8628277,0 Z M23.8670509,0 L44.408322,11.9499781 L44.4069621,36.2491883 L23.8670509,48 L23.8670509,0 Z" opacity=".196"/><path id="Rectangle-46-Copy-3" fill="#66BF3C" d="M15.8232279,19.1155258 L24.7368455,21.4714881 C29.6053842,22.7582937 33.4077423,26.5606518 34.694548,31.4291905 L37.0505103,40.3428082 C37.6150232,42.4786032 36.3412474,44.6676353 34.2054524,45.2321482 C33.5569474,45.4035549 32.87575,45.4091235 32.2245294,45.2483418 L23.3459013,43.0562718 C18.2976962,41.809906 14.3561301,37.8683399 13.1097642,32.8201348 L10.9176943,23.9415066 C10.3881737,21.7967682 11.6975664,19.6288529 13.8423049,19.0993322 C14.4935255,18.9385505 15.1747229,18.9441191 15.8232279,19.1155258 Z" opacity=".5" transform="translate(23.999997, 32.166058) rotate(-45.000000) translate(-23.999997, -32.166058)"/><path id="Rectangle-46-Copy-2" fill="#FFAE00" d="M15.8232279,11.2216893 L24.7368455,13.5776516 C29.6053842,14.8644572 33.4077423,18.6668153 34.694548,23.5353541 L37.0505103,32.4489717 C37.6150232,34.5847667 36.3412474,36.7737988 34.2054524,37.3383117 C33.5569474,37.5097184 32.87575,37.515287 32.2245294,37.3545053 L23.3459013,35.1624353 C18.2976962,33.9160695 14.3561301,29.9745034 13.1097642,24.9262983 L10.9176943,16.0476701 C10.3881737,13.9029317 11.6975664,11.7350164 13.8423049,11.2054957 C14.4935255,11.044714 15.1747229,11.0502826 15.8232279,11.2216893 Z" opacity=".5" transform="translate(23.999997, 24.272222) rotate(-45.000000) translate(-23.999997, -24.272222)"/><path id="Rectangle-46-Copy" fill="#FC521F" d="M15.8232279,3.32785281 L24.7368455,5.68381509 C29.6053842,6.97062075 33.4077423,10.7729788 34.694548,15.6415176 L37.0505103,24.5551352 C37.6150232,26.6909302 36.3412474,28.8799623 34.2054524,29.4444752 C33.5569474,29.6158819 32.87575,29.6214505 32.2245294,29.4606688 L23.3459013,27.2685988 C18.2976962,26.022233 14.3561301,22.0806669 13.1097642,17.0324618 L10.9176943,8.15383364 C10.3881737,6.00909519 11.6975664,3.84117987 13.8423049,3.31165925 C14.4935255,3.15087753 15.1747229,3.15644615 15.8232279,3.32785281 Z" opacity=".5" transform="translate(23.999997, 16.378385) rotate(-45.000000) translate(-23.999997, -16.378385)"/></g></svg>

packages/web2d/test/playground/Grid.js

@@ -1,64 +0,0 @@
-/*
- *    Copyright [2021] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-import $ from 'jquery';
-
-class Grid {
-  constructor(parent, colums, rows) {
-    const cellSize = '10px';
-    this._parent = parent;
-    this._container = Grid._createContainer();
-    const tbody = $(this._container.firstChild.firstChild);
-    for (let i = 0; i < rows; i++) {
-      const trElement = $('<tr></tr>');
-      for (let j = 0; j < colums; j++) {
-        const tdElement = $('<td></td>');
-        tdElement.css({
-          width: cellSize,
-          height: cellSize,
-          borderWidth: '1px',
-          borderStyle: 'dashed',
-          borderColor: 'lightsteelblue',
-        });
-        trElement.append(tdElement);
-      }
-      tbody.append(trElement);
-    }
-  }
-
-  setPosition(x, y) {
-    this._container.style.left = x;
-    this._container.style.top = y;
-  }
-
-  render() {
-    $(this._parent).append(this._container);
-  }
-
-  static _createContainer() {
-    const result = window.document.createElement('div');
-    result.style.tableLayout = 'fixed';
-    result.style.borderCollapse = 'collapse';
-    result.style.emptyCells = 'show';
-    result.style.position = 'absolute';
-    result.innerHTML =
-      '<table style="table-layout:fixed;border-collapse:collapse;empty-cells:show;"><tbody id="tableBody"></tbody></table>';
-    return result;
-  }
-}
-
-export default Grid;

packages/web2d/test/playground/arrow.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
-<html xmlns="http://www.w3.org/1999/xhtml">
-
-<head>
-    <link rel="stylesheet" href="styles.css">
-</head>
-
-<body>
-    <h1>PolyLines Render Tests </h1>
-
-    <table>
-        <tbody>
-        <tr>
-            <td>
-                Different types of PolyLines that can be used.
-            </td>
-            <td>
-                <div id="overflowExample" />
-            </td>
-
-        </tr>
-    </tbody>
-</table>
-</body>
-
-</html>

packages/web2d/test/playground/arrow.js

@@ -1,18 +0,0 @@
-import $ from 'jquery';
-import { Workspace, Arrow, Point } from '../../src';
-
-const workspace = new Workspace({ fillColor: 'green' });
-workspace.setSize('200px', '200px');
-const arrow = new Arrow();
-arrow.setFrom(50, 50);
-arrow.setControlPoint(new Point(-50, 0));
-
-workspace.append(arrow);
-
-const arrow2 = new Arrow();
-arrow2.setFrom(100, 50);
-arrow2.setControlPoint(new Point(50, 50));
-
-workspace.append(arrow2);
-
-workspace.addItAsChildTo($('#overflowExample').first());

packages/web2d/test/playground/curvedLine.html

@@ -1,46 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
-<html xmlns="http://www.w3.org/1999/xhtml">
-
-<head>
-    <link rel="stylesheet" href="styles.css">
-</head>
-
-<body>
-
-    <h1>Curved Line Tests </h1>
-
-    <table>
-        <tbody>
-            <tr>
-                <td>
-                    Curved Line Simple
-                </td>
-                <td>
-                    <div id="curvedSimpleExample" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    Curved Line Nice
-                </td>
-                <td>
-                    <div id="curvedNiceExample" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    Curved Line Nice - Size
-                </td>
-                <td>
-                    <div id="curvedSize1NiceExample" />
-                    <div id="curvedSize7NiceExample" />
-                    <div id="curvedSize14NiceExample" />
-                    <div id="curvedSize30NiceExample" />
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</body>
-
-</html>