This package contains some simple classes to render component on canvas in prespective designer.
- Implement write function add to the props.json of your object
// this must be implemented to provide access to props write
writeStatus(isSelected: boolean, clickCounter: number): void {
this.props.props.writeStatus(isSelected,clickCounter);
}- create an abstract BaseComponent class like below. this is the base component where all common functions and properties will be defined.
export abstract class BaseComponent<T extends object, U> extends Component<ComponentProps<T>, U> {
prespectiveComponent = new PrespectiveComponent(this.refreshFigure.bind(this),this.writeStatus.bind(this));
canvasRef: React.RefObject<SVGSVGElement> = React.createRef();
componentDidMount() {
// pass canvas reference for drawing
this.mapProps();
this.prespectiveComponent.className = "your-component";
this.prespectiveComponent.canvasRef = this.canvasRef;
this.prespectiveComponent.componentDidMount();
}
componentWillUnmount() {
this.prespectiveComponent.componentWillUnmount();
}
componentDidUpdate() {
this.mapProps();
const refreshRequired = this.componentDidUpdateTasks();
this.prespectiveComponent.componentDidUpdate(refreshRequired);
}
// refreshFigure to be implemented in actual class
abstract refreshFigure(): void;
abstract writeStatus(isSelected: boolean, clickCounter: number): void;
protected abstract mapProps(): void;
abstract componentDidUpdateTasks(): boolean; // any thing to be dome before componentDidUpdate
} - your components extend BaseComponent:
class YourComponent extends BaseComponent<ConveyorProps, ComponentState>