angularjointjsrappid

Implement Rappid with angular 2

I am working on a angular 2 application wherein I have to implement rappid in one of component and had already purchased a licence of rappid with which I have got the licenced rappid.js file.

Facing issues on how to integrate rappid with Angular 2.

I have to make use of toolbar, halo, inspector, stencil and other ui components of rappid.

And I guess if I go with npm jointjs module, these features will be not available over there because that will only expose the core JointJS library.

Is there any demo application available showing the integration of Rappid with Angular 2.

Solution

  • Couldn't find a good answer so I made a full demo using Angular 6 and Rappid 2.2

    Here is the github

    git clone https://github.com/wdunn001/Rappid-Angular-Demo
npm i
ng serve

    so to get this working I had to

    1. edit the package.json with all of the required rappid js and its dependencies libraries and the @type for backbone joinjs jquery and lodash

      "backbone": "^1.3.3", "jointjs": "^2.1.0", "jquery": "^3.3.1", "lodash": "^3.10.1", "dagre": "0.7.4", "graphlib": "1.0.7", "canvg": "git+https://github.com/clientIO/canvg.git#v2.2.0-rappid", "ws": "0.8.1"

    2. include those in the angular.json

        "node_modules/jquery/dist/jquery.min.js",
  "node_modules/backbone/node_modules/underscore/underscore.js",
  "node_modules/backbone/backbone.js",
  "node_modules/lodash/index.js",
  "node_modules/jointjs/dist/joint.js",
  "node_modules/dagre/dist/dagre.js",
  "node_modules/graphlib/dist/graphlib.js",
  "rappid/build/rappid.min.js"

    3. include the .css from rappid.min.css in the angular.json also the style.material.css from the kitchensink.ts app ensure the style.css from the kitchensink.ts app is added to the app.component.css and all references to body or html are applied to :host

      1. edit the styles.css in your app to have a display block for canvas

      2. edit the kitchensink .ts in about a 1000 ways refer to the github to much here to list

      3. import the config files and model files and ensure the properly reference the right directory

      4. move all assets to the angular assets folder

      5. make sure your ts config points to the rappid.min.t.ds file