svg-layout-designer-react/src/Interfaces/IContainerProperties.ts
Eric Nguyen 29625dce28
All checks were successful
continuous-integration/drone/push Build is passing
Merged PR 164: Clear the leftover TODOs
- Remove nullable type from container.properties.parentId
- Add Swal when trying to delete main container
- Moved default editor state to default.ts
- Moved default symbol model to default.ts
2022-08-22 15:03:46 +00:00

75 lines
1.9 KiB
TypeScript

import * as React from 'react';
import { XPositionReference } from '../Enums/XPositionReference';
/**
* Properties of a container
*/
export default interface IContainerProperties {
/** id of the container */
id: string
/** id of the parent container (null when there is no parent) */
parentId: string
/** id of the linked symbol ('' when there is no parent) */
linkedSymbolId: string
/** Text displayed in the container */
displayedText: string
/** horizontal offset */
x: number
/** vertical offset */
y: number
/**
* Minimum width (min=1)
* Allows the container to set isRigidBody to false when it gets squeezed
* by an anchor
*/
minWidth: number
/** width */
width: number
/** height */
height: number
/** true if rigid, false otherwise */
isRigidBody: boolean
/** true if anchor, false otherwise */
isAnchor: boolean
/** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */
XPositionReference: XPositionReference
/**
* (optional)
* Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows
* to draw some patterns that can be bind to the properties of the container
* Use {prop} to bind a property. Use {{ styleProp }} to use an object.
* Example :
* ```
* `<rect width="{width}" height="{height}" style="{style}"></rect>
* <rect width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>
* <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line>
* <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line>
* `
* ```
*/
customSVG?: string
/**
* (optional)
* Style of the <rect>
*/
style?: React.CSSProperties
/**
* (optional)
* User data that can be used for data storage or custom SVG
*/
userData?: object
}