https://react-mindee-js.netlify.app/assets/js/2661d18d.da76d384.js

1"use strict";(globalThis.webpackChunkmy_website=globalThis.webpackChunkmy_website||[]).push([[685],{3805(e,n,a){a.d(n,{xA:()=>u,yg:()=>c});var t=a(758);function o(e,n,a){return n in e?Object.defineProperty(e,n,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[n]=a,e}function i(e,n){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),a.push.apply(a,t)}return a}function r(e){for(var n=1;n<arguments.length;n++){var a=null!=arguments[n]?arguments[n]:{};n%2?i(Object(a),!0).forEach(function(n){o(e,n,a[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(a,n))})}return e}function l(e,n){if(null==e)return{};var a,t,o=function(e,n){if(null==e)return{};var a,t,o={},i=Object.keys(e);for(t=0;t<i.length;t++)a=i[t],n.indexOf(a)>=0||(o[a]=e[a]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)a=i[t],n.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(o[a]=e[a])}return o}var p=t.createContext({}),s=function(e){var n=t.useContext(p),a=n;return e&&(a="function"==typeof e?e(n):r(r({},n),e)),a},u=function(e){var n=s(e.components);return t.createElement(p.Provider,{value:n},e.children)},g={inlineCode:"code",wrapper:function(e){var n=e.children;return t.createElement(t.Fragment,{},n)}},m=t.forwardRef(function(e,n){var a=e.components,o=e.mdxType,i=e.originalType,p=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),m=s(a),c=o,y=m["".concat(p,".").concat(c)]||m[c]||g[c]||i;return a?t.createElement(y,r(r({ref:n},u),{},{components:a})):t.createElement(y,r({ref:n},u))});function c(e,n){var a=arguments,o=n&&n.mdxType;if("string"==typeof e||o){var i=a.length,r=new Array(i);r[0]=m;var l={};for(var p in n)hasOwnProperty.call(n,p)&&(l[p]=n[p]);l.originalType=e,l.mdxType="string"==typeof e?e:o,r[1]=l;for(var s=2;s<i;s++)r[s]=a[s];return t.createElement.apply(null,r)}return t.createElement.apply(null,a)}m.displayName="MDXCreateElement"},9923(e,n,a){a.r(n),a.d(n,{contentTitle:()=>r,default:()=>u,frontMatter:()=>i,metadata:()=>l,toc:()=>p});var t=a(5062),o=(a(758),a(3805));const i={sidebar_position:1},r="AnnotationViewer",l={unversionedId:"API/annotation-viewer-api",id:"API/annotation-viewer-api",isDocsHomePage:!1,title:"AnnotationViewer",description:"AnnotationViewer use KonvaJs (HTML5 2d canvas js library for desktop and mobile applications)",source:"@site/docs/API/annotation-viewer-api.mdx",sourceDirName:"API",slug:"/API/annotation-viewer-api",permalink:"/docs/API/annotation-viewer-api",editUrl:"https://github.com/mindee/react-mindee-js/docs/API/annotation-viewer-api.mdx",version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Controlled zoom",permalink:"/docs/Tutorial/dynamic-zoom"},next:{title:"AnnotationLens",permalink:"/docs/API/annotation-lens-api"}},p=[{value:"data",id:"data",children:[]},{value:"options",id:"options",children:[]},{value:"onShapeMouseEnter",id:"onshapemouseenter",children:[]},{value:"onShapeMouseLeave",id:"onshapemouseleave",children:[]},{value:"onShapeClick",id:"onshapeclick",children:[]},{value:"getStage",id:"getstage",children:[]},{value:"onShapeMultiSelect",id:"onshapemultiselect",children:[]},{value:"onPointerMove",id:"onpointermove",children:[]},{value:"customStagePosition",id:"customstageposition",children:[]},{value:"customZoomLevel",id:"customzoomlevel",children:[]},{value:"style",id:"style",children:[]},{value:"className",id:"classname",children:[]}],s={toc:p};function u({components:e,...n}){return(0,o.yg)("wrapper",(0,t.A)({},s,n,{components:e,mdxType:"MDXLayout"}),(0,o.yg)("h1",{id:"annotationviewer"},"AnnotationViewer"),(0,o.yg)("div",{className:"admonition admonition-info alert alert--info"},(0,o.yg)("div",{parentName:"div",className:"admonition-heading"},(0,o.yg)("h5",{parentName:"div"},(0,o.yg)("span",{parentName:"h5",className:"admonition-icon"}

1,(0,o.yg)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,o.yg)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"info")),(0,o.yg)("div",{parentName:"div",className:"admonition-content"},(0,o.yg)("p",{parentName:"div"},(0,o.yg)("strong",{parentName:"p"},"AnnotationViewer")," use ",(0,o.yg)("strong",{parentName:"p"},(0,o.yg)("a",{parentName:"strong",href:"https://konvajs.org"},"KonvaJs"))," (HTML5 2d canvas js library for desktop and mobile applications)"))),(0,o.yg)("h3",{id:"data"},"data"),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},"Type : ",(0,o.yg)("inlineCode",{parentName:"li"},"object")),(0,o.yg)("li",{parentName:"ul"},"Required : ",(0,o.yg)("inlineCode",{parentName:"li"},"true")),(0,o.yg)("li",{parentName:"ul"},"Interface")),(0,o.yg)("pre",null,(0,o.yg)("code",{parentName:"pre",className:"language-tsx"},"type AnnotationData = {\n  image: string\n  orientation: 0 | 90 | 180 | 270\n  shapes: AnnotationShape[]\n}\n\ntype AnnotationShape = {\n  id: string\n  coordinates: number[][]\n  config?: LineConfig\n}\n")),(0,o.yg)("blockquote",null,(0,o.yg)("p",{parentName:"blockquote"},(0,o.yg)("strong",{parentName:"p"},"image")," property should be either an URL object or a base64. If you have an object of type ",(0,o.yg)("a",{parentName:"p",href:"https://developer.mozilla.org/fr/docs/Web/API/File"},"File")," ( typically generated by file upload libraries) instead you may need to use ",(0,o.yg)("a",{parentName:"p",href:"https://developer.mozilla.org/fr/docs/Web/API/URL/createObjectURL"},"URL.createObjectURL()")," to generate a valid URL object.")),(0,o.yg)("div",{className:"admonition admonition-caution alert alert--warning"},(0,o.yg)("div",{parentName:"div",className:"admonition-heading"},(0,o.yg)("h5",{parentName:"div"},(0,o.yg)("span",{parentName:"h5",className:"admonition-icon"},(0,o.yg)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"},(0,o.yg)("path",{parentName:"svg",fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"}))),"caution")),(0,o.yg)("div",{parentName:"div",className:"admonition-content"},(0,o.yg)("p",{parentName:"div"},"you must provide a unique ",(0,o.yg)("strong",{parentName:"p"},"id")," to each shape for optimization matters."))),(0,o.yg)("p",null,"Check ",(0,o.yg)("a",{parentName:"p",href:"https://konvajs.org/api/Konva.Line.html#main"},"LineConfig")," for more params."),(0,o.yg)("hr",null),(0,o.yg)("h3",{id:"options"},"options"),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},"Type : ",(0,o.yg)("inlineCode",{parentName:"li"},"Object")),(0,o.yg)("li",{parentName:"ul"},"Interface :")),(0,o.yg)("pre",null,(0,o.yg)("code",{parentName:"pre",className:"language-ts"},"interface AnnotationViewerOptions {\n  shapeConfig?: LineConfig\n  selectionRectConfig?: RectConfig\n  enableSelection?: boolean\n  onMouseEnter?: (polygon: Line) => void\n  onMouseLeave?: (polygon: Line) => void\n  onClick?: (polygon: Line) => void\n  zoom?: {\n    modifier: number\n    max: number\n    defaultZoom: number\n  }\n}\n")),(0,o.yg)("blockquote",null,(0,o.yg)("ul",{parentName:"blockquote"},(0,o.yg)("li",{parentName:"ul"},"Object of options to change default style and behavior. Here you can pass a custom style to all shape as you may do for each one."))),(0,o.yg)("h4",{id:"check-customization-section-for-more-details"},"Check ",(0,o.yg)("a",{parentName:"h4",href:"/docs/customization"},"Customization")," section for more details."),(0,o.yg)("hr",null),(0,o.yg)("h3",{id:"onshapemouseenter"},"onShapeMouseEnter"),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},"Signature : ",(0,o.yg)("inlineCode",{parentName:"li"},"(shape: AnnotationShape) => void"))),(0,o.yg)("blockquote",null,(0,o.yg)("p",{parentName:"blockquote"},"Return the shape on mouse enter event. Check ",(0,o.yg)("a",{parentName:"p",href:"https://konvajs.org/api/Konva.Line.html#main"},"LineConfig")," for more params..")),(0,o.yg)("p",null,"Check ",(0,o.yg)("a",{parentName:"p",href:"/docs/API/annotation-viewer-api#data"},"AnnotationViewer")),(0,o.yg)("hr",null),(0,o.yg)("h3",{id:"onshapemouseleave"},"onShapeMouseLeave"),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},"Signature : ",(0,o.yg)("inlineCode",{parentName:"li"},"(shape: AnnotationShape) => void"))),(0,o.yg)("blockquote",null,(0,o.yg)("p",{parentName:"blockquote"},"Return the shape on mouse leave event. Check ",(0,o.yg)("a",{parentName:"p",href:"https://konvajs.org/api/Konva.Line.html#main"},"LineConfig")," for more params..")),(0,o.yg)("p",null,"Check ",(0,o.yg)("a",{parentName:"p",href:"/docs/API/annotation-viewer-api#data"},"AnnotationViewer")),(0,o.yg)("hr",null),(0,o.yg)("h3",{id:"onshapeclick"},"onShapeClick"),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},"Signature : ",(0,o.yg)("inlineCode",{parentName:"li"},"(shape: AnnotationShape) => void"))),(0,o.yg)("blockquote",null,(0,o.yg)("p",{parentName:"blockquote"},"Return the shape on click event. Check ",(0,o.yg)("a",{parentName:"p",href:"https://konvajs.org/api/Konva.Line.html#main"},"LineConfig")," for more params..")),(0,o.yg)("p",null,"Check ",(0,o.yg)("a",{parentName:"p",href:"/docs/API/annotation-viewer-api#data"},"AnnotationViewer")),(0,o.yg)("hr",null),(0,o.yg)("h3",{id:"getstage"},"getStage"),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},"Signature : ",(0,o.yg)("inlineCode",{parentName:"li"},"(stage: Stage) => void"))),(0,o.yg)("blockquote",null,(0,o.yg)("p",{parentName:"blockquote"},"Return the stage object. Check ",(0,o.yg)("a",{parentName:"p",href:"https://konvajs.org/api/Konva.Stage.html#Stage"},"Stage")," for more details..")),(0,o.yg)("hr",null),(0,o.yg)("h3",{id:"onshapemultiselect"},"onShapeMultiSelect"),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},"Signature : ",(0,o.yg)("inlineCode",{parentName:"li"},"(selectedShapes: AnnotationShape[]) => void"))),(0,o.yg)("blockquote",null,(0,o.yg)("p",{parentName:"blockquote"},"Return the selected shapes")),(0,o.yg)("hr",null),(0,o.yg)("h3",{id:"onpointermove"},"onPointerMove"),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},"Signature : ",(0,o.yg)("inlineCode",{parentName:"li"},"(pointerPosition: PointerPosition) => void"))),(0,o.yg)("blockquote",null,(0,o.yg)("p",{parentName:"blockquote"},"Return the pointer position on mouse move event")),(0,o.yg)("pre",null,(0,o.yg)("code",{parentName:"pre",className:"language-tsx"},"type PointerPosition = {\n  x: number\n  y: number\n}\n")),(0,o.yg)("hr",null),(0,o.yg)("h3",{id:"customstageposition"},"customStagePosition"),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},"Type : ",(0,o.yg)("inlineCode",{parentName:"li"},"PointerPosition")),(0,o.yg)("li",{parentName:"ul"},"Default : ",(0,o.yg)("inlineCode",{parentName:"li"},"undefined"))),(0,o.yg)("blockquote",null,(0,o.yg)("p",{parentName:"blockquote"},"Controlled stage position")),(0,o.yg)("pre",null,(0,o.yg)("code",{parentName:"pre",className:"language-javascript"},"type PointerPosition = {\n  x: number,\n  y: number,\n}\n")),(0,o.yg)("hr",null),(0,o.yg)("h3",{id:"customzoomlevel"},"customZoomLevel"),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},"Type : ",(0,o.yg)("inlineCode",{parentName:"li"},"number")),(0,o.yg)("li",{parentName:"ul"},"Default : ",(0,o.yg)("inlineCode",{parentName:"li"},"1"))),(0,o.yg)("blockquote",null,(0,o.yg)("p",{parentName:"blockquote"},"Controlled zoom level")),(0,o.yg)("hr",null),(0,o.yg)("h3",{id:"style"},"style"),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},"Type : ",(0,o.yg)("inlineCode",{parentName:"li"},"CSSProperties"))),(0,o.yg)("blockquote",null,(0,o.yg)("p",{parentName:"blockquote"},"CSS object")),(0,o.yg)("hr",null),(0,o.yg)("h3",{id:"classname"},"className"),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},"Type : ",(0,o.yg)("inlineCode",{parentName:"li"},"string"))),(0,o.yg)("blockquote",null,(0,o.yg)("p",{parentName:"blockquote"},"Container className")))}u.isMDXComponent=!0}}]);