Sysml Ports and Flows Entities

Item Flow

Preview

Usage

import { ItemFlow } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<ItemFlow/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ITEM_FLOW } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, ITEM_FLOW)}
  />

Definition

{
  _style: {
    entity: 'html=1;shape=mxgraph.sysml.itemFlow;fontStyle=1;flowDir=S;flowType=out;whiteSpace=wrap;align=center;',
  },
  _width: 120,
  _height: 180,
}

Item Flow 10

Preview

Usage

import { ItemFlow10 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<ItemFlow10/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ITEM_FLOW_10 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, ITEM_FLOW_10)}
  />

Definition

{
  _style: {
    entity: 'html=1;shape=mxgraph.sysml.itemFlowRight;fontStyle=1;whiteSpace=wrap;align=center;',
  },
  _width: 200,
  _height: 120,
}

Item Flow 2

Preview

Usage

import { ItemFlow2 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<ItemFlow2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ITEM_FLOW_2 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, ITEM_FLOW_2)}
  />

Definition

{
  _style: {
    entity: 'html=1;shape=mxgraph.sysml.itemFlow;fontStyle=1;flowDir=N;flowType=in;whiteSpace=wrap;align=center;',
  },
  _width: 1,
  _height: 180,
}

Item Flow 3

Preview

Usage

import { ItemFlow3 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<ItemFlow3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ITEM_FLOW_3 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, ITEM_FLOW_3)}
  />

Definition

{
  _style: {
    entity: 'edgeStyle=none;html=1;align=right;endArrow=none;exitX=0.5;exitY=1;entryX=0.5;entryY=0;',
  },
  _width: 2,
  _height: 180,
}

Item Flow 4

Preview

Usage

import { ItemFlow4 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<ItemFlow4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ITEM_FLOW_4 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, ITEM_FLOW_4)}
  />

Definition

{
  _style: {
    entity: 'html=1;shape=mxgraph.sysml.itemFlow;fontStyle=1;flowDir=e;flowType=none;spacingRight=20;whiteSpace=wrap;align=center;',
  },
  _width: 0,
  _height: 370,
}

Item Flow 5

Preview

Usage

import { ItemFlow5 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<ItemFlow5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ITEM_FLOW_5 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, ITEM_FLOW_5)}
  />

Definition

{
  _style: {
    entity: 'html=1;shape=mxgraph.sysml.itemFlow;fontStyle=1;flowDir=w;flowType=none;spacingLeft=15;whiteSpace=wrap;align=center;',
  },
  _width: 1,
  _height: 370,
}

Item Flow 6

Preview

Usage

import { ItemFlow6 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<ItemFlow6/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ITEM_FLOW_6 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, ITEM_FLOW_6)}
  />

Definition

{
  _style: {
    entity: 'edgeStyle=none;html=1;align=left;verticalAlign=top;endArrow=none;exitX=1;exitY=0.5;entryX=0;entryY=0.5;',
  },
  _width: 2,
  _height: 370,
}

Item Flow 7

Preview

Usage

import { ItemFlow7 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<ItemFlow7/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ITEM_FLOW_7 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, ITEM_FLOW_7)}
  />

Definition

{
  _style: {
    entity: 'shape=rect;html=1;overflow=fill;whiteSpace=wrap;recursiveResize=0;',
  },
  _width: 3,
  _height: 370,
}

Item Flow 8

Preview

Usage

import { ItemFlow8 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<ItemFlow8/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ITEM_FLOW_8 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, ITEM_FLOW_8)}
  />

Definition

{
  _style: {
    entity: 'endArrow=none;html=1;edgeStyle=elbowEdgeStyle;elbow=horizontal;dashed=1;',
  },
  _width: 4,
  _height: 370,
}

Item Flow 9

Preview

Usage

import { ItemFlow9 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<ItemFlow9/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ITEM_FLOW_9 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, ITEM_FLOW_9)}
  />

Definition

{
  _style: {
    entity: 'html=1;shape=mxgraph.sysml.itemFlowLeft;fontStyle=1;whiteSpace=wrap;align=center;',
  },
  _width: 200,
  _height: 120,
}

Item Flow East Out

Preview

Usage

import { ItemFlowEastOut } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<ItemFlowEastOut/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ITEM_FLOW_EAST_OUT } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, ITEM_FLOW_EAST_OUT)}
  />

Definition

{
  _style: {
    entity: 'html=1;shape=mxgraph.sysml.itemFlow;fontStyle=1;flowDir=e;flowType=out;whiteSpace=wrap;align=center;',
  },
  _width: 200,
  _height: 80,
}

Item Flow North In

Preview

Usage

import { ItemFlowNorthIn } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<ItemFlowNorthIn/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ITEM_FLOW_NORTH_IN } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, ITEM_FLOW_NORTH_IN)}
  />

Definition

{
  _style: {
    entity: 'html=1;shape=mxgraph.sysml.itemFlow;fontStyle=1;flowDir=n;flowType=in;whiteSpace=wrap;align=center;',
  },
  _width: 200,
  _height: 80,
}

Nested Port

Preview

Usage

import { NestedPort } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<NestedPort/>

// or

import { extendStyle } from "@dinghy/base-components";
import { NESTED_PORT } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, NESTED_PORT)}
  />

Definition

{
  _style: {
    entity: 'html=1;shape=mxgraph.sysml.nestedPort;fontStyle=1;whiteSpace=wrap;align=center;',
  },
  _width: 160,
  _height: 60,
}

Port

Preview

Usage

import { Port } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Port/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PORT } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, PORT)}
  />

Definition

{
  _style: {
    entity: 'html=1;shape=mxgraph.sysml.port1;fontStyle=1;whiteSpace=wrap;align=center;points=[[0,0.5,0],[1,0.5,0]];',
  },
  _width: 0,
  _height: 60,
}

Port (Compartment Notation)

Preview

Usage

import { PortCompartmentNotation } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<PortCompartmentNotation/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PORT_COMPARTMENT_NOTATION } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, PORT_COMPARTMENT_NOTATION)}
  />

Definition

{
  _style: {
    entity: 'fontStyle=1;align=center;verticalAlign=middle;childLayout=stackLayout;horizontal=1;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;marginBottom=0;',
  },
  _width: 0,
  _height: 70,
}

Port (Conjugated Ports)

Preview

Usage

import { PortConjugatedPorts } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<PortConjugatedPorts/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PORT_CONJUGATED_PORTS } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, PORT_CONJUGATED_PORTS)}
  />

Definition

{
  _style: {
    entity: 'html=1;shape=mxgraph.sysml.port2;fontStyle=1;spacingRight=20;whiteSpace=wrap;align=center;',
  },
  _width: 0,
  _height: 60,
}

Port, Double Flow, Horizontal

Preview

Usage

import { PortDoubleFlowHorizontal } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<PortDoubleFlowHorizontal/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PORT_DOUBLE_FLOW_HORIZONTAL } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, PORT_DOUBLE_FLOW_HORIZONTAL)}
  />

Definition

{
  _style: {
    entity: 'html=1;shape=mxgraph.sysml.port;sysMLPortType=doubleH;',
  },
  _original_width: 20,
  _original_height: 20,

}

Port, Flow North

Preview

Usage

import { PortFlowNorth } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<PortFlowNorth/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PORT_FLOW_NORTH } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, PORT_FLOW_NORTH)}
  />

Definition

{
  _style: {
    entity: 'html=1;shape=mxgraph.sysml.port;sysMLPortType=flowN;',
  },
  _original_width: 20,
  _original_height: 20,

}

Ports

Preview

Usage

import { Ports } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Ports/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PORTS } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, PORTS)}
  />

Definition

{
  _style: {
    entity: 'whiteSpace=wrap;align=center;html=1;',
  },
  _width: 0,
  _height: 160,
}

Ports with Flow Properties

Preview

Usage

import { PortsWithFlowProperties } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<PortsWithFlowProperties/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PORTS_WITH_FLOW_PROPERTIES } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, PORTS_WITH_FLOW_PROPERTIES)}
  />

Definition

{
  _style: {
    entity: 'html=1;shape=mxgraph.sysml.port3;fontStyle=1;whiteSpace=wrap;align=center;',
  },
  _width: 160,
  _height: 80,
}

Proxy Port

Preview

Usage

import { ProxyPort } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<ProxyPort/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PROXY_PORT } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, PROXY_PORT)}
  />

Definition

{
  _style: {
    entity: 'html=1;shape=mxgraph.sysml.port1;fontStyle=1;whiteSpace=wrap;align=center;',
  },
  _width: 0,
  _height: 60,
}

Required Interface

Preview

Usage

import { RequiredInterface } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<RequiredInterface/>

// or

import { extendStyle } from "@dinghy/base-components";
import { REQUIRED_INTERFACE } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, REQUIRED_INTERFACE)}
  />

Definition

{
  _style: {
    entity: 'html=1;shape=mxgraph.sysml.port4;fontStyle=1;whiteSpace=wrap;align=center;',
  },
  _width: 0,
  _height: 60,
}

Required Interface 2

Preview

Usage

import { RequiredInterface2 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<RequiredInterface2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { REQUIRED_INTERFACE_2 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, REQUIRED_INTERFACE_2)}
  />

Definition

{
  _style: {
    entity: 'edgeStyle=none;html=1;align=left;verticalAlign=bottom;endArrow=sysMLReqInt;endSize=8;exitX=0;exitY=0.5;',
  },
  _width: 1,
  _height: 60,
}

Required Interface 3

Preview

Usage

import { RequiredInterface3 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<RequiredInterface3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { REQUIRED_INTERFACE_3 } from '@dinghy/diagrams/entitiesSysmlPortsAndFlows'

<Shape 
  {...props}
  _style={extendStyle(props, REQUIRED_INTERFACE_3)}
  />

Definition

{
  _style: {
    entity: 'edgeStyle=none;html=1;align=left;verticalAlign=top;endArrow=sysMLProvInt;endSize=12;exitX=0;exitY=0.5;',
  },
  _width: 2,
  _height: 60,
}