svg-layout-designer-react/src/Interfaces/IContainerProperties.ts
2022-10-18 14:13:47 +02:00

127 lines
2.9 KiB
TypeScript

import * as React from 'react';
import { PositionReference } from '../Enums/PositionReference';
import { IMargin } from './IMargin';
import { Orientation } from '../Enums/Orientation';
import { Position } from '../Enums/Position';
import { IKeyValue } from './IKeyValue';
/**
* Properties of a container
*/
export interface IContainerProperties {
/** id of the container */
id: string
/** type matching the configuration on construction */
type: 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
/** orientation */
orientation: Orientation
/** horizontal offset */
x: number
/** vertical offset */
y: number
/** margin */
margin: IMargin
/** width */
width: number
/** height */
height: number
/**
* Minimum width (min=1)
*/
minWidth: number
/**
* Maximum width
*/
maxWidth: number
/**
* Minimum height (min=1)
*/
minHeight: number
/**
* Maximum height
*/
maxHeight: number
/** true if anchor, false otherwise */
isAnchor: boolean
/** true if flex, false otherwise */
isFlex: boolean
/** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */
positionReference: PositionReference
/** Hide the children in the treeview */
hideChildrenInTreeview: boolean
/** if true, show the dimension of the container */
showSelfDimensions: Position[]
/** if true show the overall dimensions of its children */
showChildrenDimensions: Position[]
/**
* if true, allows a parent dimension borrower to borrow its x coordinate
* as a reference point for a dimension
*/
markPosition: Orientation[]
/**
* if true, show a dimension from the edge of the container to end
* and insert dimensions marks at lift up children (see liftDimensionToBorrower)
*/
showDimensionWithMarks: Position[]
/**
* Warnings of a container
*/
warning: string
/**
* (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?: IKeyValue[]
}