vCortex (i4Cortex Visualization Component Pack)

3rd Party Modules
41

vCortex (Visual Component Pack) for Ignition - i4cortex. You can check version 8.3 prior to clicking download.

2 Likes
42

Goto this page and fill out form we send you download link for both version as well.

https://i4cortex.com/product/vcortex-visual-component/

1 Like
43

We’re excited to announce vCortex 0.14.60 (Ignition 8.1/8.3), packed with major improvements, new customization options, and better performance for your projects! The Demo project is update to see how to use new futures.

Release 0.14.60

New Features & Enhancements

  • Applied Designer-defined style classes to all components.
  • eChart: The theme property now supports auto, eliminating the need to bind it to the Perspective theme. The component automatically detects Perspective theme changes and updates accordingly.
  • Slider: Added styles.track.colors to define the color of each track segment when using multiple values.

Slider Multiple Color Segment

  • Flow Diagram: Added support for per-node and per-edge Designer styling via the className property.
  • Flow Diagram: Added a defaultStyle option for all nodes and edges.
  • Flow Diagram: Added support for dragging node handles instead of manually entering offset values in the UI.

Flow Diagram Handle Reposition

  • Flow Diagram: Exposed the onlyRenderVisibleElements option to improve performance in large diagrams. When enabled, only the nodes and edges currently within the visible viewport are rendered.
  • Flow Diagram: Added performance.mode to improve rendering performance by replacing embedded views with lightweight placeholder boxes while zoomed out.

Flow Diagram Perfromance mode

  • Flow Diagram: Added addNodes() and addEdges() component functions to improve performance in large-scale diagrams. These functions inject node and edge data directly into the component without exposing them through Perspective properties. For the best performance, use them with dataMode: "local".
  • Flow Diagram: Added the dataMode property. When set to props, nodes and edges remain synchronized through Perspective properties. When set to local, node and edge data is stored in the browser's memory, avoiding large WebSocket updates and improving performance.
  • Flow Diagram: Added support for box selection, multi-selection, and Undo for node and edge editing operations.

Box Selection and undo in Flow Diagram

Bug Fixes

  • The demo project is no longer recreated on gateway startup if it has been deleted by the user.
  • Replaced per-component license polling with a shared poller, reducing unnecessary background activity.
  • eChart: runJs() now uses ctx instead of chart to reference the component to make runJs() compatible with other components.
  • Slider: Fixed the Designer selection box so it properly covers the component.
  • Flow Diagram: Removed the redundant node.data.style property from the Flow Diagram schema.
  • Flow Diagram: Optimized rendering by eliminating O(n²) lookups and unnecessary array allocations.
  • Flow Diagram: Removed hardcoded borders and backgrounds from built-in Flow nodes.
  • Flow Diagram: Fixed an issue where resizing a node could unintentionally remove existing styles.
7 Likes
44

Could you expose React Flow’s preventScrolling prop on the Zoom & Pan Viewer component (com.vcortex.zoompan) under props.interaction?

React Flow defaults preventScrolling to true, so the wheel listener on .react-flow__renderer calls preventDefault(). As a result, the page cannot be scrolled while the cursor is over the component.

In our screen, we use:

zoomOnScroll: false
panOnScroll: false

Therefore, the mouse wheel does not perform any useful action inside the component, but it still prevents the parent page from scrolling.

props.interaction currently exposes:

panOnDrag
panOnScroll
panOnScrollMode
panOnScrollSpeed
zoomOnScroll
zoomOnPinch
zoomOnDoubleClick
minZoom
maxZoom

The only relevant React Flow option missing is:

preventScrolling

Our current workaround is a capture-phase wheel listener that stops propagation before React Flow receives the event. We would prefer not to rely on this workaround in production.

We are using Ignition 8.3.

45

Yes, this makes sense.

We’ll expose React Flow’s preventScrolling property under:

props.interaction.preventScrolling

We’ll include this in an upcoming vCortex release and let you know once it is available.

2 Likes
46

Thank you for this! I really enjoy using these extesion.

2 Likes