Mockup Markup Entities

Horizontal Curly Brace

Preview

Usage

import { HorizontalCurlyBrace } from '@dinghy/diagrams/entitiesMockupMarkup'

<HorizontalCurlyBrace/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_CURLY_BRACE } from '@dinghy/diagrams/entitiesMockupMarkup'

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

Definition

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.markup.curlyBrace;whiteSpace=wrap;strokeColor=#999999;',
  },
  _width: 100,
  _height: 20,
}

Horizontal Line

Preview

Usage

import { HorizontalLine } from '@dinghy/diagrams/entitiesMockupMarkup'

<HorizontalLine/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_LINE } from '@dinghy/diagrams/entitiesMockupMarkup'

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

Definition

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.markup.line;strokeColor=#999999;',
  },
  _width: 100,
  _height: 20,
}

Red X

Preview

Usage

import { RedX } from '@dinghy/diagrams/entitiesMockupMarkup'

<RedX/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RED_X } from '@dinghy/diagrams/entitiesMockupMarkup'

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

Definition

{
  _style: {
    entity: 'shape=mxgraph.mockup.markup.redX;fillColor=#ff0000;html=1;shadow=0;whiteSpace=wrap;strokeColor=none;',
  },
  _width: 200,
  _height: 100,
}

Scratch Out

Preview

Usage

import { ScratchOut } from '@dinghy/diagrams/entitiesMockupMarkup'

<ScratchOut/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SCRATCH_OUT } from '@dinghy/diagrams/entitiesMockupMarkup'

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

Definition

{
  _style: {
    entity: 'shape=mxgraph.mockup.markup.scratchOut;shadow=0;dashed=0;html=1;whiteSpace=wrap;strokeColor=#999999;strokeWidth=4;',
  },
  _width: 200,
  _height: 100,
}

Vertical Curly Brace

Preview

Usage

import { VerticalCurlyBrace } from '@dinghy/diagrams/entitiesMockupMarkup'

<VerticalCurlyBrace/>

// or

import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_CURLY_BRACE } from '@dinghy/diagrams/entitiesMockupMarkup'

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

Definition

{
  _style: {
    entity: 'labelPosition=right;align=left;strokeWidth=1;shape=mxgraph.mockup.markup.curlyBrace;html=1;shadow=0;dashed=0;strokeColor=#999999;direction=north;',
  },
  _width: 20,
  _height: 100,
}

Vertical Line

Preview

Usage

import { VerticalLine } from '@dinghy/diagrams/entitiesMockupMarkup'

<VerticalLine/>

// or

import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_LINE } from '@dinghy/diagrams/entitiesMockupMarkup'

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

Definition

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.markup.line;strokeColor=#999999;direction=north;',
  },
  _width: 20,
  _height: 100,
}