ビューポート

ビューポートコンポーネント

apps/desktop/src/viewport/index.ts 輸出 Editor2D, View3D、そのプロップのタイプ、使用可能なツール識別子、および solidsFromProfiles。どちらのコンポーネントも親を埋めます。つまり、ゼロ以外の幅と高さのコンテナを提供します。コア CAD エンティティと CAM プログラムは共有データ モデルです。

2D エディタは Canvas 2D にレンダリングし、独自の選択、カメラ、コマンド履歴を維持します。 3D ビューアは、Three.js、オービットおよび変換コントロール、非同期メッシュ ジョブ、およびプログラム再生を使用します。パスまたはソリッドのレンダリングは、パスまたはソリッドの保存や製造操作の検証とは無関係です。

統合契約

Editor2DProps 必要 drawing, onChange、 そして selectedTool。放出された図面をプロップに送り返します。コンポーネントは、自身が発行したドキュメント オブジェクトを認識します。ドキュメントを置き換えると、新しい図面が外部でロードされ、エディタの状態がリセットされます。

import { createSignal } from "solid-js"
import { Editor2D, type ToolId } from "./viewport/index.ts"

const [drawing, setDrawing] = createSignal(initialDrawing)
const [tool, setTool] = createSignal<ToolId>("select")

<Editor2D drawing={drawing()} onChange={setDrawing} selectedTool={tool()} />

選択では、ロックされたエンティティとロックされたレイヤー上のエンティティが除外されます。非表示のエンティティと非表示のレイヤーは、レンダリングされた空間インデックスから除外されます。新しいエンティティはドキュメント固有の識別子を受け取り、表示されるロック解除されたレイヤーが利用可能な場合はそのレイヤーに割り当てられます。

描画ツールとジェスチャー

ツール レジストリには、選択、線分、長方形、円、楕円、ポリライン、円弧、テキスト、寸法、移動、回転、スケール、ミラー、オフセット、トリム、およびフィレットのファクトリがあります。 AVAILABLE_TOOLS 登録された工場から派生します。 startTool 追加で認識します chamfer フィレット ツール ファクトリを通じて実行されますが、面取りはその配列ではアドバタイズされません。消費者は実際のレジストリを使用して、どのツールを有効にするかを決定する必要があります。

• ホイールまたはピンチでズームします。スペース キー、中キー キー、および右キー キーを押しながらドラッグしてパンします。
• F インデックス付きの図面に適合します。削除または Backspace キーを押すと、ロックされていない選択範囲が削除されます。
• Cmd/Ctrl+Z 元に戻す; Cmd/Ctrl+Shift+Z または Cmd/Ctrl+Y やり直します。
• Enter はポリラインをコミットします。エスケープはアクティブなツールに配信され、現在のジェスチャをキャンセルします。
• テキストがアクティブな状態で、配置する前に文字または Backspace を入力します。最初のテキストは Text.

ポインターの位置は、ツールをディスパッチする前にワールド座標に変換されます。スナップでは、空間インデックス、幾何学的候補、およびカメラ依存のグリッドが結合されます。選択ヒット許容値は 8 画面ピクセルに対応します。ツール マシンは、ファイルを書き込んだり API を呼び出したりするのではなく、コマンドとプレビューを生成します。

3D レンダリングと再生

View3D 図面、ソリッド、オプションのプロファイル押し出し、 cam.Program、ストック寸法、および工具定義。遠近法、上面、下面、前面、後面、左面、右面、アイソメトリック、および 4 つのビューのプリセットをサポートしています。表示モードは、シェーディング、エッジ付きシェーディング、ワイヤフレーム、および X 線です。照明、マテリアル プロパティ、クリッピング セクション、グリッド、軸、原点はプロップを通じて設定できます。

再生を制御する playing, playbackTime 数秒で、 playbackRate、 そして onPlaybackTimeChange。再生では、穴あけサイクルを拡張し、円形/螺旋運動をテッセレーションし、滞留時間を維持し、素早い動きを明確に描画します。ツール マップとオプションのデフォルト カッターは、カッター、シャンク、ホルダーの形状を提供します。想定される形状が視覚的に区別されます。

選択コールバックは固体インデックスを報告します。変換コントロールは、位置、回転、スケールを放出します。 onTransformCommit;呼び出し元は、その変換を永続化する方法を決定します。ツールパス オーバーレイでは、ポイントとラベル、ポイントの種類フィルター、円弧の中心、円弧の半径、およびストックの透明度を表示できます。

座標と単位

コア図面の座標とストック サイズにはミリメートルが使用されます。描画角度と Three.js 回転コンポーネントではラジアンが使用されます。この規則は、明示的に度を使用する CAM 回転軸値またはフィーチャ入力には適用しないでください。 viewport/units.ts 表示されるミリメートルとインチの変換ヘルパーが含まれています。入力/出力境界で変換するため、スナップ、ジオメトリ、およびツールパスの動作が一貫した単位系を維持します。

2D カメラは世界座標を CSS ピクセルにマッピングします。バッキング キャンバスの寸法にはデバイスのピクセル比が組み込まれます。サイズを変更すると、カメラとバッキング バッファーが更新されます。 ResizeObserver。カメラのスケールによって、グリッド間隔とスクリーンスペースのヒット許容値が決まります。

インチ表示は、1 インチあたり正確に 25.4 mm で変換され、長さはデフォルトで小数点以下 3 桁になります (apps/desktop/src/viewport/units.ts）。 2D エディタでは、各ホイール ステップは 1.15 の係数でズームし、スケールは 0.001 と 100、000 の間に固定され、ビューに合わせて 10% のマージンが残ります (editor2d/camera.ts).

リソースとライフサイクル

2D コンポーネントはキューに入れられたアニメーション フレームをキャンセルし、アンマウント時にサイズ変更オブザーバーを切断します。 3D コンポーネントは、サイズ変更と表示リスナー、オービットと変換コントロール、メッシュ ワーカー、アニメーション スケジュール、ジオメトリ、マテリアル、スプライト、ツール メッシュ、WebGL レンダラーをリリースします。

フレーム スケジューラは無効化を結合し、カメラのダンピングまたは再生でフレームが必要なときに追加のフレームを要求します。可視性が変化すると作業が中断されます。これはスケジュール ポリシーであり、すべてのモデルやデバイスに対してフレーム レートの予算が保証されているわけではありません。

モジュールマップ

• editor2d/editor2d.tsx: 制御されたコンポーネント、ポインターのディスパッチ、カメラ、選択、履歴、およびキャンバスのペイント。
• editor2d/tools/: ジェスチャ ステート マシンとコマンドの構築。
• editor2d/camera.ts, render.ts、 そして snap-pipeline.ts: 座標変換、エンティティのレンダリング、ピッキング、スナップ オーケストレーション。
• spatial/grid.ts: 図面空間インデックス。
• view3d/view3d.tsx: シーン構成、カメラ コントロール、選択、変換、ストック、ツール。
• view3d/playback.ts, toolpath-overlays.ts、 そして modeling.ts: モーション タイムライン、オーバーレイ データ、プロファイルからソリッドへの変換。
• view3d/mesh-jobs.ts そして mesh-worker.ts: 背景ジオメトリの構築とジョブの所有権。

ツールの利用可能性

ToolId より大きなツールの語彙について説明します。 AVAILABLE_TOOLS は、登録されたサブセットについて説明します。インタラクティブなツールの場合は、次を使用します。 startTool(id, lookup, context, text)。選択ルックアップは候補エンティティをクエリします。コンテキストは現在の選択とエンティティへのアクセスを提供します。 text は注釈の内容を提供します。

行方不明だった工場が戻ってくる undefined。無効または未実装のツールをアクティブな編集モードとして表示するのではなく、明示的に処理します。既存のジオメトリを変更するツールには、現在の選択内容とエンティティ コンテキストが必要です。これらの依存関係なしでファクトリを呼び出すだけでは、有用な編集を行うには不十分です。

メッシュ化と検証

推定頂点数が 50、000 を超えるソリッドとブラウザ ワーカー サポートの場合、ビューアはモジュール ワーカーのメッシュ構築をキューに入れます。より小さいソリッドは同期的にメッシュされます。メッシュ キューは、完了、古いジョブ、ワーカー エラー、クリーンアップを処理します。しきい値はスケジュールに使用される推定値であり、文書化されたモデル サイズの制限ではありません。

bun test apps/desktop/src/viewport
bun run --filter @cadcamfun/desktop typecheck

ロジック テストには、レンダリング ヘルパー、ツール ジェスチャ、空間インデックス作成、再生、オーバーレイが含まれます。ブラウザ/WebGL の動作はグラフィック環境にも依存します。カメラ コントロール、シーンのライフサイクル、またはレンダリングを変更するときに、実際のビューポートのインタラクションを検査します。

制御された再生の例

親は、ビューアのモーション タイムラインを複製することなく、トランスポート コントロールを所有できます。このコンポーネントは、すでに構築されている CAM プログラムを受け入れ、時間、再生状態、速度、およびビューポートのプリセットを制御します。インポートパスは直下のファイルを想定しています。 apps/desktop/src.

import { createSignal } from "solid-js"
import { cam } from "@cadcamfun/core"
import { View3D } from "./viewport/index.ts"

export function ProgramPreview(props: { program: cam.Program }) {
  const [seconds, setSeconds] = createSignal(0)
  const [playing, setPlaying] = createSignal(false)
  return <div style={{ height: "600px" }}>
    <button onClick={() => setPlaying(value => !value)}>Play / pause</button>
    <button onClick={() => { setSeconds(0); setPlaying(true) }}>Restart</button>
    <View3D
      program={props.program}
      preset="isometric"
      playing={playing()}
      playbackTime={seconds()}
      playbackRate={1}
      onPlaybackTimeChange={setSeconds}
      stock={{ origin: { x: 0, y: 0, z: -10 }, size: { x: 100, y: 80, z: 10 } }}
    />
  </div>
}

再生ビルダーは原点から開始し、サイクルを移動に拡張し、移動長とフィードから継続時間を計算します。デフォルトの高速速度は 5,000 mm/min、デフォルトの円弧テッセレーション許容値は 0.1 mm です。これらはプレビューの仮定であり、マシンの加速度やコントローラーのタイミングを測定したものではありません。 Dwell コマンドは指定された秒数を保持します。コメントと方向のみのエントリは直線移動を追加しません。

ツールの色は、各ツール識別子の最初の出現によって割り当てられ、そのパス全体で保持されます。アセンブリ ジオメトリのツール マップ/デフォルト ツールを指定します。色付きのパスだけでは、検証で使用されるカッターまたはホルダーの寸法は確立されません。

レシピと現在のツール制限の編集

これらの詳細は、パレットのラベルではなく、ジェスチャの実装から得られます。コミットする前にプレビューを確認し、結果が意図したジオメトリと異なる場合は、「元に戻す」を使用してください。ツールがコマンドを返さない場合は、エディターがポインター イベントを失ったわけではなく、幾何学的前提条件が満たされていないことを意味している可能性があります。

レンダリングとメッシュの失敗

バックグラウンド メッシュ キューは、デフォルトで最大 128 個の保留中のジョブを許可し、一度に 1 つずつ実行され、ジョブごとにデフォルトで 15 秒のタイムアウトが設定されます。シーンをリセットするとワーカーが終了し、キューに入れられた作業がクリアされます。古い応答は無視されます。無効なワーカー応答、メッセージ デコード エラー、タイムアウト、およびキュー容量障害は、キュー コールバックを通じてエラーを報告します。

関連するテストには以下が含まれます editor2d/tools/offset.test.ts, annotation-transform.test.ts, spatial/grid.test.ts, view3d/playback.test.ts、 そして toolpath-overlays.test.ts。メッシュキューの実装は次のとおりです。 view3d/mesh-jobs.ts.

表示単位の詳細

エディターは常にミリメートル単位で作業します。以下の正確な要素を使用して、ユーザーが読み取って入力した内容のみが変換されます。保存された図面自体のユニットはそのまま残ります mm または inch;追加の単位は表示のみの選択肢です。

import { formatLength, parseLength, formatAngle, programUnitsOf } from "./units"

formatLength(25.4, "inch")     // "1.0000 inch"
formatLength(12.5)             // "12.500 mm"
formatLength(0.0254, "thou")   // "1.00 thou"
parseLength("2 in", "inch")    // 50.8  (a trailing unit word is ignored)
parseLength("abc")             // undefined
formatAngle(Math.PI / 2)       // "90.0°"
programUnitsOf("thou")         // "inch"

2D カメラとグリッド

const camera = createCamera({ x: 0, y: 0 }, 2, 800, 600)   // 2 px per mm
worldToScreen(camera, { x: 10, y: 10 })   // { x: 420, y: 280 }
screenToWorld(camera, { x: 420, y: 280 }) // { x: 10, y: 10 }
gridStep(2)    // 5   -> 5 mm apart = 10 px
gridStep(0.5)  // 20  -> 20 mm apart = 10 px

レンダリングによりエンティティがカリングされる visibleBounds(camera)。また、スナップによって図面全体のスキャンが回避されます。均一な空間グリッドは、境界がスナップ許容値に 2 mm の候補マージンを加えた範囲内にあるエンティティを返し、それらのみがコアに渡されます。 findSnap。これにより、多くのエンティティを含む図面でのポインタの動きが速くなります。

スナップリファレンス

スナップ タイプは優先順位に従って試行されます。デフォルトの順序は従来のエディターと一致します。 endpoint, midpoint, center, intersection, perpendicular, tangent, nearest、 そして quadrant。エンドポイントはソース エンティティの頂点であり、テッセレーションの頂点ではありません。

パイプラインは、スナップ、カーソルの下にあるエンティティの ID (選択ツールが使用する最も近いものから順)、および考慮された候補の数を返します。

ツールパスの再生タイミングの調整方法

const playback = buildPlayback(program)          // rapids at 5000 mm/min
playback.duration                                // total seconds
positionAt(playback, 12.5)                       // tool position at t = 12.5 s
toolAt(playback, 12.5)                           // toolId cutting at that time
toolColors(program)                              // Map toolId -> colour, first use order

// A 10 mm feed move at 600 mm/min lasts 10 / 600 × 60 = 1 s.
// The same 10 mm as a rapid lasts 10 / 5000 × 60 = 0.12 s.

ビューポートの実践

• エッジで変換: ミリメートルとラジアンで保存および計算し、表示専用にフォーマットします。 formatLength そして formatAngle.
• 解析後の長さは決して再利用しないでください parseLength 返品 undefined;以前の値を保持し、検証ヒントを表示します。
• 描画ツールを追加するときは、それをツール ファクトリ テーブルに登録し、ツールバー、ショートカット、テストが同じ ID でアドレス指定できるようにします。
• スナップ候補クエリを空間的に保ちます。すべてのエンティティを渡す findSnap ポインタが移動するたびにインデックスが無効になります。
• 再生時間をサイクルタイムの見積もりではなくプレビューとして扱います。

大規模なヒット テスト: 空間グリッド

2D エディタは、60、10 エンティティを使用して 000 fps をターゲットにしているため、ヒット テストとカリングではポインタ イベントごとにすべてのエンティティをスキャンすることはありません。 viewport/spatial/grid.ts 均一なグリッドを維持します。各アイテムはその境界ボックスが接するすべてのセルに登録され、クエリは境界がクエリ ボックスと交差するすべてのアイテムを挿入順に返します。結果は正確であり、決してサンプルではありません。

破線のクエリ ボックスに触れたセルがアクセスされます。 A と長い線は、それらの境界が交差するため返されますが、B は交差しません。

3D メッシュ キュー

ソリッドは Web Worker でメッシュ化されるため、UI スレッドがブロックされることはありません。 MeshWorkerQueue で view3d/mesh-jobs.ts 一度に 1 つのジョブを実行します。

失敗するとワーカーが終了し、キュー全体がクリアされるため、新しい編集後に古いシーン作業が反映されることはありません。次回の送信では新しいワーカーが開始されます。応答はジョブ ID によって照合されるため、解雇された従業員からの遅れた応答は無視されます。

2D ツールの実装

各ツールは、次の機能を備えた小さなステート マシンです。 onPointerDown, onPointerMove そして onPointerUpの工場によって作成されました。 tools/index.ts、パレット エントリごとに 1 つ。ポインターの位置が通過します snap-pipeline.ts ツールがそれらを認識する前に。