2021-07-16Movidea開発日記
実際「そういえば実装すべき機能のリストを作ったはずだな」と日記を遡ってみて「この段落、何度も参照するなら別ページに切り出して日付ではないタイトルがあるべきだな」となってMovidea実際に使えるようにするために必要な機能のページができた
Cypressの試行錯誤と機能追加が渾然一体となっててページへの分離に余計な認知的コストが掛かるから、まずはコストを掛けずに書き出そうとしてるのかな？
今日は色々と会議のインタラプトがあるし、振り返りなどを中心に。
昨日作ったドラッグの機能はHTML5 Drag&Drop APIを使っていて、これは初のことだったので色々書くことがあるけど書いてないなぁ
ドラッグ対象
draggableにする
ドラッグ開始時のマウスダウンの位置が中心からどの程度ずれているか記録する
tsx<GroupDiv ... onDragStart={onDragStart} draggable={true}>tsconst onDragStart = (event: React.DragEvent<HTMLDivElement>) => {
updateGlobal((g) => {
const [x, y] = value.position;
const [cx, cy] = screen_to_world([event.clientX, event.clientY]);
g.dragstart_position = [cx - x, cy - y];
g.drag_target = value.id;
});
};ドロップ対象
onDragOverでpreventDefaultすることがドロップ受け入れの条件
ts<div id="canvas" onDrop={onDrop} onDragOver={allowDrop}>tsexport const allowDrop = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
};
export const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
updateGlobal((g) => {
const [dsx, dsy] = g.dragstart_position;
const [x, y] = screen_to_world([event.clientX, event.clientY]);
g.itemStore[g.drag_target].position = [x - dsx, y - dsy];
});
event.preventDefault();
};ドラッグ時にプラスマークを表示しないために修正
Cypressでテストする時、
onDragStart で event.dataTransfer がundefinedなので、ない時には無視する形にする必要があったts const onDragStart = (event: React.DragEvent<HTMLDivElement>) => {
if (event.dataTransfer !== undefined) {
event.dataTransfer.effectAllowed = "move";
}...tsexport const allowDrop = (event: React.DragEvent<HTMLDivElement>) => {
event.dataTransfer.dropEffect = "move";
event.preventDefault();
};不安なことは早く試す原則からすると、DOMに対して範囲選択するのを次は試すべき
逆に、前回Regroupでは不安だったから早く試したクラウド保存機能に関しては今回は後回しにする予定
今週のまとめ
DOMによる矩形範囲の表現
矩形範囲との交差判定
部分交差で選択するか全体包含で選択するか
グループの中の一部の選択を許すか
許さないイメージ
Related Pages
- →リンクのサジェスト×足場ネットワーク×リンクサジェスト×キーフレーズ抽出×rake×scrapboxキーフレーズサジェスト×機械がscrapboxを読む×scrapbox擬似的多人数プロジェクト×蔵書横断検索×pKeicho→
- →pKeicho×pProject×Github Projectでのカンバン、イマイチ×pkeichobot×プロジェクトページは定期的に作り直さなければならない×duplicateはincoming_linkを消す操作→
- →pKeicho×pkeicho-done×✅Answer, Add, Askを踏まえた解説を追加×✅サーバ側エラー検知×✅Add to Home screenしたい×✅アイコンを子供っぽい見た目にする×✅会話の最初の入力もDBに入れて一覧表示×✅ログ共有を別タブで開くんじゃなくダイアログにする×✅keichoの設定を保存する×✅scrapboxむけのログ整形ダイアログ改善×マニュアルの「高度な使い方」を別ページに×✅括弧の中身をキーワード候補にする×✅価値の質問のタイミングが早い→動きの抽出が過剰×✅スコアを整数に丸める×✅読点を含むキーワードを抽出しない×✅抽象的キーワードをディスカウントする×✅出現してるがキーワード抽出で選ばれてない部分文字列をキーワード出現とみなす×✅チェーン質問発生中にチェーン対象の単語をNGKWしたい×✅チェーン質問が繋がらない×✅関係の質問が少ない気がする×✅短いキーワードの再出現はキーワード扱いしない×✅チャットログからRegroupマップを生成×チャットボットとの会話から自動的に文章構成のための部品を作る機能×✅scrapboxエクスポート時にurlを挿入×✅ダイアログの見た目を改善する×✅トークリストのエクスポート/インポート×✅エンパシーライティングモードを作る×✅コマンド処理を追加可能にする×✅回答選択肢をサーバサイドで作る×✅自由回答をオンオフする×✅振り返り支援モードを作る×✅作る提案支援モードを作る×google_analyticsで何でもカウント×✅空白を含むキーフレーズにngkwコマンドを使うとエラー×✅コメントに対して考え中が出てしまう×pkeicho-wontfix×メニューを日本語にする→
- →regroup×2021-07-20movidea開発日記×2021-07-26movidea開発日記×2021-07-27movidea開発日記×2021-07-28movidea開発日記×2021-07-29movidea開発日記×styled-components×reactn×immer×2021-07-19Movidea開発日記×✅フォントサイズの自動調整ができるか？×jsonインポート機能×2021-07-14Movidea開発日記×reactnを露出してcypressから使う×✅domでのスムーズな拡大縮小平行移動×macbookのトラックパッドで拡大縮小平行移動×2021-07-13Movidea開発日記×畳んだものは一段階大きくなる×圧縮付箋の展開時どうなるべきか×編集urlどうあるべきか×regroupからmovideaへ×2021-07-15Movidea開発日記×バルーンメニュー→
- →pKeicho×✅PythonでRegroupのマップを作成×keichoのログから生成するregroupマップの付箋レイアウト×regroup変換を試す×✅選択したキーワードを付箋にする×✅一部の質問を簡潔に付箋にする×🤔複数行テキストからregroupマップを生成→
- →長文×分割×係り受け連続範囲×機械学習で長文付箋分割×長文の付箋への分割支援:良くない分割の例×herokuで自然言語処理×✅最長行をワンクリックで刻む×shift-reduce_アルゴリズム×係り受け解析×rake×長文コンテンツを自動で付箋に刻む機能×pRegroup→
- →書き出しツール×プロジェクトのタスク管理をscrapboxでやる×モバイル書き出しツール×モバイル書き出しui×どこでも書き出し×urlのカード表示？×画像も貼れる×質問リクエスト×pKeicho×謎の余白問題×privatebox×書き出しツールからのregroupへの流し込み×twitter的レビューツール×pkakidashi-done→
"Engineer's way of creating knowledge" the English version of my book is now available on [Engineer's way of creating knowledge]
(C)NISHIO Hirokazu / Converted from [Scrapbox] at [Edit]