Table of Contents

RenderingCanvas Tool Bar

The RenderingCanvas Tool Bar is the camera-preset menu that every 3D canvas in the app carries. It holds no engine of its own: it takes a canvas prop and calls that component's exposed setView(name), which invokes the SetView hub method, and the hub is what drives the per-connection DispEngine.

View Menu

The bar is a single View ▾ menu. Its seven entries, in shipped order, are Isometric, Front, Back, Right, Left, Top and Bottom. The engine also understands a home view and RenderingCanvas.vue exposes setViewToHomeView, but this menu does not offer it.

Entry API Method
Isometric SetViewToIsometricView()
Front SetViewToFrontView()
Back SetViewToFrontView() + TurnBackView()
Right SetViewToRightView()
Left SetViewToRightView() + TurnBackView()
Top SetViewToTopView()
Bottom SetViewToTopView() + TurnBackView()

Back View Implementation

Back / Left / Bottom views are composed by first calling the corresponding forward-view method (SetViewToFrontView / SetViewToRightView / SetViewToTopView) and then invoking TurnBackView() to flip the camera about the view plane, composed in the hub's SetView switch.

Canvas Binding

The tool bar declares exactly one prop, a nullable canvas, typed structurally as an object exposing setView(v: string): Promise<void> rather than as the RenderingCanvas component type. Every entry calls it optionally, so a tool bar with no canvas bound still opens and each entry is a no-op. The preset names travel to the hub untranslated; only the row labels are localized, from the widgets.canvas.* keys.

Scene Menu

Pages that sit next to a RenderingCanvas surface a per-page Scene ▾ menu button — the DisplayOptionsMenu component, labelled from widgets.canvas.scene because no caller overrides the label. It chooses what the 3D scene draws (solids, coordinates, display aids), as distinct from the camera-oriented View ▾ menu beside it. The layout (header + checkboxes + radio rows) is shared across four callers — the Execution page's extended tool bar, the General Setup equipment panel, the Tool House setup panel and the STL preview pane — so it is implemented once as a generic, schema-driven component.

Schema

Each dropdown consumes a DisplayGroup[] array. A group has an optional header and a flat list of items:

  • { kind: 'check', label, modelValue, disable?, onUpdate } — a checkbox row.
  • { kind: 'radio', label, groupValue, value, disable?, onUpdate } — a radio row; rows sharing a groupValue behave as one group, each row bound to its own value.

The component is generic over the radio value type, so RenderingMode / HolderRenderingMode / etc. stay fully typed at the call site. Besides groups it accepts label, disable, title, minWidthPx (default 220), size (default sm), contentClass and compact. compact is a tighter-than-dense row mode, used by the General Setup and Tool House panels for their long option lists; the General Setup, Tool House and Execution callers pass content-class="bg-white" to opt out of Quasar's transparent menu.

HiNC-2025-webservice (Quasar CLI SPA)

  • wwwroot-src/src/components/widgets/DisplayOptionsMenu.vue — the shared <q-btn-dropdown> + <q-list> implementation behind all four of the app's Scene menus.
  • Callers (each reads a DisplayGroup[] computed from its page-local state and forwards onUpdate to its existing handlers):
    • wwwroot-src/src/components/execution/ExecutionExtendedToolBar.vue
    • wwwroot-src/src/components/mech/EquipmentSetupPanel.vue
    • wwwroot-src/src/components/toolhouse/ToolHouseSetupPanel.vue
    • wwwroot-src/src/components/StlPreviewPane.vue
  • Backends — one per caller, each a different surface: ExecutionExtendedToolBar.vue reaches /api/rendering-flags (Common/RenderingFlagsController.cs), which flips bits in ExecutionDisplayee.RenderingFlagBitArray; EquipmentSetupPanel.vue reaches /api/mech/equipment-setup-display/* (Mech/EquipmentSetupDisplayController.cs); ToolHouseSetupPanel.vue reaches /api/mech/tool-house-display/* (Mech/ToolHouseDisplayController.cs); StlPreviewPane.vue reaches /api/stl-preview/set-coordinate/* (Disp/StlPreviewController.cs). Those last three route each POST by the caller's renderingConnectionId, so the toggle lands on that canvas's own engine; the rendering-flags surface carries no connection id and acts on the project-wide ExecutionDisplayee instead. DisplayOptionsMenu.vue is UI-only; it does no REST work itself — the caller owns the onUpdate handlers, so optimistic update and error reversion stay page-local.

Source Code Path

See HiNC App Anatomy for git repository links.

HiNC-2025-webservice (Quasar CLI SPA):

  • wwwroot-src/src/components/RenderingCanvasToolBar.vue — the View ▾ menu. Seven callers embed it, one per canvas: wwwroot-src/src/pages/ExecutionPage.vue (teleported into the canvas panel's header, beside ExecutionExtendedToolBar), wwwroot-src/src/pages/MachineToolPage.vue, wwwroot-src/src/pages/MechBuilderPage.vue, wwwroot-src/src/components/mech/EquipmentSetupPanel.vue (the General Setup canvas column, mounted by wwwroot-src/src/pages/GeneralSetupPage.vue), wwwroot-src/src/components/toolhouse/ToolHouseSetupPanel.vue (mounted by wwwroot-src/src/pages/ToolHousePage.vue), wwwroot-src/src/components/StlPreviewPane.vue (the File Explorer preview pane, mounted by wwwroot-src/src/components/FileExplorer.vue) and wwwroot-src/src/components/execution/StepVolumePanel.vue (the CWE footprint canvas, teleported into its host expansion's header). Four of those sit beside a Scene ▾ menu — the Execution, General Setup, Tool House and STL preview canvases; the Machine Tool, Mechanism Builder and CWE canvases carry the View ▾ menu alone.
  • wwwroot-src/src/components/widgets/DisplayOptionsMenu.vue — schema-driven dropdown described above.
  • wwwroot-src/src/components/RenderingCanvas.vue — SignalR-hosted WebSocket canvas whose exposed setView / setViewTo*View methods the tool bar calls (see Rendering Canvas on Web Service).
  • wwwroot-src/src/i18n/en/widgets.ts — the widgets.canvas.* keys: view, the seven preset labels, and scene.
  • Backends:
    • Disp/RenderingHub.cs — the SetView(string) hub method that maps each preset name onto engine calls.
    • Disp/RenderingService.cs — GetOrCreateEngine(connectionId), the per-connection DispEngine store the hub resolves against.
    • Common/RenderingFlagsController.cs — the /api/rendering-flags surface (GET, POST update, POST batch) behind the Execution page's Scene menu, wrapped by wwwroot-src/src/api/renderingFlags.ts. It reads and writes ExecutionDisplayee.RenderingFlagBitArray through ProjectDisplayeeService.
    • wwwroot-src/src/api/equipmentSetup.ts, wwwroot-src/src/api/toolHouse.ts and wwwroot-src/src/api/stlPreview.ts — the typed wrappers the other three Scene menus post through.

See Also