Реализуйте Раппид с угловым 2

Question

Я работаю над угловым 2 приложением, в котором мне нужно внедрить rappid в один из компонентов, и я уже приобрел лицензию rappid, с которой получил лицензионный файл rappid.js.

Возникают вопросы о том, как интегрировать rappid с Angular 2.

Я должен использовать панель инструментов, ореол, инспектор, трафарет и другие компоненты пользовательского интерфейса rappid.

И я предполагаю, что, если я пойду с модулем npm jointjs, эти функции будут там недоступны, потому что это откроет только основную библиотеку JointJS.

Есть ли демо-приложение, демонстрирующее интеграцию Rappid с Angular 2.

Answer 1

Не смог найти хорошего ответа, поэтому я сделал полную демонстрацию, используя Angular 6 и Rappid 2.2

Вот гитхуб

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

так, чтобы это работало, мне пришлось

1. отредактируйте файл package.json со всеми необходимыми библиотеками rappid js и его зависимостями, а также @type для магистрального соединения jjery и 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. включить тех в 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. включите.css из rappid.min.css в angular.json, а также style.material.css из приложения kitchensink.ts, убедитесь, что style.css из приложения kitchensink.ts добавлен в app.component.css и все ссылки на body или html применяются к:host

   4. отредактируйте файл styles.css в своем приложении, чтобы иметь блок отображения для canvas

   5. отредактируйте кухонную раковину.ts примерно в 1000 способов.

   6. импортировать файлы конфигурации и файлы моделей и обеспечить правильную ссылку на нужный каталог

   7. переместить все активы в папку угловых активов

   8. убедитесь, что ваш ts config указывает на файл rappid.min.t.ds

Answer 2

Внутри папки apps находится версия приложения KitchenSink, написанная на машинописном шрифте. Название папки - KitchenSinkTs.

Вам по-прежнему придется создавать модуль и компонент в угловых, но это будет гораздо проще.

В package.json уже есть все зависимости узлов для запуска rappid.