@labelbee/lb-components 1.10.0-alpha.2 → 1.10.0-alpha.4

package/es/components/pointCloudView/PointCloud3DView.js

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

package/es/components/pointCloudView/PointCloud3DView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PointCloud3DView.js","sources":["../../../src/components/pointCloudView/PointCloud3DView.tsx"],"sourcesContent":["/*\n * @Author: Laoluo luozefeng@sensetime.com\n * @Date: 2022-06-13 19:31:36\n * @LastEditors: Laoluo luozefeng@sensetime.com\n * @LastEditTime: 2022-06-27 19:43:25\n */\n\nimport { getClassName } from '@/utils/dom';\nimport { PointCloud } from '@labelbee/lb-annotation';\nimport {\n  EPerspectiveView,\n  IPointCloudBox,\n  PointCloudUtils,\n  toolStyleConverter,\n} from '@labelbee/lb-utils';\nimport classNames from 'classnames';\nimport React, { useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { PointCloudContainer } from './PointCloudLayout';\nimport { PointCloudContext } from './PointCloudContext';\nimport { a2MapStateToProps, IA2MapStateProps } from '@/store/annotation/map';\nimport { connect } from 'react-redux';\nimport { jsonParser } from '@/utils';\nimport { useSingleBox } from './hooks/useSingleBox';\nimport { useSphere } from './hooks/useSphere';\nimport { Switch, Tooltip } from 'antd';\nimport useSize from '@/hooks/useSize';\nimport { usePointCloudViews } from './hooks/usePointCloudViews';\nimport { useTranslation } from 'react-i18next';\nimport { LabelBeeContext } from '@/store/ctx';\n\nconst pointCloudID = 'LABELBEE-POINTCLOUD';\nconst PointCloud3DContext = React.createContext<{\n  isActive: boolean;\n  setTarget3DView: (perspectiveView: EPerspectiveView) => void;\n  reset3DView: () => void;\n  followTopView: () => void;\n}>({\n  isActive: false,\n  setTarget3DView: () => {},\n  reset3DView: () => {},\n  followTopView: () => {},\n});\n\nconst PointCloudViewIcon = ({\n  perspectiveView,\n}: {\n  perspectiveView: keyof typeof EPerspectiveView;\n}) => {\n  const { isActive, setTarget3DView } = useContext(PointCloud3DContext);\n\n  const getTarget3DViewClassName = (position: string) => {\n    return classNames({\n      [getClassName('point-cloud-3d-view', position)]: true,\n      active: isActive,\n    });\n  };\n\n  return (\n    <span\n      onClick={() => {\n        setTarget3DView(EPerspectiveView[perspectiveView]);\n      }}\n      className={getTarget3DViewClassName(perspectiveView.toLocaleLowerCase())}\n    />\n  );\n};\n\nconst PointCloud3DSideBar = () => {\n  const { reset3DView, followTopView } = useContext(PointCloud3DContext);\n  const { t } = useTranslation();\n  return (\n    <div className={getClassName('point-cloud-3d-sidebar')}>\n      <PointCloudViewIcon perspectiveView='Top' />\n      <PointCloudViewIcon perspectiveView='Front' />\n      <PointCloudViewIcon perspectiveView='Left' />\n      <PointCloudViewIcon perspectiveView='Back' />\n      <PointCloudViewIcon perspectiveView='Right' />\n      <PointCloudViewIcon perspectiveView='LFT' />\n      <PointCloudViewIcon perspectiveView='RBT' />\n\n      <Tooltip title={t('CameraFollowTopView')}>\n        <span\n          onClick={() => {\n            followTopView();\n          }}\n          className={getClassName('point-cloud-3d-view', 'followTop')}\n        />\n      </Tooltip>\n\n      <span\n        onClick={() => {\n          reset3DView();\n        }}\n        className={getClassName('point-cloud-3d-view', 'reset')}\n      />\n    </div>\n  );\n};\n\nconst PointCloud3D: React.FC<IA2MapStateProps> = ({ currentData, config }) => {\n  const ptCtx = useContext(PointCloudContext);\n  const [showDirection, setShowDirection] = useState(true);\n  const ref = useRef<HTMLDivElement>(null);\n  const { initPointCloud3d } = usePointCloudViews();\n  const size = useSize(ref);\n  const { t } = useTranslation();\n  useEffect(() => {\n    if (!ptCtx.mainViewInstance) {\n      return;\n    }\n    initPointCloud3d?.(size);\n  }, [size]);\n  const { selectedBox } = useSingleBox();\n  const { selectedSphere } = useSphere();\n\n  const setTarget3DView = (perspectiveView: EPerspectiveView) => {\n    const box = selectedBox?.info;\n\n    if (box) {\n      // Business Logic: If the updated view is top, need to sync with topView Direction in 3dView.\n      const topViewVector = { ...box.center };\n      topViewVector.x = topViewVector.x - 0.01;\n      topViewVector.z = 10;\n      const isTopView = perspectiveView === EPerspectiveView.Top;\n\n      ptCtx.mainViewInstance?.updateCameraByBox(\n        box,\n        perspectiveView,\n        isTopView ? topViewVector : undefined,\n      );\n    }\n    if (selectedSphere) {\n      ptCtx.mainViewInstance?.updateCameraBySphere(selectedSphere, perspectiveView);\n    }\n  };\n\n  const reset3DView = () => {\n    ptCtx.mainViewInstance?.resetCamera();\n  };\n\n  const followTopView = () => {\n    const topViewCamera = ptCtx.topViewInstance?.pointCloudInstance.camera;\n    if (topViewCamera) {\n      ptCtx.mainViewInstance?.applyCameraTarget(topViewCamera);\n    }\n  };\n\n  useEffect(() => {\n    if (ref.current && currentData?.url) {\n      let pointCloud = ptCtx.mainViewInstance;\n      if (!pointCloud && size.width) {\n        const orthographicParams = {\n          left: -size.width / 2,\n          right: size.width / 2,\n          top: size.height / 2,\n          bottom: -size.height / 2,\n          near: 100,\n          far: -100,\n        };\n\n        // Need to be showed\n        pointCloud = new PointCloud({\n          container: ref.current,\n          isOrthographicCamera: true,\n          orthographicParams,\n          config,\n        });\n        ptCtx.setMainViewInstance(pointCloud);\n      }\n    }\n  }, [size]);\n\n  /**\n   * Listen for data changes.\n   */\n  useEffect(() => {\n    if (ref.current && currentData?.url) {\n      if (currentData.result && ptCtx.mainViewInstance) {\n        let pointCloud = ptCtx.mainViewInstance;\n        const boxParamsList = PointCloudUtils.getBoxParamsFromResultList(currentData.result);\n\n        // Add Init Box\n        boxParamsList.forEach((v: IPointCloudBox) => {\n          const hex = toolStyleConverter.getColorFromConfig(\n            { attribute: v.attribute },\n            { ...config, attributeConfigurable: true },\n            {},\n          )?.hex;\n\n          pointCloud?.generateBox(v, hex);\n        });\n\n        ptCtx.setPointCloudResult(boxParamsList);\n        ptCtx.setPointCloudValid(jsonParser(currentData.result)?.valid);\n      }\n    }\n  }, [currentData, ptCtx.mainViewInstance]);\n\n  /**\n   *  Observe selectedID and reset camera to target top-view\n   */\n  useEffect(() => {\n    if (selectedBox) {\n      setTarget3DView(EPerspectiveView.Top);\n\n      /**\n       * 3DView's zoom synchronizes with topView' zoom.\n       */\n      const zoom = ptCtx.topViewInstance?.pointCloudInstance?.camera.zoom ?? 1;\n      ptCtx.mainViewInstance?.updateCameraZoom(zoom);\n    }\n  }, [selectedBox]);\n\n  useEffect(() => {\n    if (selectedSphere) {\n      setTarget3DView(EPerspectiveView.Top);\n\n      /**\n       * 3DView's zoom synchronizes with topView' zoom.\n       */\n      const zoom = ptCtx.topViewInstance?.pointCloudInstance?.camera.zoom ?? 1;\n      ptCtx.mainViewInstance?.updateCameraZoom(zoom);\n    }\n  }, [selectedSphere]);\n\n  const ptCloud3DCtx = useMemo(() => {\n    return { reset3DView, setTarget3DView, isActive: !!selectedBox, followTopView };\n  }, [selectedBox, ptCtx.mainViewInstance]);\n\n  const PointCloud3DTitle = (\n    <div>\n      <span style={{ marginRight: 8 }}>{t('ShowArrows')}</span>\n      <Switch\n        size='small'\n        checked={showDirection}\n        onChange={(showDirection) => {\n          setShowDirection(showDirection);\n          ptCtx.mainViewInstance?.setShowDirection(showDirection);\n        }}\n      />\n    </div>\n  );\n\n  return (\n    <PointCloudContainer\n      className={getClassName('point-cloud-3d-container')}\n      title={t('3DView')}\n      toolbar={PointCloud3DTitle}\n      style={{\n        height:\n          currentData.mappingImgList && currentData.mappingImgList?.length > 0 ? '55%' : '100%',\n      }}\n    >\n      <div className={getClassName('point-cloud-3d-content')}>\n        <PointCloud3DContext.Provider value={ptCloud3DCtx}>\n          <PointCloud3DSideBar />\n        </PointCloud3DContext.Provider>\n        <div className={getClassName('point-cloud-3d-view')} id={pointCloudID} ref={ref} />\n      </div>\n    </PointCloudContainer>\n  );\n};\n\nexport default connect(a2MapStateToProps, null, null, { context: LabelBeeContext })(PointCloud3D);\n"],"names":[],"mappings":"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"}

package/es/components/pointCloudView/PointCloudBackView.js

@@ -1 +1,132 @@
-import{PointCloudAnnotation as B}from"@labelbee/lb-annotation";import{getClassName as w}from"../../utils/dom.js";import{PointCloudContainer as y}from"./PointCloudLayout.js";import m,{useRef as k,useEffect as h}from"react";import{PointCloudContext as v}from"./PointCloudContext.js";import{EPerspectiveView as b}from"@labelbee/lb-utils";import{useSingleBox as V}from"./hooks/useSingleBox.js";import{useSphere as j}from"./hooks/useSphere.js";import{useZoom as S}from"./hooks/useZoom.js";import{SizeInfoForView as E}from"./PointCloudInfos.js";import{connect as I}from"react-redux";import{a2MapStateToProps as D}from"../../store/annotation/map.js";import{usePointCloudViews as T}from"./hooks/usePointCloudViews.js";import N from"../../hooks/useSize.js";import O from"./components/EmptyPage/index.js";import{useTranslation as M}from"react-i18next";import{LabelBeeContext as X}from"../../store/ctx.js";import U from"../../utils/ToolUtils.js";const Z=(l,r,a=1)=>{const{width:e,height:o}=r,t={x:l.x+e*a/2,y:l.y+o*a/2},u={x:r.width/2,y:r.height/2};return{offsetX:(u.x-t.x)/a,offsetY:-(u.y-t.y)/a}},g=(l,r,a,e,o)=>{const{offsetX:t,offsetY:u}=Z(l,a,r);if(o.camera.zoom=r,l){const d=Math.cos(e),f=Math.sin(e),x=t*d,C=t*f,{x:p,y:n,z:c}=o.initCameraPosition;o.camera.position.set(p+C,n-x,c+u)}o.camera.updateProjectionMatrix(),o.render()},A=({currentData:l,config:r,checkMode:a})=>{const e=m.useContext(v),o=k(null),t=N(o),{selectedBox:u}=V(),{selectedSphere:d}=j(),{syncBackviewToolZoom:f}=S(),{t:x}=M(),{backViewUpdateBox:C,backViewUpdatePoint:p}=T();return h(()=>{if(o.current){const n={width:o.current.clientWidth,height:o.current.clientHeight},c=new B({container:o.current,size:n,extraProps:{showDirectionLine:!1,forbidAddNew:!0,forbidDelete:!0},config:r,checkMode:a,toolName:U.getPointCloudToolList()});e.setBackViewInstance(c)}},[]),h(()=>{if(!t||!e.backViewInstance)return;const{toolInstance:n,pointCloudInstance:c}=e.backViewInstance;n.singleOn("renderZoom",(i,s)=>{if(e.selectedPointCloudBox){g(s,i,t,e.selectedPointCloudBox.rotation,c),f(s,i,t);return}if(d){g(s,i,t,0,c),f(s,i,t);return}}),n.singleOn("dragMove",({currentPos:i,zoom:s})=>{!e.selectedPointCloudBox&&!d||g(i,s,t,e.selectedPointCloudBox?e.selectedPointCloudBox.rotation:0,c)}),n.singleOn("updatePointByDrag",(i,s)=>{d&&(p==null||p(i,s[0]))}),n.singleOn("updatePolygonByDrag",i=>{if(e.selectedIDs.length===1&&i.length===1){const{newPolygon:s,originPolygon:P}=i[0];s&&P&&C(s,P)}})},[e,t]),h(()=>{var n;(n=e==null?void 0:e.backViewInstance)==null||n.initSize(t)},[t]),m.createElement(y,{className:w("point-cloud-container","back-view"),title:x("BackView"),toolbar:m.createElement(E,{perspectiveView:b.Back})},m.createElement("div",{className:w("point-cloud-container","bottom-view-content")},m.createElement("div",{className:w("point-cloud-container","core-instance"),ref:o}),!u&&!d&&m.createElement(O,null)))};var L=I(D,null,null,{context:X})(A);export{L as default};
+import { PointCloudAnnotation } from '@labelbee/lb-annotation';
+import { getClassName } from '../../utils/dom.js';
+import { PointCloudContainer } from './PointCloudLayout.js';
+import React, { useRef, useEffect } from 'react';
+import { PointCloudContext } from './PointCloudContext.js';
+import { EPerspectiveView } from '@labelbee/lb-utils';
+import { useSingleBox } from './hooks/useSingleBox.js';
+import { useSphere } from './hooks/useSphere.js';
+import { useZoom } from './hooks/useZoom.js';
+import { SizeInfoForView } from './PointCloudInfos.js';
+import { connect } from 'react-redux';
+import { a2MapStateToProps } from '../../store/annotation/map.js';
+import { usePointCloudViews } from './hooks/usePointCloudViews.js';
+import useSize from '../../hooks/useSize.js';
+import EmptyPage from './components/EmptyPage/index.js';
+import { useTranslation } from 'react-i18next';
+import { LabelBeeContext } from '../../store/ctx.js';
+import ToolUtils from '../../utils/ToolUtils.js';
+
+const TransferCanvas2WorldOffset = (currentPos, size, zoom = 1) => {
+  const {width: w, height: h} = size;
+  const canvasCenterPoint = {
+    x: currentPos.x + w * zoom / 2,
+    y: currentPos.y + h * zoom / 2
+  };
+  const worldCenterPoint = {
+    x: size.width / 2,
+    y: size.height / 2
+  };
+  return {
+    offsetX: (worldCenterPoint.x - canvasCenterPoint.x) / zoom,
+    offsetY: -(worldCenterPoint.y - canvasCenterPoint.y) / zoom
+  };
+};
+const updateBackViewByCanvas2D = (currentPos, zoom, size, rotation, backPointCloud) => {
+  const {offsetX, offsetY} = TransferCanvas2WorldOffset(currentPos, size, zoom);
+  backPointCloud.camera.zoom = zoom;
+  if (currentPos) {
+    const cos = Math.cos(rotation);
+    const sin = Math.sin(rotation);
+    const offsetXX = offsetX * cos;
+    const offsetXY = offsetX * sin;
+    const {x, y, z} = backPointCloud.initCameraPosition;
+    backPointCloud.camera.position.set(x + offsetXY, y - offsetXX, z + offsetY);
+  }
+  backPointCloud.camera.updateProjectionMatrix();
+  backPointCloud.render();
+};
+const PointCloudBackView = ({currentData, config, checkMode}) => {
+  const ptCtx = React.useContext(PointCloudContext);
+  const ref = useRef(null);
+  const size = useSize(ref);
+  const {selectedBox} = useSingleBox();
+  const {selectedSphere} = useSphere();
+  const {syncBackviewToolZoom} = useZoom();
+  const {t} = useTranslation();
+  const {backViewUpdateBox, backViewUpdatePoint} = usePointCloudViews();
+  useEffect(() => {
+    if (ref.current) {
+      const size2 = {
+        width: ref.current.clientWidth,
+        height: ref.current.clientHeight
+      };
+      const pointCloudAnnotation = new PointCloudAnnotation({
+        container: ref.current,
+        size: size2,
+        extraProps: {showDirectionLine: false, forbidAddNew: true, forbidDelete: true},
+        config,
+        checkMode,
+        toolName: ToolUtils.getPointCloudToolList()
+      });
+      ptCtx.setBackViewInstance(pointCloudAnnotation);
+    }
+  }, []);
+  useEffect(() => {
+    if (!size || !ptCtx.backViewInstance) {
+      return;
+    }
+    const {toolInstance: backPointCloudPolygonOperation, pointCloudInstance: backPointCloud} = ptCtx.backViewInstance;
+    backPointCloudPolygonOperation.singleOn("renderZoom", (zoom, currentPos) => {
+      if (ptCtx.selectedPointCloudBox) {
+        updateBackViewByCanvas2D(currentPos, zoom, size, ptCtx.selectedPointCloudBox.rotation, backPointCloud);
+        syncBackviewToolZoom(currentPos, zoom, size);
+        return;
+      }
+      if (selectedSphere) {
+        updateBackViewByCanvas2D(currentPos, zoom, size, 0, backPointCloud);
+        syncBackviewToolZoom(currentPos, zoom, size);
+        return;
+      }
+    });
+    backPointCloudPolygonOperation.singleOn("dragMove", ({currentPos, zoom}) => {
+      if (!ptCtx.selectedPointCloudBox && !selectedSphere) {
+        return;
+      }
+      updateBackViewByCanvas2D(currentPos, zoom, size, ptCtx.selectedPointCloudBox ? ptCtx.selectedPointCloudBox.rotation : 0, backPointCloud);
+    });
+    backPointCloudPolygonOperation.singleOn("updatePointByDrag", (updatePoint, oldPointList) => {
+      if (selectedSphere) {
+        backViewUpdatePoint == null ? void 0 : backViewUpdatePoint(updatePoint, oldPointList[0]);
+      }
+    });
+    backPointCloudPolygonOperation.singleOn("updatePolygonByDrag", (updateList) => {
+      if (ptCtx.selectedIDs.length === 1 && updateList.length === 1) {
+        const {newPolygon, originPolygon} = updateList[0];
+        if (newPolygon && originPolygon) {
+          backViewUpdateBox(newPolygon, originPolygon);
+        }
+      }
+    });
+  }, [ptCtx, size]);
+  useEffect(() => {
+    var _a;
+    (_a = ptCtx == null ? void 0 : ptCtx.backViewInstance) == null ? void 0 : _a.initSize(size);
+  }, [size]);
+  return /* @__PURE__ */ React.createElement(PointCloudContainer, {
+    className: getClassName("point-cloud-container", "back-view"),
+    title: t("BackView"),
+    toolbar: /* @__PURE__ */ React.createElement(SizeInfoForView, {
+      perspectiveView: EPerspectiveView.Back
+    })
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: getClassName("point-cloud-container", "bottom-view-content")
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: getClassName("point-cloud-container", "core-instance"),
+    ref
+  }), !selectedBox && !selectedSphere && /* @__PURE__ */ React.createElement(EmptyPage, null)));
+};
+var PointCloudBackView$1 = connect(a2MapStateToProps, null, null, {context: LabelBeeContext})(PointCloudBackView);
+
+export { PointCloudBackView$1 as default };
+//# sourceMappingURL=PointCloudBackView.js.map

package/es/components/pointCloudView/PointCloudBackView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PointCloudBackView.js","sources":["../../../src/components/pointCloudView/PointCloudBackView.tsx"],"sourcesContent":["/*\n * @Author: Laoluo luozefeng@sensetime.com\n * @Date: 2022-06-22 11:08:31\n * @LastEditors: Laoluo luozefeng@sensetime.com\n * @LastEditTime: 2022-07-08 11:08:02\n */\nimport { PointCloud, PointCloudAnnotation, THybridToolName } from '@labelbee/lb-annotation';\nimport { getClassName } from '@/utils/dom';\nimport { PointCloudContainer } from './PointCloudLayout';\nimport React, { useEffect, useRef } from 'react';\nimport { PointCloudContext } from './PointCloudContext';\nimport { EPerspectiveView, IPointUnit, UpdatePolygonByDragList } from '@labelbee/lb-utils';\nimport { useSingleBox } from './hooks/useSingleBox';\nimport { useSphere } from './hooks/useSphere';\nimport { useZoom } from './hooks/useZoom';\nimport { SizeInfoForView } from './PointCloudInfos';\nimport { connect } from 'react-redux';\nimport { a2MapStateToProps, IA2MapStateProps } from '@/store/annotation/map';\nimport { usePointCloudViews } from './hooks/usePointCloudViews';\nimport useSize from '@/hooks/useSize';\nimport EmptyPage from './components/EmptyPage';\nimport { useTranslation } from 'react-i18next';\nimport { LabelBeeContext } from '@/store/ctx';\nimport ToolUtils from '@/utils/ToolUtils';\n\n/**\n * 统一一下，将其拓展为 二维转换为 三维坐标的转换\n * Get the offset from canvas2d-coordinate to world coordinate\n * @param currentPos\n * @param size\n * @param zoom\n * @returns\n */\nconst TransferCanvas2WorldOffset = (\n  currentPos: { x: number; y: number },\n  size: { width: number; height: number },\n  zoom = 1,\n) => {\n  const { width: w, height: h } = size;\n\n  const canvasCenterPoint = {\n    x: currentPos.x + (w * zoom) / 2,\n    y: currentPos.y + (h * zoom) / 2,\n  };\n\n  const worldCenterPoint = {\n    x: size.width / 2,\n    y: size.height / 2,\n  };\n\n  return {\n    offsetX: (worldCenterPoint.x - canvasCenterPoint.x) / zoom,\n    offsetY: -(worldCenterPoint.y - canvasCenterPoint.y) / zoom,\n  };\n};\nconst updateBackViewByCanvas2D = (\n  currentPos: { x: number; y: number },\n  zoom: number,\n  size: { width: number; height: number },\n  rotation: number,\n  backPointCloud: PointCloud,\n) => {\n  const { offsetX, offsetY } = TransferCanvas2WorldOffset(currentPos, size, zoom);\n  backPointCloud.camera.zoom = zoom;\n  if (currentPos) {\n    const cos = Math.cos(rotation);\n    const sin = Math.sin(rotation);\n    const offsetXX = offsetX * cos;\n    const offsetXY = offsetX * sin;\n    const { x, y, z } = backPointCloud.initCameraPosition;\n    backPointCloud.camera.position.set(x + offsetXY, y - offsetXX, z + offsetY);\n  }\n  backPointCloud.camera.updateProjectionMatrix();\n  backPointCloud.render();\n};\n\ninterface IProps {\n  checkMode?: boolean;\n}\n\nconst PointCloudBackView = ({ currentData, config, checkMode }: IA2MapStateProps & IProps) => {\n  const ptCtx = React.useContext(PointCloudContext);\n  const ref = useRef<HTMLDivElement>(null);\n  const size = useSize(ref);\n  const { selectedBox } = useSingleBox();\n  const { selectedSphere } = useSphere();\n  const { syncBackviewToolZoom } = useZoom();\n\n  const { t } = useTranslation();\n  const { backViewUpdateBox, backViewUpdatePoint } = usePointCloudViews();\n\n  useEffect(() => {\n    if (ref.current) {\n      const size = {\n        width: ref.current.clientWidth,\n        height: ref.current.clientHeight,\n      };\n\n      const pointCloudAnnotation = new PointCloudAnnotation({\n        container: ref.current,\n        size,\n        extraProps: { showDirectionLine: false, forbidAddNew: true, forbidDelete: true },\n        config,\n        checkMode,\n        toolName: ToolUtils.getPointCloudToolList() as THybridToolName,\n      });\n      ptCtx.setBackViewInstance(pointCloudAnnotation);\n    }\n  }, []);\n\n  useEffect(() => {\n    // By the way as an initialization judgment\n    if (!size || !ptCtx.backViewInstance) {\n      return;\n    }\n\n    const { toolInstance: backPointCloudPolygonOperation, pointCloudInstance: backPointCloud } =\n      ptCtx.backViewInstance;\n\n    /**\n     * Synchronized 3d point cloud view displacement operations\n     *\n     * Change Orthographic Camera size\n     */\n    backPointCloudPolygonOperation.singleOn('renderZoom', (zoom: number, currentPos: any) => {\n      if (ptCtx.selectedPointCloudBox) {\n        updateBackViewByCanvas2D(\n          currentPos,\n          zoom,\n          size,\n          ptCtx.selectedPointCloudBox.rotation,\n          backPointCloud,\n        );\n        syncBackviewToolZoom(currentPos, zoom, size);\n        return;\n      }\n      if (selectedSphere) {\n        updateBackViewByCanvas2D(currentPos, zoom, size, 0, backPointCloud);\n        syncBackviewToolZoom(currentPos, zoom, size);\n        return;\n      }\n    });\n\n    // Synchronized 3d point cloud view displacement operations\n    backPointCloudPolygonOperation.singleOn('dragMove', ({ currentPos, zoom }: any) => {\n      if (!ptCtx.selectedPointCloudBox && !selectedSphere) {\n        return;\n      }\n      updateBackViewByCanvas2D(\n        currentPos,\n        zoom,\n        size,\n        ptCtx.selectedPointCloudBox ? ptCtx.selectedPointCloudBox.rotation : 0,\n        backPointCloud,\n      );\n    });\n\n    backPointCloudPolygonOperation.singleOn(\n      'updatePointByDrag',\n      (updatePoint: IPointUnit, oldPointList: IPointUnit[]) => {\n        if (selectedSphere) {\n          backViewUpdatePoint?.(updatePoint, oldPointList[0]);\n        }\n      },\n    );\n    backPointCloudPolygonOperation.singleOn(\n      'updatePolygonByDrag',\n      (updateList: UpdatePolygonByDragList) => {\n        if (ptCtx.selectedIDs.length === 1 && updateList.length === 1) {\n          const { newPolygon, originPolygon } = updateList[0];\n\n          if (newPolygon && originPolygon) {\n            backViewUpdateBox(newPolygon, originPolygon);\n          }\n        }\n      },\n    );\n  }, [ptCtx, size]);\n\n  useEffect(() => {\n    // Update Size\n    ptCtx?.backViewInstance?.initSize(size);\n  }, [size]);\n\n  return (\n    <PointCloudContainer\n      className={getClassName('point-cloud-container', 'back-view')}\n      title={t('BackView')}\n      toolbar={<SizeInfoForView perspectiveView={EPerspectiveView.Back} />}\n    >\n      <div className={getClassName('point-cloud-container', 'bottom-view-content')}>\n        <div className={getClassName('point-cloud-container', 'core-instance')} ref={ref} />\n        {!selectedBox && !selectedSphere && <EmptyPage />}\n      </div>\n    </PointCloudContainer>\n  );\n};\n\nexport default connect(a2MapStateToProps, null, null, { context: LabelBeeContext })(\n  PointCloudBackView,\n);\n"],"names":[],"mappings":"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"}