Operator screens and process graphics

Mimic <smart-mimic>

Mimic is a process diagram canvas.

<smart-mimic> · 13 properties, 6 methods, 3 events · source/modules/smart.mimic.js

Usage in Blazor

The Razor component is <Mimic> in Smart.Blazor.Industrial: every property is a parameter in PascalCase, every event an EventCallback<Event> named On<Event> whose ev["Detail"] is the typed detail class, and the methods are called on the @ref. String choices are enums. In a Blazor Web App (.NET 8 and later) the page needs an interactive render mode, for example @rendermode InteractiveServer; a statically rendered component stays empty.

@using Smart.Blazor.Industrial
@* .NET 8 and later: an interactive render mode, on the page or for the whole app *@
@rendermode InteractiveServer

<Mimic @ref="mimic" Editable="true" Editable="true"
    OnLayoutChange="OnLayoutChange" />

@code {
    Mimic mimic;

    void OnLayoutChange(Event ev)
    {
        MimicLayoutChangeEventDetail detail = ev["Detail"];
    }

    // void Fit()
    void Call() => mimic.Fit();
}

Properties

Parameter	Type, default	Description
Connections connections	IEnumerable<object>	Sets or retrieves the connections between symbols as [{ from, to, flowing, reverse, className, waypoints }]. from and to are symbol ids. A connection that names a symbol which is not on the diagram is skipped. waypoints overrides the automatic orthogonal routing.
Editable editable	bool false	Sets or retrieves whether symbols can be dragged to new positions. Panning and zooming work either way.
GridSize gridSize	int 20	Sets or gets the spacing of the background grid and the step used when snapToGrid is enabled.
MaxZoom maxZoom	double 4	Sets or gets the maximum zoom of the viewport. The zoom is clamped when it is assigned.
MinZoom minZoom	double 0.25	Sets or gets the minimum zoom of the viewport.
PanX panX	double 0	Sets or gets the horizontal pan of the stage in pixels.
PanY panY	double 0	Sets or gets the vertical pan of the stage in pixels.
Selection selection	object	Sets or retrieves the id of the selected symbol, or null.
ShowGrid showGrid	bool false	Sets or retrieves whether a background grid is drawn. The grid scales with the zoom, so it moves with the diagram.
SnapToGrid snapToGrid	bool false	Sets or retrieves whether dragged symbols snap to the grid.
SymbolSize symbolSize	int 56	Sets or gets the default size of a symbol in pixels. A symbol can override it with its own size.
Symbols symbols	IEnumerable<object>	Sets or retrieves the equipment on the diagram as [{ id, symbol, x, y, label, state, quality, value, rotate, level, size, stubs }]. Positions are numbers in stage coordinates, so a layout can be serialised. The symbol elements are updated rather than rebuilt when the property changes, and only what changed is written - a reading that moved patches that symbol's text, and the connections are redrawn only when a symbol moves - so keyboard focus and the selection are kept and a large diagram stays responsive. A number given as value is shown as text; a null entry is skipped. Assign a new array to update the component.
Zoom zoom	double 1	Sets or retrieves the zoom factor. Clamped to minZoom and maxZoom on assignment - 0 or less is minZoom, the furthest out the diagram goes - so the property never reports a value the diagram is not at. A number written as text, such as '2' from an attribute, is taken as that number; a value that is not a number is refused.

Methods

Method	Description
void Fit()	Fits the whole diagram into the viewport, so an operator who has zoomed into a unit can return to the plant view with one action. padding number Margin in pixels. Defaults to 24.
Task<object> Layout()	Gets or sets the whole diagram (symbols, connections and viewport) as a plain object. Call the method without an argument to read the layout, or pass a saved layout to restore it. Returns copies, so a saved layout is not affected by later edits. Can be combined with the autoSaveState property of DockingLayout for the panels around the diagram. value object A layout to restore. Omit to read the current one.
void Select(object id)	Selects a symbol by id, or clears the selection with null. Raises selectionChange only when the selection actually changes. id string | number The symbol id, or null.
Task<object> SymbolAt(int x, int y)	Returns the symbol at a point in stage coordinates, or null. When two symbols overlap, the topmost one is returned, as for a click. x number Stage x. y number Stage y.
void ZoomAt(int x, int y, int factor)	Zooms around a point in the viewport. Zooming around the pointer keeps the point under the pointer in place, which is the expected behaviour of wheel zoom. x number Viewport x. y number Viewport y. factor number Multiplier, for example 1.1 to zoom in.
void ZoomBy(int factor)	Zooms around the centre of the viewport. factor number Multiplier.

Events

Every event is an EventCallback<Event>; Event is a dictionary and ev["Detail"] converts to the detail class named under the event.

Event	Description and detail
OnLayoutChange layoutChange MimicLayoutChangeEventDetail	This event is triggered when a symbol has been dragged to a new position. Handle it to persist the layout. Id string The symbol that moved. Layout object The whole layout after the move.
OnSelectionChange selectionChange MimicSelectionChangeEventDetail	This event is triggered when the selected symbol changes. Id string The newly selected id, or null. Symbol object Its specification.
OnSymbolClick symbolClick MimicSymbolClickEventDetail	This event is triggered when a symbol is chosen, by pointer or keyboard, typically used to open its detail. Id string The symbol id. Symbol object Its specification.

CSS variables

The component declares 5 CSS variables; the CSS page shows how to set them.

--smart-mimic-height --smart-mimic-canvas-background --smart-mimic-grid-size --smart-mimic-grid-color --smart-mimic-wire-color