e-tipsmemo

ごった煮

javascript

アプリケーション作るのにHTMLとかCSSを書きたくないのでFigmaを触ってみた(が)

便利なGUIアプリケーションを作りたいなと思ってElectronとかRust-icedとかフレームワークを検討してみたことはあるが、結局GUIを整えるためにコードを何行も書くことがめんどくさいということに気づいた。C#でアプリケーションを作るときのお手軽さぐらいで…

Typescripの開発環境とテンプレートプロジェクト

Typescriptを1 ~ 2年に1回ぐらい書きたくなることがあるが、毎回プロジェクト構築方法を検索していたり、 Windows を再インストールしなおしたりして環境が破壊されていたりするのでメモ WSL Windows Storeからインストールする ついでにWindows Terminalと…

diagram-js customize 6. CustomizeRenderer

今回はBase Renderを継承した自作クラスに切り替えるbpmn-jsを参考にすると、lib/drawに主な3つのファイルがあるので それを作る。(今回はまだMyRenderUtilは使わない) 四角をつなげる線を引いたりするのに lib/util/RenderUtilが必要で、 diagram-jsからそ…

diagram-js customize 5. ContextPadProvider

e-tipsmemo.hatenablog.comつぎはContextPadProvider といっても今回もソースコードを分離する程度 ExampleContextPadProvider.jsの実装を/lib/features/context-pad/に移す。 ほぼコピペContextPadProvider.js import { assign, forEach, isArray } from 'm…

diagram-js customize 4. PaletteProvider

次にPaletteProvider bpmn-jsを習って、 app/lib/features/palette を以下のように構成。 index.jsはappからimportするときの読み込まれる? jsでファイルを分割するときの手法っぽい import PaletteModule from 'diagram-js/lib/features/palette'; import …

diagram-js customize 3. CONNECTION/SHAPE_STYLE

e-tipsmemo.hatenablog.com まず、前回スタイルがピンク色だったが、ここの色を変えるには1.BaseRenderのスタイルを上書き 2.app/lib/draw/Renderに新しくdiagram-js/BaseRenderを継承したRender Classをつくっていろいろとやる。とあるが、2は今は面倒なの…

diagram-js customize 2. Viewer

e-tipsmemo.hatenablog.com Viewer.js import Diagram from 'diagram-js'; import { assign, find, isFunction, isNumber, omit } from 'min-dash'; import { domify, query as domQuery, remove as domRemove } from 'min-dom'; var DEFAULT_OPTIONS = { wi…

diagram-js customize 1. container

e-tipsmemo.hatenablog.com 前回はリファレンスとなるbpmn-js-exampleを実行できるようになったので 今度はdiagram-jsのexampleに機能を追加する。 e-tipsmemo.hatenablog.com public 以下のindex.htmlを必要に応じてbpmn-jsに寄せた。 <html> <head> <link rel="stylesheet" href="css/diagram-js.css"> <link rel="stylesheet" href="css/app.css" /> <style> .palette-icon-l</link></link></head></html>…

diagram-js example とbpmn-js の再構築②

前回はdiagram-jsのexampleを実行したので、 次はbpmn-jsの差分を追加して起動できるかを確かめる。 動作とコードの確認をするためなので不要なファイルが残っていてもあまり気にしない。github.com bpmn-jsをcloneする。lib以下をdiagram-jsのapp以下にコピ…

diagram-js customize 0. font準備

e-tipsmemo.hatenablog.com diagram-jsからbpmn-jsの再構築した後に、 さて自分のアプリを書く番になると、 PaletteProviderにフォントが必要になるのでその作り方をメモする。 使用するもの Inkscape Fontello - icon fonts generator 参考 bpmn-font/HOWTO…

diagram-js example とbpmn-js の再構築①

diagram-jsを使うと決めたはいいが、ドキュメントはそこまで親切ではない感じなので わかったことをメモって行く。e-tipsmemo.hatenablog.com 最初はdiagram-jsのサンプルはgithubにある シンプルなdiagram-jsからどう言った点を実装すればbpmn-js(のような…

diagram-js 検討

とあるものが必要なきがしてので、どのように作るのがいいか検討していた。 GUIが欲しかったので 表が得意そうなライブラリが豊富なjavascriptで書くことにして、 javascriptで書くのがつらそうなコアのバックグラウンド処理は webassemblyとか使おうかなと…