Archived
307 lines
16 KiB
HTML
307 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Transformer Select Panel | HiAPI-C# 2025 </title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="title" content="Transformer Select Panel | HiAPI-C# 2025 ">
|
||
|
||
|
||
<link rel="icon" href="../../img/HiAPI.favicon.ico">
|
||
<link rel="stylesheet" href="../../public/docfx.min.css">
|
||
<link rel="stylesheet" href="../../public/main.css">
|
||
<meta name="docfx:navrel" content="../../toc.html">
|
||
<meta name="docfx:tocrel" content="toc.html">
|
||
|
||
<meta name="docfx:rel" content="../../">
|
||
|
||
|
||
|
||
<meta name="loc:inThisArticle" content="In this article">
|
||
<meta name="loc:searchResultsCount" content="{count} results for "{query}"">
|
||
<meta name="loc:searchNoResults" content="No results for "{query}"">
|
||
<meta name="loc:tocFilter" content="Filter by title">
|
||
<meta name="loc:nextArticle" content="Next">
|
||
<meta name="loc:prevArticle" content="Previous">
|
||
<meta name="loc:themeLight" content="Light">
|
||
<meta name="loc:themeDark" content="Dark">
|
||
<meta name="loc:themeAuto" content="Auto">
|
||
<meta name="loc:changeTheme" content="Change theme">
|
||
<meta name="loc:copy" content="Copy">
|
||
<meta name="loc:downloadPdf" content="Download PDF">
|
||
|
||
<script type="module" src="./../../public/docfx.min.js"></script>
|
||
|
||
<script>
|
||
const theme = localStorage.getItem('theme') || 'auto'
|
||
document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : theme)
|
||
</script>
|
||
|
||
</head>
|
||
|
||
<body class="tex2jax_ignore" data-layout="" data-yaml-mime="">
|
||
<header class="bg-body border-bottom">
|
||
<nav id="autocollapse" class="navbar navbar-expand-md" role="navigation">
|
||
<div class="container-xxl flex-nowrap">
|
||
<a class="navbar-brand" href="../../index.html">
|
||
<img id="logo" class="svg" src="../../img/HiAPI.logo.png" alt="">
|
||
|
||
</a>
|
||
<button class="btn btn-lg d-md-none border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navpanel" aria-controls="navpanel" aria-expanded="false" aria-label="Toggle navigation">
|
||
<i class="bi bi-three-dots"></i>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navpanel">
|
||
<div id="navbar">
|
||
<form class="search" role="search" id="search">
|
||
<i class="bi bi-search"></i>
|
||
<input class="form-control" id="search-query" type="search" disabled placeholder="Search" autocomplete="off" aria-label="Search">
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<main class="container-xxl">
|
||
<div class="toc-offcanvas">
|
||
<div class="offcanvas-md offcanvas-start" tabindex="-1" id="tocOffcanvas" aria-labelledby="tocOffcanvasLabel">
|
||
<div class="offcanvas-header">
|
||
<h5 class="offcanvas-title" id="tocOffcanvasLabel">Table of Contents</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#tocOffcanvas" aria-label="Close"></button>
|
||
</div>
|
||
<div class="offcanvas-body">
|
||
<nav class="toc" id="toc"></nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<div class="actionbar">
|
||
<button class="btn btn-lg border-0 d-md-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#tocOffcanvas" aria-controls="tocOffcanvas" aria-expanded="false" aria-label="Show table of contents">
|
||
<i class="bi bi-list"></i>
|
||
</button>
|
||
|
||
<nav id="breadcrumb"></nav>
|
||
</div>
|
||
|
||
<article data-uid="Anatomy-Transformers">
|
||
<h1 id="transformer-select-panel">Transformer Select Panel</h1>
|
||
|
||
<p>The Transformer Select Panel is the switchboard that picks which <a class="xref" href="../../api/Hi.Mech.Topo.ITransformer.html">ITransformer</a>
|
||
occupies a transformer-valued slot and edits the one that is there. For the model behind the picker
|
||
— what each transformer does to a frame — see
|
||
<a class="xref" href="../../technique/mechanism/transformers.html">Handle Transform Matrix by ITransformer</a>.</p>
|
||
<h2 id="surface">Surface</h2>
|
||
<p>The panel's principal home is a <strong>Transformer slot</strong> of the General Setup page's Control Tree
|
||
(<code>/general-setup</code>). Four slots on that tree are Transformer slots:</p>
|
||
<ul>
|
||
<li><code>equipment/fixture/geom-to-workpiece</code> — “Geom To Workpiece”</li>
|
||
<li><code>equipment/fixture/geom-to-table</code> — “Geom To Table”</li>
|
||
<li><code>equipment/workpiece/anchor/geom-to-fixture</code> — “Geom To Fixture”</li>
|
||
<li><code>equipment/workpiece/anchor/geom-to-program-zero</code> — “Geom To Program Zero”</li>
|
||
</ul>
|
||
<p>A fifth shape appears wherever a <a class="xref" href="../../api/Hi.Geom.TransformationGeom.html">TransformationGeom</a> is grown as a tree node: its
|
||
<code>.../inner-transformer</code> child is a Transformer slot too.</p>
|
||
<p>Two surfaces embed the panel outside any tree — the <a class="xref" href="../util/mech-builder.html">Mechanism Builder Page</a>
|
||
(<code>/util/mech-builder</code>), for the selected branch's transformer, and the inner-transformer card of
|
||
<a href="transformation-geom-control.html">Transformation Geometry Control</a>.</p>
|
||
<h2 id="layout">Layout</h2>
|
||
<ul>
|
||
<li>Transformer Select Panel
|
||
<ul>
|
||
<li>Transformer Type Dropdown — one dense, outlined <code>q-select</code> listing the kinds this host allows.
|
||
Its label is the host's <code>label</code> prop, falling back to <strong>Transformer type</strong>; the inner-transformer
|
||
card labels it <strong>Inner transformer</strong>. Picking a kind commits immediately; there is no Apply button.</li>
|
||
<li>Separator — drawn only when a kind is active.</li>
|
||
<li>Active Kind's Editor — the component the kind maps to in <code>TRANSFORMER_EDITORS</code>, bound to the
|
||
IndexService key the picker resolved for the live transformer.</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<p>The panel takes a <code>selectorOnly</code> prop that drops everything below the dropdown, which gives it two
|
||
forms:</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Form</th>
|
||
<th>Where it is used</th>
|
||
<th>What renders</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Embedded (default)</td>
|
||
<td>Mechanism Builder page; the inner-transformer card of <code>TransformationGeomEditor.vue</code></td>
|
||
<td>dropdown, separator, and the active kind's editor in one column</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Selector only</td>
|
||
<td>every Control-Tree Transformer slot, through <code>TransformerSlotPanel.vue</code></td>
|
||
<td>the dropdown alone</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p>In a Control Tree the picker and the editor sit on two different nodes. <code>buildTransformerChildren()</code>
|
||
grows <strong>at most one</strong> child under the slot, typed with the current kind, and that child's panel is
|
||
<code>SoleEditorPanel.vue</code>, which resolves the kind through the same <code>TRANSFORMER_EDITORS</code> map and binds
|
||
it to the slot's own key. The builder first probes the slot's key with <code>getIndexType</code> and returns no
|
||
child at all when that probe fails or names a type outside the seven kinds, so a slot holding
|
||
nothing is a picker with nothing beneath it. Selecting the slot shows the picker; selecting the
|
||
child shows the kind's editor.</p>
|
||
<h3 id="transformer-type-dropdown">Transformer Type Dropdown</h3>
|
||
<p>The dropdown gets and sets the <a class="xref" href="../../api/Hi.Mech.Topo.ITransformer.html">ITransformer</a> behind the bound key. On mount, and
|
||
again whenever that key changes, it probes the object's type with <code>getIndexType</code>; picking a different
|
||
kind creates the replacement through <code>POST /api/{Kind}/New</code> unless the host supplied an <code>onCreate</code>
|
||
hook, in which case that hook runs instead so the owning domain object is rebound alongside the
|
||
IndexService entry.</p>
|
||
<p>Which kinds it offers is the <code>allowedKinds</code> prop, defaulting to all seven. A Control-Tree slot feeds
|
||
it from the node's <code>ctx.allowedKinds</code>; none of the four General Setup slots narrows it, so all seven
|
||
appear there.</p>
|
||
<p>When the probed kind falls outside <code>allowedKinds</code>, both the active and the selected kind reset to
|
||
empty: the dropdown blanks, and the embedded form prints <em>No transformer attached.</em> in place of an
|
||
editor. The out-of-list transformer is not rendered.</p>
|
||
<h2 id="transformer-kinds">Transformer Kinds</h2>
|
||
<p>The web client offers seven kinds, one editor each.</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Kind</th>
|
||
<th>Editor</th>
|
||
<th>What the editor holds</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><a class="xref" href="../../api/Hi.Mech.Topo.StaticTranslation.html">StaticTranslation</a></td>
|
||
<td><code>StaticTranslationEditor.vue</code></td>
|
||
<td>one Vec3 input, the constant offset</td>
|
||
</tr>
|
||
<tr>
|
||
<td><a class="xref" href="../../api/Hi.Mech.Topo.StaticRotation.html">StaticRotation</a></td>
|
||
<td><code>StaticRotationEditor.vue</code></td>
|
||
<td>axis Vec3 input (with Normalize), angle in degrees, pivot Vec3 input</td>
|
||
</tr>
|
||
<tr>
|
||
<td><a class="xref" href="../../api/Hi.Mech.Topo.StaticFreeform.html">StaticFreeform</a></td>
|
||
<td><code>StaticFreeformEditor.vue</code></td>
|
||
<td>a 4×4 matrix grid with Identity and Invert (stored column-major, displayed row-major)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><a class="xref" href="../../api/Hi.Mech.Topo.DynamicTranslation.html">DynamicTranslation</a></td>
|
||
<td><code>DynamicTranslationEditor.vue</code></td>
|
||
<td>axis Vec3 input (with Normalize) and a step in mm</td>
|
||
</tr>
|
||
<tr>
|
||
<td><a class="xref" href="../../api/Hi.Mech.Topo.DynamicRotation.html">DynamicRotation</a></td>
|
||
<td><code>DynamicRotationEditor.vue</code></td>
|
||
<td>axis Vec3 input (with Normalize), angle in degrees, pivot Vec3 input</td>
|
||
</tr>
|
||
<tr>
|
||
<td><a class="xref" href="../../api/Hi.Mech.Topo.GeneralTransform.html">GeneralTransform</a></td>
|
||
<td><code>GeneralTransformEditor.vue</code></td>
|
||
<td>a scale field over two embedded sub-transformer cards</td>
|
||
</tr>
|
||
<tr>
|
||
<td><a class="xref" href="../../api/Hi.Mech.Topo.NoTransform.html">NoTransform</a></td>
|
||
<td><code>NoTransformEditor.vue</code></td>
|
||
<td>an identity-transform notice; no controls</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p>The picker offers no null entry: identity is expressed by choosing <code>NoTransform</code>.</p>
|
||
<div class="NOTE">
|
||
<h5>Note</h5>
|
||
<p>The <a class="xref" href="../../api/Hi.Mech.Topo.GeneralTransform.html">GeneralTransform</a> editor is a composition, not a flat form: a scale field,
|
||
then the <a class="xref" href="../../api/Hi.Mech.Topo.StaticRotation.html">StaticRotation</a> and <a class="xref" href="../../api/Hi.Mech.Topo.StaticTranslation.html">StaticTranslation</a> editors
|
||
embedded in their own bordered cards, titled <em>Rotation sub-transformer</em> and <em>Translation
|
||
sub-transformer</em>. It keys the two sub-editors off <code>POST /api/GeneralTransform/IndexRotation</code> and
|
||
<code>/IndexTranslation</code>, edits the scale itself, and owns no vector widget — every
|
||
<a class="xref" href="../../api/Hi.Geom.Vec3d.html">Vec3d</a> field on it comes from the nested editors. The effective transform is
|
||
<code>T × R × scale × I</code>.</p>
|
||
</div>
|
||
<h2 id="key-model">Key Model</h2>
|
||
<ul>
|
||
<li><a class="xref" href="../../api/Hi.Mech.Topo.ITransformer.html">ITransformer</a> — the interface the slot holds and the dropdown swaps.</li>
|
||
<li><a class="xref" href="../../api/Hi.Mech.Topo.StaticTranslation.html">StaticTranslation</a>, <a class="xref" href="../../api/Hi.Mech.Topo.StaticRotation.html">StaticRotation</a>,
|
||
<a class="xref" href="../../api/Hi.Mech.Topo.StaticFreeform.html">StaticFreeform</a>, <a class="xref" href="../../api/Hi.Mech.Topo.DynamicTranslation.html">DynamicTranslation</a>,
|
||
<a class="xref" href="../../api/Hi.Mech.Topo.DynamicRotation.html">DynamicRotation</a>, <a class="xref" href="../../api/Hi.Mech.Topo.GeneralTransform.html">GeneralTransform</a> and
|
||
<a class="xref" href="../../api/Hi.Mech.Topo.NoTransform.html">NoTransform</a> — the seven implementations the web picker lists.</li>
|
||
<li><a class="xref" href="../../api/Hi.Geom.Vec3d.html">Vec3d</a> — the axis, pivot and translation fields the static and dynamic editors bind.</li>
|
||
</ul>
|
||
<h2 id="source-code-path">Source Code Path</h2>
|
||
<p>See <a class="xref" href="../index.html">HiNC App Anatomy</a> for git repository links.</p>
|
||
<p>The switchboard and its editors:</p>
|
||
<ul>
|
||
<li><code>wwwroot-src/src/components/topo/TransformerSelectPanel.vue</code> — the picker, the create call and the
|
||
optional inline editor; props <code>modelKey</code> / <code>label</code> / <code>allowedKinds</code> / <code>onCreate</code> / <code>selectorOnly</code>,
|
||
events <code>changed</code> / <code>typeChanged</code> / <code>error</code>.</li>
|
||
<li><code>wwwroot-src/src/components/topo/transformerEditors.ts</code> — <code>TRANSFORMER_EDITORS</code>, the single kind →
|
||
editor map, plus <code>isTransformerKind()</code> and <code>humanizeTransformerKind()</code>.</li>
|
||
<li><code>wwwroot-src/src/components/topo/StaticTranslationEditor.vue</code></li>
|
||
<li><code>wwwroot-src/src/components/topo/StaticRotationEditor.vue</code></li>
|
||
<li><code>wwwroot-src/src/components/topo/StaticFreeformEditor.vue</code></li>
|
||
<li><code>wwwroot-src/src/components/topo/DynamicTranslationEditor.vue</code></li>
|
||
<li><code>wwwroot-src/src/components/topo/DynamicRotationEditor.vue</code></li>
|
||
<li><code>wwwroot-src/src/components/topo/GeneralTransformEditor.vue</code></li>
|
||
<li><code>wwwroot-src/src/components/topo/NoTransformEditor.vue</code></li>
|
||
</ul>
|
||
<p>The Control-Tree glue and the two direct embedders:</p>
|
||
<ul>
|
||
<li><code>wwwroot-src/src/components/controlTree/TransformerSlotPanel.vue</code> — the slot's panel: this
|
||
switchboard in selector-only mode, fed <code>allowedKinds</code> and <code>onCreate</code> from the node context.</li>
|
||
<li><code>wwwroot-src/src/components/controlTree/SoleEditorPanel.vue</code> — the kind node's panel.</li>
|
||
<li><code>wwwroot-src/src/components/controlTree/itemTypes.ts</code> — registers <code>Transformer</code> as a slot type with
|
||
<code>buildTransformerChildren</code>, and each of the seven kinds against <code>SoleEditorPanel</code>.</li>
|
||
<li><code>wwwroot-src/src/pages/MechBuilderPage.vue</code> — embeds the panel for the selected branch.</li>
|
||
<li><code>wwwroot-src/src/components/geom/TransformationGeomEditor.vue</code> — embeds it for the inner transformer.</li>
|
||
</ul>
|
||
<p>The transport and the strings:</p>
|
||
<ul>
|
||
<li><code>wwwroot-src/src/api/transformer.ts</code> — the <code>TransformerKind</code> union, the per-kind <code>/api/{Kind}/New</code>
|
||
create endpoints, and the typed wrappers for every update and <code>Index*</code> call.</li>
|
||
<li><code>wwwroot-src/src/i18n/en/topo.ts</code> — every string on these panels, including
|
||
<code>topo.select.noTransformer</code>. Transformer type names are identity and stay verbatim.</li>
|
||
</ul>
|
||
<p>The REST controllers, one per kind:</p>
|
||
<ul>
|
||
<li><code>Mech/Topo/StaticTranslationController.cs</code></li>
|
||
<li><code>Mech/Topo/StaticRotationController.cs</code></li>
|
||
<li><code>Mech/Topo/StaticFreeformController.cs</code></li>
|
||
<li><code>Mech/Topo/DynamicTranslationController.cs</code></li>
|
||
<li><code>Mech/Topo/DynamicRotationController.cs</code></li>
|
||
<li><code>Mech/Topo/GeneralTransformController.cs</code> — also serves <code>IndexRotation</code> and <code>IndexTranslation</code>.</li>
|
||
<li><code>Mech/Topo/NoTransformController.cs</code> — <code>New</code> and <code>Get</code>; there is nothing on a <code>NoTransform</code> to update.</li>
|
||
</ul>
|
||
<h2 id="see-also">See Also</h2>
|
||
<ul>
|
||
<li><a class="xref" href="../util/mech-builder.html">Mechanism Builder Page</a> — edits a mechanism’s per-branch transformer through this switchboard</li>
|
||
<li><a href="transformation-geom-control.html">Transformation Geometry Control</a> — embeds this picker as its inner
|
||
transformer, with no kind restriction at all</li>
|
||
</ul>
|
||
|
||
</article>
|
||
|
||
<div class="contribution d-print-none">
|
||
</div>
|
||
|
||
<div class="next-article d-print-none border-top" id="nextArticle"></div>
|
||
|
||
</div>
|
||
|
||
<div class="affix">
|
||
<nav id="affix"></nav>
|
||
</div>
|
||
</main>
|
||
|
||
<div class="container-xxl search-results" id="search-results"></div>
|
||
|
||
<footer class="border-top text-secondary">
|
||
<div class="container-xxl">
|
||
<div class="flex-fill">
|
||
<span> Copyright © 2025 <a href='https://superhightech.com.tw'>Tech Coordinate</a>. All rights reserved. <a href='https://superhightech.com.tw'>超級高科技股份有限公司</a> © 2025 版權所有 </span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html>
|