使用 angular 实施 Rapid 2

Question

我正在开发一个 angular 2 应用程序，其中我必须在其中一个组件中实施 rappid 并且已经购买了一个 rappid 许可证，我已经获得了许可的 rappid.js 文件。

面临如何将 Rapid 与 Angular2 集成的问题。

我必须使用工具栏、光环、检查器、模板和 rappid 的其他 ui 组件。

而且我想如果我使用 npm jointjs 模块，这些功能将在那里不可用，因为那只会暴露核心 JointJS 库。

是否有可用的演示应用程序显示 Rappid 与 Angular 2.

的集成

Answer 1

在文件夹 apps 中有一个用打字稿编写的 KitchenSink 应用程序版本。文件夹名称是 KitchenSinkTs。

您仍然需要在 angular 中创建模块和组件，但这会容易得多。

package.json 已经拥有对运行 rappid 的所有节点依赖。

Answer 2

找不到好的答案所以我使用 Angular 6 和 Rappid 2.2

做了一个完整的演示

Here is the github

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

所以为了让这个工作我必须

使用所有必需的 rappid js 及其依赖库和 @type 编辑 package.json backbone joinjs jquery 和 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"

包括 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"

在 angular.json 中包含来自 rappid.min.css 的 .css 以及 kitchensink.ts 应用程序中的 style.material.css 确保 [=来自 kitchensink.ts 应用程序的 73=] 被添加到 app.component.css 并且对正文或 html 的所有引用都应用于 :host
1. 在您的应用程序中编辑 styles.css 以获得 canvas
2. 以大约 1000 种方式编辑 kitchensink .ts 参考 github 此处列出
3. 导入配置文件和模型文件并确保正确引用正确的目录
4. 将所有资产移动到 angular 资产文件夹
5. 确保你的 ts 配置指向 rappid.min.t.ds 文件

使用 angular 实施 Rapid 2

Implement Rappid with angular 2

jointjs

rappid

angular