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 Angular
The Angular wrapper is MimicComponent from MimicModule: every property is an input, every event an output named on<Event>, and the methods are called on the component reference from @ViewChild. A method that returns a value returns a Promise of it, resolved once the component has rendered; its ...Sync() twin returns the value at once, or null before the component has rendered. Unknown bindings are rejected at compile time.
import { MimicModule, MimicComponent } from 'smart-industrial/angular/mimic';
<smart-mimic #mimic [editable]="true" [editable]="true"
(onLayoutChange)="onLayoutChange($event)"></smart-mimic>
@ViewChild('mimic', { read: MimicComponent }) mimic!: MimicComponent;
// methods are called on the component reference
this.mimic.fit(42);
Properties
| Input | Type, default | Description |
|---|---|---|
[connections] | array | 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] | boolean | Sets or retrieves whether symbols can be dragged to new positions. Panning and zooming work either way. |
[gridSize] | number | Sets or gets the spacing of the background grid and the step used when snapToGrid is enabled. |
[maxZoom] | number | Sets or gets the maximum zoom of the viewport. The zoom is clamped when it is assigned. |
[minZoom] | number | Sets or gets the minimum zoom of the viewport. |
[panX] | number | Sets or gets the horizontal pan of the stage in pixels. |
[panY] | number | Sets or gets the vertical pan of the stage in pixels. |
[selection] | string | null | Sets or retrieves the id of the selected symbol, or null. |
[showGrid] | boolean | Sets or retrieves whether a background grid is drawn. The grid scales with the zoom, so it moves with the diagram. |
[snapToGrid] | boolean | Sets or retrieves whether dragged symbols snap to the grid. |
[symbolSize] | number | Sets or gets the default size of a symbol in pixels. A symbol can override it with its own size. |
[symbols] | array | 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] | number | 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 |
|---|---|
fit(padding?: number): void | 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. |
layout(value?: any): Promise<any> | 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. |
select(id: string | number): void | 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. |
symbolAt(x: any, y: any): Promise<any> | 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. |
zoomAt(x: number, y: number, factor: number): void | 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. |
zoomBy(factor: number): void | Zooms around the centre of the viewport.factor number Multiplier. |
Events
The data of an event is in event.detail. The mimic sets selection and then raises selectionChange, and while editable is true it moves a dragged symbol in symbols and then raises layoutChange. symbolClick reports the symbol that was clicked or activated.
| Output | Description and detail |
|---|---|
(onLayoutChange) | This event is triggered when a symbol has been dragged to a new position. Handle it to persist the layout.id string | number The symbol that moved.layout object The whole layout after the move. |
(onSelectionChange) | This event is triggered when the selected symbol changes.id string | number The newly selected id, or null.symbol object Its specification. |
(onSymbolClick) | This event is triggered when a symbol is chosen, by pointer or keyboard, typically used to open its detail.id string | number 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