@labelbee/lb-components 1.11.0-alpha.3 → 1.11.0-alpha.4

package/dist/components/AnnotationView/index.js

@@ -1 +1 @@
-"use strict";var React=require("react"),lbAnnotation=require("@labelbee/lb-annotation"),es=require("antd/es"),useRefCache=require("../../hooks/useRefCache.js");function _interopDefaultLegacy(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var React__default=_interopDefaultLegacy(React),__defProp=Object.defineProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,o)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,__spreadValues=(e,t)=>{for(var o in t||(t={}))__hasOwnProp.call(t,o)&&__defNormalProp(e,o,t[o]);if(__getOwnPropSymbols)for(var o of __getOwnPropSymbols(t))__propIsEnum.call(t,o)&&__defNormalProp(e,o,t[o]);return e};const DEFAULT_SIZE={width:500,height:100},sizeInitialized=e=>{if(!e)return DEFAULT_SIZE;if(e.width&&e.height)return e;const t=__spreadValues({},e);return t.width||(t.width=DEFAULT_SIZE.width),t.height||(t.height=DEFAULT_SIZE.height),t},AnnotationView=(e,t)=>{var o,h;const{src:g,annotations:l=[],style:m={stroke:"blue",thickness:3},zoomChange:s,backgroundStyle:p={},onChange:c,showLoading:w=!1,globalStyle:b,afterImgOnLoad:y}=e,f=sizeInitialized(e.size),[I,d]=React.useState(!1),v=React.useRef(null),r=React.useRef(),_=useRefCache(y);React.useImperativeHandle(t,()=>{const n=r.current;return n?{zoomIn:()=>n.zoomChanged(!0),zoomOut:()=>n.zoomChanged(!1),initImgPos:()=>n.initImgPos(),toolInstance:n}:{}},[r.current]),React.useEffect(()=>(v.current&&(r.current=new lbAnnotation.ViewOperation({container:v.current,size:f,style:m,annotations:l,config:"{}"}),r.current.init()),()=>{var n;(n=r.current)==null||n.destroy()}),[]),React.useEffect(()=>{var n;r.current&&(d(!0),(n=r.current)==null||n.setLoading(!0),lbAnnotation.ImgUtils.load(g).then(i=>{var a,u;(a=r.current)==null||a.setLoading(!1),d(!1),(u=r.current)==null||u.setImgNode(i),_.current&&_.current(i)}).catch(()=>{var i;(i=r.current)==null||i.setLoading(!1),d(!1)}))},[g]),React.useEffect(()=>{r.current&&r.current.updateData(l)},[l]),React.useEffect(()=>{const n=r.current;(n==null?void 0:n.setSize)&&(n.setSize(f),n.initPosition())},[(o=e.size)==null?void 0:o.width,(h=e.size)==null?void 0:h.height]),React.useEffect(()=>{var n,i;return r.current&&((n=r.current)==null||n.on("onChange",(...a)=>{c==null||c.apply(null,a)}),(i=r.current)==null||i.on("renderZoom",a=>{s&&s(a)})),()=>{var a,u;(a=r.current)==null||a.unbindAll("onChange"),(u=r.current)==null||u.unbindAll("renderZoom")}},[s,c]);const O=React__default.default.createElement("div",{ref:v,style:__spreadValues(__spreadValues({position:"relative"},f),p)});return React__default.default.createElement(es.Spin,{spinning:w||I,delay:300,style:b},O)};var AnnotationView$1=React__default.default.forwardRef(AnnotationView);module.exports=AnnotationView$1;
+"use strict";var React=require("react"),lbAnnotation=require("@labelbee/lb-annotation"),es=require("antd/es"),useRefCache=require("../../hooks/useRefCache.js");function _interopDefaultLegacy(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var React__default=_interopDefaultLegacy(React),__defProp=Object.defineProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,o)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,__spreadValues=(e,t)=>{for(var o in t||(t={}))__hasOwnProp.call(t,o)&&__defNormalProp(e,o,t[o]);if(__getOwnPropSymbols)for(var o of __getOwnPropSymbols(t))__propIsEnum.call(t,o)&&__defNormalProp(e,o,t[o]);return e};const DEFAULT_SIZE={width:500,height:100},sizeInitialized=e=>{if(!e)return DEFAULT_SIZE;if(e.width&&e.height)return e;const t=__spreadValues({},e);return t.width||(t.width=DEFAULT_SIZE.width),t.height||(t.height=DEFAULT_SIZE.height),t},AnnotationView=(e,t)=>{var o,h;const{src:g,annotations:l=[],style:m={stroke:"blue",thickness:3},zoomChange:s,backgroundStyle:w={},onChange:c,showLoading:p=!1,globalStyle:b,afterImgOnLoad:y}=e,f=sizeInitialized(e.size),[I,d]=React.useState(!1),v=React.useRef(null),r=React.useRef(),_=useRefCache(y);React.useImperativeHandle(t,()=>{const n=r.current;return n?{zoomIn:()=>n.zoomChanged(!0),zoomOut:()=>n.zoomChanged(!1),initImgPos:()=>n.initImgPos(),toolInstance:n}:{}},[r.current]),React.useEffect(()=>(v.current&&(r.current=new lbAnnotation.ViewOperation({container:v.current,size:f,style:m,annotations:l,config:"{}",zoomInfo:e.zoomInfo}),r.current.init()),()=>{var n;(n=r.current)==null||n.destroy()}),[]),React.useEffect(()=>{var n;r.current&&(d(!0),(n=r.current)==null||n.setLoading(!0),lbAnnotation.ImgUtils.load(g).then(i=>{var a,u;(a=r.current)==null||a.setLoading(!1),d(!1),(u=r.current)==null||u.setImgNode(i),_.current&&_.current(i)}).catch(()=>{var i;(i=r.current)==null||i.setLoading(!1),d(!1)}))},[g]),React.useEffect(()=>{r.current&&r.current.updateData(l)},[l]),React.useEffect(()=>{const n=r.current;(n==null?void 0:n.setSize)&&(n.setSize(f),n.initPosition())},[(o=e.size)==null?void 0:o.width,(h=e.size)==null?void 0:h.height]),React.useEffect(()=>{var n,i;return r.current&&((n=r.current)==null||n.on("onChange",(...a)=>{c==null||c.apply(null,a)}),(i=r.current)==null||i.on("renderZoom",a=>{s&&s(a)})),()=>{var a,u;(a=r.current)==null||a.unbindAll("onChange"),(u=r.current)==null||u.unbindAll("renderZoom")}},[s,c]);const O=React__default.default.createElement("div",{ref:v,style:__spreadValues(__spreadValues({position:"relative"},f),w)});return React__default.default.createElement(es.Spin,{spinning:p||I,delay:300,style:b},O)};var AnnotationView$1=React__default.default.forwardRef(AnnotationView);module.exports=AnnotationView$1;

package/dist/components/pointCloudView/PointCloud2DView.js

@@ -1 +1 @@
-"use strict";var dom=require("../../utils/dom.js"),React=require("react"),PointCloudLayout=require("./PointCloudLayout.js"),index=require("../AnnotationView/index.js"),PointCloudContext=require("./PointCloudContext.js"),reactRedux=require("react-redux"),icons=require("@ant-design/icons"),useSize=require("../../hooks/useSize.js"),useSingleBox=require("./hooks/useSingleBox.js"),lbAnnotation=require("@labelbee/lb-annotation"),reactI18next=require("react-i18next"),ctx=require("../../store/ctx.js"),map=require("../../store/annotation/map.js"),lbUtils=require("@labelbee/lb-utils");function _interopDefaultLegacy(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var React__default=_interopDefaultLegacy(React),__defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,n)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,__spreadValues=(e,t)=>{for(var n in t||(t={}))__hasOwnProp.call(t,n)&&__defNormalProp(e,n,t[n]);if(__getOwnPropSymbols)for(var n of __getOwnPropSymbols(t))__propIsEnum.call(t,n)&&__defNormalProp(e,n,t[n]);return e},__spreadProps=(e,t)=>__defProps(e,__getOwnPropDescs(t));const Toolbar=({onNext:e,onPrev:t,imgLength:n,imgIndex:s})=>React__default.default.createElement("div",null,React__default.default.createElement(icons.LeftOutlined,{onClick:t}),React__default.default.createElement("span",null," ",s+1," / ",n," "),React__default.default.createElement(icons.RightOutlined,{onClick:e})),PointCloud2DView=({currentData:e,config:t})=>{var n,s,_,b,P;const[c,L]=React.useState([]),{topViewInstance:w,displayPointCloudList:C}=React.useContext(PointCloudContext.PointCloudContext),[r,p]=React.useState(0),x=React.useRef(null),f=React.useRef(),{selectedBox:v}=useSingleBox.useSingleBox(),I=useSize(x),{t:O}=reactI18next.useTranslation(),a=(n=e==null?void 0:e.mappingImgList)==null?void 0:n[r];React.useEffect(()=>{p(0)},[e]),React.useEffect(()=>{if(w&&a){const o={fill:"transparent",color:"green"},l=C.reduce((u,i)=>{var d;const q=lbAnnotation.pointCloudLidar2image(i,a.calib),j=(d=lbUtils.toolStyleConverter.getColorFromConfig({attribute:i.attribute},__spreadProps(__spreadValues({},t),{attributeConfigurable:!0}),{}))==null?void 0:d.stroke;return[...u,...q.map(y=>({type:y.type,annotation:__spreadProps(__spreadValues({id:i.id,pointList:y.pointList},o),{stroke:j})}))]},[]);L(l)}},[C,a]);const m=!e||!(e==null?void 0:e.mappingImgList)||!(((s=e==null?void 0:e.mappingImgList)==null?void 0:s.length)>0),g=React.useCallback(()=>{var o,l;const u=(o=f.current)==null?void 0:o.toolInstance;if(!v||!u)return;const i=c.find(d=>d.annotation.id===v.info.id);((l=i==null?void 0:i.annotation.pointList)==null?void 0:l.length)>0&&u.focusPositionByPointList(i==null?void 0:i.annotation.pointList)},[v,f.current,c,r]);return React.useEffect(()=>{g()},[g]),React__default.default.createElement(PointCloudLayout.PointCloudContainer,{className:dom.getClassName("point-cloud-2d-container"),title:O("2DView"),toolbar:m?void 0:React__default.default.createElement(Toolbar,{imgIndex:r,imgLength:(b=(_=e.mappingImgList)==null?void 0:_.length)!=null?b:0,onNext:()=>{var o;!e||!(e==null?void 0:e.mappingImgList)||r>=((o=e==null?void 0:e.mappingImgList)==null?void 0:o.length)-1||p(l=>l+1)},onPrev:()=>{r<=0||p(o=>o-1)}}),style:{display:m?"none":"flex"}},React__default.default.createElement("div",{className:dom.getClassName("point-cloud-2d-image"),ref:x},React__default.default.createElement(index,{src:(P=a==null?void 0:a.url)!=null?P:"",annotations:c,size:I,ref:f,globalStyle:{display:m?"none":"block"},afterImgOnLoad:g})))};var PointCloud2DView$1=reactRedux.connect(map.a2MapStateToProps,null,null,{context:ctx.LabelBeeContext})(PointCloud2DView);module.exports=PointCloud2DView$1;
+"use strict";var dom=require("../../utils/dom.js"),React=require("react"),PointCloudLayout=require("./PointCloudLayout.js"),index=require("../AnnotationView/index.js"),PointCloudContext=require("./PointCloudContext.js"),reactRedux=require("react-redux"),icons=require("@ant-design/icons"),useSize=require("../../hooks/useSize.js"),useSingleBox=require("./hooks/useSingleBox.js"),lbAnnotation=require("@labelbee/lb-annotation"),reactI18next=require("react-i18next"),ctx=require("../../store/ctx.js"),map=require("../../store/annotation/map.js"),lbUtils=require("@labelbee/lb-utils");function _interopDefaultLegacy(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var React__default=_interopDefaultLegacy(React),__defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,n)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,__spreadValues=(e,t)=>{for(var n in t||(t={}))__hasOwnProp.call(t,n)&&__defNormalProp(e,n,t[n]);if(__getOwnPropSymbols)for(var n of __getOwnPropSymbols(t))__propIsEnum.call(t,n)&&__defNormalProp(e,n,t[n]);return e},__spreadProps=(e,t)=>__defProps(e,__getOwnPropDescs(t));const Toolbar=({onNext:e,onPrev:t,imgLength:n,imgIndex:u})=>React__default.default.createElement("div",null,React__default.default.createElement(icons.LeftOutlined,{onClick:t}),React__default.default.createElement("span",null," ",u+1," / ",n," "),React__default.default.createElement(icons.RightOutlined,{onClick:e})),PointCloud2DView=({currentData:e,config:t})=>{var n,u,P,y,x;const[p,h]=React.useState([]),{topViewInstance:q,displayPointCloudList:L}=React.useContext(PointCloudContext.PointCloudContext),[f,C]=React.useState(""),[a,v]=React.useState(0),w=React.useRef(null),m=React.useRef(),{selectedBox:d}=useSingleBox.useSingleBox(),j=useSize(w),{t:E}=reactI18next.useTranslation(),r=(n=e==null?void 0:e.mappingImgList)==null?void 0:n[a];React.useEffect(()=>{v(0)},[e]),React.useEffect(()=>{if(q&&r){const o={fill:"transparent",color:"green"},l=L.reduce((c,i)=>{var s;const{transferViewData:b,viewRangePointList:R}=lbAnnotation.pointCloudLidar2image(i,r.calib),I=(s=lbUtils.toolStyleConverter.getColorFromConfig({attribute:i.attribute},__spreadProps(__spreadValues({},t),{attributeConfigurable:!0}),{}))==null?void 0:s.stroke,O=[...c,...b.map(S=>({type:S.type,annotation:__spreadProps(__spreadValues({id:i.id,pointList:S.pointList},o),{stroke:I})}))];return i.id===f&&O.push({type:"polygon",annotation:__spreadProps(__spreadValues({id:f,pointList:R},o),{stroke:I,fill:"rgba(255, 255, 255, 0.6)"})}),O},[]);h(l)}},[L,r,f]);const g=!e||!(e==null?void 0:e.mappingImgList)||!(((u=e==null?void 0:e.mappingImgList)==null?void 0:u.length)>0),_=React.useCallback(()=>{var o,l;const c=(o=m.current)==null?void 0:o.toolInstance;if(C(""),!d||!c)return;const i=p.find(b=>b.annotation.id===d.info.id);let s="";((l=i==null?void 0:i.annotation.pointList)==null?void 0:l.length)>0&&(c.focusPositionByPointList(i==null?void 0:i.annotation.pointList),s=d.info.id,C(s))},[d,m.current,p,a]);return React.useEffect(()=>{_()},[_]),React__default.default.createElement(PointCloudLayout.PointCloudContainer,{className:dom.getClassName("point-cloud-2d-container"),title:E("2DView"),toolbar:g?void 0:React__default.default.createElement(Toolbar,{imgIndex:a,imgLength:(y=(P=e.mappingImgList)==null?void 0:P.length)!=null?y:0,onNext:()=>{var o;!e||!(e==null?void 0:e.mappingImgList)||a>=((o=e==null?void 0:e.mappingImgList)==null?void 0:o.length)-1||v(l=>l+1)},onPrev:()=>{a<=0||v(o=>o-1)}}),style:g?{display:"none"}:{display:"flex",minHeight:200,maxHeight:500}},React__default.default.createElement("div",{className:dom.getClassName("point-cloud-2d-image"),ref:w},React__default.default.createElement(index,{src:(x=r==null?void 0:r.url)!=null?x:"",annotations:p,size:j,ref:m,globalStyle:{display:g?"none":"block"},afterImgOnLoad:_,zoomInfo:{min:.01,max:1e3,ratio:.4}})))};var PointCloud2DView$1=reactRedux.connect(map.a2MapStateToProps,null,null,{context:ctx.LabelBeeContext})(PointCloud2DView);module.exports=PointCloud2DView$1;

package/dist/components/pointCloudView/PointCloud3DView.js

@@ -1 +1 @@
-"use strict";var dom=require("../../utils/dom.js"),lbAnnotation=require("@labelbee/lb-annotation"),lbUtils=require("@labelbee/lb-utils"),classNames=require("classnames"),React=require("react"),PointCloudLayout=require("./PointCloudLayout.js"),PointCloudContext=require("./PointCloudContext.js"),map=require("../../store/annotation/map.js"),reactRedux=require("react-redux"),index=require("../../utils/index.js"),useSingleBox=require("./hooks/useSingleBox.js"),useSphere=require("./hooks/useSphere.js"),antd=require("antd"),useSize=require("../../hooks/useSize.js"),usePointCloudViews=require("./hooks/usePointCloudViews.js"),reactI18next=require("react-i18next"),ctx=require("../../store/ctx.js"),index$1=require("./components/PointCloudSizeSlider/index.js");function _interopDefaultLegacy(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var classNames__default=_interopDefaultLegacy(classNames),React__default=_interopDefaultLegacy(React),__defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,n,i)=>n in e?__defProp(e,n,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[n]=i,__spreadValues=(e,n)=>{for(var i in n||(n={}))__hasOwnProp.call(n,i)&&__defNormalProp(e,i,n[i]);if(__getOwnPropSymbols)for(var i of __getOwnPropSymbols(n))__propIsEnum.call(n,i)&&__defNormalProp(e,i,n[i]);return e},__spreadProps=(e,n)=>__defProps(e,__getOwnPropDescs(n));const pointCloudID="LABELBEE-POINTCLOUD",PointCloud3DContext=React__default.default.createContext({isActive:!1,setTarget3DView:()=>{},reset3DView:()=>{},followTopView:()=>{}}),PointCloudViewIcon=({perspectiveView:e})=>{const{isActive:n,setTarget3DView:i}=React.useContext(PointCloud3DContext),o=p=>classNames__default.default({[dom.getClassName("point-cloud-3d-view",p)]:!0,active:n});return React__default.default.createElement("span",{onClick:()=>{i(lbUtils.EPerspectiveView[e])},className:o(e.toLocaleLowerCase())})},PointCloud3DSideBar=()=>{const{reset3DView:e,followTopView:n}=React.useContext(PointCloud3DContext),{t:i}=reactI18next.useTranslation();return React__default.default.createElement("div",{className:dom.getClassName("point-cloud-3d-sidebar")},React__default.default.createElement(PointCloudViewIcon,{perspectiveView:"Top"}),React__default.default.createElement(PointCloudViewIcon,{perspectiveView:"Front"}),React__default.default.createElement(PointCloudViewIcon,{perspectiveView:"Left"}),React__default.default.createElement(PointCloudViewIcon,{perspectiveView:"Back"}),React__default.default.createElement(PointCloudViewIcon,{perspectiveView:"Right"}),React__default.default.createElement(PointCloudViewIcon,{perspectiveView:"LFT"}),React__default.default.createElement(PointCloudViewIcon,{perspectiveView:"RBT"}),React__default.default.createElement(antd.Tooltip,{title:i("CameraFollowTopView")},React__default.default.createElement("span",{onClick:()=>{n()},className:dom.getClassName("point-cloud-3d-view","followTop")})),React__default.default.createElement("span",{onClick:()=>{e()},className:dom.getClassName("point-cloud-3d-view","reset")}))},PointCloud3D=({currentData:e,config:n})=>{var i;const o=React.useContext(PointCloudContext.PointCloudContext),[p,V]=React.useState(!0),d=React.useRef(null),{initPointCloud3d:w}=usePointCloudViews.usePointCloudViews(),u=useSize(d),{t:C}=reactI18next.useTranslation();React.useEffect(()=>{!o.mainViewInstance||w==null||w(u)},[u]);const{selectedBox:c}=useSingleBox.useSingleBox(),{selectedSphere:m}=useSphere.useSphere(),v=t=>{var a,r;const l=c==null?void 0:c.info;if(l){const s=__spreadValues({},l.center);s.x=s.x-.01,s.z=10;const f=t===lbUtils.EPerspectiveView.Top;(a=o.mainViewInstance)==null||a.updateCameraByBox(l,t,f?s:void 0)}m&&((r=o.mainViewInstance)==null||r.updateCameraBySphere(m,t))},P=()=>{var t;(t=o.mainViewInstance)==null||t.resetCamera()},g=()=>{var t,a;const r=(t=o.topViewInstance)==null?void 0:t.pointCloudInstance.camera;r&&((a=o.mainViewInstance)==null||a.applyCameraTarget(r))};React.useEffect(()=>{if(d.current&&(e==null?void 0:e.url)){let t=o.mainViewInstance;if(!t&&u.width){const a={left:-u.width/2,right:u.width/2,top:u.height/2,bottom:-u.height/2,near:100,far:-100};t=new lbAnnotation.PointCloud({container:d.current,isOrthographicCamera:!0,orthographicParams:a,config:n}),o.setMainViewInstance(t)}}},[u]),React.useEffect(()=>{var t;if(d.current&&(e==null?void 0:e.url)&&e.result&&o.mainViewInstance){let a=o.mainViewInstance;const r=lbUtils.PointCloudUtils.getBoxParamsFromResultList(e.result);r.forEach(l=>{var s;const f=(s=lbUtils.toolStyleConverter.getColorFromConfig({attribute:l.attribute},__spreadProps(__spreadValues({},n),{attributeConfigurable:!0}),{}))==null?void 0:s.hex;a==null||a.generateBox(l,f)}),o.setPointCloudResult(r),o.setPointCloudValid((t=index.jsonParser(e.result))==null?void 0:t.valid)}},[e,o.mainViewInstance]),React.useEffect(()=>{var t,a,r,l;if(c){v(lbUtils.EPerspectiveView.Top);const s=(r=(a=(t=o.topViewInstance)==null?void 0:t.pointCloudInstance)==null?void 0:a.camera.zoom)!=null?r:1;(l=o.mainViewInstance)==null||l.updateCameraZoom(s)}},[c]),React.useEffect(()=>{var t,a,r,l;if(m){v(lbUtils.EPerspectiveView.Top);const s=(r=(a=(t=o.topViewInstance)==null?void 0:t.pointCloudInstance)==null?void 0:a.camera.zoom)!=null?r:1;(l=o.mainViewInstance)==null||l.updateCameraZoom(s)}},[m]);const _=React.useMemo(()=>({reset3DView:P,setTarget3DView:v,isActive:!!c,followTopView:g}),[c,o.mainViewInstance]),h=React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(index$1,{onChange:t=>{var a;(a=o.mainViewInstance)==null||a.updatePointSize({customSize:t})}}),React__default.default.createElement("span",{style:{marginRight:8}},C("ShowArrows")),React__default.default.createElement(antd.Switch,{size:"small",checked:p,onChange:t=>{var a;V(t),(a=o.mainViewInstance)==null||a.setShowDirection(t)}}));return React__default.default.createElement(PointCloudLayout.PointCloudContainer,{className:dom.getClassName("point-cloud-3d-container"),title:C("3DView"),toolbar:h,style:{height:e.mappingImgList&&((i=e.mappingImgList)==null?void 0:i.length)>0?"55%":"100%"}},React__default.default.createElement("div",{className:dom.getClassName("point-cloud-3d-content")},React__default.default.createElement(PointCloud3DContext.Provider,{value:_},React__default.default.createElement(PointCloud3DSideBar,null)),React__default.default.createElement("div",{className:dom.getClassName("point-cloud-3d-view"),id:pointCloudID,ref:d})))};var PointCloud3DView=reactRedux.connect(map.a2MapStateToProps,null,null,{context:ctx.LabelBeeContext})(PointCloud3D);module.exports=PointCloud3DView;
+"use strict";var dom=require("../../utils/dom.js"),lbAnnotation=require("@labelbee/lb-annotation"),lbUtils=require("@labelbee/lb-utils"),classNames=require("classnames"),React=require("react"),PointCloudLayout=require("./PointCloudLayout.js"),PointCloudContext=require("./PointCloudContext.js"),map=require("../../store/annotation/map.js"),reactRedux=require("react-redux"),index=require("../../utils/index.js"),useSingleBox=require("./hooks/useSingleBox.js"),useSphere=require("./hooks/useSphere.js"),antd=require("antd"),useSize=require("../../hooks/useSize.js"),usePointCloudViews=require("./hooks/usePointCloudViews.js"),reactI18next=require("react-i18next"),ctx=require("../../store/ctx.js"),index$1=require("./components/PointCloudSizeSlider/index.js");function _interopDefaultLegacy(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var classNames__default=_interopDefaultLegacy(classNames),React__default=_interopDefaultLegacy(React),__defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(t,n,e)=>n in t?__defProp(t,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[n]=e,__spreadValues=(t,n)=>{for(var e in n||(n={}))__hasOwnProp.call(n,e)&&__defNormalProp(t,e,n[e]);if(__getOwnPropSymbols)for(var e of __getOwnPropSymbols(n))__propIsEnum.call(n,e)&&__defNormalProp(t,e,n[e]);return t},__spreadProps=(t,n)=>__defProps(t,__getOwnPropDescs(n));const pointCloudID="LABELBEE-POINTCLOUD",PointCloud3DContext=React__default.default.createContext({isActive:!1,setTarget3DView:()=>{},reset3DView:()=>{},followTopView:()=>{}}),PointCloudViewIcon=({perspectiveView:t})=>{const{isActive:n,setTarget3DView:e}=React.useContext(PointCloud3DContext),m=p=>classNames__default.default({[dom.getClassName("point-cloud-3d-view",p)]:!0,active:n});return React__default.default.createElement("span",{onClick:()=>{e(lbUtils.EPerspectiveView[t])},className:m(t.toLocaleLowerCase())})},PointCloud3DSideBar=()=>{const{reset3DView:t,followTopView:n}=React.useContext(PointCloud3DContext),{t:e}=reactI18next.useTranslation();return React__default.default.createElement("div",{className:dom.getClassName("point-cloud-3d-sidebar")},React__default.default.createElement(PointCloudViewIcon,{perspectiveView:"Top"}),React__default.default.createElement(PointCloudViewIcon,{perspectiveView:"Front"}),React__default.default.createElement(PointCloudViewIcon,{perspectiveView:"Left"}),React__default.default.createElement(PointCloudViewIcon,{perspectiveView:"Back"}),React__default.default.createElement(PointCloudViewIcon,{perspectiveView:"Right"}),React__default.default.createElement(PointCloudViewIcon,{perspectiveView:"LFT"}),React__default.default.createElement(PointCloudViewIcon,{perspectiveView:"RBT"}),React__default.default.createElement(antd.Tooltip,{title:e("CameraFollowTopView")},React__default.default.createElement("span",{onClick:()=>{n()},className:dom.getClassName("point-cloud-3d-view","followTop")})),React__default.default.createElement("span",{onClick:()=>{t()},className:dom.getClassName("point-cloud-3d-view","reset")}))},PointCloud3D=({currentData:t,config:n})=>{const e=React.useContext(PointCloudContext.PointCloudContext),[m,p]=React.useState(!0),c=React.useRef(null),{initPointCloud3d:w}=usePointCloudViews.usePointCloudViews(),s=useSize(c),{t:C}=reactI18next.useTranslation();React.useEffect(()=>{!e.mainViewInstance||w==null||w(s)},[s]);const{selectedBox:u}=useSingleBox.useSingleBox(),{selectedSphere:d}=useSphere.useSphere(),v=o=>{var a,i;const r=u==null?void 0:u.info;if(r){const l=__spreadValues({},r.center);l.x=l.x-.01,l.z=10;const f=o===lbUtils.EPerspectiveView.Top;(a=e.mainViewInstance)==null||a.updateCameraByBox(r,o,f?l:void 0)}d&&((i=e.mainViewInstance)==null||i.updateCameraBySphere(d,o))},V=()=>{var o;(o=e.mainViewInstance)==null||o.resetCamera()},P=()=>{var o,a;const i=(o=e.topViewInstance)==null?void 0:o.pointCloudInstance.camera;i&&((a=e.mainViewInstance)==null||a.applyCameraTarget(i))};React.useEffect(()=>{if(c.current&&(t==null?void 0:t.url)){let o=e.mainViewInstance;if(!o&&s.width){const a={left:-s.width/2,right:s.width/2,top:s.height/2,bottom:-s.height/2,near:100,far:-100};o=new lbAnnotation.PointCloud({container:c.current,isOrthographicCamera:!0,orthographicParams:a,config:n}),e.setMainViewInstance(o)}}},[s]),React.useEffect(()=>{var o;if(c.current&&(t==null?void 0:t.url)&&t.result&&e.mainViewInstance){let a=e.mainViewInstance;const i=lbUtils.PointCloudUtils.getBoxParamsFromResultList(t.result);i.forEach(r=>{var l;const f=(l=lbUtils.toolStyleConverter.getColorFromConfig({attribute:r.attribute},__spreadProps(__spreadValues({},n),{attributeConfigurable:!0}),{}))==null?void 0:l.hex;a==null||a.generateBox(r,f)}),e.setPointCloudResult(i),e.setPointCloudValid((o=index.jsonParser(t.result))==null?void 0:o.valid)}},[t,e.mainViewInstance]),React.useEffect(()=>{var o,a,i,r;if(u){v(lbUtils.EPerspectiveView.Top);const l=(i=(a=(o=e.topViewInstance)==null?void 0:o.pointCloudInstance)==null?void 0:a.camera.zoom)!=null?i:1;(r=e.mainViewInstance)==null||r.updateCameraZoom(l)}},[u]),React.useEffect(()=>{var o,a,i,r;if(d){v(lbUtils.EPerspectiveView.Top);const l=(i=(a=(o=e.topViewInstance)==null?void 0:o.pointCloudInstance)==null?void 0:a.camera.zoom)!=null?i:1;(r=e.mainViewInstance)==null||r.updateCameraZoom(l)}},[d]);const _=React.useMemo(()=>({reset3DView:V,setTarget3DView:v,isActive:!!u,followTopView:P}),[u,e.mainViewInstance]),g=React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(index$1,{onChange:o=>{var a;(a=e.mainViewInstance)==null||a.updatePointSize({customSize:o})}}),React__default.default.createElement("span",{style:{marginRight:8}},C("ShowArrows")),React__default.default.createElement(antd.Switch,{size:"small",checked:m,onChange:o=>{var a;p(o),(a=e.mainViewInstance)==null||a.setShowDirection(o)}}));return React__default.default.createElement(PointCloudLayout.PointCloudContainer,{className:dom.getClassName("point-cloud-3d-container"),title:C("3DView"),toolbar:g},React__default.default.createElement("div",{className:dom.getClassName("point-cloud-3d-content")},React__default.default.createElement(PointCloud3DContext.Provider,{value:_},React__default.default.createElement(PointCloud3DSideBar,null)),React__default.default.createElement("div",{className:dom.getClassName("point-cloud-3d-view"),id:pointCloudID,ref:c})))};var PointCloud3DView=reactRedux.connect(map.a2MapStateToProps,null,null,{context:ctx.LabelBeeContext})(PointCloud3D);module.exports=PointCloud3DView;

package/dist/index.css

@@ -1276,6 +1276,7 @@
   width: 24px;
   background-repeat: no-repeat;
   cursor: pointer;
+  flex: none;
   margin-right: 16px;
   background-image: url("../dist/assets/icons/7eadb9c4.svg");
   transform: rotateY(180deg);
@@ -1286,6 +1287,7 @@
   width: 24px;
   background-repeat: no-repeat;
   cursor: pointer;
+  flex: none;
   margin-right: 16px;
   background-image: url("../dist/assets/icons/7eadb9c4.svg");
 }
@@ -1295,6 +1297,7 @@
   width: 24px;
   background-repeat: no-repeat;
   cursor: pointer;
+  flex: none;
   background-image: url("../dist/assets/icons/9d70807.svg");
 }
 .bee-point-cloud-wrapper .bee-point-cloud-container__header-toolbar .bee-point-cloud__next {
@@ -1345,7 +1348,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  min-height: 400px;
+  flex: 1;
 }
 .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-content {
   display: flex;
@@ -1360,7 +1363,11 @@
   box-sizing: content-box;
   display: flex;
   flex-direction: column;
-  justify-content: flex-end;
+  justify-content: flex-start;
+  overflow-y: scroll;
+}
+.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-content .bee-point-cloud-3d-sidebar::-webkit-scrollbar {
+  display: none;
 }
 .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-content .bee-point-cloud-3d-sidebar .bee-point-cloud-3d-view__reset, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-content .bee-point-cloud-3d-sidebar .bee-point-cloud-3d-view__followTop {
   display: inline-block;
@@ -1368,6 +1375,7 @@
   width: 36px;
   background-repeat: no-repeat;
   cursor: pointer;
+  flex: none;
   font-size: 36px;
   background-position: center;
   background-color: #444;
@@ -1388,6 +1396,7 @@
   width: 36px;
   background-repeat: no-repeat;
   cursor: pointer;
+  flex: none;
   background-image: url("../dist/assets/icons/c5b4262e.png");
   margin-bottom: 8px;
 }

package/dist/types/components/AnnotationView/index.d.ts

@@ -22,6 +22,11 @@ interface IProps {
     showLoading?: boolean;
     globalStyle?: React.CSSProperties;
     afterImgOnLoad?: TAfterImgOnLoad;
+    zoomInfo?: {
+        min: number;
+        max: number;
+        ratio: number;
+    };
 }
 declare const _default: React.ForwardRefExoticComponent<IProps & React.RefAttributes<unknown>>;
 export default _default;

package/es/components/AnnotationView/index.js

@@ -1 +1 @@
-import g,{useState as A,useRef as y,useImperativeHandle as V,useEffect as u}from"react";import{ViewOperation as j,ImgUtils as Z}from"@labelbee/lb-annotation";import{Spin as k}from"antd/es";import D from"../../hooks/useRefCache.js";var U=Object.defineProperty,I=Object.getOwnPropertySymbols,x=Object.prototype.hasOwnProperty,F=Object.prototype.propertyIsEnumerable,O=(t,e,o)=>e in t?U(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,m=(t,e)=>{for(var o in e||(e={}))x.call(e,o)&&O(t,o,e[o]);if(I)for(var o of I(e))F.call(e,o)&&O(t,o,e[o]);return t};const _={width:500,height:100},H=t=>{if(!t)return _;if(t.width&&t.height)return t;const e=m({},t);return e.width||(e.width=_.width),e.height||(e.height=_.height),e},N=(t,e)=>{var o,p;const{src:w,annotations:s=[],style:z={stroke:"blue",thickness:3},zoomChange:c,backgroundStyle:P={},onChange:d,showLoading:S=!1,globalStyle:C,afterImgOnLoad:L}=t,f=H(t.size),[R,h]=A(!1),v=y(null),r=y(),b=D(L);V(e,()=>{const n=r.current;return n?{zoomIn:()=>n.zoomChanged(!0),zoomOut:()=>n.zoomChanged(!1),initImgPos:()=>n.initImgPos(),toolInstance:n}:{}},[r.current]),u(()=>(v.current&&(r.current=new j({container:v.current,size:f,style:z,annotations:s,config:"{}"}),r.current.init()),()=>{var n;(n=r.current)==null||n.destroy()}),[]),u(()=>{var n;r.current&&(h(!0),(n=r.current)==null||n.setLoading(!0),Z.load(w).then(a=>{var i,l;(i=r.current)==null||i.setLoading(!1),h(!1),(l=r.current)==null||l.setImgNode(a),b.current&&b.current(a)}).catch(()=>{var a;(a=r.current)==null||a.setLoading(!1),h(!1)}))},[w]),u(()=>{r.current&&r.current.updateData(s)},[s]),u(()=>{const n=r.current;(n==null?void 0:n.setSize)&&(n.setSize(f),n.initPosition())},[(o=t.size)==null?void 0:o.width,(p=t.size)==null?void 0:p.height]),u(()=>{var n,a;return r.current&&((n=r.current)==null||n.on("onChange",(...i)=>{d==null||d.apply(null,i)}),(a=r.current)==null||a.on("renderZoom",i=>{c&&c(i)})),()=>{var i,l;(i=r.current)==null||i.unbindAll("onChange"),(l=r.current)==null||l.unbindAll("renderZoom")}},[c,d]);const E=g.createElement("div",{ref:v,style:m(m({position:"relative"},f),P)});return g.createElement(k,{spinning:S||R,delay:300,style:C},E)};var T=g.forwardRef(N);export{T as default};
+import v,{useState as A,useRef as b,useImperativeHandle as V,useEffect as u}from"react";import{ViewOperation as j,ImgUtils as Z}from"@labelbee/lb-annotation";import{Spin as k}from"antd/es";import D from"../../hooks/useRefCache.js";var U=Object.defineProperty,y=Object.getOwnPropertySymbols,x=Object.prototype.hasOwnProperty,F=Object.prototype.propertyIsEnumerable,O=(e,n,o)=>n in e?U(e,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[n]=o,g=(e,n)=>{for(var o in n||(n={}))x.call(n,o)&&O(e,o,n[o]);if(y)for(var o of y(n))F.call(n,o)&&O(e,o,n[o]);return e};const _={width:500,height:100},H=e=>{if(!e)return _;if(e.width&&e.height)return e;const n=g({},e);return n.width||(n.width=_.width),n.height||(n.height=_.height),n},N=(e,n)=>{var o,p;const{src:w,annotations:s=[],style:z={stroke:"blue",thickness:3},zoomChange:c,backgroundStyle:P={},onChange:d,showLoading:S=!1,globalStyle:C,afterImgOnLoad:L}=e,f=H(e.size),[R,h]=A(!1),m=b(null),r=b(),I=D(L);V(n,()=>{const t=r.current;return t?{zoomIn:()=>t.zoomChanged(!0),zoomOut:()=>t.zoomChanged(!1),initImgPos:()=>t.initImgPos(),toolInstance:t}:{}},[r.current]),u(()=>(m.current&&(r.current=new j({container:m.current,size:f,style:z,annotations:s,config:"{}",zoomInfo:e.zoomInfo}),r.current.init()),()=>{var t;(t=r.current)==null||t.destroy()}),[]),u(()=>{var t;r.current&&(h(!0),(t=r.current)==null||t.setLoading(!0),Z.load(w).then(a=>{var i,l;(i=r.current)==null||i.setLoading(!1),h(!1),(l=r.current)==null||l.setImgNode(a),I.current&&I.current(a)}).catch(()=>{var a;(a=r.current)==null||a.setLoading(!1),h(!1)}))},[w]),u(()=>{r.current&&r.current.updateData(s)},[s]),u(()=>{const t=r.current;(t==null?void 0:t.setSize)&&(t.setSize(f),t.initPosition())},[(o=e.size)==null?void 0:o.width,(p=e.size)==null?void 0:p.height]),u(()=>{var t,a;return r.current&&((t=r.current)==null||t.on("onChange",(...i)=>{d==null||d.apply(null,i)}),(a=r.current)==null||a.on("renderZoom",i=>{c&&c(i)})),()=>{var i,l;(i=r.current)==null||i.unbindAll("onChange"),(l=r.current)==null||l.unbindAll("renderZoom")}},[c,d]);const E=v.createElement("div",{ref:m,style:g(g({position:"relative"},f),P)});return v.createElement(k,{spinning:S||R,delay:300,style:C},E)};var T=v.forwardRef(N);export{T as default};

package/es/components/pointCloudView/PointCloud2DView.js

@@ -1 +1 @@
-import{getClassName as I}from"../../utils/dom.js";import l,{useState as O,useContext as T,useRef as j,useEffect as P,useCallback as M}from"react";import{PointCloudContainer as F}from"./PointCloudLayout.js";import $ from"../AnnotationView/index.js";import{PointCloudContext as q}from"./PointCloudContext.js";import{connect as G}from"react-redux";import{LeftOutlined as H,RightOutlined as J}from"@ant-design/icons";import K from"../../hooks/useSize.js";import{useSingleBox as Q}from"./hooks/useSingleBox.js";import{pointCloudLidar2image as U}from"@labelbee/lb-annotation";import{useTranslation as W}from"react-i18next";import{LabelBeeContext as X}from"../../store/ctx.js";import{a2MapStateToProps as Y}from"../../store/annotation/map.js";import{toolStyleConverter as Z}from"@labelbee/lb-utils";var D=Object.defineProperty,tt=Object.defineProperties,et=Object.getOwnPropertyDescriptors,h=Object.getOwnPropertySymbols,ot=Object.prototype.hasOwnProperty,nt=Object.prototype.propertyIsEnumerable,E=(t,e,o)=>e in t?D(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,S=(t,e)=>{for(var o in e||(e={}))ot.call(e,o)&&E(t,o,e[o]);if(h)for(var o of h(e))nt.call(e,o)&&E(t,o,e[o]);return t},V=(t,e)=>tt(t,et(e));const it=({onNext:t,onPrev:e,imgLength:o,imgIndex:p})=>l.createElement("div",null,l.createElement(H,{onClick:e}),l.createElement("span",null," ",p+1," / ",o," "),l.createElement(J,{onClick:t})),lt=({currentData:t,config:e})=>{var o,p,b,C,L;const[u,k]=O([]),{topViewInstance:N,displayPointCloudList:y}=T(q),[s,c]=O(0),w=j(null),f=j(),{selectedBox:g}=Q(),A=K(w),{t:R}=W(),a=(o=t==null?void 0:t.mappingImgList)==null?void 0:o[s];P(()=>{c(0)},[t]),P(()=>{if(N&&a){const n={fill:"transparent",color:"green"},r=y.reduce((m,i)=>{var d;const z=U(i,a.calib),B=(d=Z.getColorFromConfig({attribute:i.attribute},V(S({},e),{attributeConfigurable:!0}),{}))==null?void 0:d.stroke;return[...m,...z.map(x=>({type:x.type,annotation:V(S({id:i.id,pointList:x.pointList},n),{stroke:B})}))]},[]);k(r)}},[y,a]);const v=!t||!(t==null?void 0:t.mappingImgList)||!(((p=t==null?void 0:t.mappingImgList)==null?void 0:p.length)>0),_=M(()=>{var n,r;const m=(n=f.current)==null?void 0:n.toolInstance;if(!g||!m)return;const i=u.find(d=>d.annotation.id===g.info.id);((r=i==null?void 0:i.annotation.pointList)==null?void 0:r.length)>0&&m.focusPositionByPointList(i==null?void 0:i.annotation.pointList)},[g,f.current,u,s]);return P(()=>{_()},[_]),l.createElement(F,{className:I("point-cloud-2d-container"),title:R("2DView"),toolbar:v?void 0:l.createElement(it,{imgIndex:s,imgLength:(C=(b=t.mappingImgList)==null?void 0:b.length)!=null?C:0,onNext:()=>{var n;!t||!(t==null?void 0:t.mappingImgList)||s>=((n=t==null?void 0:t.mappingImgList)==null?void 0:n.length)-1||c(r=>r+1)},onPrev:()=>{s<=0||c(n=>n-1)}}),style:{display:v?"none":"flex"}},l.createElement("div",{className:I("point-cloud-2d-image"),ref:w},l.createElement($,{src:(L=a==null?void 0:a.url)!=null?L:"",annotations:u,size:A,ref:f,globalStyle:{display:v?"none":"block"},afterImgOnLoad:_})))};var rt=G(Y,null,null,{context:X})(lt);export{rt as default};
+import{getClassName as A}from"../../utils/dom.js";import l,{useState as y,useContext as $,useRef as N,useEffect as L,useCallback as q}from"react";import{PointCloudContainer as G}from"./PointCloudLayout.js";import J from"../AnnotationView/index.js";import{PointCloudContext as K}from"./PointCloudContext.js";import{connect as Q}from"react-redux";import{LeftOutlined as U,RightOutlined as W}from"@ant-design/icons";import X from"../../hooks/useSize.js";import{useSingleBox as Y}from"./hooks/useSingleBox.js";import{pointCloudLidar2image as Z}from"@labelbee/lb-annotation";import{useTranslation as D}from"react-i18next";import{LabelBeeContext as tt}from"../../store/ctx.js";import{a2MapStateToProps as et}from"../../store/annotation/map.js";import{toolStyleConverter as ot}from"@labelbee/lb-utils";var nt=Object.defineProperty,it=Object.defineProperties,lt=Object.getOwnPropertyDescriptors,R=Object.getOwnPropertySymbols,rt=Object.prototype.hasOwnProperty,st=Object.prototype.propertyIsEnumerable,z=(t,e,o)=>e in t?nt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,w=(t,e)=>{for(var o in e||(e={}))rt.call(e,o)&&z(t,o,e[o]);if(R)for(var o of R(e))st.call(e,o)&&z(t,o,e[o]);return t},C=(t,e)=>it(t,lt(e));const at=({onNext:t,onPrev:e,imgLength:o,imgIndex:m})=>l.createElement("div",null,l.createElement(U,{onClick:e}),l.createElement("span",null," ",m+1," / ",o," "),l.createElement(W,{onClick:t})),pt=({currentData:t,config:e})=>{var o,m,I,x,O;const[u,T]=y([]),{topViewInstance:B,displayPointCloudList:h}=$(K),[f,j]=y(""),[s,g]=y(0),S=N(null),v=N(),{selectedBox:d}=Y(),H=X(S),{t:M}=D(),a=(o=t==null?void 0:t.mappingImgList)==null?void 0:o[s];L(()=>{g(0)},[t]),L(()=>{if(B&&a){const n={fill:"transparent",color:"green"},r=h.reduce((c,i)=>{var p;const{transferViewData:b,viewRangePointList:F}=Z(i,a.calib),E=(p=ot.getColorFromConfig({attribute:i.attribute},C(w({},e),{attributeConfigurable:!0}),{}))==null?void 0:p.stroke,V=[...c,...b.map(k=>({type:k.type,annotation:C(w({id:i.id,pointList:k.pointList},n),{stroke:E})}))];return i.id===f&&V.push({type:"polygon",annotation:C(w({id:f,pointList:F},n),{stroke:E,fill:"rgba(255, 255, 255, 0.6)"})}),V},[]);T(r)}},[h,a,f]);const _=!t||!(t==null?void 0:t.mappingImgList)||!(((m=t==null?void 0:t.mappingImgList)==null?void 0:m.length)>0),P=q(()=>{var n,r;const c=(n=v.current)==null?void 0:n.toolInstance;if(j(""),!d||!c)return;const i=u.find(b=>b.annotation.id===d.info.id);let p="";((r=i==null?void 0:i.annotation.pointList)==null?void 0:r.length)>0&&(c.focusPositionByPointList(i==null?void 0:i.annotation.pointList),p=d.info.id,j(p))},[d,v.current,u,s]);return L(()=>{P()},[P]),l.createElement(G,{className:A("point-cloud-2d-container"),title:M("2DView"),toolbar:_?void 0:l.createElement(at,{imgIndex:s,imgLength:(x=(I=t.mappingImgList)==null?void 0:I.length)!=null?x:0,onNext:()=>{var n;!t||!(t==null?void 0:t.mappingImgList)||s>=((n=t==null?void 0:t.mappingImgList)==null?void 0:n.length)-1||g(r=>r+1)},onPrev:()=>{s<=0||g(n=>n-1)}}),style:_?{display:"none"}:{display:"flex",minHeight:200,maxHeight:500}},l.createElement("div",{className:A("point-cloud-2d-image"),ref:S},l.createElement(J,{src:(O=a==null?void 0:a.url)!=null?O:"",annotations:u,size:H,ref:v,globalStyle:{display:_?"none":"block"},afterImgOnLoad:P,zoomInfo:{min:.01,max:1e3,ratio:.4}})))};var mt=Q(et,null,null,{context:tt})(pt);export{mt as default};

package/es/components/pointCloudView/PointCloud3DView.js

@@ -1 +1 @@
-import{getClassName as u}from"../../utils/dom.js";import{PointCloud as L}from"@labelbee/lb-annotation";import{PointCloudUtils as N,toolStyleConverter as D,EPerspectiveView as f}from"@labelbee/lb-utils";import k from"classnames";import o,{useContext as _,useState as R,useRef as F,useEffect as v,useMemo as A}from"react";import{PointCloudContainer as M}from"./PointCloudLayout.js";import{PointCloudContext as U}from"./PointCloudContext.js";import{a2MapStateToProps as Z}from"../../store/annotation/map.js";import{connect as q}from"react-redux";import{jsonParser as G}from"../../utils/index.js";import{useSingleBox as H}from"./hooks/useSingleBox.js";import{useSphere as J}from"./hooks/useSphere.js";import{Switch as K,Tooltip as Q}from"antd";import W from"../../hooks/useSize.js";import{usePointCloudViews as X}from"./hooks/usePointCloudViews.js";import{useTranslation as x}from"react-i18next";import{LabelBeeContext as Y}from"../../store/ctx.js";import $ from"./components/PointCloudSizeSlider/index.js";var ee=Object.defineProperty,te=Object.defineProperties,oe=Object.getOwnPropertyDescriptors,b=Object.getOwnPropertySymbols,ne=Object.prototype.hasOwnProperty,ie=Object.prototype.propertyIsEnumerable,S=(t,r,a)=>r in t?ee(t,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[r]=a,T=(t,r)=>{for(var a in r||(r={}))ne.call(r,a)&&S(t,a,r[a]);if(b)for(var a of b(r))ie.call(r,a)&&S(t,a,r[a]);return t},re=(t,r)=>te(t,oe(r));const ae="LABELBEE-POINTCLOUD",g=o.createContext({isActive:!1,setTarget3DView:()=>{},reset3DView:()=>{},followTopView:()=>{}}),p=({perspectiveView:t})=>{const{isActive:r,setTarget3DView:a}=_(g),n=V=>k({[u("point-cloud-3d-view",V)]:!0,active:r});return o.createElement("span",{onClick:()=>{a(f[t])},className:n(t.toLocaleLowerCase())})},le=()=>{const{reset3DView:t,followTopView:r}=_(g),{t:a}=x();return o.createElement("div",{className:u("point-cloud-3d-sidebar")},o.createElement(p,{perspectiveView:"Top"}),o.createElement(p,{perspectiveView:"Front"}),o.createElement(p,{perspectiveView:"Left"}),o.createElement(p,{perspectiveView:"Back"}),o.createElement(p,{perspectiveView:"Right"}),o.createElement(p,{perspectiveView:"LFT"}),o.createElement(p,{perspectiveView:"RBT"}),o.createElement(Q,{title:a("CameraFollowTopView")},o.createElement("span",{onClick:()=>{r()},className:u("point-cloud-3d-view","followTop")})),o.createElement("span",{onClick:()=>{t()},className:u("point-cloud-3d-view","reset")}))},se=({currentData:t,config:r})=>{var a;const n=_(U),[V,j]=R(!0),w=F(null),{initPointCloud3d:E}=X(),m=W(w),{t:I}=x();v(()=>{!n.mainViewInstance||E==null||E(m)},[m]);const{selectedBox:d}=H(),{selectedSphere:C}=J(),P=e=>{var i,l;const s=d==null?void 0:d.info;if(s){const c=T({},s.center);c.x=c.x-.01,c.z=10;const h=e===f.Top;(i=n.mainViewInstance)==null||i.updateCameraByBox(s,e,h?c:void 0)}C&&((l=n.mainViewInstance)==null||l.updateCameraBySphere(C,e))},O=()=>{var e;(e=n.mainViewInstance)==null||e.resetCamera()},y=()=>{var e,i;const l=(e=n.topViewInstance)==null?void 0:e.pointCloudInstance.camera;l&&((i=n.mainViewInstance)==null||i.applyCameraTarget(l))};v(()=>{if(w.current&&(t==null?void 0:t.url)){let e=n.mainViewInstance;if(!e&&m.width){const i={left:-m.width/2,right:m.width/2,top:m.height/2,bottom:-m.height/2,near:100,far:-100};e=new L({container:w.current,isOrthographicCamera:!0,orthographicParams:i,config:r}),n.setMainViewInstance(e)}}},[m]),v(()=>{var e;if(w.current&&(t==null?void 0:t.url)&&t.result&&n.mainViewInstance){let i=n.mainViewInstance;const l=N.getBoxParamsFromResultList(t.result);l.forEach(s=>{var c;const h=(c=D.getColorFromConfig({attribute:s.attribute},re(T({},r),{attributeConfigurable:!0}),{}))==null?void 0:c.hex;i==null||i.generateBox(s,h)}),n.setPointCloudResult(l),n.setPointCloudValid((e=G(t.result))==null?void 0:e.valid)}},[t,n.mainViewInstance]),v(()=>{var e,i,l,s;if(d){P(f.Top);const c=(l=(i=(e=n.topViewInstance)==null?void 0:e.pointCloudInstance)==null?void 0:i.camera.zoom)!=null?l:1;(s=n.mainViewInstance)==null||s.updateCameraZoom(c)}},[d]),v(()=>{var e,i,l,s;if(C){P(f.Top);const c=(l=(i=(e=n.topViewInstance)==null?void 0:e.pointCloudInstance)==null?void 0:i.camera.zoom)!=null?l:1;(s=n.mainViewInstance)==null||s.updateCameraZoom(c)}},[C]);const B=A(()=>({reset3DView:O,setTarget3DView:P,isActive:!!d,followTopView:y}),[d,n.mainViewInstance]),z=o.createElement(o.Fragment,null,o.createElement($,{onChange:e=>{var i;(i=n.mainViewInstance)==null||i.updatePointSize({customSize:e})}}),o.createElement("span",{style:{marginRight:8}},I("ShowArrows")),o.createElement(K,{size:"small",checked:V,onChange:e=>{var i;j(e),(i=n.mainViewInstance)==null||i.setShowDirection(e)}}));return o.createElement(M,{className:u("point-cloud-3d-container"),title:I("3DView"),toolbar:z,style:{height:t.mappingImgList&&((a=t.mappingImgList)==null?void 0:a.length)>0?"55%":"100%"}},o.createElement("div",{className:u("point-cloud-3d-content")},o.createElement(g.Provider,{value:B},o.createElement(le,null)),o.createElement("div",{className:u("point-cloud-3d-view"),id:ae,ref:w})))};var ce=q(Z,null,null,{context:Y})(se);export{ce as default};
+import{getClassName as m}from"../../utils/dom.js";import{PointCloud as z}from"@labelbee/lb-annotation";import{PointCloudUtils as D,toolStyleConverter as N,EPerspectiveView as C}from"@labelbee/lb-utils";import L from"classnames";import n,{useContext as h,useState as k,useRef as R,useEffect as w,useMemo as F}from"react";import{PointCloudContainer as A}from"./PointCloudLayout.js";import{PointCloudContext as M}from"./PointCloudContext.js";import{a2MapStateToProps as U}from"../../store/annotation/map.js";import{connect as Z}from"react-redux";import{jsonParser as q}from"../../utils/index.js";import{useSingleBox as G}from"./hooks/useSingleBox.js";import{useSphere as H}from"./hooks/useSphere.js";import{Switch as J,Tooltip as K}from"antd";import Q from"../../hooks/useSize.js";import{usePointCloudViews as W}from"./hooks/usePointCloudViews.js";import{useTranslation as I}from"react-i18next";import{LabelBeeContext as X}from"../../store/ctx.js";import Y from"./components/PointCloudSizeSlider/index.js";var $=Object.defineProperty,ee=Object.defineProperties,te=Object.getOwnPropertyDescriptors,b=Object.getOwnPropertySymbols,oe=Object.prototype.hasOwnProperty,ne=Object.prototype.propertyIsEnumerable,S=(o,r,e)=>r in o?$(o,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[r]=e,T=(o,r)=>{for(var e in r||(r={}))oe.call(r,e)&&S(o,e,r[e]);if(b)for(var e of b(r))ne.call(r,e)&&S(o,e,r[e]);return o},ie=(o,r)=>ee(o,te(r));const re="LABELBEE-POINTCLOUD",g=n.createContext({isActive:!1,setTarget3DView:()=>{},reset3DView:()=>{},followTopView:()=>{}}),u=({perspectiveView:o})=>{const{isActive:r,setTarget3DView:e}=h(g),f=V=>L({[m("point-cloud-3d-view",V)]:!0,active:r});return n.createElement("span",{onClick:()=>{e(C[o])},className:f(o.toLocaleLowerCase())})},ae=()=>{const{reset3DView:o,followTopView:r}=h(g),{t:e}=I();return n.createElement("div",{className:m("point-cloud-3d-sidebar")},n.createElement(u,{perspectiveView:"Top"}),n.createElement(u,{perspectiveView:"Front"}),n.createElement(u,{perspectiveView:"Left"}),n.createElement(u,{perspectiveView:"Back"}),n.createElement(u,{perspectiveView:"Right"}),n.createElement(u,{perspectiveView:"LFT"}),n.createElement(u,{perspectiveView:"RBT"}),n.createElement(K,{title:e("CameraFollowTopView")},n.createElement("span",{onClick:()=>{r()},className:m("point-cloud-3d-view","followTop")})),n.createElement("span",{onClick:()=>{o()},className:m("point-cloud-3d-view","reset")}))},le=({currentData:o,config:r})=>{const e=h(M),[f,V]=k(!0),d=R(null),{initPointCloud3d:E}=W(),c=Q(d),{t:x}=I();w(()=>{!e.mainViewInstance||E==null||E(c)},[c]);const{selectedBox:p}=G(),{selectedSphere:v}=H(),P=t=>{var i,a;const l=p==null?void 0:p.info;if(l){const s=T({},l.center);s.x=s.x-.01,s.z=10;const _=t===C.Top;(i=e.mainViewInstance)==null||i.updateCameraByBox(l,t,_?s:void 0)}v&&((a=e.mainViewInstance)==null||a.updateCameraBySphere(v,t))},j=()=>{var t;(t=e.mainViewInstance)==null||t.resetCamera()},O=()=>{var t,i;const a=(t=e.topViewInstance)==null?void 0:t.pointCloudInstance.camera;a&&((i=e.mainViewInstance)==null||i.applyCameraTarget(a))};w(()=>{if(d.current&&(o==null?void 0:o.url)){let t=e.mainViewInstance;if(!t&&c.width){const i={left:-c.width/2,right:c.width/2,top:c.height/2,bottom:-c.height/2,near:100,far:-100};t=new z({container:d.current,isOrthographicCamera:!0,orthographicParams:i,config:r}),e.setMainViewInstance(t)}}},[c]),w(()=>{var t;if(d.current&&(o==null?void 0:o.url)&&o.result&&e.mainViewInstance){let i=e.mainViewInstance;const a=D.getBoxParamsFromResultList(o.result);a.forEach(l=>{var s;const _=(s=N.getColorFromConfig({attribute:l.attribute},ie(T({},r),{attributeConfigurable:!0}),{}))==null?void 0:s.hex;i==null||i.generateBox(l,_)}),e.setPointCloudResult(a),e.setPointCloudValid((t=q(o.result))==null?void 0:t.valid)}},[o,e.mainViewInstance]),w(()=>{var t,i,a,l;if(p){P(C.Top);const s=(a=(i=(t=e.topViewInstance)==null?void 0:t.pointCloudInstance)==null?void 0:i.camera.zoom)!=null?a:1;(l=e.mainViewInstance)==null||l.updateCameraZoom(s)}},[p]),w(()=>{var t,i,a,l;if(v){P(C.Top);const s=(a=(i=(t=e.topViewInstance)==null?void 0:t.pointCloudInstance)==null?void 0:i.camera.zoom)!=null?a:1;(l=e.mainViewInstance)==null||l.updateCameraZoom(s)}},[v]);const B=F(()=>({reset3DView:j,setTarget3DView:P,isActive:!!p,followTopView:O}),[p,e.mainViewInstance]),y=n.createElement(n.Fragment,null,n.createElement(Y,{onChange:t=>{var i;(i=e.mainViewInstance)==null||i.updatePointSize({customSize:t})}}),n.createElement("span",{style:{marginRight:8}},x("ShowArrows")),n.createElement(J,{size:"small",checked:f,onChange:t=>{var i;V(t),(i=e.mainViewInstance)==null||i.setShowDirection(t)}}));return n.createElement(A,{className:m("point-cloud-3d-container"),title:x("3DView"),toolbar:y},n.createElement("div",{className:m("point-cloud-3d-content")},n.createElement(g.Provider,{value:B},n.createElement(ae,null)),n.createElement("div",{className:m("point-cloud-3d-view"),id:re,ref:d})))};var se=Z(U,null,null,{context:X})(le);export{se as default};

package/es/index.css

@@ -1276,6 +1276,7 @@
   width: 24px;
   background-repeat: no-repeat;
   cursor: pointer;
+  flex: none;
   margin-right: 16px;
   background-image: url("../dist/assets/icons/7eadb9c4.svg");
   transform: rotateY(180deg);
@@ -1286,6 +1287,7 @@
   width: 24px;
   background-repeat: no-repeat;
   cursor: pointer;
+  flex: none;
   margin-right: 16px;
   background-image: url("../dist/assets/icons/7eadb9c4.svg");
 }
@@ -1295,6 +1297,7 @@
   width: 24px;
   background-repeat: no-repeat;
   cursor: pointer;
+  flex: none;
   background-image: url("../dist/assets/icons/9d70807.svg");
 }
 .bee-point-cloud-wrapper .bee-point-cloud-container__header-toolbar .bee-point-cloud__next {
@@ -1345,7 +1348,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  min-height: 400px;
+  flex: 1;
 }
 .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-content {
   display: flex;
@@ -1360,7 +1363,11 @@
   box-sizing: content-box;
   display: flex;
   flex-direction: column;
-  justify-content: flex-end;
+  justify-content: flex-start;
+  overflow-y: scroll;
+}
+.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-content .bee-point-cloud-3d-sidebar::-webkit-scrollbar {
+  display: none;
 }
 .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-content .bee-point-cloud-3d-sidebar .bee-point-cloud-3d-view__reset, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-content .bee-point-cloud-3d-sidebar .bee-point-cloud-3d-view__followTop {
   display: inline-block;
@@ -1368,6 +1375,7 @@
   width: 36px;
   background-repeat: no-repeat;
   cursor: pointer;
+  flex: none;
   font-size: 36px;
   background-position: center;
   background-color: #444;
@@ -1388,6 +1396,7 @@
   width: 36px;
   background-repeat: no-repeat;
   cursor: pointer;
+  flex: none;
   background-image: url("../dist/assets/icons/c5b4262e.png");
   margin-bottom: 8px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labelbee/lb-components",
-  "version": "1.11.0-alpha.3",
+  "version": "1.11.0-alpha.4",
   "description": "Provide a complete library of annotation components",
   "main": "./dist/index.js",
   "es": "./es/index.js",
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
-    "@labelbee/lb-annotation": "1.15.0-alpha.3",
+    "@labelbee/lb-annotation": "1.15.0-alpha.4",
     "@labelbee/lb-utils": "1.7.1-alpha.2",
     "ahooks": "^3.4.0",
     "classnames": "^2.3.0",