Simple Prespective Canvas Package

This package contains some simple classes to render component on canvas in prespective designer.

How To Use:

• 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>