@labelbee/lb-components 1.24.0-alpha.51 → 1.24.0-alpha.53

package/es/components/videoAnnotate/videoClipTool/components/ToolTipForClip.js

@@ -1 +1 @@
-import{timeFormat as o,precisionMinus as v}from"../../../../utils/audio.js";import{AttributeUtils as F}from"@labelbee/lb-annotation";import{Tooltip as S}from"antd";import e from"react";import{ETimeSliceType as T}from"../constant.js";import{decimalReserved as u}from"../../../videoPlayer/utils.js";import{useTranslation as A}from"react-i18next";const $=m=>{var l,n;const{slot:s,item:t,attributeList:c}=m,{t:r}=A();if(!s)return null;const{type:d,attribute:p,textAttribute:b}=t;if(t.start===void 0||t.end===void 0)return null;const i=u(t.start,2),a=(n=u((l=t.end)!=null?l:0,2))!=null?n:0,f=e.createElement("div",null,e.createElement("div",null,d===T.Period?`${o(i,"ss:SS")}~${o(a,"ss:SS")}\uFF0C${v(a,i)}s`:o(i,"ss:SS")),e.createElement("div",null,`${r("Attribute")}\uFF1A${F.getAttributeShowText(p,c)||r("NoAttribute")}`),e.createElement("div",null,`${r("textTool")}\uFF1A${b}`));return e.createElement(S,{title:f},s)};export{$ as default};
+import{timeFormat as o,precisionMinus as F}from"../../../../utils/audio.js";import{AttributeUtils as A}from"@labelbee/lb-annotation";import{Tooltip as S}from"antd";import t from"react";import{ETimeSliceType as $}from"../constant.js";import{decimalReserved as a}from"../../../videoPlayer/utils.js";import{useTranslation as T}from"react-i18next";const E=m=>{var l,n;const{slot:s,item:e,attributeList:c}=m,{t:r}=T();if(!s)return null;const{type:d,attribute:p,textAttribute:b,text:f}=e;if(e.start===void 0||e.end===void 0)return null;const i=a(e.start,2),u=(n=a((l=e.end)!=null?l:0,2))!=null?n:0,v=t.createElement("div",null,t.createElement("div",null,d===$.Period?`${o(i,"ss:SS")}~${o(u,"ss:SS")}\uFF0C${F(u,i)}s`:o(i,"ss:SS")),t.createElement("div",null,`${r("Attribute")}\uFF1A${A.getAttributeShowText(p,c)||r("NoAttribute")}`),t.createElement("div",null,`${r("SubAttribute")}\uFF1A${f}`),t.createElement("div",null,`${r("textTool")}\uFF1A${b}`));return t.createElement(S,{title:v},s)};export{E as default};

package/es/components/videoAnnotate/videoClipTool/components/videoTimeSlicesOverVideo/index.js

@@ -1 +1,2 @@
-import{classnames as S}from"../../../../../utils/index.js";import{AttributeUtils as u,MathUtils as d}from"@labelbee/lb-annotation";import s from"react";import{CSSTransition as g,TransitionGroup as E}from"react-transition-group";import{TIME_SLICE_TYPE as h,ETimeSliceType as w}from"../../constant.js";import a from"./index.module.scss.js";var O=Object.defineProperty,P=Object.defineProperties,x=Object.getOwnPropertyDescriptors,f=Object.getOwnPropertySymbols,I=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,_=(i,e,r)=>e in i?O(i,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):i[e]=r,A=(i,e)=>{for(var r in e||(e={}))I.call(e,r)&&_(i,r,e[r]);if(f)for(var r of f(e))j.call(e,r)&&_(i,r,e[r]);return i},N=(i,e)=>P(i,x(e));const C=i=>{const{attributeList:e,result:r,currentTime:m,extraStyle:T}=i,y=t=>{const{type:o,start:n,end:p}=t;let l=!1;return o===w.Time?l=d.isInRange(m,[n-.1,n+.1]):l=p===null||d.isInRange(m,[n,p]),l},b=[],c=[];r.forEach(t=>{(y(t)?c:b).push(t)});const v=c.sort((t,o)=>t.start-o.start).map(t=>N(A({},t),{withinTime:!0})).map(t=>s.createElement(g,{classNames:"fade",key:t.id,timeout:500},s.createElement("div",{className:S({[a.timeSliceWrapper]:!0,[a.active]:t.withinTime})},s.createElement("div",{className:a.timeSliceItemAttribute,style:{textAlign:"right"}},s.createElement("span",{style:{backgroundColor:u.getAttributeColor(t.attribute,e)}},`${h[t.type]}: ${u.getAttributeShowText(t.attribute,e)||"\u65E0\u5C5E\u6027"}`)),t.textAttribute&&s.createElement("div",{className:a.timeSliceItemText},`\u6587\u672C: ${t.textAttribute}`))));return s.createElement("div",{className:a.videoTimeSlices,style:T},s.createElement(E,{className:"fade-group"},v))};export{C as default};
+import{classnames as S}from"../../../../../utils/index.js";import{AttributeUtils as c,TagUtils as E,MathUtils as b}from"@labelbee/lb-annotation";import s from"react";import{CSSTransition as h,TransitionGroup as w}from"react-transition-group";import{TIME_SLICE_TYPE as O,ETimeSliceType as P}from"../../constant.js";import o from"./index.module.scss.js";var A=Object.defineProperty,I=Object.defineProperties,N=Object.getOwnPropertyDescriptors,f=Object.getOwnPropertySymbols,j=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable,T=(i,t,r)=>t in i?A(i,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):i[t]=r,C=(i,t)=>{for(var r in t||(t={}))j.call(t,r)&&T(i,r,t[r]);if(f)for(var r of f(t))x.call(t,r)&&T(i,r,t[r]);return i},L=(i,t)=>I(i,N(t));const $=i=>{const{attributeList:t,result:r,currentTime:u,extraStyle:_,inputList:p=[]}=i,g=e=>{const{type:a,start:n,end:l}=e;let m=!1;return a===P.Time?m=b.isInRange(u,[n-.1,n+.1]):m=l===null||b.isInRange(u,[n,l]),m},v=[],d=[];r.forEach(e=>{(g(e)?d:v).push(e)});const y=d.sort((e,a)=>e.start-a.start).map(e=>L(C({},e),{withinTime:!0})).map(e=>s.createElement(h,{classNames:"fade",key:e.id,timeout:500},s.createElement("div",{className:S({[o.timeSliceWrapper]:!0,[o.active]:e.withinTime})},s.createElement("div",{className:o.timeSliceItemAttribute,style:{backgroundColor:c.getAttributeColor(e.attribute,t)}},`${O[e.type]}: ${c.getAttributeShowText(e.attribute,t)||"\u65E0\u5C5E\u6027"}`),(e==null?void 0:e.subAttribute)&&p.length>0&&(()=>{const a=E.getTagNameList(e.subAttribute,p);return a.length>0?s.createElement("div",{className:o.timeSliceItemSubAttribute,style:{backgroundColor:c.getAttributeColor(e.attribute,t)}},a.map((n,l)=>s.createElement("div",{key:l},`${n.keyName}\uFF1A${n.value.join(`
+`)}`))):null})(),e.textAttribute&&s.createElement("div",{className:o.timeSliceItemText},`\u6587\u672C: ${e.textAttribute}`))));return s.createElement("div",{className:o.videoTimeSlices,style:_},s.createElement(w,{className:"fade-group"},y))};export{$ as default};

package/es/components/videoAnnotate/videoClipTool/components/videoTimeSlicesOverVideo/index.module.scss.js

@@ -1 +1 @@
-var e={videoTimeSlices:"index-module_videoTimeSlices__v-2k1",timeSliceWrapper:"index-module_timeSliceWrapper__kebC3",timeSliceItemText:"index-module_timeSliceItemText__FJFwH",timeSliceItemAttribute:"index-module_timeSliceItemAttribute__--3E1"};export{e as default};
+var e={videoTimeSlices:"index-module_videoTimeSlices__v-2k1",timeSliceWrapper:"index-module_timeSliceWrapper__kebC3",timeSliceItemText:"index-module_timeSliceItemText__FJFwH",timeSliceItemAttribute:"index-module_timeSliceItemAttribute__--3E1",timeSliceItemSubAttribute:"index-module_timeSliceItemSubAttribute__MtsgS"};export{e as default};

package/es/components/videoAnnotate/videoClipTool/components/videoTrack/index.js

@@ -1 +1 @@
-import{timeFormat as $}from"../../../../../utils/audio.js";import{AttributeUtils as b,MathUtils as g}from"@labelbee/lb-annotation";import{EnvironmentFilled as z}from"@ant-design/icons";import i,{useContext as R,useRef as D,useMemo as S}from"react";import X from"../resizableSnippet/index.js";import{ETimeSliceType as N,EClipStatus as U}from"../../constant.js";import W from"../ToolTipForClip.js";import u from"./index.module.scss.js";import{decimalReserved as x,hashCode as L}from"../../../../videoPlayer/utils.js";import{VideoClipToolContext as q}from"../../VideoClipToolContext.js";import{VideoPlayerCtx as B}from"../../../../videoPlayer/index.js";import{useTranslation as G}from"react-i18next";var H=Object.defineProperty,K=Object.defineProperties,Q=Object.getOwnPropertyDescriptors,w=Object.getOwnPropertySymbols,Y=Object.prototype.hasOwnProperty,Z=Object.prototype.propertyIsEnumerable,A=(o,r,t)=>r in o?H(o,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[r]=t,J=(o,r)=>{for(var t in r||(r={}))Y.call(r,t)&&A(o,t,r[t]);if(w)for(var t of w(r))Z.call(r,t)&&A(o,t,r[t]);return o},tt=(o,r)=>K(o,Q(r));const et=(o,r)=>{const{t}=G(),{attribute:p,textAttribute:n}=o;return[b.getAttributeShowText(p,r)||t("NoAttribute"),n?`${t("textTool")}: ${n}`:""].filter(y=>y).join("\uFF0C")},rt=(o,r)=>{const t=(o||[]).filter(n=>n).map(()=>[]);o.forEach(n=>{if(n.id!==r){const s=t.findIndex(y=>{const l=n.start,c=n.end;return y.every(f=>{const T=[f.start,f.end],m=[l,c];return!g.isInRange(l,T)&&!g.isInRange(c,T)&&!g.isInRange(f.start,m)&&!g.isInRange(f.end,m)})});s>-1&&t[s].push(n)}});const p=ot(t.filter(n=>n.length>0));return p==null?void 0:p.map(n=>({data:n,id:L(n==null?void 0:n.map(s=>s.id).join("_"))}))},ot=(o,r=2)=>{let t=o;return t.length-r<0&&(t=t.concat(Array.from({length:r-t.length}))),t},nt=o=>{var r;const{currentTime:t,readonly:p,onTrackResizeStart:n}=o,{result:s,selectedAttribute:y,attributeList:l,selectedID:c,clipStatus:f,contextToCancel:T}=R(q),{duration:m}=R(B),C=D(null),I=t/m,_=(e,a=4)=>`${x(e*100,a)}%`,h=e=>{if(e){const a=b.getAttributeColor(e.attribute,l),v=Math.max((e.end||t)-e.start,0)/m,d={backgroundColor:a,left:_(e.start/m,2),width:_(e.end?Math.max(v,.001):v,2),position:"absolute",borderRadius:5};return e.type===N.Time&&(delete d.width,delete d.backgroundColor,d.top="50%",d.transform="translate(-50%)",d.color=a),d}return{}},k=b.getAttributeColor(y,l),E=((r=C.current)==null?void 0:r.clientWidth)||0,P=x(Math.max(E*I,0),0),F=x(Math.min(P,Math.floor(E-68)),0),j=e=>{if(e)return e.type===N.Time?i.createElement(W,{slot:i.createElement(z,{style:h(e)}),item:tt(J({},e),{end:e.end===null?t:e.end}),attributeList:l}):i.createElement(X,{track:e,currentTime:t,style:h(e),onResize:(a,v)=>o.onTrackResize(e.id,a,v),onTrackResizeStart:n,onClipping:f===U.Clipping,isSelected:e.id===c,readonly:p,attributeList:l})},M=S(()=>{const e=rt(s,c);return e==null?void 0:e.map((a,v)=>{var d;return i.createElement("div",{className:u.track,key:(a==null?void 0:a.id)||v},(d=a.data)==null?void 0:d.map(O=>j(O)))})},[s,c,m,JSON.stringify(l)]),V=S(()=>{const e=s.find(a=>(a==null?void 0:a.id)===c);return c&&e?i.createElement("div",{className:u.track,key:e==null?void 0:e.id},j(e)):null},[s,c,m,t,JSON.stringify(l)]);return i.createElement("div",{className:u.videoTrackContainer,ref:C,onContextMenu:T},i.createElement("div",{className:u.timeTrack}),i.createElement("div",{className:u.videoTrack},V,M),i.createElement("div",{className:u.timeline,style:{transform:`translate3d(${P}px, 0px, 0px)`,backgroundColor:k}}),i.createElement("div",{className:u.displayTime,style:{backgroundColor:k,transform:`translateX(${F}px, 0px, 0px)`}},$(t)))};var at=nt;export{at as default,et as getDisplayContent};
+import{timeFormat as z}from"../../../../../utils/audio.js";import{AttributeUtils as x,MathUtils as g}from"@labelbee/lb-annotation";import{EnvironmentFilled as D}from"@ant-design/icons";import s,{useContext as R,useRef as X,useMemo as j}from"react";import U from"../resizableSnippet/index.js";import{ETimeSliceType as A,EClipStatus as W}from"../../constant.js";import L from"../ToolTipForClip.js";import u from"./index.module.scss.js";import{decimalReserved as C,hashCode as q}from"../../../../videoPlayer/utils.js";import{VideoClipToolContext as B}from"../../VideoClipToolContext.js";import{VideoPlayerCtx as G}from"../../../../videoPlayer/index.js";import{useTranslation as H}from"react-i18next";var K=Object.defineProperty,Q=Object.defineProperties,Y=Object.getOwnPropertyDescriptors,N=Object.getOwnPropertySymbols,Z=Object.prototype.hasOwnProperty,J=Object.prototype.propertyIsEnumerable,w=(o,r,t)=>r in o?K(o,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[r]=t,tt=(o,r)=>{for(var t in r||(r={}))Z.call(r,t)&&w(o,t,r[t]);if(N)for(var t of N(r))J.call(r,t)&&w(o,t,r[t]);return o},et=(o,r)=>Q(o,Y(r));const rt=(o,r)=>{const{t}=H(),{attribute:p,textAttribute:n}=o,l=x.getAttributeShowText(p,r)||t("NoAttribute"),f=(o==null?void 0:o.text)||"";return[l,f?`${t("SubAttribute")}: ${f}`:"",n?`${t("textTool")}: ${n}`:""].filter(i=>i).join("\uFF0C")},ot=(o,r)=>{const t=(o||[]).filter(n=>n).map(()=>[]);o.forEach(n=>{if(n.id!==r){const l=t.findIndex(f=>{const i=n.start,c=n.end;return f.every(v=>{const T=[v.start,v.end],d=[i,c];return!g.isInRange(i,T)&&!g.isInRange(c,T)&&!g.isInRange(v.start,d)&&!g.isInRange(v.end,d)})});l>-1&&t[l].push(n)}});const p=nt(t.filter(n=>n.length>0));return p==null?void 0:p.map(n=>({data:n,id:q(n==null?void 0:n.map(l=>l.id).join("_"))}))},nt=(o,r=2)=>{let t=o;return t.length-r<0&&(t=t.concat(Array.from({length:r-t.length}))),t},at=o=>{var r;const{currentTime:t,readonly:p,onTrackResizeStart:n}=o,{result:l,selectedAttribute:f,attributeList:i,selectedID:c,clipStatus:v,contextToCancel:T}=R(B),{duration:d}=R(G),_=X(null),I=t/d,k=(e,a=4)=>`${C(e*100,a)}%`,h=e=>{if(e){const a=x.getAttributeColor(e.attribute,i),y=Math.max((e.end||t)-e.start,0)/d,m={backgroundColor:a,left:k(e.start/d,2),width:k(e.end?Math.max(y,.001):y,2),position:"absolute",borderRadius:5};return e.type===A.Time&&(delete m.width,delete m.backgroundColor,m.top="50%",m.transform="translate(-50%)",m.color=a),m}return{}},E=x.getAttributeColor(f,i),P=((r=_.current)==null?void 0:r.clientWidth)||0,O=C(Math.max(P*I,0),0),$=C(Math.min(O,Math.floor(P-68)),0),S=e=>{if(e)return e.type===A.Time?s.createElement(L,{slot:s.createElement(D,{style:h(e)}),item:et(tt({},e),{end:e.end===null?t:e.end}),attributeList:i}):s.createElement(U,{track:e,currentTime:t,style:h(e),onResize:(a,y)=>o.onTrackResize(e.id,a,y),onTrackResizeStart:n,onClipping:v===W.Clipping,isSelected:e.id===c,readonly:p,attributeList:i})},F=j(()=>{if(!d)return;const e=ot(l,c);return e==null?void 0:e.map((a,y)=>{var m;return s.createElement("div",{className:u.track,key:(a==null?void 0:a.id)||y},(m=a.data)==null?void 0:m.map((b,V)=>s.createElement(s.Fragment,{key:(b==null?void 0:b.id)||`${a==null?void 0:a.id}_${V}`},S(b))))})},[l,c,d,JSON.stringify(i)]),M=j(()=>{const e=l.find(a=>(a==null?void 0:a.id)===c);return c&&e?s.createElement("div",{className:u.track,key:e==null?void 0:e.id},S(e)):null},[l,c,d,t,JSON.stringify(i)]);return s.createElement("div",{className:u.videoTrackContainer,ref:_,onContextMenu:T},s.createElement("div",{className:u.timeTrack}),s.createElement("div",{className:u.videoTrack},M,F),s.createElement("div",{className:u.timeline,style:{transform:`translate3d(${O}px, 0px, 0px)`,backgroundColor:E}}),s.createElement("div",{className:u.displayTime,style:{backgroundColor:E,transform:`translateX(${$}px, 0px, 0px)`}},z(t)))};var st=at;export{st as default,rt as getDisplayContent};

package/es/components/videoAnnotate/videoClipTool/index.js

@@ -1 +1,2 @@
-import{MathUtils as C,CommonToolUtils as F,uuid as A,AttributeUtils as R}from"@labelbee/lb-annotation";import{jsonParser as P}from"../../../utils/index.js";import{precisionAdd as y,precisionMinus as k,isImageValue as V}from"../../../utils/audio.js";import{message as m}from"antd";import b from"lodash";import g from"react";import _ from"./index.module.scss.js";import{VideoClipToolContextProvider as B}from"./VideoClipToolContext.js";import{EClipStatus as d,ETimeSliceType as T,PER_SLICE_CHANGE as v,SLICE_MIN_TIME as x}from"./constant.js";import{VideoPlayer as j}from"../../videoPlayer/index.js";import M from"./components/videoTimeSlicesOverVideo/index.js";import U from"../../../assets/annotation/video/icon_videoCutting.svg.js";import{decimalReserved as L}from"../../videoPlayer/utils.js";class N extends g.Component{constructor(r){super(r);this.fns=new Map,this.throttledUpdateTime=b.throttle(t=>{this.videoPlayer.currentTime=t},100,{trailing:!0}),this.stepInfo=()=>this.props.stepInfo,this.emitEvent=t=>{const e=this.fns.get(t);e&&e.forEach(i=>{i&&i()})},this.setValid=t=>{this.setState({valid:t}),t===!1&&(this.clearResult(),this.updateSidebar())},this.updateSidebar=()=>{this.emitEvent("changeClipSidebar"),this.emitEvent("updateTextAttribute"),this.emitEvent("changeAttributeSidebar")},this.exportData=()=>{var t,e;const i=(e=(t=this.videoRef)==null?void 0:t.duration)!=null?e:0;return[this.state.result.filter(s=>s.end!==null),{valid:this.state.valid,duration:i}]},this.updateSelectedSliceTimeStartByPer=t=>{var e,i;if(this.state.clipStatus===d.Clipping){m.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const s=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0,{end:l,start:u,type:a}=this.state.result[this.selectedSliceIndex],n=C.withinRange(y(u,t),[0,k(a===T.Time?s:l,v)]);this.updateSelectedSliceTimeProperty(n,"start")}},this.updateSelectedSliceTimeEndByPer=t=>{var e,i;if(this.state.clipStatus===d.Clipping){m.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u7ED3\u675F\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const s=this.state.result[this.selectedSliceIndex],l=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0;if(s.type===T.Time){m.info("\u65F6\u95F4\u70B9\u4EC5\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}const{end:u,start:a}=s,n=C.withinRange(y(u,t),[y(a,v),l]);this.updateSelectedSliceTimeProperty(n,"end")}},this.updateSelectedSliceTimeProperty=(t,e)=>{if(this.selectedSliceIndex>-1){const{result:i}=this.state;i[this.selectedSliceIndex][e]=t,this.setState({result:b.cloneDeep(i)}),this.updateSidebar()}},this.keyDownEvents=t=>{if(!F.hotkeyFilter(t))return;const e=t.target;switch(e&&(e==null?void 0:e.tag)==="INPUT"&&(e==null?void 0:e.type)==="radio"&&t.preventDefault(),t.key.toLocaleLowerCase()){case"x":this.toggleClipStatus();break;case"e":this.addTime();break;case"escape":this.cancelClipped();break;case"-":this.updateSelectedSliceTimeStartByPer(-v);break;case"=":this.updateSelectedSliceTimeStartByPer(v);break;case"[":this.updateSelectedSliceTimeEndByPer(-v);break;case"]":this.updateSelectedSliceTimeEndByPer(v);break}},this.setVideoError=(t,e,i)=>{if(t){const{clipStatus:s}=this.state;s===d.Clipping&&this.toggleClipStatus(i)}this.setState({videoError:t,loading:!1})},this.clearResult=()=>{this.setState({result:[],selectedID:"",textValue:""}),this.updateSidebar()},this.cancelClipped=()=>{const{result:t,selectedID:e,clipStatus:i}=this.state;if(i!==d.Clipping)return;const s=t.findIndex(l=>l.id===e);s>-1&&(t.splice(s,1),this.setState({result:t,selectedID:"",clipStatus:d.Stop}),this.updateSidebar())},this.toggleClipStatus=t=>{var e,i;if(typeof((e=this.props)==null?void 0:e.annotationBefore)=="function"){(i=this.props)==null||i.annotationBefore(()=>this.setClipResult(t));return}this.setClipResult(t)},this.setClipResult=t=>{var e,i,s;if(this.disabled)return;const{clipStatus:l,selectedAttribute:u}=this.state,a=l!==d.Clipping;let n=a?d.Clipping:d.Stop,{result:o,selectedID:c,textValue:h}=this.state;const p=b.cloneDeep(o),S=t||((e=this.videoPlayer)==null?void 0:e.currentTime),I=(i=this.videoPlayer)==null?void 0:i.duration;if(I===void 0||S===void 0)return;const w=L(S,2);if(a){const f=A();c=f,p.push({start:w,end:null,attribute:u,textAttribute:this.defaultTextAttribute,duration:I,id:f,type:T.Period}),h=this.defaultTextAttribute}else{const f=p.findIndex(E=>E.id===c),D=p[f];D&&(S-D.start<x?(p.splice(f,1),m.info(`\u622A\u53D6\u7247\u6BB5\u4E0D\u80FD\u77ED\u4E8E${x}s`),n=d.Stop,c="",h=""):(p[f].end=L(S,2),(s=this.videoPlayer)==null||s.pause(),m.success(`\u5DF2\u622A\u53D6\u7247\u6BB5${o.length}`)))}this.setState({clipStatus:n,result:p,selectedID:c,textValue:h}),this.updateSidebar()},this.addTime=()=>{var t,e,i,s;if(this.disabled)return;const{result:l,selectedAttribute:u,selectedID:a}=this.state,n=A(),o=b.cloneDeep(l),c=((t=this.videoPlayer)==null?void 0:t.currentTime)||0;o.push({start:c,end:c,attribute:u,textAttribute:this.defaultTextAttribute,id:n,type:T.Time,duration:(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0});const h={result:o,selectedID:n,textValue:this.defaultTextAttribute},p=o.find(S=>S.id===a);this.isClipping&&p?(delete h.selectedID,delete h.textValue,m.success(`\u5DF2\u622A\u53D6\u65F6\u95F4\u70B9${o.length-1}`)):(s=this.videoPlayer)==null||s.pause(),this.setState(h),this.updateSidebar()},this.updateCurrentTime=t=>{this.setState({currentTime:t})},this.contextToCancel=t=>{this.state.clipStatus===d.Stop&&(t.preventDefault(),this.setState({selectedID:""}),this.updateSidebar())},this.onTrackResize=(t,e,i)=>{var s,l;const{result:u}=this.state,a=u.find(n=>n.id===t);if(a){const n=a.duration,o=e==="left",c=o?"start":"end",h=o?-n*i:n*i,p=o?[0,Math.max(((s=a.end)!=null?s:0)-x,0)]:[a.start+x,n],S=C.withinRange(h+((l=a==null?void 0:a[c])!=null?l:0),p);a[c]=S,this.throttledUpdateTime(S)}this.setState({result:[...u]}),this.updateSidebar()},this.renderMediaContent=()=>{var t;const{pageForward:e,pageJump:i,pageBackward:s}=this.props,{result:l,videoError:u,valid:a,currentTime:n}=this.state;return g.createElement("div",{className:_.clipContainer},g.createElement(j,{imgIndex:this.props.imgIndex,imgList:this.props.imgList,pageBackward:s,pageForward:e,pageJump:i,valid:a,setVideoRef:o=>{this.videoPlayer=o},showVideoTrack:!u,onTrackResize:this.onTrackResize,drawLayerSlot:this.props.drawLayerSlot,footer:this.props.footer,dataLoaded:this.props.onVideoLoaded,toggleClipStatus:this.toggleClipStatus,addTime:this.addTime,updateCurrentTime:this.updateCurrentTime}),g.createElement(M,{key:(t=this.videoPlayer)==null?void 0:t.currentTime,result:l,currentTime:n,attributeList:this.props.config.attributeList,extraStyle:{top:this.props.drawLayerSlot?40:0}}),this.isClipping&&g.createElement("i",{className:_.clipping,style:{backgroundImage:U}}))},this.onSelectedTimeSlice=t=>{var e;this.isClipping||(this.setState({selectedID:t.id,selectedAttribute:t.attribute,textValue:t.textAttribute,currentTime:t.start}),this.updateSidebar(),(e=this.videoPlayer)==null||e.pause(),this.videoPlayer.currentTime=t.start)},this.removeTimeSlice=t=>{const{result:e}=this.state,i=this.state.selectedID===t.id?"":this.state.selectedID,s=e.findIndex(l=>l.id===t.id);s>-1&&(e.splice(s,1),this.setState({result:[...e],selectedID:i}),this.updateSidebar())},this.setResult=(t=!0,e=this.props)=>{try{const{imgIndex:i,imgList:s}=e;if(!s[i])return;const u=P(s[i].result)[`step_${this.stepInfo().step}`],a=(u==null?void 0:u.result)||[],n=V(s[i].result||"[]");this.setState({result:a,loading:t,selectedID:"",textValue:"",selectedAttribute:"",clipStatus:d.Stop,valid:n},()=>{this.updateSidebar(),n||m.info("\u65E0\u6548\u89C6\u9891\uFF0C\u8BF7\u8DF3\u8FC7")})}catch(i){console.error("\u6570\u636E\u89E3\u6790\u5931\u8D25"),this.setState({result:[],loading:!1,selectedID:"",textValue:"",selectedAttribute:"",valid:!0},()=>{this.updateSidebar()})}},this.setDefaultAttribute=t=>{const{result:e,selectedID:i}=this.state,s=e.find(l=>l.id===i);s&&i&&(s.attribute=t),this.setState({selectedAttribute:t,result:[...e]}),this.updateSidebar()},this.textChange=t=>{const{result:e,selectedID:i}=this.state;if(this.setState({textValue:t}),i){const s=e.find(l=>l.id===i);s&&(s.textAttribute=t,this.setState({result:[...e]}),this.updateSidebar())}},this.state={result:[],selectedAttribute:"",textValue:"",clipStatus:d.Stop,selectedID:"",loading:!1,videoError:!1,remainingTime:0,currentTime:0,configLoading:!1,valid:!0}}get videoUrl(){var r;const{imgIndex:t,imgList:e}=this.props;return((r=e[t])==null?void 0:r.url)||""}get isClipping(){return this.state.clipStatus===d.Clipping}get resultJSON(){const{imgIndex:r,imgList:t}=this.props;return t.length===0||!t[r]?"[]":t[r].result}get disabled(){return!this.state.valid||this.state.videoError}get loading(){return this.state.loading||this.state.configLoading}get defaultTextAttribute(){return R.getTextAttribute(this.state.result,this.props.config.textCheckType)}get defaultAttribute(){return this.state.selectedAttribute}get selectedID(){return this.state.selectedID}get selectedSliceIndex(){return this.state.result.findIndex(r=>r.id===this.state.selectedID)}get exportContext(){return{selectedID:this.state.selectedID,result:this.state.result,clipStatus:this.state.clipStatus,videoPlayer:this.videoPlayer,attributeList:this.props.config.attributeList,onSelectedTimeSlice:this.onSelectedTimeSlice,removeTimeSlice:this.removeTimeSlice,updateSelectedSliceTimeProperty:this.updateSelectedSliceTimeProperty}}get valid(){return this.state.valid}get config(){var r;return P((r=this.props.stepInfo)==null?void 0:r.config)}get selectedText(){var r,t;return(t=(r=this.state.result)==null?void 0:r[this.selectedSliceIndex])==null?void 0:t.textAttribute}componentDidMount(){this.setState({loading:!1}),this.setResult(!1),this.props.onMounted(this),window.addEventListener("keydown",this.keyDownEvents)}componentWillUnmount(){this.props.onUnmounted(),window.removeEventListener("keydown",this.keyDownEvents)}shouldComponentUpdate(r,t){const e=r.imgIndex-this.props.imgIndex,i=r.step-this.props.step;return(e!==0||i!==0)&&(this.setResult(!0,r),i!==0&&this.setState({loading:!1})),!0}singleOn(r,t){this.fns.set(r,[t])}on(r,t){this.singleOn(r,t)}unbindAll(r){this.fns.delete(r)}render(){const{selectedID:r,result:t,clipStatus:e,selectedAttribute:i}=this.state;return g.createElement(B,{value:{videoPlayer:this.videoPlayer,result:t,selectedID:r,attributeList:this.props.config.attributeList,clipStatus:e,selectedAttribute:i,contextToCancel:this.contextToCancel}},this.renderMediaContent())}}export{N as default};
+import{MathUtils as D,CommonToolUtils as R,uuid as P,TagUtils as V,AttributeUtils as B}from"@labelbee/lb-annotation";import{jsonParser as L}from"../../../utils/index.js";import{precisionAdd as E,precisionMinus as j,isImageValue as U}from"../../../utils/audio.js";import{message as m}from"antd";import C from"lodash";import v from"react";import w from"./index.module.scss.js";import{VideoClipToolContextProvider as M}from"./VideoClipToolContext.js";import{EClipStatus as c,ETimeSliceType as y,PER_SLICE_CHANGE as b,SLICE_MIN_TIME as I}from"./constant.js";import{VideoPlayer as N}from"../../videoPlayer/index.js";import $ from"./components/videoTimeSlicesOverVideo/index.js";import O from"../../../assets/annotation/video/icon_videoCutting.svg.js";import{decimalReserved as F}from"../../videoPlayer/utils.js";class z extends v.Component{constructor(l){super(l);this.fns=new Map,this.throttledUpdateTime=C.throttle(t=>{this.videoPlayer.currentTime=t},100,{trailing:!0}),this.stepInfo=()=>this.props.stepInfo,this.emitEvent=t=>{const e=this.fns.get(t);e&&e.forEach(i=>{i&&i()})},this.setValid=t=>{this.setState({valid:t}),t===!1&&(this.clearResult(),this.updateSidebar())},this.updateSidebar=()=>{this.emitEvent("changeClipSidebar"),this.emitEvent("updateTextAttribute"),this.emitEvent("changeAttributeSidebar")},this.exportData=()=>{var t,e;const i=(e=(t=this.videoRef)==null?void 0:t.duration)!=null?e:0;return[this.state.result.filter(s=>s.end!==null),{valid:this.state.valid,duration:i}]},this.updateSelectedSliceTimeStartByPer=t=>{var e,i;if(this.state.clipStatus===c.Clipping){m.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const s=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0,{end:r,start:u,type:n}=this.state.result[this.selectedSliceIndex],a=D.withinRange(E(u,t),[0,j(n===y.Time?s:r,b)]);this.updateSelectedSliceTimeProperty(a,"start")}},this.updateSelectedSliceTimeEndByPer=t=>{var e,i;if(this.state.clipStatus===c.Clipping){m.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u7ED3\u675F\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const s=this.state.result[this.selectedSliceIndex],r=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0;if(s.type===y.Time){m.info("\u65F6\u95F4\u70B9\u4EC5\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}const{end:u,start:n}=s,a=D.withinRange(E(u,t),[E(n,b),r]);this.updateSelectedSliceTimeProperty(a,"end")}},this.updateSelectedSliceTimeProperty=(t,e)=>{if(this.selectedSliceIndex>-1){const{result:i}=this.state;i[this.selectedSliceIndex][e]=t,this.setState({result:C.cloneDeep(i)}),this.updateSidebar()}},this.keyDownEvents=t=>{if(!R.hotkeyFilter(t))return;const e=t.target;switch(e&&(e==null?void 0:e.tag)==="INPUT"&&(e==null?void 0:e.type)==="radio"&&t.preventDefault(),t.key.toLocaleLowerCase()){case"x":this.toggleClipStatus();break;case"e":this.addTime();break;case"escape":this.cancelClipped();break;case"-":this.updateSelectedSliceTimeStartByPer(-b);break;case"=":this.updateSelectedSliceTimeStartByPer(b);break;case"[":this.updateSelectedSliceTimeEndByPer(-b);break;case"]":this.updateSelectedSliceTimeEndByPer(b);break}},this.setVideoError=(t,e,i)=>{if(t){const{clipStatus:s}=this.state;s===c.Clipping&&this.toggleClipStatus(i)}this.setState({videoError:t,loading:!1})},this.clearResult=()=>{this.setState({result:[],selectedID:"",textValue:""}),this.updateSidebar()},this.cancelClipped=()=>{const{result:t,selectedID:e,clipStatus:i}=this.state;if(i!==c.Clipping)return;const s=t.findIndex(r=>r.id===e);s>-1&&(t.splice(s,1),this.setState({result:t,selectedID:"",clipStatus:c.Stop}),this.updateSidebar())},this.toggleClipStatus=t=>{var e,i;if(typeof((e=this.props)==null?void 0:e.annotationBefore)=="function"){(i=this.props)==null||i.annotationBefore(()=>this.setClipResult(t));return}this.setClipResult(t)},this.setClipResult=t=>{var e,i,s,r,u;if(this.disabled)return;const{clipStatus:n,selectedAttribute:a}=this.state,o=n!==c.Clipping;let h=o?c.Clipping:c.Stop,{result:d,selectedID:p,textValue:S}=this.state;const f=C.cloneDeep(d),x=t||((e=this.videoPlayer)==null?void 0:e.currentTime),A=(i=this.videoPlayer)==null?void 0:i.duration;if(A===void 0||x===void 0)return;const k=F(x,2);if(o){const g=P(),T={};p=g,f.push({start:k,end:null,attribute:a,textAttribute:this.defaultTextAttribute,duration:A,id:g,type:y.Period,subAttribute:T,text:this.getSubAttributeShowText(T,(r=(s=this.props.config)==null?void 0:s.inputList)!=null?r:[])}),S=this.defaultTextAttribute}else{const g=f.findIndex(_=>_.id===p),T=f[g];T&&(x-T.start<I?(f.splice(g,1),m.info(`\u622A\u53D6\u7247\u6BB5\u4E0D\u80FD\u77ED\u4E8E${I}s`),h=c.Stop,p="",S=""):(f[g].end=F(x,2),(u=this.videoPlayer)==null||u.pause(),m.success(`\u5DF2\u622A\u53D6\u7247\u6BB5${d.length}`)))}this.setState({clipStatus:h,result:f,selectedID:p,textValue:S}),this.updateSidebar()},this.addTime=()=>{var t,e,i,s;if(this.disabled)return;const{result:r,selectedAttribute:u,selectedID:n}=this.state,a=P(),o=C.cloneDeep(r),h=((t=this.videoPlayer)==null?void 0:t.currentTime)||0;o.push({start:h,end:h,attribute:u,textAttribute:this.defaultTextAttribute,id:a,type:y.Time,duration:(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0,subAttribute:{}});const d={result:o,selectedID:a,textValue:this.defaultTextAttribute},p=o.find(S=>S.id===n);this.isClipping&&p?(delete d.selectedID,delete d.textValue,m.success(`\u5DF2\u622A\u53D6\u65F6\u95F4\u70B9${o.length-1}`)):(s=this.videoPlayer)==null||s.pause(),this.setState(d),this.updateSidebar()},this.updateCurrentTime=t=>{this.setState({currentTime:t})},this.contextToCancel=t=>{this.state.clipStatus===c.Stop&&(t.preventDefault(),this.setState({selectedID:""}),this.updateSidebar())},this.onTrackResize=(t,e,i)=>{var s,r;const{result:u}=this.state,n=u.find(a=>a.id===t);if(n){const a=n.duration,o=e==="left",h=o?"start":"end",d=o?-a*i:a*i,p=o?[0,Math.max(((s=n.end)!=null?s:0)-I,0)]:[n.start+I,a],S=D.withinRange(d+((r=n==null?void 0:n[h])!=null?r:0),p);n[h]=S,this.throttledUpdateTime(S)}this.setState({result:[...u]}),this.updateSidebar()},this.renderMediaContent=()=>{var t,e,i;const{pageForward:s,pageJump:r,pageBackward:u}=this.props,{result:n,videoError:a,valid:o,currentTime:h}=this.state;return v.createElement("div",{className:w.clipContainer},v.createElement(N,{imgIndex:this.props.imgIndex,imgList:this.props.imgList,pageBackward:u,pageForward:s,pageJump:r,valid:o,setVideoRef:d=>{this.videoPlayer=d},showVideoTrack:!a,onTrackResize:this.onTrackResize,drawLayerSlot:this.props.drawLayerSlot,footer:this.props.footer,dataLoaded:this.props.onVideoLoaded,toggleClipStatus:this.toggleClipStatus,addTime:this.addTime,updateCurrentTime:this.updateCurrentTime}),v.createElement($,{key:(t=this.videoPlayer)==null?void 0:t.currentTime,result:n,currentTime:h,attributeList:this.props.config.attributeList,inputList:(i=(e=this.props.config)==null?void 0:e.inputList)!=null?i:[],extraStyle:{top:this.props.drawLayerSlot?40:0}}),this.isClipping&&v.createElement("i",{className:w.clipping,style:{backgroundImage:O}}))},this.onSelectedTimeSlice=t=>{var e;this.isClipping||(this.setState({selectedID:t.id,selectedAttribute:t.attribute,textValue:t.textAttribute,currentTime:t.start}),this.updateSidebar(),(e=this.videoPlayer)==null||e.pause(),this.videoPlayer.currentTime=t.start)},this.removeTimeSlice=t=>{const{result:e}=this.state,i=this.state.selectedID===t.id?"":this.state.selectedID,s=e.findIndex(r=>r.id===t.id);s>-1&&(e.splice(s,1),this.setState({result:[...e],selectedID:i}),this.updateSidebar())},this.setResult=(t=!0,e=this.props)=>{var i,s;try{const{imgIndex:r,imgList:u}=e;if(!u[r])return;const a=L(u[r].result)[`step_${this.stepInfo().step}`],o=(a==null?void 0:a.result)||[],h=(s=(i=this.props.config)==null?void 0:i.inputList)!=null?s:[];o.forEach(p=>{p.text=this.getSubAttributeShowText(p.subAttribute,h)});const d=U(u[r].result||"[]");this.setState({result:o,loading:t,selectedID:"",textValue:"",selectedAttribute:"",clipStatus:c.Stop,valid:d},()=>{this.updateSidebar(),d||m.info("\u65E0\u6548\u89C6\u9891\uFF0C\u8BF7\u8DF3\u8FC7")})}catch(r){console.error("\u6570\u636E\u89E3\u6790\u5931\u8D25"),this.setState({result:[],loading:!1,selectedID:"",textValue:"",selectedAttribute:"",valid:!0},()=>{this.updateSidebar()})}},this.setDefaultAttribute=t=>{const{result:e,selectedID:i}=this.state,s=e.find(r=>r.id===i);s&&i&&(s.attribute=t),this.setState({selectedAttribute:t,result:[...e]}),this.updateSidebar()},this.setSubAttribute=(t,e)=>{var i,s;const{result:r,selectedID:u}=this.state;if(u){const n=r.find(a=>a.id===u);n&&(n.subAttribute||(n.subAttribute={}),n.subAttribute[t]=e,n.text=this.getSubAttributeShowText(n.subAttribute,(s=(i=this.props.config)==null?void 0:i.inputList)!=null?s:[]),this.setState({result:[...r]}),this.updateSidebar())}},this.textChange=t=>{const{result:e,selectedID:i}=this.state;if(this.setState({textValue:t}),i){const s=e.find(r=>r.id===i);s&&(s.textAttribute=t,this.setState({result:[...e]}),this.updateSidebar())}},this.getSubAttributeShowText=(t,e)=>{if(!t||(e==null?void 0:e.length)===0)return"";let i="";return V.getTagNameList(t,e).forEach(r=>{i+=`
+${r.keyName}: ${r.value.join("\u3001")}`}),i},this.state={result:[],selectedAttribute:"",textValue:"",clipStatus:c.Stop,selectedID:"",loading:!1,videoError:!1,remainingTime:0,currentTime:0,configLoading:!1,valid:!0}}get videoUrl(){var l;const{imgIndex:t,imgList:e}=this.props;return((l=e[t])==null?void 0:l.url)||""}get isClipping(){return this.state.clipStatus===c.Clipping}get resultJSON(){const{imgIndex:l,imgList:t}=this.props;return t.length===0||!t[l]?"[]":t[l].result}get disabled(){return!this.state.valid||this.state.videoError}get loading(){return this.state.loading||this.state.configLoading}get defaultTextAttribute(){return B.getTextAttribute(this.state.result,this.props.config.textCheckType)}get defaultAttribute(){return this.state.selectedAttribute}get selectedID(){return this.state.selectedID}get selectedSliceIndex(){return this.state.result.findIndex(l=>l.id===this.state.selectedID)}get exportContext(){return{selectedID:this.state.selectedID,result:this.state.result,clipStatus:this.state.clipStatus,videoPlayer:this.videoPlayer,attributeList:this.props.config.attributeList,onSelectedTimeSlice:this.onSelectedTimeSlice,removeTimeSlice:this.removeTimeSlice,updateSelectedSliceTimeProperty:this.updateSelectedSliceTimeProperty}}get valid(){return this.state.valid}get config(){var l;return L((l=this.props.stepInfo)==null?void 0:l.config)}get selectedText(){var l,t;return(t=(l=this.state.result)==null?void 0:l[this.selectedSliceIndex])==null?void 0:t.textAttribute}componentDidMount(){this.setState({loading:!1}),this.setResult(!1),this.props.onMounted(this),window.addEventListener("keydown",this.keyDownEvents)}componentWillUnmount(){this.props.onUnmounted(),window.removeEventListener("keydown",this.keyDownEvents)}shouldComponentUpdate(l,t){const e=l.imgIndex-this.props.imgIndex,i=l.step-this.props.step;return(e!==0||i!==0)&&(this.setResult(!0,l),i!==0&&this.setState({loading:!1})),!0}singleOn(l,t){this.fns.set(l,[t])}on(l,t){this.singleOn(l,t)}unbindAll(l){this.fns.delete(l)}render(){const{selectedID:l,result:t,clipStatus:e,selectedAttribute:i}=this.state;return v.createElement(M,{value:{videoPlayer:this.videoPlayer,result:t,selectedID:l,attributeList:this.props.config.attributeList,clipStatus:e,selectedAttribute:i,contextToCancel:this.contextToCancel}},this.renderMediaContent())}}export{z as default};

package/es/index.css

@@ -521,14 +521,28 @@
   word-break: break-all;
 }
 .index-module_timeSliceWrapper__kebC3 .index-module_timeSliceItemText__FJFwH {
-  background-color: #CCC;
+  width: 100%;
   padding: 8px 24px;
+  background-color: #ccc;
 }
-.index-module_timeSliceWrapper__kebC3 .index-module_timeSliceItemAttribute__--3E1 span {
-  display: inline-block;
-  height: 40px;
-  line-height: 40px;
-  padding: 0 24px;
+.index-module_timeSliceWrapper__kebC3 .index-module_timeSliceItemAttribute__--3E1 {
+  width: 100%;
+  padding: 8px 24px;
+  text-align: left;
+}
+.index-module_timeSliceWrapper__kebC3 .index-module_timeSliceItemSubAttribute__MtsgS {
+  font-size: 14px;
+  color: #fff;
+  padding: 8px 24px;
+  word-break: break-all;
+  line-height: 1.5;
+  width: 100%;
+}
+.index-module_timeSliceWrapper__kebC3 .index-module_timeSliceItemSubAttribute__MtsgS div {
+  margin-bottom: 4px;
+}
+.index-module_timeSliceWrapper__kebC3 .index-module_timeSliceItemSubAttribute__MtsgS div:last-child {
+  margin-bottom: 0;
 }
 .index-module_speedControllerWrap__aFz7r {
   display: flex;

package/es/views/MainView/sidebar/SwitchAttributeList/index.js

@@ -1 +1 @@
-import m,{useState as p,useRef as v,useEffect as L}from"react";import{connect as A}from"react-redux";import S from"../../../../components/attributeList/index.js";import g from"../../../../utils/StepUtils.js";import{jsonParser as I}from"../../../../utils/index.js";import{useTranslation as h}from"react-i18next";import{EToolName as x}from"../../../../data/enums/ToolType.js";import{LabelBeeContext as T}from"../../../../store/ctx.js";const _=e=>{var r;const[a,l]=p(0),u=v(null),{toolInstance:t}=e,{t:f}=h(),b=o=>{t==null||t.setAttributeLockList(o)};if(L(()=>(t&&t.singleOn("changeAttributeSidebar",o=>{var s;l(n=>n+1),!!u.current&&((s=u.current.children[o])==null||s.scrollIntoView({block:"center"}))}),()=>{t==null||t.unbindAll("changeAttributeSidebar")}),[t,u]),!e.stepInfo)return null;const i=I(e.stepInfo.config),c=e.stepInfo.tool===x.ScribbleTool;if(i.attributeConfigurable!==!0&&!c)return null;if((i.attributeConfigurable===!0||c)&&(i==null?void 0:i.attributeList)){const o=i.attributeList.map(n=>({label:n.key,value:n.value,color:n==null?void 0:n.color}));c||o.unshift({label:f("NoAttribute"),value:""});const s=n=>{t&&(t.setDefaultAttribute(n),l(d=>d+1))};return m.createElement(S,{list:o,attributeChanged:s,selectedAttribute:(r=t==null?void 0:t.defaultAttribute)!=null?r:"",ref:u,attributeLockChange:b})}return null},j=e=>{var r,a;const l=g.getCurrentStepInfo((r=e.annotation)==null?void 0:r.step,(a=e.annotation)==null?void 0:a.stepList);return{toolInstance:e.annotation.toolInstance,stepInfo:l}};var C=A(j,null,null,{context:T})(_);export{C as default};
+import p,{useState as v,useRef as L,useEffect as A}from"react";import{connect as S}from"react-redux";import g from"../../../../components/attributeList/index.js";import I from"../../../../utils/StepUtils.js";import{jsonParser as h}from"../../../../utils/index.js";import{useTranslation as x}from"react-i18next";import{EToolName as T}from"../../../../data/enums/ToolType.js";import{LabelBeeContext as _}from"../../../../store/ctx.js";const j=e=>{var r;const[a,l]=v(0),u=L(null),{toolInstance:t}=e,{t:b}=x(),d=n=>{t==null||t.setAttributeLockList(n)};if(A(()=>(t&&t.singleOn("changeAttributeSidebar",n=>{var s;l(f=>f+1),!!u.current&&((s=u.current.children[n])==null||s.scrollIntoView({block:"center"}))}),()=>{t==null||t.unbindAll("changeAttributeSidebar")}),[t,u]),!e.stepInfo)return null;const i=h(e.stepInfo.config),c=e.stepInfo.tool===T.ScribbleTool;if(i.attributeConfigurable!==!0&&!c)return null;if((i.attributeConfigurable===!0||c)&&(i==null?void 0:i.attributeList)){const n=i.attributeList.map(o=>({label:o.key,value:o.value,color:o==null?void 0:o.color}));c||n.unshift({label:b("NoAttribute"),value:""});const s=o=>{t&&(t.setDefaultAttribute(o),l(m=>m+1))},f=(r=t==null?void 0:t.defaultAttribute)!=null?r:"";return p.createElement(g,{list:n,attributeChanged:s,selectedAttribute:f,ref:u,attributeLockChange:d})}return null},C=e=>{var r,a;const l=I.getCurrentStepInfo((r=e.annotation)==null?void 0:r.step,(a=e.annotation)==null?void 0:a.stepList);return{toolInstance:e.annotation.toolInstance,stepInfo:l}};var k=S(C,null,null,{context:_})(j);export{k as default};

package/es/views/MainView/sidebar/VideoClipToolAttributeList/index.js

@@ -0,0 +1 @@
+import r,{useState as _,useRef as j,useMemo as E,useEffect as k}from"react";import{connect as T}from"react-redux";import V from"../../../../components/attributeList/index.js";import w from"../../../../utils/StepUtils.js";import{jsonParser as y}from"../../../../utils/index.js";import{useTranslation as D}from"react-i18next";import{LabelBeeContext as R}from"../../../../store/ctx.js";import P from"../../../../components/subAttributeList/index.js";import{Divider as U}from"antd";const B=n=>{var l,u;const[v,d]=_(0),s=j(null),{toolInstance:t}=n,{t:L}=D(),o=n.stepInfo?y(n.stepInfo.config):{},p=(l=t==null?void 0:t.defaultAttribute)!=null?l:"",a=t==null?void 0:t.exportContext,c=a==null?void 0:a.selectedID,f=a==null?void 0:a.result,A=(u=o==null?void 0:o.inputList)!=null?u:[],b=E(()=>{if(c&&f)return f.find(e=>e.id===c)},[c,f]),S=e=>{t==null||t.setAttributeLockList(e)};if(k(()=>(t&&t.singleOn("changeAttributeSidebar",e=>{var i;d(m=>m+1),!!s.current&&((i=s.current.children[e])==null||i.scrollIntoView({block:"center"}))}),()=>{t==null||t.unbindAll("changeAttributeSidebar")}),[t,s]),!n.stepInfo||o.attributeConfigurable!==!0||!(o==null?void 0:o.attributeList))return null;const g=o.attributeList.map(e=>({label:e.key,value:e.value,color:e==null?void 0:e.color}));g.unshift({label:L("NoAttribute"),value:""});const x=e=>{t&&(t.setDefaultAttribute(e),d(i=>i+1))},h=(e,i)=>{t&&t.setSubAttribute&&(t.setSubAttribute(e,i),d(m=>m+1))},C=e=>{if(b==null?void 0:b.subAttribute)return b.subAttribute[e.value]},I=p&&c&&b&&A.length>0&&(o==null?void 0:o.secondaryAttributeConfigurable)===!0;return r.createElement("div",{style:{height:0,flex:1,overflowY:"auto",overflowX:"hidden"}},r.createElement(V,{list:g,attributeChanged:x,selectedAttribute:p,ref:s,attributeLockChange:S}),I&&r.createElement(r.Fragment,null,r.createElement(U,{style:{margin:0}}),r.createElement(P,{subAttributeList:A,setSubAttribute:h,getValue:C,lang:"cn"})))},F=n=>{var l,u;const v=w.getCurrentStepInfo((l=n.annotation)==null?void 0:l.step,(u=n.annotation)==null?void 0:u.stepList);return{toolInstance:n.annotation.toolInstance,stepInfo:v}};var M=T(F,null,null,{context:R})(B);export{M as default};

package/es/views/MainView/sidebar/index.js

@@ -1 +1 @@
-import{prefix as W}from"../../../constant/index.js";import{EToolName as n}from"../../../data/enums/ToolType.js";import z from"../../../utils/StepUtils.js";import{Collapse as u}from"antd/es";import e,{useState as D}from"react";import{useTranslation as G}from"react-i18next";import U from"./AnnotationText/index.js";import q from"./ClearIcon/index.js";import H,{PointCloudOperation as y}from"./GeneralOperation/index.js";import J from"./ImgAttributeInfo/index.js";import Q from"./SwitchAttributeList/index.js";import p,{expandIconFuc as _}from"./TagSidebar/index.js";import f from"./TextToolSidebar/index.js";import $ from"./PointCloudToolSidebar/index.js";import X from"./ToolStyle/index.js";import{cTool as Y}from"@labelbee/lb-annotation";import Z from"./ScribbleSidebar/index.js";import{ToolIcons as ee}from"./ToolIcons.js";import{useSelector as te}from"../../../store/ctx.js";import{Tabs as I}from"antd";import{classnames as oe}from"../../../utils/index.js";import P from"../../../assets/annotation/common/icon_menu_fold.svg.js";import ne from"../../../components/LLMToolView/sidebar/index.js";import re from"../../../components/LLMMultiWheelView/sidebar/index.js";import ie from"./NLPSidebar/index.js";import le from"../../../components/videoAnnotate/videoClipTool/components/annotatedList/index.js";const{EVideoToolName:E,EPointCloudName:ae}=Y,{Panel:A}=u,t=`${W}-sidebar`,se=({sider:l,enableColorPicker:w,setSiderWidth:b,propsSiderWidth:ce,checkMode:c,setBatchSetValid:M})=>{const x=te(r=>z.getCurrentStepInfo(r.annotation.step,r.annotation.stepList)),[m,V]=D(!0),o=x==null?void 0:x.tool,{t:S}=G();if(!o)return null;const B=r=>{const s=e.createElement(X,null);return e.createElement(A,{header:S("Style"),className:"panel",key:r},s)},T=e.createElement(ee,{toolName:o,onChange:()=>{}}),a=e.createElement(Q,null),g=e.createElement(U,null),N=e.createElement(u,{defaultActiveKey:["1","imgAttribute"],bordered:!1,expandIconPosition:"right",className:`${t}__content`,expandIcon:_},B("1")),h=e.createElement(u,{defaultActiveKey:["1","imgAttribute"],bordered:!1,expandIconPosition:"right",className:`${t}__content`,expandIcon:_},e.createElement(A,{header:e.createElement("div",null,S("Adjust"),e.createElement(q,null)),className:"panel",key:"imgAttribute"},e.createElement(J,null))),i=e.createElement(H,null),O=e.createElement(p,null),k=r=>e.createElement(f,{disabled:r}),L=e.createElement(Z,{onChange:(r,s)=>{}}),v=e.createElement(le,null),C=e.createElement(ne,{checkMode:c}),F=e.createElement(re,{checkMode:c}),j=e.createElement(ie,{checkMode:c}),d=e.createElement("div",{className:`${t}__horizontal`}),K=e.createElement($,{enableColorPicker:w}),R=e.createElement(y,{setBatchSetValid:M});if(l)return typeof l=="function"?e.createElement("div",{className:`${t}`},l({toolIcon:T,attributeList:a,annotationText:g,toolStyle:N,imageAttributeInfo:h,operation:i,tagToolSideBar:O,textToolSideBar:k,horizontal:d,pointCloudToolSidebar:K,pointCloudOperation:R,scribbleSidebar:L,LLMSidebar:C,LLMMultiWheelSidebar:F,videoClipSidebar:v,NLPSidebar:j})):l;if([n.Rect,n.Point,n.Line,n.Rect,n.Polygon,n.Cuboid].includes(o))return e.createElement("div",{className:`${t}`},T,d,a,g,d,e.createElement("div",{className:`${t}__content`},N,h),i);if(o===n.Tag)return e.createElement("div",{className:`${t}`},e.createElement(p,null));if(o===E.VideoClipTool)return e.createElement("div",{className:`${t}`},e.createElement("div",{className:`${t}__content`},v,a),i);if(o===E.VideoTagTool)return e.createElement("div",{className:`${t}`},e.createElement("div",{className:`${t}__content`},e.createElement(p,null)),i);if(o===E.VideoTextTool)return e.createElement("div",{className:`${t}`},e.createElement(f,null));if(o===n.Text)return e.createElement("div",{className:`${t}`},"s",e.createElement(f,null));if(o===ae.PointCloud){const r=()=>{V(!m),b&&b(m?48:void 0)},s=e.createElement("div",{style:{width:"48px",height:"100%",display:"flex",justifyContent:"center",background:"#ffffff"}},e.createElement("span",{onClick:()=>r()},e.createElement("img",{style:{width:"16px",height:"16px",marginTop:"18px",cursor:"pointer",transform:"rotate(180deg)"},src:P})));return m?e.createElement(I,{type:"card",activeKey:"1",className:oe({[`${t}`]:!0,[`${t}__pointCloud`]:!0}),tabBarExtraContent:{left:e.createElement("span",{onClick:()=>r(),style:{padding:"0px 4px"}},e.createElement("img",{style:{width:"16px",height:"16px",marginLeft:"4px",cursor:"pointer"},src:P}))}},e.createElement(I.TabPane,{tab:"\u5DE5\u5177\u9762\u677F",key:"1",style:{height:"100%",display:"flex",flexDirection:"column"}},e.createElement("div",{className:`${t}__content`},e.createElement($,null)),e.createElement(y,null))):s}return o===n.ScribbleTool?e.createElement("div",{className:`${t}`},e.createElement("div",{className:`${t}__content`},L,a),i):o===n.LLM?C:o===n.NLP?j:null};export{se as default,t as sidebarCls};
+import{prefix as z}from"../../../constant/index.js";import{EToolName as n}from"../../../data/enums/ToolType.js";import D from"../../../utils/StepUtils.js";import{Collapse as b}from"antd/es";import e,{useState as G}from"react";import{useTranslation as U}from"react-i18next";import q from"./AnnotationText/index.js";import H from"./ClearIcon/index.js";import J,{PointCloudOperation as _}from"./GeneralOperation/index.js";import Q from"./ImgAttributeInfo/index.js";import $ from"./SwitchAttributeList/index.js";import E,{expandIconFuc as A}from"./TagSidebar/index.js";import x from"./TextToolSidebar/index.js";import I from"./PointCloudToolSidebar/index.js";import X from"./ToolStyle/index.js";import{cTool as Y}from"@labelbee/lb-annotation";import Z from"./ScribbleSidebar/index.js";import{ToolIcons as ee}from"./ToolIcons.js";import{useSelector as te}from"../../../store/ctx.js";import{Tabs as P}from"antd";import{classnames as oe}from"../../../utils/index.js";import w from"../../../assets/annotation/common/icon_menu_fold.svg.js";import ne from"../../../components/LLMToolView/sidebar/index.js";import re from"../../../components/LLMMultiWheelView/sidebar/index.js";import ie from"./NLPSidebar/index.js";import le from"../../../components/videoAnnotate/videoClipTool/components/annotatedList/index.js";import ae from"./VideoClipToolAttributeList/index.js";const{EVideoToolName:m,EPointCloudName:se}=Y,{Panel:M}=b,t=`${z}-sidebar`,ce=i=>{var a;return i?(a={[m.VideoClipTool]:e.createElement(ae,null)}[i])!=null?a:e.createElement($,null):e.createElement($,null)},me=({sider:i,enableColorPicker:a,setSiderWidth:d,propsSiderWidth:de,checkMode:u,setBatchSetValid:V})=>{const T=te(r=>D.getCurrentStepInfo(r.annotation.step,r.annotation.stepList)),[p,B]=G(!0),o=T==null?void 0:T.tool,{t:S}=U();if(!o)return null;const O=r=>{const c=e.createElement(X,null);return e.createElement(M,{header:S("Style"),className:"panel",key:r},c)},g=e.createElement(ee,{toolName:o,onChange:()=>{}}),s=ce(o),L=e.createElement(q,null),C=e.createElement(b,{defaultActiveKey:["1","imgAttribute"],bordered:!1,expandIconPosition:"right",className:`${t}__content`,expandIcon:A},O("1")),h=e.createElement(b,{defaultActiveKey:["1","imgAttribute"],bordered:!1,expandIconPosition:"right",className:`${t}__content`,expandIcon:A},e.createElement(M,{header:e.createElement("div",null,S("Adjust"),e.createElement(H,null)),className:"panel",key:"imgAttribute"},e.createElement(Q,null))),l=e.createElement(J,null),k=e.createElement(E,null),F=r=>e.createElement(x,{disabled:r}),v=e.createElement(Z,{onChange:(r,c)=>{}}),N=e.createElement(le,null),j=e.createElement(ne,{checkMode:u}),K=e.createElement(re,{checkMode:u}),y=e.createElement(ie,{checkMode:u}),f=e.createElement("div",{className:`${t}__horizontal`}),R=e.createElement(I,{enableColorPicker:a}),W=e.createElement(_,{setBatchSetValid:V});if(i)return typeof i=="function"?e.createElement("div",{className:`${t}`},i({toolIcon:g,attributeList:s,annotationText:L,toolStyle:C,imageAttributeInfo:h,operation:l,tagToolSideBar:k,textToolSideBar:F,horizontal:f,pointCloudToolSidebar:R,pointCloudOperation:W,scribbleSidebar:v,LLMSidebar:j,LLMMultiWheelSidebar:K,videoClipSidebar:N,NLPSidebar:y})):i;if([n.Rect,n.Point,n.Line,n.Rect,n.Polygon,n.Cuboid].includes(o))return e.createElement("div",{className:`${t}`},g,f,s,L,f,e.createElement("div",{className:`${t}__content`},C,h),l);if(o===n.Tag)return e.createElement("div",{className:`${t}`},e.createElement(E,null));if(o===m.VideoClipTool)return e.createElement("div",{className:`${t}`},e.createElement("div",{className:`${t}__content`},N,s),l);if(o===m.VideoTagTool)return e.createElement("div",{className:`${t}`},e.createElement("div",{className:`${t}__content`},e.createElement(E,null)),l);if(o===m.VideoTextTool)return e.createElement("div",{className:`${t}`},e.createElement(x,null));if(o===n.Text)return e.createElement("div",{className:`${t}`},"s",e.createElement(x,null));if(o===se.PointCloud){const r=()=>{B(!p),d&&d(p?48:void 0)},c=e.createElement("div",{style:{width:"48px",height:"100%",display:"flex",justifyContent:"center",background:"#ffffff"}},e.createElement("span",{onClick:()=>r()},e.createElement("img",{style:{width:"16px",height:"16px",marginTop:"18px",cursor:"pointer",transform:"rotate(180deg)"},src:w})));return p?e.createElement(P,{type:"card",activeKey:"1",className:oe({[`${t}`]:!0,[`${t}__pointCloud`]:!0}),tabBarExtraContent:{left:e.createElement("span",{onClick:()=>r(),style:{padding:"0px 4px"}},e.createElement("img",{style:{width:"16px",height:"16px",marginLeft:"4px",cursor:"pointer"},src:w}))}},e.createElement(P.TabPane,{tab:"\u5DE5\u5177\u9762\u677F",key:"1",style:{height:"100%",display:"flex",flexDirection:"column"}},e.createElement("div",{className:`${t}__content`},e.createElement(I,null)),e.createElement(_,null))):c}return o===n.ScribbleTool?e.createElement("div",{className:`${t}`},e.createElement("div",{className:`${t}__content`},v,s),l):o===n.LLM?j:o===n.NLP?y:null};export{me as default,t as sidebarCls};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labelbee/lb-components",
-  "version": "1.24.0-alpha.51",
+  "version": "1.24.0-alpha.53",
   "description": "Provide a complete library of annotation components",
   "main": "./dist/index.js",
   "es": "./es/index.js",
@@ -43,8 +43,8 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
-    "@labelbee/lb-annotation": "1.28.0-alpha.28",
-    "@labelbee/lb-utils": "1.20.0-alpha.6",
+    "@labelbee/lb-annotation": "1.28.0-alpha.30",
+    "@labelbee/lb-utils": "1.20.0-alpha.8",
     "@labelbee/wavesurfer": "1.1.0",
     "@types/react-dom": "18.3.1",
     "@types/react-transition-group": "^4.4.9",