image patch component

The project preferable developed using react-konva. But let me know if you have some alternatives to suggest. React component requirements: * shows specified grayscale image (main image) * shows transparent color rect with text * shows fixes which are pngs with transparent/white its pos/center * allows scale and navigation Navigation: * allows to scale image by mouse wheel (or +/-) (uses set of percens): 25, 33, 50, 67, 75, 80, 90, 100, 110, 125, 150, 175, 200, 250, 300, 500 * allows to scale image same way and with ctrl pressed uses step of 10% * allows to navgate image using mouse button with ctrl (or middle button) Shows rect: * rect have transparent border and more transparent filling (some color) * able to create rect by clicking one place and release another place * text with same as border color near of the rect (with some default text) * mark one rect in internal state as selected by clicking mouse * change text of rect via input appears near the rect * text edition begins after click on selected rect, edition fished by enter * able to move rect using mouse * able to resize rect draging by edge Image Fixes Entity: * the fix is an image with transparent and black * the fix has center provided by cx,cy * the fix has position of its center on main image x,y * fixes are representing as array of {png, x, y, cx, cy} Show fixes: * "apply mode" - perform fixing of blurs of main image, actually this shows fixes uses white color, so white pixels of each fix zap the pixels on main image (make it white) transparent pixels of fix leave pixels of main image untouched * "highlight mode" - same as "apply mode" but shows all fixes in magenta * mark one rect in internal state as selected by clicking mouse * selected fix is shown in red color Component minimal required props * mode: 'apply', 'highlight', 'rect', ... * onClick: ({x,y}) coordinates on (workspace) base image (incapsulated scale) * image: base image * rects: array of rect descriptors {_id, x,y, width, height, text} * rectsUpdate: update rect list on change * fixes: array of fixes {_id, png, x, y, cx, cy} * fixesUpdate: update rect list on change