prospective-canvas v1.0.74

Simple Prespective Canvas Package

This package contains some simple classes to draw svg component on prespective designer.

Requirements:

• map your props into the following interface:

	export interface ComponentState {
	    name: string;
	    variant: string;
	    setup: any;                 // setup props
	    status: any;                // status props
	    clickEvent: any;            // component deselect props
	    deselectedEvent: any;       // component deselect props
	    information: any;           // information props to include in event
	}

  folow provided schemas for the above, except for information which is up to you to define

• Implement props write like below and 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 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> {
	    perspectiveComponent = 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.perspectiveComponent.className = "your-component";
	        this.perspectiveComponent.canvasRef = this.canvasRef;        
	        this.perspectiveComponent.componentDidMount();        
	    }

	    componentWillUnmount() {
	        this.perspectiveComponent.componentWillUnmount();        
	    }

	    componentDidUpdate() {  
	        this.mapProps(); 
	        const refreshRequired = this.componentDidUpdateTasks();      
	        this.perspectiveComponent.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 component will extend BaseComponent:

	class YourComponent extends BaseComponent<ConveyorProps, ComponentState>