1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ページ跨ぎの文字送りワイヤーを持つレイアウトエディタ「Silim Murlun」を作った

1
Posted at

実寸(mm)の方眼紙キャンバスにページ枠を縦に並べ、テキストエリア同士をワイヤーで繋いで文章を流し込むレイアウトエディタ「Silim Murlun(シリム・ムールン)」を、無償のオープンソース(MIT ライセンス)として公開しました。

silim-murlun-v0.6.0.png
(※画像は英語表示ですが日本語に対応しています)

ブラウザで試せます(インストール不要・データはサーバーへ送信しません):
https://cuculhart.github.io/silim-murlun/

「版面に枠を置き、文字は枠に収め、収まらない分は次の枠へ送る」というページレイアウト(DTP 寄り)の考え方をブラウザで実現するものです。スライドツールやドキュメントエディタではなく、印刷する版面を設計するためのツールです。学生のレポートから仕事の報告書まで、無償で使えます。

何ができるか

  • 実寸のページが縦に並ぶ — A4/A3 縦横、ワールド mm 座標
  • テキスト連鎖 — ワイヤーで末尾→先頭へ、エリア・ページ跨ぎで文章が流れる
  • シェイプ・画像 — 矩形・楕円・直線・クリック連打式の曲線、すべて mm 単位
  • 複数選択のワークフロー — Ctrl+D/Ctrl+C/V 複製・グルーピング・整列・分布
  • 印刷 — アプリ内プレビュー+ブラウザ印刷メニューの両方

v0.6.0 の主な内容

機能 内容
複製・コピペ Ctrl+D / Ctrl+C/V。テキストエリアはリンクを引き継がず単独連鎖として複製(フォント設定+本文は保持)
グルーピング 右クリック → グループ化/解除。1クリックで全体、連続クリックで個別へ潜る
曲線の多点入力 クリック連打で頂点配置、Enter/ダブルクリックで確定
枠線 OFF 矩形・楕円の「枠線」チェック(幅0ではなく transparent の明示 OFF)
整列・分布 複数選択で8ボタン(6方向揃え+縦横等間隔)
テキスト揃え 単独エリアに横/縦揃え。連鎖エリアは左上起点固定

設計メモ(つまづきポイント)

  • シェイプの pointer-events: 線・曲線・楕円の .ki-obj は pointer-events:none で、クリックが下のページ枠に着地しオブジェクト解決が失敗 —— マルチ選択でコンテキストメニューが出ない原因だった。DOM ではなく幾何ヒット(engine.objectAt)で解決
  • グループと選択: エンジンがクリック時に group で選択を拡張するため、エンジンとアプリで「全体→個別」の役割分担を揃えないと順序が逆転する
  • 連鎖の複製: Chain = {id, areas, text} なので、複製側は {新id, [新エリア], 元text} の素朴なリテラルで十分(ワイヤーを持たない独立チェーンになる)

エンジン側

Kimetron Isle v1.6.0 — 多点入力(P49 startShapeDraw/'shape' mode)、resizeAspect フック、cap マーカーの線幅スケール化。submodule として取り込み。

ご意見・Issue 歓迎です。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?