How to use vott-ct - 10 common examples

public static createTestRegionData() {
        const origin = {
            x: randomIntInRange(0, 1024),
            y: randomIntInRange(0, 768),
        };
        const size = {
            width: randomIntInRange(1, 100),
            height: randomIntInRange(1, 100),
        };

        return new RegionData(origin.x, origin.y, size.width, size.height,
            [
                new Point2D(origin.x, origin.y), // Top left
                new Point2D(origin.x + size.width, origin.y), // Top Right
                new Point2D(origin.x, origin.y + size.height), // Bottom Left
                new Point2D(origin.x + size.width, origin.y + size.height), // Bottom Right
            ],
            RegionDataType.Rect);
    }
    /**

public static createTestRegionData() {
        const origin = {
            x: randomIntInRange(0, 1024),
            y: randomIntInRange(0, 768),
        };
        const size = {
            width: randomIntInRange(1, 100),
            height: randomIntInRange(1, 100),
        };

        return new RegionData(origin.x, origin.y, size.width, size.height,
            [
                new Point2D(origin.x, origin.y), // Top left
                new Point2D(origin.x + size.width, origin.y), // Top Right
                new Point2D(origin.x, origin.y + size.height), // Bottom Left
                new Point2D(origin.x + size.width, origin.y + size.height), // Bottom Right
            ],
            RegionDataType.Rect);
    }
    /**

public static createTestRegionData() {
        const origin = {
            x: randomIntInRange(0, 1024),
            y: randomIntInRange(0, 768),
        };
        const size = {
            width: randomIntInRange(1, 100),
            height: randomIntInRange(1, 100),
        };

        return new RegionData(origin.x, origin.y, size.width, size.height,
            [
                new Point2D(origin.x, origin.y), // Top left
                new Point2D(origin.x + size.width, origin.y), // Top Right
                new Point2D(origin.x, origin.y + size.height), // Bottom Left
                new Point2D(origin.x + size.width, origin.y + size.height), // Bottom Right
            ],
            RegionDataType.Rect);
    }
    /**

public static createTestRegionData() {
        const origin = {
            x: randomIntInRange(0, 1024),
            y: randomIntInRange(0, 768),
        };
        const size = {
            width: randomIntInRange(1, 100),
            height: randomIntInRange(1, 100),
        };

        return new RegionData(origin.x, origin.y, size.width, size.height,
            [
                new Point2D(origin.x, origin.y), // Top left
                new Point2D(origin.x + size.width, origin.y), // Top Right
                new Point2D(origin.x, origin.y + size.height), // Bottom Left
                new Point2D(origin.x + size.width, origin.y + size.height), // Bottom Right
            ],
            RegionDataType.Rect);
    }
    /**

// Handles when the canvas is enabled & disabled
        if (prevState.enabled !== this.state.enabled) {
            // When the canvas is ready to display
            if (this.state.enabled) {
                this.refreshCanvasToolsRegions();
                this.setContentSource(this.state.contentSource);
                this.editor.AS.setSelectionMode(this.props.selectionMode);
                this.editor.AS.enable();

                if (this.props.onSelectedRegionsChanged) {
                    this.props.onSelectedRegionsChanged(this.getSelectedRegions());
                }
            } else { // When the canvas has been disabled
                this.editor.AS.disable();
                this.clearAllRegions();
                this.editor.AS.setSelectionMode(SelectionMode.NONE);
            }
        }
    }

private onSelectionEnd = (regionData: RegionData) => {
        if (CanvasHelpers.isEmpty(regionData)) {
            return;
        }
        const id = shortid.generate();

        this.editor.RM.addRegion(id, regionData, null);

        this.template = new Rect(regionData.width, regionData.height);

        // RegionData not serializable so need to extract data
        const scaledRegionData = this.editor.scaleRegionToSourceSize(
            regionData,
            this.state.currentAsset.asset.size.width,
            this.state.currentAsset.asset.size.height,
        );
        const lockedTags = this.props.lockedTags;
        const newRegion = {
            id,
            type: this.editorModeToType(this.props.editorMode),
            tags: lockedTags || [],
            boundingBox: {
                height: scaledRegionData.height,
                width: scaledRegionData.width,
                left: scaledRegionData.x,

public static createTestRegionData() {
        const origin = {
            x: randomIntInRange(0, 1024),
            y: randomIntInRange(0, 768),
        };
        const size = {
            width: randomIntInRange(1, 100),
            height: randomIntInRange(1, 100),
        };

        return new RegionData(origin.x, origin.y, size.width, size.height,
            [
                new Point2D(origin.x, origin.y), // Top left
                new Point2D(origin.x + size.width, origin.y), // Top Right
                new Point2D(origin.x, origin.y + size.height), // Bottom Left
                new Point2D(origin.x + size.width, origin.y + size.height), // Bottom Right
            ],
            RegionDataType.Rect);
    }
    /**

x: randomIntInRange(0, 1024),
            y: randomIntInRange(0, 768),
        };
        const size = {
            width: randomIntInRange(1, 100),
            height: randomIntInRange(1, 100),
        };

        return new RegionData(origin.x, origin.y, size.width, size.height,
            [
                new Point2D(origin.x, origin.y), // Top left
                new Point2D(origin.x + size.width, origin.y), // Top Right
                new Point2D(origin.x, origin.y + size.height), // Bottom Left
                new Point2D(origin.x + size.width, origin.y + size.height), // Bottom Right
            ],
            RegionDataType.Rect);
    }
    /**

public componentDidUpdate = async (prevProps: Readonly, prevState: Readonly) => {
        if (this.props.selectedAsset.asset.id !== prevProps.selectedAsset.asset.id) {
            this.setState({ currentAsset: this.props.selectedAsset });
        }

        // Handle selection mode changes
        if (this.props.selectionMode !== prevProps.selectionMode) {
            const options = (this.props.selectionMode === SelectionMode.COPYRECT) ? this.template : null;
            this.editor.AS.setSelectionMode({ mode: this.props.selectionMode, template: options });
        }

        // When the project tags change re-apply tags to regions
        if (this.props.project.tags !== prevProps.project.tags) {
            this.updateCanvasToolsRegions();
        }

        // Handles when the canvas is enabled & disabled
        if (prevState.enabled !== this.state.enabled) {
            // When the canvas is ready to display
            if (this.state.enabled) {
                this.refreshCanvasToolsRegions();
                this.setContentSource(this.state.contentSource);
                this.editor.AS.setSelectionMode(this.props.selectionMode);
                this.editor.AS.enable();

            points: regionData.points.map((point) => new Point2D(point.x, point.y)),
            tags: [],