npm - @univerjs/drawing-ui - Versions diffs - 0.4.0-alpha.0 → 0.4.0-alpha.2 - Mend

@univerjs/drawing-ui 0.4.0-alpha.0 → 0.4.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/lib/cjs/index.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";var __defProp=Object.defineProperty;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value;var __name=(target,value)=>__defProp(target,"name",{value,configurable:!0});var __publicField=(obj,key,value)=>__defNormalProp(obj,typeof key!="symbol"?key+"":key,value);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const drawing=require("@univerjs/drawing"),engineRender=require("@univerjs/engine-render"),core=require("@univerjs/core"),React=require("react"),design=require("@univerjs/design"),clsx=require("clsx"),ui=require("@univerjs/ui"),rxjs=require("rxjs");function insertGroupObject(objectParam,object,scene,drawingManagerService){const groupParam=drawingManagerService.getDrawingByParam(objectParam);if(groupParam==null)return;const groupKey=drawing.getDrawingShapeKeyByDrawingSearch(objectParam),groupObject=scene.getObject(groupKey);if(groupObject&&!(groupObject instanceof engineRender.Group))return;if(groupObject!=null){groupObject.addObject(object);return}const group=new engineRender.Group(groupKey);scene.addObject(group,engineRender.DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(group),group.addObject(object);const{transform}=groupParam;transform&&group.transformByState({left:transform.left,top:transform.top,angle:transform.angle})}__name(insertGroupObject,"insertGroupObject");function getCurrentUnitInfo(currentUniverService,propUnitId){var _a7;const current=propUnitId?currentUniverService.getUnit(propUnitId):currentUniverService.getFocusedUnit();if(current==null)return;const unitId=current.getUnitId();let subUnitId;return current.type===core.UniverInstanceType.UNIVER_SHEET?subUnitId=(_a7=current.getActiveSheet())==null?void 0:_a7.getSheetId():(current.type===core.UniverInstanceType.UNIVER_DOC\|\|current.type===core.UniverInstanceType.UNIVER_SLIDE)&&(subUnitId=unitId),{unitId,subUnitId,current}}__name(getCurrentUnitInfo,"getCurrentUnitInfo");var __defProp$5=Object.defineProperty,__getOwnPropDesc$5=Object.getOwnPropertyDescriptor,__decorateClass$5=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$5(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$5(target,key,result),result},"__decorateClass$5"),__decorateParam$5=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$5"),_a;exports.DrawingRenderService=(_a=class{constructor(_drawingManagerService,_imageIoService){this._drawingManagerService=_drawingManagerService,this._imageIoService=_imageIoService}async renderImages(imageParam,scene){const{transform:singleTransform,drawingType,source,imageSourceType,srcRect,prstGeom,groupId,unitId,subUnitId,drawingId,isMultiTransform,transforms:multiTransforms}=imageParam;if(drawingType!==drawing.DrawingTypeEnum.DRAWING_IMAGE\|\|!this._drawingManagerService.getDrawingVisible()\|\|singleTransform==null)return;const transforms=isMultiTransform&&multiTransforms?multiTransforms:[singleTransform],images=[];for(const transform of transforms){const{left,top,width,height,angle,flipX,flipY,skewX,skewY}=transform,index=transforms.indexOf(transform),imageShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId},isMultiTransform?index:void 0),imageShape=scene.getObject(imageShapeKey);if(imageShape!=null){imageShape.transformByState({left,top,width,height,angle,flipX,flipY,skewX,skewY});continue}const orders=this._drawingManagerService.getDrawingOrder(unitId,subUnitId),zIndex=orders.indexOf(drawingId),imageConfig={...transform,zIndex:zIndex===-1?orders.length-1:zIndex},imageNativeCache=this._imageIoService.getImageSourceCache(source,imageSourceType);let shouldBeCache=!1;if(imageNativeCache!=null)imageConfig.image=imageNativeCache;else{if(imageSourceType===drawing.ImageSourceType.UUID)try{imageConfig.url=await this._imageIoService.getImage(source)}catch(error){console.error(error);continue}else imageConfig.url=source;shouldBeCache=!0}if(scene.getObject(imageShapeKey))continue;imageConfig.printable=!0;const image=new engineRender.Image(imageShapeKey,imageConfig);if(shouldBeCache&&this._imageIoService.addImageSourceCache(source,imageSourceType,image.getNative()),!this._drawingManagerService.getDrawingVisible())continue;const imageObject=scene.addObject(image,engineRender.DRAWING_OBJECT_LAYER_INDEX);this._drawingManagerService.getDrawingEditable()&&imageObject.attachTransformerTo(image),groupId&&insertGroupObject({drawingId:groupId,unitId,subUnitId},image,scene,this._drawingManagerService),prstGeom!=null&&image.setPrstGeom(prstGeom),srcRect!=null&&image.setSrcRect(srcRect),images.push(image)}return images}renderDrawing(param,scene){const drawingParam=this._drawingManagerService.getDrawingByParam(param);if(drawingParam!=null)switch(drawingParam.drawingType){case drawing.DrawingTypeEnum.DRAWING_IMAGE:return this.renderImages(drawingParam,scene)}}},__name(_a,"DrawingRenderService"),_a);exports.DrawingRenderService=__decorateClass$5([__decorateParam$5(0,drawing.IDrawingManagerService),__decorateParam$5(1,drawing.IImageIoService)],exports.DrawingRenderService);function getUpdateParams(objects,drawingManagerService){const params=[];return objects.forEach(object=>{const{oKey,left,top,height,width,angle}=object,searchParam=drawingManagerService.getDrawingOKey(oKey);if(searchParam==null)return params.push(null),!0;const{unitId,subUnitId,drawingId,drawingType}=searchParam,param={unitId,subUnitId,drawingId,drawingType,transform:{left,top,height,width,angle}};drawingType===drawing.DrawingTypeEnum.DRAWING_IMAGE&&(param.srcRect=object.srcRect),params.push(param)}),params}__name(getUpdateParams,"getUpdateParams");var __assign=function(){return __assign=Object.assign\|\|function(t){for(var s,i=1,n=arguments.length;i<n;i++){s=arguments[i];for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p])}return t},__assign.apply(this,arguments)},__rest=function(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(s!=null&&typeof Object.getOwnPropertySymbols=="function")for(var i=0,p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]]);return t},IconBase=React.forwardRef(function(props,ref){var icon=props.icon,id=props.id,className=props.className,extend=props.extend,restProps=__rest(props,["icon","id","className","extend"]),cls="univerjs-icon univerjs-icon-".concat(id," ").concat(className\|\|"").trim(),idSuffix=React.useRef("_".concat(generateShortUuid()));return render(icon,"".concat(id),{defIds:icon.defIds,idSuffix:idSuffix.current},__assign({ref,className:cls},restProps),extend)});function render(node,id,runtimeProps,rootProps,extend){return React.createElement(node.tag,__assign(__assign({key:id},replaceRuntimeIdsAndExtInAttrs(node,runtimeProps,extend)),rootProps),(replaceRuntimeIdsInDefs(node,runtimeProps).children\|\|[]).map(function(child,index){return render(child,"".concat(id,"-").concat(node.tag,"-").concat(index),runtimeProps,void 0,extend)}))}__name(render,"render");function replaceRuntimeIdsAndExtInAttrs(node,runtimeProps,extend){var attrs=__assign({},node.attrs);extend!=null&&extend.colorChannel1&&attrs.fill==="colorChannel1"&&(attrs.fill=extend.colorChannel1);var defIds=runtimeProps.defIds;return!defIds\|\|defIds.length===0\|\|(node.tag==="use"&&attrs["xlink:href"]&&(attrs["xlink:href"]=attrs["xlink:href"]+runtimeProps.idSuffix),Object.entries(attrs).forEach(function(_a7){var key=_a7[0],value=_a7[1];typeof value=="string"&&(attrs[key]=value.replace(/url$#(.)$/,"url(#$1".concat(runtimeProps.idSuffix,")")))})),attrs}__name(replaceRuntimeIdsAndExtInAttrs,"replaceRuntimeIdsAndExtInAttrs");function replaceRuntimeIdsInDefs(node,runtimeProps){var _a7,defIds=runtimeProps.defIds;return!defIds\|\|defIds.length===0?node:node.tag==="defs"&&(!((_a7=node.children)===null\|\|_a7===void 0)&&_a7.length)?__assign(__assign({},node),{children:node.children.map(function(child){return typeof child.attrs.id=="string"&&defIds&&defIds.indexOf(child.attrs.id)>-1?__assign(__assign({},child),{attrs:__assign(__assign({},child.attrs),{id:child.attrs.id+runtimeProps.idSuffix})}):child})}):node}__name(replaceRuntimeIdsInDefs,"replaceRuntimeIdsInDefs");function generateShortUuid(){return Math.random().toString(36).substring(2,8)}__name(generateShortUuid,"generateShortUuid");IconBase.displayName="UniverIcon";var element$8={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"colorChannel1",d:"M11.0363 12.2367V14.0367C11.0363 14.3681 11.3049 14.6367 11.6363 14.6367C11.9676 14.6367 12.2363 14.3681 12.2363 14.0367V12.2367H14.0364C14.3677 12.2367 14.6364 11.9681 14.6364 11.6367C14.6364 11.3054 14.3677 11.0367 14.0364 11.0367H12.2363V9.23672C12.2363 8.90535 11.9676 8.63672 11.6363 8.63672C11.3049 8.63672 11.0363 8.90535 11.0363 9.23672V11.0367H9.23635C8.90498 11.0367 8.63635 11.3054 8.63635 11.6367C8.63635 11.9681 8.90498 12.2367 9.23635 12.2367H11.0363Z"}},{tag:"path",attrs:{fill:"currentColor",d:"M2.56365 1.36377C1.90091 1.36377 1.36365 1.90103 1.36365 2.56377V6.16377C1.36365 6.82651 1.90091 7.36377 2.56365 7.36377H6.16365C6.82639 7.36377 7.36365 6.82651 7.36365 6.16377V2.56377C7.36365 1.90103 6.82639 1.36377 6.16365 1.36377H2.56365zM6.16365 2.56377H2.56365L2.56365 6.16377H6.16365V2.56377zM2.56365 8.63647C1.90091 8.63647 1.36365 9.17373 1.36365 9.83647V13.4365C1.36365 14.0992 1.90091 14.6365 2.56365 14.6365H6.16365C6.82639 14.6365 7.36365 14.0992 7.36365 13.4365V9.83647C7.36365 9.17373 6.82639 8.63647 6.16365 8.63647H2.56365zM6.16365 9.83647H2.56365L2.56365 13.4365H6.16365V9.83647zM9.83635 7.36377C9.17361 7.36377 8.63635 6.82651 8.63635 6.16377V2.56377C8.63635 1.90103 9.17361 1.36377 9.83635 1.36377H13.4364C14.0991 1.36377 14.6364 1.90103 14.6364 2.56377V6.16377C14.6364 6.82651 14.0991 7.36377 13.4364 7.36377H9.83635zM9.83635 6.16377V2.56377L13.4364 2.56377V6.16377H9.83635z",fillRule:"evenodd",clipRule:"evenodd"}}]},Autofill=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"autofill",ref,icon:element$8}))});Autofill.displayName="Autofill";var element$7={tag:"svg",attrs:{fill:"none",viewBox:"0 0 17 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M14.0045 4.4334C14.8881 4.4334 15.6045 3.71705 15.6045 2.8334 15.6045 1.94974 14.8881 1.2334 14.0045 1.2334H3.70449C2.82084 1.2334 2.10449 1.94974 2.10449 2.8334 2.10449 3.71705 2.82084 4.4334 3.70449 4.4334H14.0045zM14.4045 2.8334C14.4045 3.05431 14.2254 3.2334 14.0045 3.2334H3.70449C3.48358 3.2334 3.30449 3.05431 3.30449 2.8334 3.30449 2.61248 3.48358 2.4334 3.70449 2.4334H14.0045C14.2254 2.4334 14.4045 2.61249 14.4045 2.8334zM14.1544 8.5999C15.038 8.5999 15.7544 7.88356 15.7544 6.9999 15.7544 6.11625 15.038 5.3999 14.1544 5.3999H3.85439C2.97074 5.3999 2.25439 6.11625 2.25439 6.9999 2.25439 7.88356 2.97074 8.5999 3.85439 8.5999H14.1544zM14.5544 6.9999C14.5544 7.22082 14.3753 7.3999 14.1544 7.3999H3.85439C3.63348 7.3999 3.45439 7.22082 3.45439 6.9999 3.45439 6.77899 3.63348 6.5999 3.85439 6.5999H14.1544C14.3753 6.5999 14.5544 6.77899 14.5544 6.9999z",fillRule:"evenodd",clipRule:"evenodd"}},{tag:"path",attrs:{fill:"currentColor",d:"M8.57975 14.5902L6.58023 12.5907C6.34591 12.3564 6.34591 11.9765 6.58023 11.7421 6.81454 11.5078 7.19444 11.5078 7.42876 11.7421L8.40449 12.7179V10.1664C8.40449 9.83504 8.67312 9.56641 9.00449 9.56641 9.33586 9.56641 9.60449 9.83504 9.60449 10.1664V12.7179L10.5802 11.7421C10.8145 11.5078 11.1944 11.5078 11.4288 11.7421 11.6631 11.9765 11.6631 12.3564 11.4288 12.5907L9.42923 14.5902M8.57975 14.5902C8.58121 14.5917 8.58268 14.5931 8.58416 14.5946 8.64077 14.6502 8.70566 14.6923 8.77482 14.7209 8.84557 14.7502 8.92314 14.7664 9.00449 14.7664 9.08585 14.7664 9.16342 14.7502 9.23416 14.7209 9.30332 14.6923 9.36821 14.6502 9.42482 14.5946"}}]},BottomSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"bottom-single",ref,icon:element$7}))});BottomSingle.displayName="BottomSingle";var element$6={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M5.97705 7.51296C5.97705 7.18159 6.24568 6.91296 6.57705 6.91296H8.48632C8.81769 6.91296 9.08632 7.18159 9.08632 7.51296 9.08632 7.84433 8.81769 8.11296 8.48632 8.11296H6.57705C6.24568 8.11296 5.97705 7.84433 5.97705 7.51296zM6.57705 9.41028C6.24568 9.41028 5.97705 9.67891 5.97705 10.0103 5.97705 10.3416 6.24568 10.6103 6.57705 10.6103H10.8199C11.1512 10.6103 11.4199 10.3416 11.4199 10.0103 11.4199 9.67891 11.1512 9.41028 10.8199 9.41028H6.57705z"}},{tag:"path",attrs:{fill:"currentColor",d:"M3.51074 2.37063C3.51074 1.48697 4.22709 0.77063 5.11074 0.77063H9.80318L9.81294 0.770708C9.97168 0.768161 10.1311 0.82824 10.2511 0.95055L14.4317 5.21408C14.5165 5.30049 14.5697 5.406 14.5917 5.51645C14.6041 5.5644 14.6106 5.61467 14.6106 5.66648V11.6406C14.6106 12.5243 13.8943 13.2406 13.0106 13.2406H5.11074C4.22709 13.2406 3.51074 12.5243 3.51074 11.6406V2.37063ZM10.4032 4.66648V2.81964L12.6063 5.06648H10.8032C10.5823 5.06648 10.4032 4.88739 10.4032 4.66648ZM5.11074 1.97063C4.88983 1.97063 4.71074 2.14972 4.71074 2.37063V11.6406C4.71074 11.8615 4.88983 12.0406 5.11074 12.0406H13.0106C13.2316 12.0406 13.4106 11.8615 13.4106 11.6406V6.26648H10.8032C9.91953 6.26648 9.20318 5.55013 9.20318 4.66648V1.97063H5.11074Z",fillRule:"evenodd",clipRule:"evenodd"}},{tag:"path",attrs:{fill:"currentColor",d:"M2.58916 6.6741C2.58916 6.34273 2.32053 6.0741 1.98916 6.0741C1.65779 6.0741 1.38916 6.34273 1.38916 6.6741V12.6294C1.38916 14.0653 2.55322 15.2294 3.98916 15.2294H9.41408C9.74545 15.2294 10.0141 14.9607 10.0141 14.6294C10.0141 14.298 9.74545 14.0294 9.41408 14.0294H3.98916C3.21596 14.0294 2.58916 13.4026 2.58916 12.6294V6.6741Z"}}]},CreateCopySingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"create-copy-single",ref,icon:element$6}))});CreateCopySingle.displayName="CreateCopySingle";var element$5={tag:"svg",attrs:{fill:"none",viewBox:"0 0 17 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M7.38125 1.16211C6.49759 1.16211 5.78125 1.87845 5.78125 2.76211V5.6377H2.87783C1.99418 5.6377 1.27783 6.35404 1.27783 7.2377V13.2377C1.27783 14.1214 1.99418 14.8377 2.87783 14.8377H8.87783C9.76149 14.8377 10.4778 14.1214 10.4778 13.2377V10.3621H13.3813C14.2649 10.3621 14.9813 9.64577 14.9813 8.76211V2.76211C14.9813 1.87845 14.2649 1.16211 13.3813 1.16211H7.38125ZM10.4778 9.16211H13.3813C13.6022 9.16211 13.7812 8.98302 13.7812 8.76211V2.76211C13.7812 2.5412 13.6022 2.36211 13.3813 2.36211H7.38125C7.16034 2.36211 6.98125 2.5412 6.98125 2.76211V5.6377H8.87783C9.76149 5.6377 10.4778 6.35404 10.4778 7.2377V9.16211ZM6.98125 6.8377H8.87783C9.09875 6.8377 9.27783 7.01678 9.27783 7.2377V9.16211H7.38125C7.16034 9.16211 6.98125 8.98302 6.98125 8.76211V6.8377ZM5.78125 6.8377V8.76211C5.78125 9.64577 6.49759 10.3621 7.38125 10.3621H9.27783V13.2377C9.27783 13.4586 9.09875 13.6377 8.87783 13.6377H2.87783C2.65692 13.6377 2.47783 13.4586 2.47783 13.2377V7.2377C2.47783 7.01678 2.65692 6.8377 2.87783 6.8377H5.78125Z",fillRule:"evenodd",clipRule:"evenodd"}}]},GroupSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"group-single",ref,icon:element$5}))});GroupSingle.displayName="GroupSingle";var element$4={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M11.3536 6.14645C11.5488 6.34171 11.5488 6.65829 11.3536 6.85355L8.35355 9.85355C8.15829 10.0488 7.84171 10.0488 7.64645 9.85355L4.64645 6.85355C4.45118 6.65829 4.45118 6.34171 4.64645 6.14645C4.84171 5.95118 5.15829 5.95118 5.35355 6.14645L8 8.79289L10.6464 6.14645C10.8417 5.95118 11.1583 5.95118 11.3536 6.14645Z",fillRule:"evenodd",clipRule:"evenodd"}}]},MoreDownSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"more-down-single",ref,icon:element$4}))});MoreDownSingle.displayName="MoreDownSingle";var element$3={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M1.25 2.96401C1.25 3.84767 1.96634 4.56401 2.85 4.56401H13.15C14.0337 4.56401 14.75 3.84767 14.75 2.96401C14.75 2.08036 14.0337 1.36401 13.15 1.36401H2.85C1.96635 1.36401 1.25 2.08036 1.25 2.96401ZM2.85 3.36401C2.62909 3.36401 2.45 3.18493 2.45 2.96401C2.45 2.7431 2.62909 2.56401 2.85 2.56401H13.15C13.3709 2.56401 13.55 2.7431 13.55 2.96401C13.55 3.18493 13.3709 3.36401 13.15 3.36401H2.85Z",fillRule:"evenodd",clipRule:"evenodd"}},{tag:"path",attrs:{fill:"currentColor",d:"M5.57564 11.6118C5.80995 11.3774 6.18985 11.3774 6.42417 11.6118L7.3999 12.5875V6.36951C7.3999 6.03814 7.66853 5.76951 7.9999 5.76951C8.33127 5.76951 8.5999 6.03814 8.5999 6.36951V12.5875L9.57564 11.6118C9.80995 11.3774 10.1899 11.3774 10.4242 11.6118C10.6585 11.8461 10.6585 12.226 10.4242 12.4603L8.4324 14.452C8.32324 14.5655 8.16982 14.6362 7.9999 14.6362C7.82998 14.6362 7.67655 14.5655 7.56739 14.452L5.57564 12.4603C5.34132 12.226 5.34132 11.8461 5.57564 11.6118Z"}}]},MoveDownSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"move-down-single",ref,icon:element$3}))});MoveDownSingle.displayName="MoveDownSingle";var element$2={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M1.25 13.036C1.25 12.1523 1.96634 11.436 2.85 11.436H13.15C14.0337 11.436 14.75 12.1523 14.75 13.036C14.75 13.9196 14.0337 14.636 13.15 14.636H2.85C1.96635 14.636 1.25 13.9196 1.25 13.036ZM2.85 12.636C2.62909 12.636 2.45 12.8151 2.45 13.036C2.45 13.2569 2.62909 13.436 2.85 13.436H13.15C13.3709 13.436 13.55 13.2569 13.55 13.036C13.55 12.8151 13.3709 12.636 13.15 12.636H2.85Z",fillRule:"evenodd",clipRule:"evenodd"}},{tag:"path",attrs:{fill:"currentColor",d:"M5.57564 4.38825C5.80995 4.62256 6.18985 4.62256 6.42417 4.38825L7.3999 3.41251V9.63049C7.3999 9.96186 7.66853 10.2305 7.9999 10.2305C8.33127 10.2305 8.5999 9.96186 8.5999 9.63049V3.41251L9.57564 4.38825C9.80995 4.62256 10.1899 4.62256 10.4242 4.38825C10.6585 4.15393 10.6585 3.77403 10.4242 3.53972L8.4324 1.54796C8.32324 1.43445 8.16982 1.36382 7.9999 1.36382C7.82998 1.36382 7.67655 1.43446 7.56739 1.54797L5.57564 3.53972C5.34132 3.77403 5.34132 4.15393 5.57564 4.38825Z"}}]},MoveUpSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"move-up-single",ref,icon:element$2}))});MoveUpSingle.displayName="MoveUpSingle";var element$1={tag:"svg",attrs:{fill:"none",viewBox:"0 0 17 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M7.82994 1.40913C7.88746 1.35161 7.95376 1.30821 8.02453 1.27893C8.09527 1.24959 8.17285 1.2334 8.2542 1.2334C8.33555 1.2334 8.41313 1.24959 8.48387 1.27893C8.55464 1.30821 8.62094 1.35161 8.67846 1.40913L10.6785 3.40913C10.9128 3.64345 10.9128 4.02335 10.6785 4.25766C10.4441 4.49198 10.0642 4.49198 9.82994 4.25766L8.8542 3.28193V5.8334C8.8542 6.16477 8.58557 6.4334 8.2542 6.4334C7.92283 6.4334 7.6542 6.16477 7.6542 5.8334V3.28193L6.67846 4.25766C6.44415 4.49198 6.06425 4.49198 5.82994 4.25766C5.59562 4.02335 5.59562 3.64345 5.82994 3.40913L7.82994 1.40913Z"}},{tag:"path",attrs:{fill:"currentColor",d:"M1.50439 9C1.50439 8.11634 2.22074 7.4 3.10439 7.4H13.4044C14.288 7.4 15.0044 8.11634 15.0044 9 15.0044 9.88366 14.2881 10.6 13.4044 10.6H3.1044C2.22074 10.6 1.50439 9.88366 1.50439 9zM3.10439 8.6C2.88348 8.6 2.70439 8.77909 2.70439 9 2.70439 9.22091 2.88348 9.4 3.1044 9.4H13.4044C13.6253 9.4 13.8044 9.22091 13.8044 9 13.8044 8.77909 13.6253 8.6 13.4044 8.6H3.10439zM1.6543 13.1665C1.6543 12.2828 2.37064 11.5665 3.2543 11.5665H13.5543C14.438 11.5665 15.1543 12.2828 15.1543 13.1665 15.1543 14.0502 14.438 14.7665 13.5543 14.7665H3.2543C2.37064 14.7665 1.6543 14.0502 1.6543 13.1665zM3.2543 12.7665C3.03338 12.7665 2.8543 12.9456 2.8543 13.1665 2.8543 13.3874 3.03338 13.5665 3.2543 13.5665H13.5543C13.7752 13.5665 13.9543 13.3874 13.9543 13.1665 13.9543 12.9456 13.7752 12.7665 13.5543 12.7665H3.2543z",fillRule:"evenodd",clipRule:"evenodd"}}]},TopmostSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"topmost-single",ref,icon:element$1}))});TopmostSingle.displayName="TopmostSingle";var element={tag:"svg",attrs:{fill:"none",viewBox:"0 0 17 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M7.46855 2.83731C7.46855 2.61639 7.64764 2.4373 7.86855 2.4373H13.8603C14.0812 2.4373 14.2603 2.61639 14.2603 2.8373V9.5049C14.2603 9.72581 14.0812 9.90489 13.8603 9.90489H12.866C12.5346 9.90489 12.266 10.1735 12.266 10.5049C12.266 10.8363 12.5346 11.1049 12.866 11.1049H13.8603C14.7439 11.1049 15.4603 10.3886 15.4603 9.5049V2.8373C15.4603 1.95365 14.7439 1.2373 13.8603 1.2373H7.86855C6.9849 1.2373 6.26855 1.95365 6.26855 2.83731V3.48688C6.26855 3.81825 6.53718 4.08688 6.86855 4.08688C7.19993 4.08688 7.46855 3.81825 7.46855 3.48688V2.83731Z"}},{tag:"path",attrs:{fill:"currentColor",d:"M3.19888 5.56299C2.31522 5.56299 1.59888 6.27933 1.59888 7.16299V13.163C1.59888 14.0466 2.31522 14.763 3.19888 14.763H9.19888C10.0825 14.763 10.7989 14.0466 10.7989 13.163V7.16299C10.7989 6.27933 10.0825 5.56299 9.19888 5.56299H3.19888ZM2.79888 7.16299C2.79888 6.94207 2.97796 6.76299 3.19888 6.76299H9.19888C9.41979 6.76299 9.59888 6.94207 9.59888 7.16299V13.163C9.59888 13.3839 9.41979 13.563 9.19888 13.563H3.19888C2.97796 13.563 2.79888 13.3839 2.79888 13.163V7.16299Z",fillRule:"evenodd",clipRule:"evenodd"}}]},UngroupSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"ungroup-single",ref,icon:element}))});UngroupSingle.displayName="UngroupSingle";const imageCommonPanel="univer-image-common-panel",imageCommonPanelGrid="univer-image-common-panel-grid",imageCommonPanelBorder="univer-image-common-panel-border",imageCommonPanelTitle="univer-image-common-panel-title",imageCommonPanelSubtitle="univer-image-common-panel-subtitle",imageCommonPanelRow="univer-image-common-panel-row",imageCommonPanelRowVertical="univer-image-common-panel-row-vertical",imageCommonPanelColumn="univer-image-common-panel-column",imageCommonPanelColumnCenter="univer-image-common-panel-column-center",imageCommonPanelInline="univer-image-common-panel-inline",imageCommonPanelSpan2="univer-image-common-panel-span2",imageCommonPanelSpan3="univer-image-common-panel-span3",imageCommonPanelInput="univer-image-common-panel-input",styles$1={imageCommonPanel,imageCommonPanelGrid,imageCommonPanelBorder,imageCommonPanelTitle,imageCommonPanelSubtitle,imageCommonPanelRow,imageCommonPanelRowVertical,imageCommonPanelColumn,imageCommonPanelColumnCenter,imageCommonPanelInline,imageCommonPanelSpan2,imageCommonPanelSpan3,imageCommonPanelInput},DrawingArrange=__name(props=>{const{arrangeShow,drawings:focusDrawings}=props,localeService=core.useDependency(core.LocaleService),drawingManagerService=core.useDependency(drawing.IDrawingManagerService),gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay"),[drawings,setDrawings]=React.useState(focusDrawings);React.useEffect(()=>{const focusDispose=drawingManagerService.focus$.subscribe(drawings2=>{setDrawings(drawings2)});return()=>{focusDispose.unsubscribe()}},[]);const onArrangeBtnClick=__name(arrangeType=>{const unitId=drawings[0].unitId,subUnitId=drawings[0].subUnitId,drawingIds=drawings.map(drawing2=>drawing2.drawingId);drawingManagerService.featurePluginOrderUpdateNotification({unitId,subUnitId,drawingIds,arrangeType})},"onArrangeBtnClick");return React.createElement("div",{className:styles$1.imageCommonPanelGrid,style:{display:gridDisplay(arrangeShow)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.arrange.title")))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onArrangeBtnClick(drawing.ArrangeTypeEnum.forward)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(MoveUpSingle,null),localeService.t("image-panel.arrange.forward")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onArrangeBtnClick(drawing.ArrangeTypeEnum.backward)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(MoveDownSingle,null),localeService.t("image-panel.arrange.backward"))))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onArrangeBtnClick(drawing.ArrangeTypeEnum.front)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(TopmostSingle,null),localeService.t("image-panel.arrange.front")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onArrangeBtnClick(drawing.ArrangeTypeEnum.back)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(BottomSingle,null),localeService.t("image-panel.arrange.back"))))))},"DrawingArrange"),MIN_DRAWING_WIDTH_LIMIT=20,MIN_DRAWING_HEIGHT_LIMIT=20,RANGE_DRAWING_ROTATION_LIMIT=[-3600,3600],INPUT_DEBOUNCE_TIME=300,DrawingTransform=__name(props=>{var _a7;const localeService=core.useDependency(core.LocaleService),drawingManagerService=core.useDependency(drawing.IDrawingManagerService),renderManagerService=core.useDependency(engineRender.IRenderManagerService),{drawings,transformShow}=props,drawingParam=drawings[0];if(drawingParam==null)return;const transform=drawingParam.transform;if(transform==null)return;const{unitId,subUnitId,drawingId,drawingType}=drawingParam,renderObject=renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return;const topScene=(_a7=scene.getEngine())==null?void 0:_a7.activeScene;if(topScene==null)return;const transformer=scene.getTransformerByCreate(),{width:originWidth=0,height:originHeight=0,left:originX=0,top:originY=0,angle:originRotation=0}=transform,[width,setWidth]=React.useState(originWidth),[height,setHeight]=React.useState(originHeight),[xPosition,setXPosition]=React.useState(originX),[yPosition,setYPosition]=React.useState(originY),[rotation,setRotation]=React.useState(originRotation),[lockRatio,setLockRatio]=React.useState(transformer.keepRatio),checkMoveBoundary=__name((left,top,width2,height2)=>{const{width:topSceneWidth,height:topSceneHeight}=topScene,{ancestorLeft,ancestorTop}=scene;let limitLeft=left,limitTop=top,limitWidth=width2,limitHeight=height2;return left+ancestorLeft<0&&(limitLeft=-ancestorLeft),top+ancestorTop<0&&(limitTop=-ancestorTop),limitWidth=topSceneWidth-limitLeft-ancestorLeft,limitWidth<MIN_DRAWING_WIDTH_LIMIT&&(limitWidth=MIN_DRAWING_WIDTH_LIMIT),limitHeight=topSceneHeight-limitTop-ancestorTop,limitHeight<MIN_DRAWING_WIDTH_LIMIT&&(limitHeight=MIN_DRAWING_WIDTH_LIMIT),left+limitWidth+ancestorLeft>topSceneWidth&&(limitLeft=topSceneWidth-width2-ancestorLeft),top+limitHeight+ancestorTop>topSceneHeight&&(limitTop=topSceneHeight-height2-ancestorTop),{limitLeft,limitTop,limitWidth,limitHeight}},"checkMoveBoundary"),changeObs=__name(state=>{const{objects}=state,params=getUpdateParams(objects,drawingManagerService);if(params.length!==1)return;const drawingParam2=params[0];if(drawingParam2==null)return;const{transform:transform2}=drawingParam2;if(transform2==null)return;const{width:originWidth2,height:originHeight2,left:originX2,top:originY2,angle:originRotation2}=transform2;originWidth2!=null&&setWidth(originWidth2),originHeight2!=null&&setHeight(originHeight2),originX2!=null&&setXPosition(originX2),originY2!=null&&setYPosition(originY2),originRotation2!=null&&setRotation(originRotation2)},"changeObs");React.useEffect(()=>{const subscriptions=[transformer.changeStart$.subscribe(state=>{changeObs(state)}),transformer.changing$.subscribe(state=>{changeObs(state)}),transformer.changeEnd$.subscribe(state=>{changeObs(state)}),drawingManagerService.focus$.subscribe(drawings2=>{if(drawings2.length!==1)return;const drawingParam2=drawingManagerService.getDrawingByParam(drawings2[0]);if(drawingParam2==null)return;const transform2=drawingParam2.transform;if(transform2==null)return;const{width:originWidth2,height:originHeight2,left:originX2,top:originY2,angle:originRotation2}=transform2;originWidth2!=null&&setWidth(originWidth2),originHeight2!=null&&setHeight(originHeight2),originX2!=null&&setXPosition(originX2),originY2!=null&&setYPosition(originY2),originRotation2!=null&&setRotation(originRotation2)})];return()=>{subscriptions.forEach(sub=>sub.unsubscribe())}},[]);const handleWidthChange=core.debounce(val=>{if(val==null)return;val=Math.max(val,MIN_DRAWING_WIDTH_LIMIT);const{limitWidth,limitHeight}=checkMoveBoundary(xPosition,yPosition,val,height);val=Math.min(val,limitWidth);const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{width:val}};if(lockRatio){let heightFix=val/widthheight;if(heightFix=Math.max(heightFix,MIN_DRAWING_HEIGHT_LIMIT),heightFix>limitHeight)return;setHeight(heightFix),updateParam.transform.height=heightFix}setWidth(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},INPUT_DEBOUNCE_TIME),handleHeightChange=core.debounce(val=>{if(val==null)return;val=Math.max(val,MIN_DRAWING_WIDTH_LIMIT);const{limitHeight,limitWidth}=checkMoveBoundary(xPosition,yPosition,width,val);val=Math.min(val,limitHeight);const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{height:val}};if(lockRatio){let widthFix=val/heightwidth;if(widthFix=Math.max(widthFix,MIN_DRAWING_WIDTH_LIMIT),widthFix>limitWidth)return;setWidth(widthFix),updateParam.transform.width=widthFix}setHeight(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},INPUT_DEBOUNCE_TIME),handleXChange=core.debounce(val=>{if(val==null)return;const{limitLeft}=checkMoveBoundary(val,yPosition,width,height);val=limitLeft;const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{left:val}};setXPosition(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},INPUT_DEBOUNCE_TIME),handleYChange=core.debounce(val=>{if(val==null)return;const{limitTop}=checkMoveBoundary(xPosition,val,width,height);val=limitTop;const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{top:val}};setYPosition(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},INPUT_DEBOUNCE_TIME),handleRotationChange=__name(val=>{if(val==null)return;const[min,max]=RANGE_DRAWING_ROTATION_LIMIT;val<min&&(val=min),val>max&&(val=max);const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{angle:val}};setRotation(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},"handleRotationChange"),handleLockRatioChange=__name(val=>{setLockRatio(val),transformer.keepRatio=val},"handleLockRatioChange"),gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay");return React.createElement("div",{className:clsx(styles$1.imageCommonPanelGrid,styles$1.imageCommonPanelBorder),style:{display:gridDisplay(transformShow)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.transform.title")))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.width"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:width,onChange:__name(val=>{handleWidthChange(val)},"onChange"),className:styles$1.imageCommonPanelInput}))))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.height"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:height,onChange:__name(val=>{handleHeightChange(val)},"onChange"),className:styles$1.imageCommonPanelInput}))))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.lock"))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelRow,styles$1.imageCommonPanelRowVertical)},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.Checkbox,{checked:lockRatio,onChange:handleLockRatioChange})))))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.x"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:xPosition,onChange:__name(val=>{handleXChange(val)},"onChange"),className:styles$1.imageCommonPanelInput}))))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.y"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:yPosition,onChange:__name(val=>{handleYChange(val)},"onChange"),className:styles$1.imageCommonPanelInput}))))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.rotate"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:rotation,onChange:handleRotationChange,className:styles$1.imageCommonPanelInput})))))))},"DrawingTransform");var AlignType=(AlignType2=>(AlignType2.default="0",AlignType2.left="1",AlignType2.center="2",AlignType2.right="3",AlignType2.top="4",AlignType2.middle="5",AlignType2.bottom="6",AlignType2.horizon="7",AlignType2.vertical="8",AlignType2))(AlignType\|\|{});const SetDrawingAlignOperation={id:"sheet.operation.set-image-align",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")},DrawingAlign=__name(props=>{const commandService=core.useDependency(core.ICommandService),localeService=core.useDependency(core.LocaleService),{alignShow}=props,[alignValue,setAlignValue]=React.useState(AlignType.default),alignOptions=[{label:localeService.t("image-panel.align.default"),value:AlignType.default},{options:[{label:localeService.t("image-panel.align.left"),value:AlignType.left},{label:localeService.t("image-panel.align.center"),value:AlignType.center},{label:localeService.t("image-panel.align.right"),value:AlignType.right}]},{options:[{label:localeService.t("image-panel.align.top"),value:AlignType.top},{label:localeService.t("image-panel.align.middle"),value:AlignType.middle},{label:localeService.t("image-panel.align.bottom"),value:AlignType.bottom}]},{options:[{label:localeService.t("image-panel.align.horizon"),value:AlignType.horizon},{label:localeService.t("image-panel.align.vertical"),value:AlignType.vertical}]}];function handleAlignChange(value){setAlignValue(value),commandService.executeCommand(SetDrawingAlignOperation.id,{alignType:value})}__name(handleAlignChange,"handleAlignChange");const gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay");return React.createElement("div",{className:clsx(styles$1.imageCommonPanelGrid,styles$1.imageCommonPanelBorder),style:{display:gridDisplay(alignShow)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.align.title")))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn)},React.createElement(design.Select,{value:alignValue,options:alignOptions,onChange:handleAlignChange}))))},"DrawingAlign"),OpenImageCropOperation={id:"sheet.operation.open-image-crop",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")},CloseImageCropOperation={id:"sheet.operation.close-image-crop",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")};var CropType=(CropType2=>(CropType2.FREE="0",CropType2.R1_1="1",CropType2.R16_9="2",CropType2.R9_16="3",CropType2.R5_4="4",CropType2.R4_5="5",CropType2.R4_3="6",CropType2.R3_4="7",CropType2.R3_2="8",CropType2.R2_3="9",CropType2))(CropType\|\|{});const AutoImageCropOperation={id:"sheet.operation.Auto-image-crop",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")},ImageCropper=__name(props=>{const commandService=core.useDependency(core.ICommandService),localeService=core.useDependency(core.LocaleService),{drawings,cropperShow}=props;if(drawings[0]==null)return;const[cropValue,setCropValue]=React.useState(CropType.FREE),cropStateRef=React.useRef(!1),cropOptions=[{label:localeService.t("image-panel.crop.mode"),value:CropType.FREE},{label:"1:1",value:CropType.R1_1},{label:"16:9",value:CropType.R16_9},{label:"9:16",value:CropType.R9_16},{label:"5:4",value:CropType.R5_4},{label:"4:5",value:CropType.R4_5},{label:"4:3",value:CropType.R4_3},{label:"3:4",value:CropType.R3_4},{label:"3:2",value:CropType.R3_2},{label:"2:3",value:CropType.R2_3}];React.useEffect(()=>{const onChangeStartObserver=commandService.onCommandExecuted(command=>{if(command.id===CloseImageCropOperation.id){const params=command.params;params!=null&&params.isAuto\|\|(cropStateRef.current=!1)}});return()=>{onChangeStartObserver==null\|\|onChangeStartObserver.dispose()}},[]);function handleCropChange(value){setCropValue(value),cropStateRef.current&&commandService.executeCommand(AutoImageCropOperation.id,{cropType:value})}__name(handleCropChange,"handleCropChange");const gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay"),onCropperBtnClick=__name(val=>{commandService.executeCommand(AutoImageCropOperation.id,{cropType:val}),cropStateRef.current=!0},"onCropperBtnClick");return React.createElement("div",{className:clsx(styles$1.imageCommonPanelGrid,styles$1.imageCommonPanelBorder),style:{display:gridDisplay(cropperShow)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.crop.title")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelRow,styles$1.imageCommonPanelRowVertical)},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onCropperBtnClick(cropValue)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(CreateCopySingle,null),localeService.t("image-panel.crop.start")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Select,{value:cropValue,options:cropOptions,onChange:handleCropChange}))))},"ImageCropper"),DrawingGroup=__name(props=>{const localeService=core.useDependency(core.LocaleService),renderManagerService=core.useDependency(engineRender.IRenderManagerService),drawingManagerService=core.useDependency(drawing.IDrawingManagerService),{hasGroup,drawings}=props,[groupShow,setGroupShow]=React.useState(!1),[groupBtnShow,setGroupBtnShow]=React.useState(!0),[ungroupBtnShow,setUngroupBtnShow]=React.useState(!0),gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay"),onGroupBtnClick=__name(()=>{const focusDrawings=drawingManagerService.getFocusDrawings(),{unitId,subUnitId}=focusDrawings[0],groupId=core.Tools.generateRandomId(10),groupTransform=engineRender.getGroupState(0,0,focusDrawings.map(o=>o.transform\|\|{})),groupParam={unitId,subUnitId,drawingId:groupId,drawingType:drawing.DrawingTypeEnum.DRAWING_GROUP,transform:groupTransform},children=focusDrawings.map(drawing2=>{const transform=drawing2.transform\|\|{left:0,top:0},{unitId:unitId2,subUnitId:subUnitId2,drawingId}=drawing2;return{unitId:unitId2,subUnitId:subUnitId2,drawingId,transform:{...transform,left:transform.left-groupTransform.left,top:transform.top-groupTransform.top},groupId}});drawingManagerService.featurePluginGroupUpdateNotification([{parent:groupParam,children}])},"onGroupBtnClick"),ungroup=__name(param=>{if(param.drawingType!==drawing.DrawingTypeEnum.DRAWING_GROUP)return;const{unitId,subUnitId,drawingId,transform:groupTransform={width:0,height:0}}=param;if(groupTransform==null)return;const objects=drawingManagerService.getDrawingsByGroup({unitId,subUnitId,drawingId});if(objects.length===0)return;const children=objects.map(object=>{const{transform}=object,{unitId:unitId2,subUnitId:subUnitId2,drawingId:drawingId2}=object,newTransform=engineRender.transformObjectOutOfGroup(transform\|\|{},groupTransform,groupTransform.width\|\|0,groupTransform.height\|\|0);return{unitId:unitId2,subUnitId:subUnitId2,drawingId:drawingId2,transform:{...transform,...newTransform},groupId:void 0}});return{parent:param,children}},"ungroup"),onUngroupBtnClick=__name(()=>{const params=drawingManagerService.getFocusDrawings().map(drawing2=>ungroup(drawing2)).filter(o=>o!=null);params.length!==0&&drawingManagerService.featurePluginUngroupUpdateNotification(params)},"onUngroupBtnClick");return React.useEffect(()=>{const drawingParam=drawings[0];if(drawingParam==null)return;const{unitId}=drawingParam,renderObject=renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return;const transformer=scene.getTransformerByCreate(),onClearControlObserver=transformer.clearControl$.subscribe(changeSelf=>{changeSelf===!0&&setGroupShow(!1)}),onChangeStartObserver=transformer.changeStart$.subscribe(state=>{const{objects}=state,params=getUpdateParams(objects,drawingManagerService),groupParams=params.filter(o=>(o==null?void 0:o.drawingType)===drawing.DrawingTypeEnum.DRAWING_GROUP);let groupBtnShow2=!1,ungroupBtnShow2=!1;params.length>1&&(groupBtnShow2=!0),groupParams.length>0&&(ungroupBtnShow2=!0),setGroupShow(groupBtnShow2\|\|ungroupBtnShow2),setGroupBtnShow(groupBtnShow2),setUngroupBtnShow(ungroupBtnShow2)});return()=>{onChangeStartObserver.unsubscribe(),onClearControlObserver.unsubscribe()}},[]),React.createElement("div",{className:clsx(styles$1.imageCommonPanelGrid,styles$1.imageCommonPanelBorder),style:{display:gridDisplay(hasGroup===!0?groupShow:!1)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.group.title")))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2,styles$1.imageCommonPanelColumnCenter)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onGroupBtnClick()},"onClick"),style:{display:gridDisplay(groupBtnShow)}},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(GroupSingle,null),localeService.t("image-panel.group.group")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2,styles$1.imageCommonPanelColumnCenter)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onUngroupBtnClick()},"onClick"),style:{display:gridDisplay(ungroupBtnShow)}},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(UngroupSingle,null),localeService.t("image-panel.group.unGroup"))))))},"DrawingGroup"),DrawingCommonPanel=__name(props=>{const drawingManagerService=core.useDependency(drawing.IDrawingManagerService),renderManagerService=core.useDependency(engineRender.IRenderManagerService),localeService=core.useDependency(core.LocaleService),{drawings,hasArrange=!0,hasTransform=!0,hasAlign=!0,hasCropper=!0,hasGroup=!0}=props,drawingParam=drawings[0];if(drawingParam==null)return;const{unitId}=drawingParam,renderObject=renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return;const transformer=scene.getTransformerByCreate(),[arrangeShow,setArrangeShow]=React.useState(!0),[transformShow,setTransformShow]=React.useState(!0),[alignShow,setAlignShow]=React.useState(!1),[cropperShow,setCropperShow]=React.useState(!0),[nullShow,setNullShow]=React.useState(!1);return React.useEffect(()=>{const clearControlSub=transformer.clearControl$.subscribe(changeSelf=>{changeSelf===!0&&(setArrangeShow(!1),setTransformShow(!1),setAlignShow(!1),setCropperShow(!1),setNullShow(!0))}),changeStartSub=transformer.changeStart$.subscribe(state=>{const{objects}=state,params=getUpdateParams(objects,drawingManagerService);params.length===0?(setArrangeShow(!1),setTransformShow(!1),setAlignShow(!1),setCropperShow(!1),setNullShow(!0)):params.length===1?(setArrangeShow(!0),setTransformShow(!0),setAlignShow(!1),setCropperShow(!0),setNullShow(!1)):(setArrangeShow(!0),setTransformShow(!1),setAlignShow(!0),setCropperShow(!1),setNullShow(!1))}),focusSub=drawingManagerService.focus$.subscribe(drawings2=>{drawings2.length===0?(setArrangeShow(!1),setTransformShow(!1),setAlignShow(!1),setCropperShow(!1),setNullShow(!0)):drawings2.length===1?(setArrangeShow(!0),setTransformShow(!0),setAlignShow(!1),setCropperShow(!0),setNullShow(!1)):(setArrangeShow(!0),setTransformShow(!1),setAlignShow(!0),setCropperShow(!1),setNullShow(!1))});return()=>{changeStartSub.unsubscribe(),clearControlSub.unsubscribe(),focusSub.unsubscribe()}},[]),React.createElement(React.Fragment,null,React.createElement("div",{style:{display:nullShow===!0?"block":"none",height:"100%"}},React.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%",top:"50%",marginTop:"-100px"}},React.createElement("span",null,localeService.t("image-panel.null")))),React.createElement(DrawingArrange,{arrangeShow:hasArrange===!0?arrangeShow:!1,drawings}),React.createElement(DrawingTransform,{transformShow:hasTransform===!0?transformShow:!1,drawings}),React.createElement(DrawingAlign,{alignShow:hasAlign===!0?alignShow:!1,drawings}),React.createElement(ImageCropper,{cropperShow:hasCropper===!0?cropperShow:!1,drawings}),React.createElement(DrawingGroup,{hasGroup,drawings}))},"DrawingCommonPanel"),imagePopupMenu="univer-image-popup-menu",imagePopupMenuItem="univer-image-popup-menu-item",imagePopupMenuItemIcon="univer-image-popup-menu-item-icon",imagePopupMenuItemTitle="univer-image-popup-menu-item-title",imagePopupMenuItemHide="univer-image-popup-menu-item-hide",btnContainer="univer-btn-container",btnContainerExpand="univer-btn-container-expand",styles={imagePopupMenu,imagePopupMenuItem,imagePopupMenuItemIcon,imagePopupMenuItemTitle,imagePopupMenuItemHide,btnContainer,btnContainerExpand},ImagePopupMenu=__name(props=>{var _a7,_b;const menuItems=(_b=(_a7=props.popup)==null?void 0:_a7.extraProps)==null?void 0:_b.menuItems;if(!menuItems)return null;const commandService=core.useDependency(core.ICommandService),localeService=core.useDependency(core.LocaleService),[visible,setVisible]=React.useState(!1),[isHovered,setHovered]=React.useState(!1),handleMouseEnter=__name(()=>{setHovered(!0)},"handleMouseEnter"),handleMouseLeave=__name(()=>{setHovered(!1)},"handleMouseLeave"),onVisibleChange=__name(visible2=>{setVisible(visible2)},"onVisibleChange"),handleClick=__name(item=>{commandService.executeCommand(item.commandId,item.commandParams),setVisible(!1)},"handleClick"),showMore=visible\|\|isHovered,availableMenu=menuItems.filter(item=>!item.disable);return React.createElement("div",{onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave},React.createElement(design.Dropdown,{placement:"bottomLeft",trigger:["click"],overlay:React.createElement("ul",{className:styles.imagePopupMenu},availableMenu.map(item=>React.createElement("li",{key:item.index,onClick:__name(()=>handleClick(item),"onClick"),className:styles.imagePopupMenuItem},React.createElement("span",{className:styles.imagePopupMenuItemTitle},localeService.t(item.label))))),visible,onVisibleChange},React.createElement("div",{className:clsx(styles.btnContainer,{[styles.btnContainerExpand]:visible})},React.createElement(Autofill,{style:{color:"#35322B"},extend:{colorChannel1:"rgb(var(--green-700, #409f11))"}}),showMore&&React.createElement(MoreDownSingle,{style:{color:"#CCCCCC",fontSize:"8px",marginLeft:"8px"}}))))},"ImagePopupMenu"),COMPONENT_IMAGE_POPUP_MENU="COMPONENT_IMAGE_POPUP_MENU",PLUGIN_CONFIG_KEY="drawing-ui.config",defaultPluginConfig={},ImageResetSizeOperation={id:"sheet.operation.image-reset-size",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")},COMPONENT_IMAGE_VIEWER="COMPONENT_IMAGE_VIEWER",ImageViewer=__name(props=>{const{src}=props;return src?React.createElement("div",null,React.createElement("img",{src,alt:"Univer Image Viewer",style:{width:"100%",height:"100%",position:"relative"}})):null},"ImageViewer");var __defProp$4=Object.defineProperty,__getOwnPropDesc$4=Object.getOwnPropertyDescriptor,__decorateClass$4=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$4(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$4(target,key,result),result},"__decorateClass$4"),__decorateParam$4=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$4"),_a2;let DrawingUIController=(_a2=class extends core.Disposable{constructor(_componentManager,_commandService){super(),this._componentManager=_componentManager,this._commandService=_commandService,this._init()}_initCustomComponents(){const componentManager=this._componentManager;this.disposeWithMe(componentManager.register(COMPONENT_IMAGE_POPUP_MENU,ImagePopupMenu)),this.disposeWithMe(componentManager.register(COMPONENT_IMAGE_VIEWER,ImageViewer))}_initCommands(){[OpenImageCropOperation,CloseImageCropOperation,ImageResetSizeOperation,SetDrawingAlignOperation,AutoImageCropOperation].forEach(command=>this.disposeWithMe(this._commandService.registerCommand(command)))}_init(){this._initCommands(),this._initCustomComponents()}},__name(_a2,"DrawingUIController"),_a2);DrawingUIController=__decorateClass$4([__decorateParam$4(0,core.Inject(ui.ComponentManager)),__decorateParam$4(1,core.ICommandService)],DrawingUIController);var __defProp$3=Object.defineProperty,__getOwnPropDesc$3=Object.getOwnPropertyDescriptor,__decorateClass$3=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$3(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$3(target,key,result),result},"__decorateClass$3"),__decorateParam$3=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$3"),_a3;let DrawingUpdateController=(_a3=class extends core.Disposable{constructor(_currentUniverService,_commandService,_renderManagerService,_drawingManagerService){super();__publicField(this,"_sceneListenerOnDrawingMap",new WeakSet);this._currentUniverService=_currentUniverService,this._commandService=_commandService,this._renderManagerService=_renderManagerService,this._drawingManagerService=_drawingManagerService,this._initialize()}dispose(){super.dispose()}_initialize(){this._recoveryImages(),this._drawingAddListener(),this._drawingRemoveListener(),this._drawingUpdateListener(),this._commandExecutedListener(),this._drawingArrangeListener(),this._drawingGroupListener(),this._drawingRefreshListener(),this._drawingVisibleListener()}_recoveryImages(){const drawingList=this._drawingManagerService.drawingManagerData,info=getCurrentUnitInfo(this._currentUniverService);if(info==null)return;const{unitId:currentUnitId,subUnitId:currentSubUnitId}=info;Object.keys(drawingList).forEach(unitId=>{Object.keys(drawingList[unitId]).forEach(subUnitId=>{const drawingMap=drawingList[unitId][subUnitId].data;drawingMap==null\|\|unitId!==currentUnitId\|\|subUnitId!==currentSubUnitId\|\|Object.keys(drawingMap).forEach(drawingId=>{drawingMap[drawingId]&&this._insertDrawing([{unitId,subUnitId,drawingId}])})})})}_commandExecutedListener(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id===SetDrawingAlignOperation.id){const params=command.params;if(params==null)return;this._drawingAlign(params)}}))}_drawingGroupListener(){this.disposeWithMe(this._drawingManagerService.group$.subscribe(params=>{this._groupDrawings(params)})),this.disposeWithMe(this._drawingManagerService.ungroup$.subscribe(params=>{this._ungroupDrawings(params)}))}_getSceneAndTransformerByDrawingSearch(unitId){if(unitId==null)return;const renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return null;const transformer=scene.getTransformerByCreate();return{scene,transformer}}_groupDrawings(drawings){drawings.forEach(drawing2=>{this._groupDrawing(drawing2)})}_groupDrawing(params){const{parent,children}=params,{unitId,subUnitId,drawingId}=parent,renderObject=this._getSceneAndTransformerByDrawingSearch(parent.unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;this._commandService.syncExecuteCommand(CloseImageCropOperation.id);const objects=[];if(children.forEach(drawing$1=>{const drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch(drawing$1),object=scene.getObjectIncludeInGroup(drawingShapeKey);if(object==null\|\|objects.includes(object))return;objects.push(object);const{transform}=drawing$1;transform!=null&&(object.classType===engineRender.RENDER_CLASS_TYPE.GROUP?object.transformByState({left:transform.left,top:transform.top}):object.transformByState(transform))}),objects.length===0)return;const groupKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),group=new engineRender.Group(groupKey);scene.addObject(group,engineRender.DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(group),group.addObjects(...objects),parent.transform&&group.transformByState({left:parent.transform.left,top:parent.transform.top}),transformer.clearSelectedObjects(),transformer.setSelectedControl(group)}_ungroupDrawings(drawings){drawings.forEach(drawing2=>{this._ungroupDrawing(drawing2)})}_ungroupDrawing(drawing$1){const{parent,children}=drawing$1,renderObject=this._getSceneAndTransformerByDrawingSearch(parent.unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;children.forEach(drawing2=>{const drawingKey=drawing.getDrawingShapeKeyByDrawingSearch(drawing2),object=scene.getObjectIncludeInGroup(drawingKey);if(object==null)return!0;if(object==null)return;const{transform}=drawing2;transform!=null&&(object.classType===engineRender.RENDER_CLASS_TYPE.GROUP?object.transformByState({left:transform.left,top:transform.top}):object.transformByState(transform))});const groupKey=drawing.getDrawingShapeKeyByDrawingSearch(parent),group=scene.getObject(groupKey),{width,height}=group;group.getObjects().forEach(object=>{group.removeSelfObjectAndTransform(object.oKey,width,height)}),group.dispose(),transformer.clearSelectedObjects()}_drawingAlign(params){const{alignType}=params,drawings=this._drawingManagerService.getFocusDrawings();if(alignType===AlignType.default)return;const drawingTransformCaches=[];let minLeft=Number.POSITIVE_INFINITY,minTop=Number.POSITIVE_INFINITY,maxRight=Number.NEGATIVE_INFINITY,maxBottom=Number.NEGATIVE_INFINITY,drawingCount=0;drawings.forEach(drawing2=>{const{unitId,subUnitId,drawingId,drawingType}=drawing2,drawingParam=this._drawingManagerService.getDrawingByParam({unitId,subUnitId,drawingId});if(drawingParam==null\|\|drawingParam.transform==null)return;drawingTransformCaches.push({unitId,subUnitId,drawingId,drawingType,transform:drawingParam.transform});const{left=0,top=0,width=0,height=0}=drawingParam.transform;minLeft=Math.min(minLeft,left),minTop=Math.min(minTop,top),maxRight=Math.max(maxRight,left+width),maxBottom=Math.max(maxBottom,top+height),drawingCount++}),drawingCount!==0&&(this._sortDrawingTransform(drawingTransformCaches,alignType),this._applyAlignType(drawingTransformCaches,alignType,minLeft,minTop,maxRight,maxBottom,drawingCount))}_applyAlignType(drawingTransformCaches,alignType,minLeft,minTop,maxRight,maxBottom,drawingCount){const averageHorizon=Math.round((maxRight-minLeft)/drawingCount10)/10,averageVertical=Math.round((maxBottom-minTop)/drawingCount10)/10,updateParams=[],renderObject=this._getSceneAndTransformerByDrawingSearch(drawingTransformCaches[0].unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;drawingTransformCaches.forEach((drawingTransformCache,index)=>{const{unitId,subUnitId,drawingId,transform,drawingType}=drawingTransformCache,{left=0,top=0,width=0,height=0}=transform;let newLeft=left,newTop=top;switch(alignType){case AlignType.left:newLeft=minLeft;break;case AlignType.center:newLeft=minLeft+(maxRight-minLeft)/2-width/2;break;case AlignType.right:newLeft=maxRight-width;break;case AlignType.top:newTop=minTop;break;case AlignType.middle:newTop=minTop+(maxBottom-minTop)/2-height/2;break;case AlignType.bottom:newTop=maxBottom-height;break;case AlignType.horizon:newLeft=minLeft+averageHorizonindex;break;case AlignType.vertical:newTop=minTop+averageVerticalindex;break}(newLeft!==left\|\|newTop!==top)&&updateParams.push({unitId,subUnitId,drawingId,drawingType,transform:{left:newLeft,top:newTop}})}),this._drawingManagerService.featurePluginUpdateNotification(updateParams),transformer.refreshControls().changeNotification()}_sortDrawingTransform(drawingTransformCaches,alignType){drawingTransformCaches.sort((a,b)=>{const aTransform=a.transform,bTransform=b.transform,{left:aLeft=0,top:aTop=0,width:aWidth=0,height:aHeight=0}=aTransform,{left:bLeft=0,top:bTop=0,width:bWidth=0,height:bHeight=0}=bTransform;switch(alignType){case AlignType.left:return aLeft-bLeft;case AlignType.center:return aLeft+aWidth/2-(bLeft+bWidth/2);case AlignType.right:return aLeft+aWidth-(bLeft+bWidth);case AlignType.top:return aTop-bTop;case AlignType.middle:return aTop+aHeight/2-(bTop+bHeight/2);case AlignType.bottom:return aTop+aHeight-(bTop+bHeight);case AlignType.horizon:return aLeft+aWidth/2-(bLeft+bWidth/2);case AlignType.vertical:return aTop+aHeight/2-(bTop+bHeight/2);default:return 0}})}_drawingArrangeListener(){this.disposeWithMe(this._drawingManagerService.order$.subscribe(params=>{this._drawingArrange(params)}))}_drawingArrange(params){const{unitId,subUnitId,drawingIds}=params,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject;drawingIds.forEach(drawingId=>{const oKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShapes=scene.fuzzyMathObjects(oKey,!0);if(drawingShapes==null\|\|drawingShapes.length===0)return;const index=this._drawingManagerService.getDrawingOrder(unitId,subUnitId).indexOf(drawingId);for(const shape of drawingShapes)shape.setProps({zIndex:index}),shape.makeDirty()})}_drawingAddListener(){this.disposeWithMe(this._drawingManagerService.add$.subscribe(params=>{this._insertDrawing(params)}))}_insertDrawing(params){const sceneList=[];params.forEach(param=>{const{unitId}=param;if(this._drawingManagerService.getDrawingByParam(param)==null)return;const renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject;sceneList.includes(scene)\|\|sceneList.push(scene)}),sceneList.forEach(scene=>{this._sceneListenerOnDrawingMap.has(scene)\|\|(this._addListenerOnDrawing(scene),this._sceneListenerOnDrawingMap.add(scene))})}_drawingRemoveListener(){this.disposeWithMe(this._drawingManagerService.remove$.subscribe(params=>{params.forEach(param=>{var _a7;const{unitId,subUnitId,drawingId}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject,drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShapes=scene.fuzzyMathObjects(drawingShapeKey,!0);if(drawingShapes.length>0){for(const drawingShape of drawingShapes)drawingShape.dispose();(_a7=scene.getTransformer())==null\|\|_a7.clearSelectedObjects()}})}))}_drawingUpdateListener(){this.disposeWithMe(this._drawingManagerService.update$.subscribe(params=>{params.forEach(param=>{const{unitId,subUnitId,drawingId}=param,drawingParam=this._drawingManagerService.getDrawingByParam(param);if(drawingParam==null)return;const{transform,drawingType}=drawingParam,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;if(transform==null)return!0;const{left=0,top=0,width=0,height=0,angle=0,flipX=!1,flipY=!1,skewX=0,skewY=0}=transform,drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShape=scene.getObject(drawingShapeKey);if(drawingShape==null)return!0;drawingShape.transformByState({left,top,width,height,angle,flipX,flipY,skewX,skewY})})}))}_drawingRefreshListener(){this.disposeWithMe(this._drawingManagerService.refreshTransform$.subscribe(params=>{params.forEach(param=>{const{unitId,subUnitId,drawingId}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const drawingParam=this._drawingManagerService.getDrawingByParam(param);if(drawingParam==null)return;const{transform}=drawingParam,{scene}=renderObject,drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShape=scene.getObject(drawingShapeKey);if(drawingShape==null\|\|transform==null)return!0;const{left=0,top=0,width=0,height=0,angle=0,flipX=!1,flipY=!1,skewX=0,skewY=0}=transform;drawingShape.transformByState({left,top,width,height,angle,flipX,flipY,skewX,skewY})})}))}_drawingVisibleListener(){this.disposeWithMe(this._drawingManagerService.visible$.subscribe(params=>{params.forEach(param=>{const{unitId,subUnitId,drawingId,visible}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject,drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShape=scene.getObject(drawingShapeKey);if(drawingShape==null)return!0;visible?drawingShape.show():drawingShape.hide()})}))}_filterUpdateParams(params,startTransforms){return params.filter((param,index)=>{if(param==null)return!1;const{transform}=param;return core.checkIfMove(transform,startTransforms==null?void 0:startTransforms[index])})}_addListenerOnDrawing(scene){const transformer=scene.getTransformerByCreate();let startTransforms=null;this.disposeWithMe(core.toDisposable(transformer.changeStart$.subscribe(state=>{const{objects}=state,objectArray=Array.from(objects.values()),drawings=[];startTransforms=objectArray.map(object=>{const{left,top,height,width,angle,oKey,isInGroup}=object,drawing2=this._drawingManagerService.getDrawingOKey(oKey);if(isInGroup\|\|object instanceof engineRender.Group){let group=object.ancestorGroup;if(group==null&&object instanceof engineRender.Group&&(group=object),group==null)return null;const groupDrawing=this._drawingManagerService.getDrawingOKey(group.oKey);if(groupDrawing){const{unitId,subUnitId,drawingId}=groupDrawing;drawings.push({unitId,subUnitId,drawingId});const{left:left2,top:top2,height:height2,width:width2,angle:angle2}=group;return{left:left2,top:top2,height:height2,width:width2,angle:angle2}}}else if(drawing2!=null){const{unitId,subUnitId,drawingId}=drawing2;return drawings.push({unitId,subUnitId,drawingId}),{left,top,height,width,angle}}return null}).filter(transform=>transform!=null),drawings.length>0?this._drawingManagerService.focusDrawing(drawings):this._drawingManagerService.focusDrawing(null)}))),this.disposeWithMe(core.toDisposable(transformer.changeEnd$.subscribe(state=>{const{objects}=state,params=this._filterUpdateParams(getUpdateParams(objects,this._drawingManagerService),startTransforms);params.length>0&&this._drawingManagerService.featurePluginUpdateNotification(params)})))}},__name(_a3,"DrawingUpdateController"),_a3);DrawingUpdateController=__decorateClass$3([__decorateParam$3(0,core.IUniverInstanceService),__decorateParam$3(1,core.ICommandService),__decorateParam$3(2,engineRender.IRenderManagerService),__decorateParam$3(3,drawing.IDrawingManagerService)],DrawingUpdateController);const _ImageCropperObject=class _ImageCropperObject extends engineRender.Shape{constructor(key,props){props==null&&(props={}),props.transformerConfig={keepRatio:!1,isCropper:!0,anchorFill:"rgb(0, 0, 0)",anchorStroke:"rgb(255, 255, 255)",anchorSize:24};super(key,props);__publicField(this,"_srcRect");__publicField(this,"_prstGeom");__publicField(this,"_applyTransform");__publicField(this,"_dragPadding",8);__publicField(this,"_cacheCanvas");props!=null&&props.srcRect&&(this._srcRect=props.srcRect),props!=null&&props.prstGeom&&(this._prstGeom=props.prstGeom),props!=null&&props.applyTransform&&(this._applyTransform=props.applyTransform),props!=null&&props.dragPadding&&(this._dragPadding=props.dragPadding),this._applyProps()}refreshSrcRect(value,transform){this._srcRect=value,this._applyTransform=transform,this._applyProps()}get srcRect(){return this._srcRect}dispose(){var _a7;super.dispose(),(_a7=this._cacheCanvas)==null\|\|_a7.dispose(),this._srcRect=null}isHit(coord){const oCoord=this.getInverseCoord(coord);return oCoord.x>=-this.strokeWidth/2&&oCoord.x<=this.width+this.strokeWidth/2&&oCoord.y>=-this.strokeWidth/2&&oCoord.y<=this.height+this.strokeWidth/2&&!this._inSurround(oCoord)}_inSurround(oCoord){const padding=this._dragPadding;return oCoord.x>=padding-this.strokeWidth/2&&oCoord.x<=this.width+this.strokeWidth/2-padding&&oCoord.y>=padding-this.strokeWidth/2&&oCoord.y<=this.height+this.strokeWidth/2-padding}render(mainCtx,bounds){return this.visible?(mainCtx.save(),this._draw(mainCtx),mainCtx.restore(),this.makeDirty(!1),this):(this.makeDirty(!1),this)}_draw(ctx){var _a7,_b;const engine=this.getScene().getEngine(),{width:engineWidth,height:engineHeight}=engine;this._initialCacheCanvas(),(_a7=this._cacheCanvas)==null\|\|_a7.clear();const cacheCtx=(_b=this._cacheCanvas)==null?void 0:_b.getContext();cacheCtx!=null&&(cacheCtx.save(),engineRender.Rect.drawWith(cacheCtx,{left:0,top:0,width:engineWidth,height:engineHeight,fill:"rgba(0, 0, 0, 0.5)"}),cacheCtx.setTransform(ctx.getTransform()),this._clipForApplyObject(cacheCtx),this._applyCache(ctx),cacheCtx.restore())}_clipForApplyObject(cacheCtx){let objectType=0;if(this._prstGeom!=null&&(objectType=1),cacheCtx.globalCompositeOperation="destination-out",cacheCtx.beginPath(),objectType===0){const m=this.transform.getMatrix();cacheCtx.transform(m[0],m[1],m[2],m[3],m[4],m[5]),cacheCtx.rect(0,0,this.width,this.height),cacheCtx.fill()}}_applyProps(){if(this._applyTransform==null)return;let cropLeft=0,cropTop=0,cropRight=0,cropBottom=0;const{left:applyLeft=0,top:applyTop=0,width:applyWidth=0,height:applyHeight=0,angle}=this._applyTransform;if(this._srcRect!=null){const{left:left2=0,top:top2=0,right=0,bottom=0}=this._srcRect;cropLeft=left2,cropTop=top2,cropRight=right,cropBottom=bottom}const left=applyLeft+cropLeft,top=applyTop+cropTop;this.transformByState({left,top,width:applyLeft+applyWidth-cropRight-left,height:applyTop+applyHeight-cropBottom-top,angle})}_applyCache(ctx){if(!ctx\|\|this._cacheCanvas==null)return;const cacheCtx=this._cacheCanvas.getContext();cacheCtx.save(),ctx.save(),ctx.setTransform(1,0,0,1,0,0),cacheCtx.setTransform(1,0,0,1,0,0),ctx.drawImage(this._cacheCanvas.getCanvasEle(),0,0),ctx.restore(),cacheCtx.restore()}_initialCacheCanvas(){if(this._cacheCanvas!=null)return;const scene=this.getScene();if(scene==null)return;this._cacheCanvas=new engineRender.Canvas;const engine=scene.getEngine();this._cacheCanvas.setSize(engine.width,engine.height),engine.onTransformChange$.subscribeEvent(()=>{var _a7;(_a7=this._cacheCanvas)==null\|\|_a7.setSize(engine.width,engine.height),this.makeDirty(!0)})}};__name(_ImageCropperObject,"ImageCropperObject");let ImageCropperObject=_ImageCropperObject;var __defProp$2=Object.defineProperty,__getOwnPropDesc$2=Object.getOwnPropertyDescriptor,__decorateClass$2=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$2(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$2(target,key,result),result},"__decorateClass$2"),__decorateParam$2=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$2"),_a4;let ImageCropperController=(_a4=class extends core.Disposable{constructor(_commandService,_drawingManagerService,_renderManagerService,_univerInstanceService,_messageService,_localeService){super();__publicField(this,"_sceneListenerOnImageMap",new WeakSet);this._commandService=_commandService,this._drawingManagerService=_drawingManagerService,this._renderManagerService=_renderManagerService,this._univerInstanceService=_univerInstanceService,this._messageService=_messageService,this._localeService=_localeService,this._init()}_init(){this._initOpenCrop(),this._initCloseCrop(),this._initAutoCrop()}_initAutoCrop(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id!==AutoImageCropOperation.id)return;const params=command.params;if(params==null)return;const{cropType}=params,drawingParams=this._drawingManagerService.getFocusDrawings();if(drawingParams.length!==1)return;const drawingParam=drawingParams[0],{unitId,subUnitId,drawingId}=drawingParam,renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return!0;this._searchCropObject(scene)!=null&&this._commandService.syncExecuteCommand(CloseImageCropOperation.id,{isAuto:!0});const imageShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),imageShape=scene.getObject(imageShapeKey);if(!(imageShape instanceof engineRender.Image)){this._messageService.show({type:design.MessageType.Error,content:this._localeService.t("image-cropper.error")});return}imageShape!=null&&(this._updateCropperObject(cropType,imageShape),this._commandService.executeCommand(OpenImageCropOperation.id,{unitId,subUnitId,drawingId}))}))}_calculateSrcRectByRatio(left,top,width,height,numerator,denominator){const srcRatio=width/height,ratio=numerator/denominator;let newWidth=width,newHeight=height;srcRatio>ratio?newWidth=heightratio:newHeight=width/ratio;const newLeft=(width-newWidth)/2,newTop=(height-newHeight)/2;return{left:engineRender.precisionTo(newLeft,1),top:engineRender.precisionTo(newTop,1),right:engineRender.precisionTo(width-(newLeft+newWidth),1),bottom:engineRender.precisionTo(height-(newTop+newHeight),1)}}_updateCropperObject(cropType,imageShape){const{left,top,width,height}=imageShape.calculateTransformWithSrcRect();let newSrcRect;switch(cropType){case CropType.R1_1:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,1,1);break;case CropType.R16_9:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,16,9);break;case CropType.R9_16:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,9,16);break;case CropType.R5_4:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,5,4);break;case CropType.R4_5:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,4,5);break;case CropType.R4_3:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,4,3);break;case CropType.R3_4:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,3,4);break;case CropType.R3_2:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,3,2);break;case CropType.R2_3:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,2,3);break;case CropType.FREE:}if(newSrcRect==null)return;imageShape.setSrcRect(newSrcRect);const{left:newLeft=0,top:newTop=0,bottom:newBottom=0,right:newRight=0}=newSrcRect;imageShape.transformByStateCloseCropper({left:left+newLeft,top:top+newTop,width:width-newRight-newLeft,height:height-newBottom-newTop})}_initOpenCrop(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id!==OpenImageCropOperation.id)return;const params=command.params;if(params==null)return;const{unitId,subUnitId,drawingId}=params,renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return!0;if(this._sceneListenerOnImageMap.has(scene)\|\|(this._addListenerOnImage(scene),this._sceneListenerOnImageMap.add(scene)),this._drawingManagerService.getDrawingByParam({unitId,subUnitId,drawingId})==null)return;const imageShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),imageShape=scene.getObject(imageShapeKey);if(imageShape==null)return;if(!(imageShape instanceof engineRender.Image)){this._messageService.show({type:design.MessageType.Error,content:this._localeService.t("image-cropper.error")});return}const transformer=scene.getTransformer();transformer==null\|\|transformer.clearControls();const imageCropperObject=new ImageCropperObject(`${imageShapeKey}-crop`,{srcRect:imageShape.srcRect,prstGeom:imageShape.prstGeom,applyTransform:imageShape.calculateTransformWithSrcRect()});scene.addObject(imageCropperObject,imageShape.getLayerIndex()+1).attachTransformerTo(imageCropperObject),transformer==null\|\|transformer.createControlForCopper(imageCropperObject),this._addHoverForImageCopper(imageCropperObject),imageShape.openRenderByCropper(),transformer==null\|\|transformer.refreshControls(),imageCropperObject.makeDirty(!0),this._drawingManagerService.focusDrawing([{unitId,subUnitId,drawingId}])}))}_searchCropObject(scene){const objects=scene.getAllObjectsByOrder();for(const object of objects)if(object instanceof ImageCropperObject)return object}_initCloseCrop(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id!==CloseImageCropOperation.id)return;const currentUnit=this._univerInstanceService.getFocusedUnit();if(currentUnit==null)return;const unitId=currentUnit.getUnitId(),renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return!0;const imageCropperObject=this._searchCropObject(scene);if(imageCropperObject==null)return;const imageShape=this._getApplyObjectByCropObject(imageCropperObject);if(imageShape==null)return;const transformer=scene.getTransformerByCreate();transformer.detachFrom(imageCropperObject),transformer.clearCopperControl();const srcRect=this._getSrcRectByTransformState(imageShape,imageCropperObject),drawingParam=this._drawingManagerService.getDrawingOKey(imageShape.oKey);if(drawingParam!=null){const{left,top,height,width}=imageCropperObject;this._drawingManagerService.featurePluginUpdateNotification([{...drawingParam,transform:{...drawingParam.transform,left,top,height,width},srcRect:srcRect.srcRectAngle}])}imageShape.setSrcRect({...srcRect.srcRectAngle}),imageShape.closeRenderByCropper(),imageShape.makeDirty(!0),imageCropperObject==null\|\|imageCropperObject.dispose()}));const sheetUnit=this._univerInstanceService.getCurrentTypeOfUnit$(core.UniverInstanceType.UNIVER_SHEET).pipe(rxjs.filter(workbook=>!!workbook),rxjs.switchMap(workbook=>workbook.activeSheet$));this.disposeWithMe(sheetUnit.subscribe(()=>{this._commandService.syncExecuteCommand(CloseImageCropOperation.id)}))}_getApplyObjectByCropObject(cropObject){const cropOKey=cropObject.oKey,applyOKey=cropOKey.slice(0,cropOKey.length-5),scene=cropObject.getScene();if(!scene)return null;const applyObject=scene.getObject(applyOKey);return applyObject==null?null:applyObject}_addListenerOnImage(scene){const transformer=scene.getTransformerByCreate();let startTransform=null;this.disposeWithMe(transformer.changeStart$.subscribe(state=>{const{objects}=state,cropObject=objects.values().next().value;if(cropObject==null\|\|!(cropObject instanceof ImageCropperObject))return;const{left,top,height,width,angle}=cropObject;startTransform={left,top,height,width,angle},transformer.clearCopperControl()})),this.disposeWithMe(transformer.changeEnd$.subscribe(state=>{const{objects}=state,cropObject=objects.values().next().value;if(cropObject==null\|\|!(cropObject instanceof ImageCropperObject))return;const{left,top,height,width,angle}=cropObject;if(!core.checkIfMove({left,top,height,width,angle},startTransform))return;const applyObject=this._getApplyObjectByCropObject(cropObject);if(applyObject==null)return;const srcRect=this._getSrcRectByTransformState(applyObject,cropObject);cropObject.refreshSrcRect(srcRect.srcRect,applyObject.getState()),transformer.createControlForCopper(cropObject)})),this._endCropListener(scene)}_addHoverForImageCopper(o){this.disposeWithMe(o.onPointerEnter$.subscribeEvent(()=>{o.cursor=engineRender.CURSOR_TYPE.MOVE})),this.disposeWithMe(o.onPointerLeave$.subscribeEvent(()=>{o.cursor=engineRender.CURSOR_TYPE.DEFAULT}))}_endCropListener(scene){const transformer=scene.getTransformerByCreate();this.disposeWithMe(transformer.clearControl$.subscribe(changeSelf=>{changeSelf===!0&&this._commandService.syncExecuteCommand(CloseImageCropOperation.id)}))}_getSrcRectByTransformState(applyObject,imageCropperObject){const{left,top,height,width,strokeWidth,angle:copperAngle}=imageCropperObject,{left:applyLeft,top:applyTop,width:applyWidth,height:applyHeight,angle:applyAngle,strokeWidth:applyStrokeWidth}=applyObject,newLeft=left-applyLeft,newTop=top-applyTop,srcRect={left:newLeft,top:newTop,right:applyWidth-newLeft-width,bottom:applyHeight-newTop-height},srcRectAngle={...srcRect};if(applyAngle!==0){const cx=left+width/2,cy=top+height/2,centerPoint=new engineRender.Vector2(cx,cy),newCx=applyWidth/2+applyLeft,newCy=applyHeight/2+applyTop,newCenterPoint=new engineRender.Vector2(newCx,newCy),vertexPoint=new engineRender.Vector2(applyLeft,applyTop);vertexPoint.rotateByPoint(engineRender.degToRad(applyAngle),newCenterPoint);const applyFinalPoint=vertexPoint.clone();applyFinalPoint.rotateByPoint(engineRender.degToRad(-applyAngle),centerPoint);const newAngleLeft=left-applyFinalPoint.x,newAngleTop=top-applyFinalPoint.y;srcRectAngle.left=newAngleLeft,srcRectAngle.top=newAngleTop,srcRectAngle.right=applyWidth-newAngleLeft-width,srcRectAngle.bottom=applyHeight-newAngleTop-height}return{srcRect,srcRectAngle}}},__name(_a4,"ImageCropperController"),_a4);ImageCropperController=__decorateClass$2([__decorateParam$2(0,core.ICommandService),__decorateParam$2(1,drawing.IDrawingManagerService),__decorateParam$2(2,engineRender.IRenderManagerService),__decorateParam$2(3,core.IUniverInstanceService),__decorateParam$2(4,ui.IMessageService),__decorateParam$2(5,core.Inject(core.LocaleService))],ImageCropperController);var __defProp$1=Object.defineProperty,__getOwnPropDesc$1=Object.getOwnPropertyDescriptor,__decorateClass$1=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$1(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$1(target,key,result),result},"__decorateClass$1"),__decorateParam$1=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$1");const IMAGE_VIEWER_DROPDOWN_PADDING=50;var _a5;let ImageUpdateController=(_a5=class extends core.Disposable{constructor(_commandService,_renderManagerService,_drawingManagerService,_dialogService,_imageIoService,_currentUniverService,_drawingRenderService){super(),this._commandService=_commandService,this._renderManagerService=_renderManagerService,this._drawingManagerService=_drawingManagerService,this._dialogService=_dialogService,this._imageIoService=_imageIoService,this._currentUniverService=_currentUniverService,this._drawingRenderService=_drawingRenderService,this._initialize()}dispose(){super.dispose()}_initialize(){this._drawingAddListener(),this._commandExecutedListener(),this._imageUpdateListener()}_commandExecutedListener(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id===ImageResetSizeOperation.id){const params=command.params;if(params==null)return;this._resetImageSize(params)}}))}_getSceneAndTransformerByDrawingSearch(unitId){if(unitId==null)return;const renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return null;const transformer=scene.getTransformerByCreate();return{scene,transformer}}_resetImageSize(params){const updateParams=[],sceneList=[];params.forEach(param=>{const{unitId,subUnitId,drawingId}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject,imageShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),imageShape=scene.getObject(imageShapeKey);if(imageShape==null)return!0;const imageData=this._drawingManagerService.getDrawingByParam(param);if(imageData==null)return!0;if(imageData.drawingType!==drawing.DrawingTypeEnum.DRAWING_IMAGE)return;imageShape.resetSize();const{width,height}=imageShape.getNativeSize();sceneList.includes(scene)===!1&&sceneList.push(scene),updateParams.push({...imageData,transform:{...imageData.transform,height,width,angle:0},srcRect:null,prstGeom:null})}),this._drawingManagerService.featurePluginUpdateNotification(updateParams),sceneList.forEach(scene=>{scene.getTransformerByCreate().refreshControls().changeNotification()}),this._drawingManagerService.focusDrawing(params)}_drawingAddListener(){this.disposeWithMe(this._drawingManagerService.add$.subscribe(params=>{this._insertImages(params)}))}_insertImages(params){params.forEach(async param=>{var _a7;const{unitId,subUnitId,drawingId}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId),currentSubUnitId=(_a7=getCurrentUnitInfo(this._currentUniverService,unitId))==null?void 0:_a7.subUnitId;if(renderObject==null\|\|currentSubUnitId!==subUnitId)return;const imageParam=this._drawingManagerService.getDrawingByParam(param);if(imageParam==null)return;const images=await this._drawingRenderService.renderImages(imageParam,renderObject.scene);if(!(images==null\|\|images.length===0))for(const image of images)this._addHoverForImage(image),this._addDialogForImage(image)})}_imageUpdateListener(){this.disposeWithMe(this._drawingManagerService.update$.subscribe(params=>{params.forEach(param=>{const{unitId,subUnitId,drawingId}=param,drawingParam=this._drawingManagerService.getDrawingByParam(param);if(drawingParam==null)return;const{transform,drawingType,srcRect,prstGeom,source,imageSourceType}=drawingParam;if(drawingType!==drawing.DrawingTypeEnum.DRAWING_IMAGE)return;const renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;if(transform==null)return!0;const drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),imageShape=scene.getObject(drawingShapeKey);if(imageShape==null)return!0;imageShape.setSrcRect(srcRect),imageShape.setPrstGeom(prstGeom)})}))}_addHoverForImage(o){this.disposeWithMe(core.toDisposable(o.onPointerEnter$.subscribeEvent(()=>{o.cursor=engineRender.CURSOR_TYPE.GRAB}))),this.disposeWithMe(core.toDisposable(o.onPointerLeave$.subscribeEvent(()=>{o.cursor=engineRender.CURSOR_TYPE.DEFAULT})))}_addDialogForImage(o){this.disposeWithMe(core.toDisposable(o.onDblclick$.subscribeEvent(()=>{var _a7;const dialogId=`${o.oKey}-viewer-dialog`,nativeSize=o.getNativeSize(),screenWidth=window.innerWidth-IMAGE_VIEWER_DROPDOWN_PADDING,screenHeight=window.innerHeight-IMAGE_VIEWER_DROPDOWN_PADDING,adjustSize=this._adjustImageSize(nativeSize.width,nativeSize.height,screenWidth,screenHeight),dialog=this._dialogService.open({width:adjustSize.width,id:dialogId,style:{margin:"0",top:"50%",left:"50%",transform:"translate(-50%, -50%)"},children:{label:{name:COMPONENT_IMAGE_VIEWER,props:{src:(_a7=o.getNative())==null?void 0:_a7.src,width:adjustSize.width,height:adjustSize.height}}},destroyOnClose:!0,draggable:!1,onClose:__name(()=>{this._dialogService.close(dialogId),dialog.dispose()},"onClose")})})))}_adjustImageSize(nativeWidth,nativeHeight,screenWidth,screenHeight){if(nativeWidth<=screenWidth&&nativeHeight<=screenHeight)return{width:nativeWidth,height:nativeHeight};const widthRatio=screenWidth/nativeWidth,heightRatio=screenHeight/nativeHeight,scale=Math.min(widthRatio,heightRatio);return{width:Math.floor(nativeWidthscale),height:Math.floor(nativeHeightscale)}}},__name(_a5,"ImageUpdateController"),_a5);ImageUpdateController=__decorateClass$1([__decorateParam$1(0,core.ICommandService),__decorateParam$1(1,engineRender.IRenderManagerService),__decorateParam$1(2,drawing.IDrawingManagerService),__decorateParam$1(3,ui.IDialogService),__decorateParam$1(4,drawing.IImageIoService),__decorateParam$1(5,core.IUniverInstanceService),__decorateParam$1(6,core.Inject(exports.DrawingRenderService))],ImageUpdateController);var __defProp2=Object.defineProperty,__getOwnPropDesc=Object.getOwnPropertyDescriptor,__decorateClass=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp2(target,key,result),result},"__decorateClass"),__decorateParam=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam");const PLUGIN_NAME="UNIVER_DRAWING_UI_PLUGIN";var _a6;exports.UniverDrawingUIPlugin=(_a6=class extends core.Plugin{constructor(_config=defaultPluginConfig,_injector,_configService){super(),this._config=_config,this._injector=_injector,this._configService=_configService;const{menu,...rest}=this._config;menu&&this._configService.setConfig("menu",menu,{merge:!0}),this._configService.setConfig(PLUGIN_CONFIG_KEY,rest)}onStarting(){this._initDependencies()}onRendered(){this._injector.get(DrawingUpdateController),this._injector.get(DrawingUIController),this._injector.get(ImageCropperController),this._injector.get(ImageUpdateController)}_initDependencies(){[[exports.DrawingRenderService],[DrawingUpdateController],[DrawingUIController],[ImageCropperController],[ImageUpdateController]].forEach(dependency=>this._injector.add(dependency))}},__name(_a6,"UniverDrawingUIPlugin"),__publicField(_a6,"pluginName",PLUGIN_NAME),_a6);exports.UniverDrawingUIPlugin=__decorateClass([__decorateParam(1,core.Inject(core.Injector)),__decorateParam(2,core.IConfigService)],exports.UniverDrawingUIPlugin);exports.AutoImageCropOperation=AutoImageCropOperation;exports.COMPONENT_IMAGE_POPUP_MENU=COMPONENT_IMAGE_POPUP_MENU;exports.CloseImageCropOperation=CloseImageCropOperation;exports.DrawingCommonPanel=DrawingCommonPanel;exports.ImageCropperObject=ImageCropperObject;exports.ImagePopupMenu=ImagePopupMenu;exports.ImageResetSizeOperation=ImageResetSizeOperation;exports.OpenImageCropOperation=OpenImageCropOperation;exports.SetDrawingAlignOperation=SetDrawingAlignOperation;exports.getUpdateParams=getUpdateParams;
1	+ "use strict";var __defProp=Object.defineProperty;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value;var __name=(target,value)=>__defProp(target,"name",{value,configurable:!0});var __publicField=(obj,key,value)=>__defNormalProp(obj,typeof key!="symbol"?key+"":key,value);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const drawing=require("@univerjs/drawing"),engineRender=require("@univerjs/engine-render"),core=require("@univerjs/core"),React=require("react"),design=require("@univerjs/design"),ui=require("@univerjs/ui"),rxjs=require("rxjs");function insertGroupObject(objectParam,object,scene,drawingManagerService){const groupParam=drawingManagerService.getDrawingByParam(objectParam);if(groupParam==null)return;const groupKey=drawing.getDrawingShapeKeyByDrawingSearch(objectParam),groupObject=scene.getObject(groupKey);if(groupObject&&!(groupObject instanceof engineRender.Group))return;if(groupObject!=null){groupObject.addObject(object);return}const group=new engineRender.Group(groupKey);scene.addObject(group,engineRender.DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(group),group.addObject(object);const{transform}=groupParam;transform&&group.transformByState({left:transform.left,top:transform.top,angle:transform.angle})}__name(insertGroupObject,"insertGroupObject");function getCurrentUnitInfo(currentUniverService,propUnitId){var _a7;const current=propUnitId?currentUniverService.getUnit(propUnitId):currentUniverService.getFocusedUnit();if(current==null)return;const unitId=current.getUnitId();let subUnitId;return current.type===core.UniverInstanceType.UNIVER_SHEET?subUnitId=(_a7=current.getActiveSheet())==null?void 0:_a7.getSheetId():(current.type===core.UniverInstanceType.UNIVER_DOC\|\|current.type===core.UniverInstanceType.UNIVER_SLIDE)&&(subUnitId=unitId),{unitId,subUnitId,current}}__name(getCurrentUnitInfo,"getCurrentUnitInfo");var __defProp$5=Object.defineProperty,__getOwnPropDesc$5=Object.getOwnPropertyDescriptor,__decorateClass$5=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$5(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$5(target,key,result),result},"__decorateClass$5"),__decorateParam$5=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$5"),_a;exports.DrawingRenderService=(_a=class{constructor(_drawingManagerService,_imageIoService){this._drawingManagerService=_drawingManagerService,this._imageIoService=_imageIoService}async renderImages(imageParam,scene){const{transform:singleTransform,drawingType,source,imageSourceType,srcRect,prstGeom,groupId,unitId,subUnitId,drawingId,isMultiTransform,transforms:multiTransforms}=imageParam;if(drawingType!==drawing.DrawingTypeEnum.DRAWING_IMAGE\|\|!this._drawingManagerService.getDrawingVisible()\|\|singleTransform==null)return;const transforms=isMultiTransform&&multiTransforms?multiTransforms:[singleTransform],images=[];for(const transform of transforms){const{left,top,width,height,angle,flipX,flipY,skewX,skewY}=transform,index=transforms.indexOf(transform),imageShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId},isMultiTransform?index:void 0),imageShape=scene.getObject(imageShapeKey);if(imageShape!=null){imageShape.transformByState({left,top,width,height,angle,flipX,flipY,skewX,skewY});continue}const orders=this._drawingManagerService.getDrawingOrder(unitId,subUnitId),zIndex=orders.indexOf(drawingId),imageConfig={...transform,zIndex:zIndex===-1?orders.length-1:zIndex},imageNativeCache=this._imageIoService.getImageSourceCache(source,imageSourceType);let shouldBeCache=!1;if(imageNativeCache!=null)imageConfig.image=imageNativeCache;else{if(imageSourceType===drawing.ImageSourceType.UUID)try{imageConfig.url=await this._imageIoService.getImage(source)}catch(error){console.error(error);continue}else imageConfig.url=source;shouldBeCache=!0}if(scene.getObject(imageShapeKey))continue;imageConfig.printable=!0;const image=new engineRender.Image(imageShapeKey,imageConfig);if(shouldBeCache&&this._imageIoService.addImageSourceCache(source,imageSourceType,image.getNative()),!this._drawingManagerService.getDrawingVisible())continue;const imageObject=scene.addObject(image,engineRender.DRAWING_OBJECT_LAYER_INDEX);this._drawingManagerService.getDrawingEditable()&&imageObject.attachTransformerTo(image),groupId&&insertGroupObject({drawingId:groupId,unitId,subUnitId},image,scene,this._drawingManagerService),prstGeom!=null&&image.setPrstGeom(prstGeom),srcRect!=null&&image.setSrcRect(srcRect),images.push(image)}return images}renderDrawing(param,scene){const drawingParam=this._drawingManagerService.getDrawingByParam(param);if(drawingParam!=null)switch(drawingParam.drawingType){case drawing.DrawingTypeEnum.DRAWING_IMAGE:return this.renderImages(drawingParam,scene)}}},__name(_a,"DrawingRenderService"),_a);exports.DrawingRenderService=__decorateClass$5([__decorateParam$5(0,drawing.IDrawingManagerService),__decorateParam$5(1,drawing.IImageIoService)],exports.DrawingRenderService);function getUpdateParams(objects,drawingManagerService){const params=[];return objects.forEach(object=>{const{oKey,left,top,height,width,angle}=object,searchParam=drawingManagerService.getDrawingOKey(oKey);if(searchParam==null)return params.push(null),!0;const{unitId,subUnitId,drawingId,drawingType}=searchParam,param={unitId,subUnitId,drawingId,drawingType,transform:{left,top,height,width,angle}};drawingType===drawing.DrawingTypeEnum.DRAWING_IMAGE&&(param.srcRect=object.srcRect),params.push(param)}),params}__name(getUpdateParams,"getUpdateParams");var __assign=function(){return __assign=Object.assign\|\|function(t){for(var s,i=1,n=arguments.length;i<n;i++){s=arguments[i];for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p])}return t},__assign.apply(this,arguments)},__rest=function(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(s!=null&&typeof Object.getOwnPropertySymbols=="function")for(var i=0,p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]]);return t},IconBase=React.forwardRef(function(props,ref){var icon=props.icon,id=props.id,className=props.className,extend=props.extend,restProps=__rest(props,["icon","id","className","extend"]),cls="univerjs-icon univerjs-icon-".concat(id," ").concat(className\|\|"").trim(),idSuffix=React.useRef("_".concat(generateShortUuid()));return render(icon,"".concat(id),{defIds:icon.defIds,idSuffix:idSuffix.current},__assign({ref,className:cls},restProps),extend)});function render(node,id,runtimeProps,rootProps,extend){return React.createElement(node.tag,__assign(__assign({key:id},replaceRuntimeIdsAndExtInAttrs(node,runtimeProps,extend)),rootProps),(replaceRuntimeIdsInDefs(node,runtimeProps).children\|\|[]).map(function(child,index){return render(child,"".concat(id,"-").concat(node.tag,"-").concat(index),runtimeProps,void 0,extend)}))}__name(render,"render");function replaceRuntimeIdsAndExtInAttrs(node,runtimeProps,extend){var attrs=__assign({},node.attrs);extend!=null&&extend.colorChannel1&&attrs.fill==="colorChannel1"&&(attrs.fill=extend.colorChannel1);var defIds=runtimeProps.defIds;return!defIds\|\|defIds.length===0\|\|(node.tag==="use"&&attrs["xlink:href"]&&(attrs["xlink:href"]=attrs["xlink:href"]+runtimeProps.idSuffix),Object.entries(attrs).forEach(function(_a7){var key=_a7[0],value=_a7[1];typeof value=="string"&&(attrs[key]=value.replace(/url$#(.)$/,"url(#$1".concat(runtimeProps.idSuffix,")")))})),attrs}__name(replaceRuntimeIdsAndExtInAttrs,"replaceRuntimeIdsAndExtInAttrs");function replaceRuntimeIdsInDefs(node,runtimeProps){var _a7,defIds=runtimeProps.defIds;return!defIds\|\|defIds.length===0?node:node.tag==="defs"&&(!((_a7=node.children)===null\|\|_a7===void 0)&&_a7.length)?__assign(__assign({},node),{children:node.children.map(function(child){return typeof child.attrs.id=="string"&&defIds&&defIds.indexOf(child.attrs.id)>-1?__assign(__assign({},child),{attrs:__assign(__assign({},child.attrs),{id:child.attrs.id+runtimeProps.idSuffix})}):child})}):node}__name(replaceRuntimeIdsInDefs,"replaceRuntimeIdsInDefs");function generateShortUuid(){return Math.random().toString(36).substring(2,8)}__name(generateShortUuid,"generateShortUuid");IconBase.displayName="UniverIcon";var element$8={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"colorChannel1",d:"M11.0363 12.2367V14.0367C11.0363 14.3681 11.3049 14.6367 11.6363 14.6367C11.9676 14.6367 12.2363 14.3681 12.2363 14.0367V12.2367H14.0364C14.3677 12.2367 14.6364 11.9681 14.6364 11.6367C14.6364 11.3054 14.3677 11.0367 14.0364 11.0367H12.2363V9.23672C12.2363 8.90535 11.9676 8.63672 11.6363 8.63672C11.3049 8.63672 11.0363 8.90535 11.0363 9.23672V11.0367H9.23635C8.90498 11.0367 8.63635 11.3054 8.63635 11.6367C8.63635 11.9681 8.90498 12.2367 9.23635 12.2367H11.0363Z"}},{tag:"path",attrs:{fill:"currentColor",d:"M2.56365 1.36377C1.90091 1.36377 1.36365 1.90103 1.36365 2.56377V6.16377C1.36365 6.82651 1.90091 7.36377 2.56365 7.36377H6.16365C6.82639 7.36377 7.36365 6.82651 7.36365 6.16377V2.56377C7.36365 1.90103 6.82639 1.36377 6.16365 1.36377H2.56365zM6.16365 2.56377H2.56365L2.56365 6.16377H6.16365V2.56377zM2.56365 8.63647C1.90091 8.63647 1.36365 9.17373 1.36365 9.83647V13.4365C1.36365 14.0992 1.90091 14.6365 2.56365 14.6365H6.16365C6.82639 14.6365 7.36365 14.0992 7.36365 13.4365V9.83647C7.36365 9.17373 6.82639 8.63647 6.16365 8.63647H2.56365zM6.16365 9.83647H2.56365L2.56365 13.4365H6.16365V9.83647zM9.83635 7.36377C9.17361 7.36377 8.63635 6.82651 8.63635 6.16377V2.56377C8.63635 1.90103 9.17361 1.36377 9.83635 1.36377H13.4364C14.0991 1.36377 14.6364 1.90103 14.6364 2.56377V6.16377C14.6364 6.82651 14.0991 7.36377 13.4364 7.36377H9.83635zM9.83635 6.16377V2.56377L13.4364 2.56377V6.16377H9.83635z",fillRule:"evenodd",clipRule:"evenodd"}}]},Autofill=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"autofill",ref,icon:element$8}))});Autofill.displayName="Autofill";var element$7={tag:"svg",attrs:{fill:"none",viewBox:"0 0 17 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M14.0045 4.4334C14.8881 4.4334 15.6045 3.71705 15.6045 2.8334 15.6045 1.94974 14.8881 1.2334 14.0045 1.2334H3.70449C2.82084 1.2334 2.10449 1.94974 2.10449 2.8334 2.10449 3.71705 2.82084 4.4334 3.70449 4.4334H14.0045zM14.4045 2.8334C14.4045 3.05431 14.2254 3.2334 14.0045 3.2334H3.70449C3.48358 3.2334 3.30449 3.05431 3.30449 2.8334 3.30449 2.61248 3.48358 2.4334 3.70449 2.4334H14.0045C14.2254 2.4334 14.4045 2.61249 14.4045 2.8334zM14.1544 8.5999C15.038 8.5999 15.7544 7.88356 15.7544 6.9999 15.7544 6.11625 15.038 5.3999 14.1544 5.3999H3.85439C2.97074 5.3999 2.25439 6.11625 2.25439 6.9999 2.25439 7.88356 2.97074 8.5999 3.85439 8.5999H14.1544zM14.5544 6.9999C14.5544 7.22082 14.3753 7.3999 14.1544 7.3999H3.85439C3.63348 7.3999 3.45439 7.22082 3.45439 6.9999 3.45439 6.77899 3.63348 6.5999 3.85439 6.5999H14.1544C14.3753 6.5999 14.5544 6.77899 14.5544 6.9999z",fillRule:"evenodd",clipRule:"evenodd"}},{tag:"path",attrs:{fill:"currentColor",d:"M8.57975 14.5902L6.58023 12.5907C6.34591 12.3564 6.34591 11.9765 6.58023 11.7421 6.81454 11.5078 7.19444 11.5078 7.42876 11.7421L8.40449 12.7179V10.1664C8.40449 9.83504 8.67312 9.56641 9.00449 9.56641 9.33586 9.56641 9.60449 9.83504 9.60449 10.1664V12.7179L10.5802 11.7421C10.8145 11.5078 11.1944 11.5078 11.4288 11.7421 11.6631 11.9765 11.6631 12.3564 11.4288 12.5907L9.42923 14.5902M8.57975 14.5902C8.58121 14.5917 8.58268 14.5931 8.58416 14.5946 8.64077 14.6502 8.70566 14.6923 8.77482 14.7209 8.84557 14.7502 8.92314 14.7664 9.00449 14.7664 9.08585 14.7664 9.16342 14.7502 9.23416 14.7209 9.30332 14.6923 9.36821 14.6502 9.42482 14.5946"}}]},BottomSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"bottom-single",ref,icon:element$7}))});BottomSingle.displayName="BottomSingle";var element$6={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M5.97705 7.51296C5.97705 7.18159 6.24568 6.91296 6.57705 6.91296H8.48632C8.81769 6.91296 9.08632 7.18159 9.08632 7.51296 9.08632 7.84433 8.81769 8.11296 8.48632 8.11296H6.57705C6.24568 8.11296 5.97705 7.84433 5.97705 7.51296zM6.57705 9.41028C6.24568 9.41028 5.97705 9.67891 5.97705 10.0103 5.97705 10.3416 6.24568 10.6103 6.57705 10.6103H10.8199C11.1512 10.6103 11.4199 10.3416 11.4199 10.0103 11.4199 9.67891 11.1512 9.41028 10.8199 9.41028H6.57705z"}},{tag:"path",attrs:{fill:"currentColor",d:"M3.51074 2.37063C3.51074 1.48697 4.22709 0.77063 5.11074 0.77063H9.80318L9.81294 0.770708C9.97168 0.768161 10.1311 0.82824 10.2511 0.95055L14.4317 5.21408C14.5165 5.30049 14.5697 5.406 14.5917 5.51645C14.6041 5.5644 14.6106 5.61467 14.6106 5.66648V11.6406C14.6106 12.5243 13.8943 13.2406 13.0106 13.2406H5.11074C4.22709 13.2406 3.51074 12.5243 3.51074 11.6406V2.37063ZM10.4032 4.66648V2.81964L12.6063 5.06648H10.8032C10.5823 5.06648 10.4032 4.88739 10.4032 4.66648ZM5.11074 1.97063C4.88983 1.97063 4.71074 2.14972 4.71074 2.37063V11.6406C4.71074 11.8615 4.88983 12.0406 5.11074 12.0406H13.0106C13.2316 12.0406 13.4106 11.8615 13.4106 11.6406V6.26648H10.8032C9.91953 6.26648 9.20318 5.55013 9.20318 4.66648V1.97063H5.11074Z",fillRule:"evenodd",clipRule:"evenodd"}},{tag:"path",attrs:{fill:"currentColor",d:"M2.58916 6.6741C2.58916 6.34273 2.32053 6.0741 1.98916 6.0741C1.65779 6.0741 1.38916 6.34273 1.38916 6.6741V12.6294C1.38916 14.0653 2.55322 15.2294 3.98916 15.2294H9.41408C9.74545 15.2294 10.0141 14.9607 10.0141 14.6294C10.0141 14.298 9.74545 14.0294 9.41408 14.0294H3.98916C3.21596 14.0294 2.58916 13.4026 2.58916 12.6294V6.6741Z"}}]},CreateCopySingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"create-copy-single",ref,icon:element$6}))});CreateCopySingle.displayName="CreateCopySingle";var element$5={tag:"svg",attrs:{fill:"none",viewBox:"0 0 17 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M7.38125 1.16211C6.49759 1.16211 5.78125 1.87845 5.78125 2.76211V5.6377H2.87783C1.99418 5.6377 1.27783 6.35404 1.27783 7.2377V13.2377C1.27783 14.1214 1.99418 14.8377 2.87783 14.8377H8.87783C9.76149 14.8377 10.4778 14.1214 10.4778 13.2377V10.3621H13.3813C14.2649 10.3621 14.9813 9.64577 14.9813 8.76211V2.76211C14.9813 1.87845 14.2649 1.16211 13.3813 1.16211H7.38125ZM10.4778 9.16211H13.3813C13.6022 9.16211 13.7812 8.98302 13.7812 8.76211V2.76211C13.7812 2.5412 13.6022 2.36211 13.3813 2.36211H7.38125C7.16034 2.36211 6.98125 2.5412 6.98125 2.76211V5.6377H8.87783C9.76149 5.6377 10.4778 6.35404 10.4778 7.2377V9.16211ZM6.98125 6.8377H8.87783C9.09875 6.8377 9.27783 7.01678 9.27783 7.2377V9.16211H7.38125C7.16034 9.16211 6.98125 8.98302 6.98125 8.76211V6.8377ZM5.78125 6.8377V8.76211C5.78125 9.64577 6.49759 10.3621 7.38125 10.3621H9.27783V13.2377C9.27783 13.4586 9.09875 13.6377 8.87783 13.6377H2.87783C2.65692 13.6377 2.47783 13.4586 2.47783 13.2377V7.2377C2.47783 7.01678 2.65692 6.8377 2.87783 6.8377H5.78125Z",fillRule:"evenodd",clipRule:"evenodd"}}]},GroupSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"group-single",ref,icon:element$5}))});GroupSingle.displayName="GroupSingle";var element$4={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M11.3536 6.14645C11.5488 6.34171 11.5488 6.65829 11.3536 6.85355L8.35355 9.85355C8.15829 10.0488 7.84171 10.0488 7.64645 9.85355L4.64645 6.85355C4.45118 6.65829 4.45118 6.34171 4.64645 6.14645C4.84171 5.95118 5.15829 5.95118 5.35355 6.14645L8 8.79289L10.6464 6.14645C10.8417 5.95118 11.1583 5.95118 11.3536 6.14645Z",fillRule:"evenodd",clipRule:"evenodd"}}]},MoreDownSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"more-down-single",ref,icon:element$4}))});MoreDownSingle.displayName="MoreDownSingle";var element$3={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M1.25 2.96401C1.25 3.84767 1.96634 4.56401 2.85 4.56401H13.15C14.0337 4.56401 14.75 3.84767 14.75 2.96401C14.75 2.08036 14.0337 1.36401 13.15 1.36401H2.85C1.96635 1.36401 1.25 2.08036 1.25 2.96401ZM2.85 3.36401C2.62909 3.36401 2.45 3.18493 2.45 2.96401C2.45 2.7431 2.62909 2.56401 2.85 2.56401H13.15C13.3709 2.56401 13.55 2.7431 13.55 2.96401C13.55 3.18493 13.3709 3.36401 13.15 3.36401H2.85Z",fillRule:"evenodd",clipRule:"evenodd"}},{tag:"path",attrs:{fill:"currentColor",d:"M5.57564 11.6118C5.80995 11.3774 6.18985 11.3774 6.42417 11.6118L7.3999 12.5875V6.36951C7.3999 6.03814 7.66853 5.76951 7.9999 5.76951C8.33127 5.76951 8.5999 6.03814 8.5999 6.36951V12.5875L9.57564 11.6118C9.80995 11.3774 10.1899 11.3774 10.4242 11.6118C10.6585 11.8461 10.6585 12.226 10.4242 12.4603L8.4324 14.452C8.32324 14.5655 8.16982 14.6362 7.9999 14.6362C7.82998 14.6362 7.67655 14.5655 7.56739 14.452L5.57564 12.4603C5.34132 12.226 5.34132 11.8461 5.57564 11.6118Z"}}]},MoveDownSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"move-down-single",ref,icon:element$3}))});MoveDownSingle.displayName="MoveDownSingle";var element$2={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M1.25 13.036C1.25 12.1523 1.96634 11.436 2.85 11.436H13.15C14.0337 11.436 14.75 12.1523 14.75 13.036C14.75 13.9196 14.0337 14.636 13.15 14.636H2.85C1.96635 14.636 1.25 13.9196 1.25 13.036ZM2.85 12.636C2.62909 12.636 2.45 12.8151 2.45 13.036C2.45 13.2569 2.62909 13.436 2.85 13.436H13.15C13.3709 13.436 13.55 13.2569 13.55 13.036C13.55 12.8151 13.3709 12.636 13.15 12.636H2.85Z",fillRule:"evenodd",clipRule:"evenodd"}},{tag:"path",attrs:{fill:"currentColor",d:"M5.57564 4.38825C5.80995 4.62256 6.18985 4.62256 6.42417 4.38825L7.3999 3.41251V9.63049C7.3999 9.96186 7.66853 10.2305 7.9999 10.2305C8.33127 10.2305 8.5999 9.96186 8.5999 9.63049V3.41251L9.57564 4.38825C9.80995 4.62256 10.1899 4.62256 10.4242 4.38825C10.6585 4.15393 10.6585 3.77403 10.4242 3.53972L8.4324 1.54796C8.32324 1.43445 8.16982 1.36382 7.9999 1.36382C7.82998 1.36382 7.67655 1.43446 7.56739 1.54797L5.57564 3.53972C5.34132 3.77403 5.34132 4.15393 5.57564 4.38825Z"}}]},MoveUpSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"move-up-single",ref,icon:element$2}))});MoveUpSingle.displayName="MoveUpSingle";var element$1={tag:"svg",attrs:{fill:"none",viewBox:"0 0 17 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M7.82994 1.40913C7.88746 1.35161 7.95376 1.30821 8.02453 1.27893C8.09527 1.24959 8.17285 1.2334 8.2542 1.2334C8.33555 1.2334 8.41313 1.24959 8.48387 1.27893C8.55464 1.30821 8.62094 1.35161 8.67846 1.40913L10.6785 3.40913C10.9128 3.64345 10.9128 4.02335 10.6785 4.25766C10.4441 4.49198 10.0642 4.49198 9.82994 4.25766L8.8542 3.28193V5.8334C8.8542 6.16477 8.58557 6.4334 8.2542 6.4334C7.92283 6.4334 7.6542 6.16477 7.6542 5.8334V3.28193L6.67846 4.25766C6.44415 4.49198 6.06425 4.49198 5.82994 4.25766C5.59562 4.02335 5.59562 3.64345 5.82994 3.40913L7.82994 1.40913Z"}},{tag:"path",attrs:{fill:"currentColor",d:"M1.50439 9C1.50439 8.11634 2.22074 7.4 3.10439 7.4H13.4044C14.288 7.4 15.0044 8.11634 15.0044 9 15.0044 9.88366 14.2881 10.6 13.4044 10.6H3.1044C2.22074 10.6 1.50439 9.88366 1.50439 9zM3.10439 8.6C2.88348 8.6 2.70439 8.77909 2.70439 9 2.70439 9.22091 2.88348 9.4 3.1044 9.4H13.4044C13.6253 9.4 13.8044 9.22091 13.8044 9 13.8044 8.77909 13.6253 8.6 13.4044 8.6H3.10439zM1.6543 13.1665C1.6543 12.2828 2.37064 11.5665 3.2543 11.5665H13.5543C14.438 11.5665 15.1543 12.2828 15.1543 13.1665 15.1543 14.0502 14.438 14.7665 13.5543 14.7665H3.2543C2.37064 14.7665 1.6543 14.0502 1.6543 13.1665zM3.2543 12.7665C3.03338 12.7665 2.8543 12.9456 2.8543 13.1665 2.8543 13.3874 3.03338 13.5665 3.2543 13.5665H13.5543C13.7752 13.5665 13.9543 13.3874 13.9543 13.1665 13.9543 12.9456 13.7752 12.7665 13.5543 12.7665H3.2543z",fillRule:"evenodd",clipRule:"evenodd"}}]},TopmostSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"topmost-single",ref,icon:element$1}))});TopmostSingle.displayName="TopmostSingle";var element={tag:"svg",attrs:{fill:"none",viewBox:"0 0 17 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M7.46855 2.83731C7.46855 2.61639 7.64764 2.4373 7.86855 2.4373H13.8603C14.0812 2.4373 14.2603 2.61639 14.2603 2.8373V9.5049C14.2603 9.72581 14.0812 9.90489 13.8603 9.90489H12.866C12.5346 9.90489 12.266 10.1735 12.266 10.5049C12.266 10.8363 12.5346 11.1049 12.866 11.1049H13.8603C14.7439 11.1049 15.4603 10.3886 15.4603 9.5049V2.8373C15.4603 1.95365 14.7439 1.2373 13.8603 1.2373H7.86855C6.9849 1.2373 6.26855 1.95365 6.26855 2.83731V3.48688C6.26855 3.81825 6.53718 4.08688 6.86855 4.08688C7.19993 4.08688 7.46855 3.81825 7.46855 3.48688V2.83731Z"}},{tag:"path",attrs:{fill:"currentColor",d:"M3.19888 5.56299C2.31522 5.56299 1.59888 6.27933 1.59888 7.16299V13.163C1.59888 14.0466 2.31522 14.763 3.19888 14.763H9.19888C10.0825 14.763 10.7989 14.0466 10.7989 13.163V7.16299C10.7989 6.27933 10.0825 5.56299 9.19888 5.56299H3.19888ZM2.79888 7.16299C2.79888 6.94207 2.97796 6.76299 3.19888 6.76299H9.19888C9.41979 6.76299 9.59888 6.94207 9.59888 7.16299V13.163C9.59888 13.3839 9.41979 13.563 9.19888 13.563H3.19888C2.97796 13.563 2.79888 13.3839 2.79888 13.163V7.16299Z",fillRule:"evenodd",clipRule:"evenodd"}}]},UngroupSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"ungroup-single",ref,icon:element}))});UngroupSingle.displayName="UngroupSingle";function r(e){var t,f,n="";if(typeof e=="string"\|\|typeof e=="number")n+=e;else if(typeof e=="object")if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f)}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}__name(r,"r");function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}__name(clsx,"clsx");const imageCommonPanel="univer-image-common-panel",imageCommonPanelGrid="univer-image-common-panel-grid",imageCommonPanelBorder="univer-image-common-panel-border",imageCommonPanelTitle="univer-image-common-panel-title",imageCommonPanelSubtitle="univer-image-common-panel-subtitle",imageCommonPanelRow="univer-image-common-panel-row",imageCommonPanelRowVertical="univer-image-common-panel-row-vertical",imageCommonPanelColumn="univer-image-common-panel-column",imageCommonPanelColumnCenter="univer-image-common-panel-column-center",imageCommonPanelInline="univer-image-common-panel-inline",imageCommonPanelSpan2="univer-image-common-panel-span2",imageCommonPanelSpan3="univer-image-common-panel-span3",imageCommonPanelInput="univer-image-common-panel-input",styles$1={imageCommonPanel,imageCommonPanelGrid,imageCommonPanelBorder,imageCommonPanelTitle,imageCommonPanelSubtitle,imageCommonPanelRow,imageCommonPanelRowVertical,imageCommonPanelColumn,imageCommonPanelColumnCenter,imageCommonPanelInline,imageCommonPanelSpan2,imageCommonPanelSpan3,imageCommonPanelInput},DrawingArrange=__name(props=>{const{arrangeShow,drawings:focusDrawings}=props,localeService=core.useDependency(core.LocaleService),drawingManagerService=core.useDependency(drawing.IDrawingManagerService),gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay"),[drawings,setDrawings]=React.useState(focusDrawings);React.useEffect(()=>{const focusDispose=drawingManagerService.focus$.subscribe(drawings2=>{setDrawings(drawings2)});return()=>{focusDispose.unsubscribe()}},[]);const onArrangeBtnClick=__name(arrangeType=>{const unitId=drawings[0].unitId,subUnitId=drawings[0].subUnitId,drawingIds=drawings.map(drawing2=>drawing2.drawingId);drawingManagerService.featurePluginOrderUpdateNotification({unitId,subUnitId,drawingIds,arrangeType})},"onArrangeBtnClick");return React.createElement("div",{className:styles$1.imageCommonPanelGrid,style:{display:gridDisplay(arrangeShow)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.arrange.title")))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onArrangeBtnClick(drawing.ArrangeTypeEnum.forward)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(MoveUpSingle,null),localeService.t("image-panel.arrange.forward")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onArrangeBtnClick(drawing.ArrangeTypeEnum.backward)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(MoveDownSingle,null),localeService.t("image-panel.arrange.backward"))))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onArrangeBtnClick(drawing.ArrangeTypeEnum.front)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(TopmostSingle,null),localeService.t("image-panel.arrange.front")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onArrangeBtnClick(drawing.ArrangeTypeEnum.back)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(BottomSingle,null),localeService.t("image-panel.arrange.back"))))))},"DrawingArrange"),MIN_DRAWING_WIDTH_LIMIT=20,MIN_DRAWING_HEIGHT_LIMIT=20,RANGE_DRAWING_ROTATION_LIMIT=[-3600,3600],INPUT_DEBOUNCE_TIME=300,DrawingTransform=__name(props=>{var _a7;const localeService=core.useDependency(core.LocaleService),drawingManagerService=core.useDependency(drawing.IDrawingManagerService),renderManagerService=core.useDependency(engineRender.IRenderManagerService),{drawings,transformShow}=props,drawingParam=drawings[0];if(drawingParam==null)return;const transform=drawingParam.transform;if(transform==null)return;const{unitId,subUnitId,drawingId,drawingType}=drawingParam,renderObject=renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return;const topScene=(_a7=scene.getEngine())==null?void 0:_a7.activeScene;if(topScene==null)return;const transformer=scene.getTransformerByCreate(),{width:originWidth=0,height:originHeight=0,left:originX=0,top:originY=0,angle:originRotation=0}=transform,[width,setWidth]=React.useState(originWidth),[height,setHeight]=React.useState(originHeight),[xPosition,setXPosition]=React.useState(originX),[yPosition,setYPosition]=React.useState(originY),[rotation,setRotation]=React.useState(originRotation),[lockRatio,setLockRatio]=React.useState(transformer.keepRatio),checkMoveBoundary=__name((left,top,width2,height2)=>{const{width:topSceneWidth,height:topSceneHeight}=topScene,{ancestorLeft,ancestorTop}=scene;let limitLeft=left,limitTop=top,limitWidth=width2,limitHeight=height2;return left+ancestorLeft<0&&(limitLeft=-ancestorLeft),top+ancestorTop<0&&(limitTop=-ancestorTop),limitWidth=topSceneWidth-limitLeft-ancestorLeft,limitWidth<MIN_DRAWING_WIDTH_LIMIT&&(limitWidth=MIN_DRAWING_WIDTH_LIMIT),limitHeight=topSceneHeight-limitTop-ancestorTop,limitHeight<MIN_DRAWING_WIDTH_LIMIT&&(limitHeight=MIN_DRAWING_WIDTH_LIMIT),left+limitWidth+ancestorLeft>topSceneWidth&&(limitLeft=topSceneWidth-width2-ancestorLeft),top+limitHeight+ancestorTop>topSceneHeight&&(limitTop=topSceneHeight-height2-ancestorTop),{limitLeft,limitTop,limitWidth,limitHeight}},"checkMoveBoundary"),changeObs=__name(state=>{const{objects}=state,params=getUpdateParams(objects,drawingManagerService);if(params.length!==1)return;const drawingParam2=params[0];if(drawingParam2==null)return;const{transform:transform2}=drawingParam2;if(transform2==null)return;const{width:originWidth2,height:originHeight2,left:originX2,top:originY2,angle:originRotation2}=transform2;originWidth2!=null&&setWidth(originWidth2),originHeight2!=null&&setHeight(originHeight2),originX2!=null&&setXPosition(originX2),originY2!=null&&setYPosition(originY2),originRotation2!=null&&setRotation(originRotation2)},"changeObs");React.useEffect(()=>{const subscriptions=[transformer.changeStart$.subscribe(state=>{changeObs(state)}),transformer.changing$.subscribe(state=>{changeObs(state)}),transformer.changeEnd$.subscribe(state=>{changeObs(state)}),drawingManagerService.focus$.subscribe(drawings2=>{if(drawings2.length!==1)return;const drawingParam2=drawingManagerService.getDrawingByParam(drawings2[0]);if(drawingParam2==null)return;const transform2=drawingParam2.transform;if(transform2==null)return;const{width:originWidth2,height:originHeight2,left:originX2,top:originY2,angle:originRotation2}=transform2;originWidth2!=null&&setWidth(originWidth2),originHeight2!=null&&setHeight(originHeight2),originX2!=null&&setXPosition(originX2),originY2!=null&&setYPosition(originY2),originRotation2!=null&&setRotation(originRotation2)})];return()=>{subscriptions.forEach(sub=>sub.unsubscribe())}},[]);const handleWidthChange=core.debounce(val=>{if(val==null)return;val=Math.max(val,MIN_DRAWING_WIDTH_LIMIT);const{limitWidth,limitHeight}=checkMoveBoundary(xPosition,yPosition,val,height);val=Math.min(val,limitWidth);const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{width:val}};if(lockRatio){let heightFix=val/widthheight;if(heightFix=Math.max(heightFix,MIN_DRAWING_HEIGHT_LIMIT),heightFix>limitHeight)return;setHeight(heightFix),updateParam.transform.height=heightFix}setWidth(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},INPUT_DEBOUNCE_TIME),handleHeightChange=core.debounce(val=>{if(val==null)return;val=Math.max(val,MIN_DRAWING_WIDTH_LIMIT);const{limitHeight,limitWidth}=checkMoveBoundary(xPosition,yPosition,width,val);val=Math.min(val,limitHeight);const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{height:val}};if(lockRatio){let widthFix=val/heightwidth;if(widthFix=Math.max(widthFix,MIN_DRAWING_WIDTH_LIMIT),widthFix>limitWidth)return;setWidth(widthFix),updateParam.transform.width=widthFix}setHeight(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},INPUT_DEBOUNCE_TIME),handleXChange=core.debounce(val=>{if(val==null)return;const{limitLeft}=checkMoveBoundary(val,yPosition,width,height);val=limitLeft;const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{left:val}};setXPosition(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},INPUT_DEBOUNCE_TIME),handleYChange=core.debounce(val=>{if(val==null)return;const{limitTop}=checkMoveBoundary(xPosition,val,width,height);val=limitTop;const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{top:val}};setYPosition(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},INPUT_DEBOUNCE_TIME),handleRotationChange=__name(val=>{if(val==null)return;const[min,max]=RANGE_DRAWING_ROTATION_LIMIT;val<min&&(val=min),val>max&&(val=max);const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{angle:val}};setRotation(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},"handleRotationChange"),handleLockRatioChange=__name(val=>{setLockRatio(val),transformer.keepRatio=val},"handleLockRatioChange"),gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay");return React.createElement("div",{className:clsx(styles$1.imageCommonPanelGrid,styles$1.imageCommonPanelBorder),style:{display:gridDisplay(transformShow)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.transform.title")))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.width"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:width,onChange:__name(val=>{handleWidthChange(val)},"onChange"),className:styles$1.imageCommonPanelInput}))))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.height"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:height,onChange:__name(val=>{handleHeightChange(val)},"onChange"),className:styles$1.imageCommonPanelInput}))))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.lock"))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelRow,styles$1.imageCommonPanelRowVertical)},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.Checkbox,{checked:lockRatio,onChange:handleLockRatioChange})))))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.x"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:xPosition,onChange:__name(val=>{handleXChange(val)},"onChange"),className:styles$1.imageCommonPanelInput}))))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.y"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:yPosition,onChange:__name(val=>{handleYChange(val)},"onChange"),className:styles$1.imageCommonPanelInput}))))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.rotate"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:rotation,onChange:handleRotationChange,className:styles$1.imageCommonPanelInput})))))))},"DrawingTransform");var AlignType=(AlignType2=>(AlignType2.default="0",AlignType2.left="1",AlignType2.center="2",AlignType2.right="3",AlignType2.top="4",AlignType2.middle="5",AlignType2.bottom="6",AlignType2.horizon="7",AlignType2.vertical="8",AlignType2))(AlignType\|\|{});const SetDrawingAlignOperation={id:"sheet.operation.set-image-align",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")},DrawingAlign=__name(props=>{const commandService=core.useDependency(core.ICommandService),localeService=core.useDependency(core.LocaleService),{alignShow}=props,[alignValue,setAlignValue]=React.useState(AlignType.default),alignOptions=[{label:localeService.t("image-panel.align.default"),value:AlignType.default},{options:[{label:localeService.t("image-panel.align.left"),value:AlignType.left},{label:localeService.t("image-panel.align.center"),value:AlignType.center},{label:localeService.t("image-panel.align.right"),value:AlignType.right}]},{options:[{label:localeService.t("image-panel.align.top"),value:AlignType.top},{label:localeService.t("image-panel.align.middle"),value:AlignType.middle},{label:localeService.t("image-panel.align.bottom"),value:AlignType.bottom}]},{options:[{label:localeService.t("image-panel.align.horizon"),value:AlignType.horizon},{label:localeService.t("image-panel.align.vertical"),value:AlignType.vertical}]}];function handleAlignChange(value){setAlignValue(value),commandService.executeCommand(SetDrawingAlignOperation.id,{alignType:value})}__name(handleAlignChange,"handleAlignChange");const gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay");return React.createElement("div",{className:clsx(styles$1.imageCommonPanelGrid,styles$1.imageCommonPanelBorder),style:{display:gridDisplay(alignShow)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.align.title")))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn)},React.createElement(design.Select,{value:alignValue,options:alignOptions,onChange:handleAlignChange}))))},"DrawingAlign"),OpenImageCropOperation={id:"sheet.operation.open-image-crop",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")},CloseImageCropOperation={id:"sheet.operation.close-image-crop",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")};var CropType=(CropType2=>(CropType2.FREE="0",CropType2.R1_1="1",CropType2.R16_9="2",CropType2.R9_16="3",CropType2.R5_4="4",CropType2.R4_5="5",CropType2.R4_3="6",CropType2.R3_4="7",CropType2.R3_2="8",CropType2.R2_3="9",CropType2))(CropType\|\|{});const AutoImageCropOperation={id:"sheet.operation.Auto-image-crop",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")},ImageCropper=__name(props=>{const commandService=core.useDependency(core.ICommandService),localeService=core.useDependency(core.LocaleService),{drawings,cropperShow}=props;if(drawings[0]==null)return;const[cropValue,setCropValue]=React.useState(CropType.FREE),cropStateRef=React.useRef(!1),cropOptions=[{label:localeService.t("image-panel.crop.mode"),value:CropType.FREE},{label:"1:1",value:CropType.R1_1},{label:"16:9",value:CropType.R16_9},{label:"9:16",value:CropType.R9_16},{label:"5:4",value:CropType.R5_4},{label:"4:5",value:CropType.R4_5},{label:"4:3",value:CropType.R4_3},{label:"3:4",value:CropType.R3_4},{label:"3:2",value:CropType.R3_2},{label:"2:3",value:CropType.R2_3}];React.useEffect(()=>{const onChangeStartObserver=commandService.onCommandExecuted(command=>{if(command.id===CloseImageCropOperation.id){const params=command.params;params!=null&&params.isAuto\|\|(cropStateRef.current=!1)}});return()=>{onChangeStartObserver==null\|\|onChangeStartObserver.dispose()}},[]);function handleCropChange(value){setCropValue(value),cropStateRef.current&&commandService.executeCommand(AutoImageCropOperation.id,{cropType:value})}__name(handleCropChange,"handleCropChange");const gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay"),onCropperBtnClick=__name(val=>{commandService.executeCommand(AutoImageCropOperation.id,{cropType:val}),cropStateRef.current=!0},"onCropperBtnClick");return React.createElement("div",{className:clsx(styles$1.imageCommonPanelGrid,styles$1.imageCommonPanelBorder),style:{display:gridDisplay(cropperShow)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.crop.title")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelRow,styles$1.imageCommonPanelRowVertical)},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onCropperBtnClick(cropValue)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(CreateCopySingle,null),localeService.t("image-panel.crop.start")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Select,{value:cropValue,options:cropOptions,onChange:handleCropChange}))))},"ImageCropper"),DrawingGroup=__name(props=>{const localeService=core.useDependency(core.LocaleService),renderManagerService=core.useDependency(engineRender.IRenderManagerService),drawingManagerService=core.useDependency(drawing.IDrawingManagerService),{hasGroup,drawings}=props,[groupShow,setGroupShow]=React.useState(!1),[groupBtnShow,setGroupBtnShow]=React.useState(!0),[ungroupBtnShow,setUngroupBtnShow]=React.useState(!0),gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay"),onGroupBtnClick=__name(()=>{const focusDrawings=drawingManagerService.getFocusDrawings(),{unitId,subUnitId}=focusDrawings[0],groupId=core.Tools.generateRandomId(10),groupTransform=engineRender.getGroupState(0,0,focusDrawings.map(o=>o.transform\|\|{})),groupParam={unitId,subUnitId,drawingId:groupId,drawingType:drawing.DrawingTypeEnum.DRAWING_GROUP,transform:groupTransform},children=focusDrawings.map(drawing2=>{const transform=drawing2.transform\|\|{left:0,top:0},{unitId:unitId2,subUnitId:subUnitId2,drawingId}=drawing2;return{unitId:unitId2,subUnitId:subUnitId2,drawingId,transform:{...transform,left:transform.left-groupTransform.left,top:transform.top-groupTransform.top},groupId}});drawingManagerService.featurePluginGroupUpdateNotification([{parent:groupParam,children}])},"onGroupBtnClick"),ungroup=__name(param=>{if(param.drawingType!==drawing.DrawingTypeEnum.DRAWING_GROUP)return;const{unitId,subUnitId,drawingId,transform:groupTransform={width:0,height:0}}=param;if(groupTransform==null)return;const objects=drawingManagerService.getDrawingsByGroup({unitId,subUnitId,drawingId});if(objects.length===0)return;const children=objects.map(object=>{const{transform}=object,{unitId:unitId2,subUnitId:subUnitId2,drawingId:drawingId2}=object,newTransform=engineRender.transformObjectOutOfGroup(transform\|\|{},groupTransform,groupTransform.width\|\|0,groupTransform.height\|\|0);return{unitId:unitId2,subUnitId:subUnitId2,drawingId:drawingId2,transform:{...transform,...newTransform},groupId:void 0}});return{parent:param,children}},"ungroup"),onUngroupBtnClick=__name(()=>{const params=drawingManagerService.getFocusDrawings().map(drawing2=>ungroup(drawing2)).filter(o=>o!=null);params.length!==0&&drawingManagerService.featurePluginUngroupUpdateNotification(params)},"onUngroupBtnClick");return React.useEffect(()=>{const drawingParam=drawings[0];if(drawingParam==null)return;const{unitId}=drawingParam,renderObject=renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return;const transformer=scene.getTransformerByCreate(),onClearControlObserver=transformer.clearControl$.subscribe(changeSelf=>{changeSelf===!0&&setGroupShow(!1)}),onChangeStartObserver=transformer.changeStart$.subscribe(state=>{const{objects}=state,params=getUpdateParams(objects,drawingManagerService),groupParams=params.filter(o=>(o==null?void 0:o.drawingType)===drawing.DrawingTypeEnum.DRAWING_GROUP);let groupBtnShow2=!1,ungroupBtnShow2=!1;params.length>1&&(groupBtnShow2=!0),groupParams.length>0&&(ungroupBtnShow2=!0),setGroupShow(groupBtnShow2\|\|ungroupBtnShow2),setGroupBtnShow(groupBtnShow2),setUngroupBtnShow(ungroupBtnShow2)});return()=>{onChangeStartObserver.unsubscribe(),onClearControlObserver.unsubscribe()}},[]),React.createElement("div",{className:clsx(styles$1.imageCommonPanelGrid,styles$1.imageCommonPanelBorder),style:{display:gridDisplay(hasGroup===!0?groupShow:!1)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.group.title")))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2,styles$1.imageCommonPanelColumnCenter)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onGroupBtnClick()},"onClick"),style:{display:gridDisplay(groupBtnShow)}},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(GroupSingle,null),localeService.t("image-panel.group.group")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2,styles$1.imageCommonPanelColumnCenter)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onUngroupBtnClick()},"onClick"),style:{display:gridDisplay(ungroupBtnShow)}},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(UngroupSingle,null),localeService.t("image-panel.group.unGroup"))))))},"DrawingGroup"),DrawingCommonPanel=__name(props=>{const drawingManagerService=core.useDependency(drawing.IDrawingManagerService),renderManagerService=core.useDependency(engineRender.IRenderManagerService),localeService=core.useDependency(core.LocaleService),{drawings,hasArrange=!0,hasTransform=!0,hasAlign=!0,hasCropper=!0,hasGroup=!0}=props,drawingParam=drawings[0];if(drawingParam==null)return;const{unitId}=drawingParam,renderObject=renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return;const transformer=scene.getTransformerByCreate(),[arrangeShow,setArrangeShow]=React.useState(!0),[transformShow,setTransformShow]=React.useState(!0),[alignShow,setAlignShow]=React.useState(!1),[cropperShow,setCropperShow]=React.useState(!0),[nullShow,setNullShow]=React.useState(!1);return React.useEffect(()=>{const clearControlSub=transformer.clearControl$.subscribe(changeSelf=>{changeSelf===!0&&(setArrangeShow(!1),setTransformShow(!1),setAlignShow(!1),setCropperShow(!1),setNullShow(!0))}),changeStartSub=transformer.changeStart$.subscribe(state=>{const{objects}=state,params=getUpdateParams(objects,drawingManagerService);params.length===0?(setArrangeShow(!1),setTransformShow(!1),setAlignShow(!1),setCropperShow(!1),setNullShow(!0)):params.length===1?(setArrangeShow(!0),setTransformShow(!0),setAlignShow(!1),setCropperShow(!0),setNullShow(!1)):(setArrangeShow(!0),setTransformShow(!1),setAlignShow(!0),setCropperShow(!1),setNullShow(!1))}),focusSub=drawingManagerService.focus$.subscribe(drawings2=>{drawings2.length===0?(setArrangeShow(!1),setTransformShow(!1),setAlignShow(!1),setCropperShow(!1),setNullShow(!0)):drawings2.length===1?(setArrangeShow(!0),setTransformShow(!0),setAlignShow(!1),setCropperShow(!0),setNullShow(!1)):(setArrangeShow(!0),setTransformShow(!1),setAlignShow(!0),setCropperShow(!1),setNullShow(!1))});return()=>{changeStartSub.unsubscribe(),clearControlSub.unsubscribe(),focusSub.unsubscribe()}},[]),React.createElement(React.Fragment,null,React.createElement("div",{style:{display:nullShow===!0?"block":"none",height:"100%"}},React.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%",top:"50%",marginTop:"-100px"}},React.createElement("span",null,localeService.t("image-panel.null")))),React.createElement(DrawingArrange,{arrangeShow:hasArrange===!0?arrangeShow:!1,drawings}),React.createElement(DrawingTransform,{transformShow:hasTransform===!0?transformShow:!1,drawings}),React.createElement(DrawingAlign,{alignShow:hasAlign===!0?alignShow:!1,drawings}),React.createElement(ImageCropper,{cropperShow:hasCropper===!0?cropperShow:!1,drawings}),React.createElement(DrawingGroup,{hasGroup,drawings}))},"DrawingCommonPanel"),imagePopupMenu="univer-image-popup-menu",imagePopupMenuItem="univer-image-popup-menu-item",imagePopupMenuItemIcon="univer-image-popup-menu-item-icon",imagePopupMenuItemTitle="univer-image-popup-menu-item-title",imagePopupMenuItemHide="univer-image-popup-menu-item-hide",btnContainer="univer-btn-container",btnContainerExpand="univer-btn-container-expand",styles={imagePopupMenu,imagePopupMenuItem,imagePopupMenuItemIcon,imagePopupMenuItemTitle,imagePopupMenuItemHide,btnContainer,btnContainerExpand},ImagePopupMenu=__name(props=>{var _a7,_b;const menuItems=(_b=(_a7=props.popup)==null?void 0:_a7.extraProps)==null?void 0:_b.menuItems;if(!menuItems)return null;const commandService=core.useDependency(core.ICommandService),localeService=core.useDependency(core.LocaleService),[visible,setVisible]=React.useState(!1),[isHovered,setHovered]=React.useState(!1),handleMouseEnter=__name(()=>{setHovered(!0)},"handleMouseEnter"),handleMouseLeave=__name(()=>{setHovered(!1)},"handleMouseLeave"),onVisibleChange=__name(visible2=>{setVisible(visible2)},"onVisibleChange"),handleClick=__name(item=>{commandService.executeCommand(item.commandId,item.commandParams),setVisible(!1)},"handleClick"),showMore=visible\|\|isHovered,availableMenu=menuItems.filter(item=>!item.disable);return React.createElement("div",{onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave},React.createElement(design.Dropdown,{placement:"bottomLeft",trigger:["click"],overlay:React.createElement("ul",{className:styles.imagePopupMenu},availableMenu.map(item=>React.createElement("li",{key:item.index,onClick:__name(()=>handleClick(item),"onClick"),className:styles.imagePopupMenuItem},React.createElement("span",{className:styles.imagePopupMenuItemTitle},localeService.t(item.label))))),visible,onVisibleChange},React.createElement("div",{className:clsx(styles.btnContainer,{[styles.btnContainerExpand]:visible})},React.createElement(Autofill,{style:{color:"#35322B"},extend:{colorChannel1:"rgb(var(--green-700, #409f11))"}}),showMore&&React.createElement(MoreDownSingle,{style:{color:"#CCCCCC",fontSize:"8px",marginLeft:"8px"}}))))},"ImagePopupMenu"),COMPONENT_IMAGE_POPUP_MENU="COMPONENT_IMAGE_POPUP_MENU",PLUGIN_CONFIG_KEY="drawing-ui.config",defaultPluginConfig={},ImageResetSizeOperation={id:"sheet.operation.image-reset-size",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")},COMPONENT_IMAGE_VIEWER="COMPONENT_IMAGE_VIEWER",ImageViewer=__name(props=>{const{src}=props;return src?React.createElement("div",null,React.createElement("img",{src,alt:"Univer Image Viewer",style:{width:"100%",height:"100%",position:"relative"}})):null},"ImageViewer");var __defProp$4=Object.defineProperty,__getOwnPropDesc$4=Object.getOwnPropertyDescriptor,__decorateClass$4=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$4(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$4(target,key,result),result},"__decorateClass$4"),__decorateParam$4=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$4"),_a2;let DrawingUIController=(_a2=class extends core.Disposable{constructor(_componentManager,_commandService){super(),this._componentManager=_componentManager,this._commandService=_commandService,this._init()}_initCustomComponents(){const componentManager=this._componentManager;this.disposeWithMe(componentManager.register(COMPONENT_IMAGE_POPUP_MENU,ImagePopupMenu)),this.disposeWithMe(componentManager.register(COMPONENT_IMAGE_VIEWER,ImageViewer))}_initCommands(){[OpenImageCropOperation,CloseImageCropOperation,ImageResetSizeOperation,SetDrawingAlignOperation,AutoImageCropOperation].forEach(command=>this.disposeWithMe(this._commandService.registerCommand(command)))}_init(){this._initCommands(),this._initCustomComponents()}},__name(_a2,"DrawingUIController"),_a2);DrawingUIController=__decorateClass$4([__decorateParam$4(0,core.Inject(ui.ComponentManager)),__decorateParam$4(1,core.ICommandService)],DrawingUIController);var __defProp$3=Object.defineProperty,__getOwnPropDesc$3=Object.getOwnPropertyDescriptor,__decorateClass$3=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$3(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$3(target,key,result),result},"__decorateClass$3"),__decorateParam$3=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$3"),_a3;let DrawingUpdateController=(_a3=class extends core.Disposable{constructor(_currentUniverService,_commandService,_renderManagerService,_drawingManagerService){super();__publicField(this,"_sceneListenerOnDrawingMap",new WeakSet);this._currentUniverService=_currentUniverService,this._commandService=_commandService,this._renderManagerService=_renderManagerService,this._drawingManagerService=_drawingManagerService,this._initialize()}dispose(){super.dispose()}_initialize(){this._recoveryImages(),this._drawingAddListener(),this._drawingRemoveListener(),this._drawingUpdateListener(),this._commandExecutedListener(),this._drawingArrangeListener(),this._drawingGroupListener(),this._drawingRefreshListener(),this._drawingVisibleListener()}_recoveryImages(){const drawingList=this._drawingManagerService.drawingManagerData,info=getCurrentUnitInfo(this._currentUniverService);if(info==null)return;const{unitId:currentUnitId,subUnitId:currentSubUnitId}=info;Object.keys(drawingList).forEach(unitId=>{Object.keys(drawingList[unitId]).forEach(subUnitId=>{const drawingMap=drawingList[unitId][subUnitId].data;drawingMap==null\|\|unitId!==currentUnitId\|\|subUnitId!==currentSubUnitId\|\|Object.keys(drawingMap).forEach(drawingId=>{drawingMap[drawingId]&&this._insertDrawing([{unitId,subUnitId,drawingId}])})})})}_commandExecutedListener(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id===SetDrawingAlignOperation.id){const params=command.params;if(params==null)return;this._drawingAlign(params)}}))}_drawingGroupListener(){this.disposeWithMe(this._drawingManagerService.group$.subscribe(params=>{this._groupDrawings(params)})),this.disposeWithMe(this._drawingManagerService.ungroup$.subscribe(params=>{this._ungroupDrawings(params)}))}_getSceneAndTransformerByDrawingSearch(unitId){if(unitId==null)return;const renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return null;const transformer=scene.getTransformerByCreate();return{scene,transformer}}_groupDrawings(drawings){drawings.forEach(drawing2=>{this._groupDrawing(drawing2)})}_groupDrawing(params){const{parent,children}=params,{unitId,subUnitId,drawingId}=parent,renderObject=this._getSceneAndTransformerByDrawingSearch(parent.unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;this._commandService.syncExecuteCommand(CloseImageCropOperation.id);const objects=[];if(children.forEach(drawing$1=>{const drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch(drawing$1),object=scene.getObjectIncludeInGroup(drawingShapeKey);if(object==null\|\|objects.includes(object))return;objects.push(object);const{transform}=drawing$1;transform!=null&&(object.classType===engineRender.RENDER_CLASS_TYPE.GROUP?object.transformByState({left:transform.left,top:transform.top}):object.transformByState(transform))}),objects.length===0)return;const groupKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),group=new engineRender.Group(groupKey);scene.addObject(group,engineRender.DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(group),group.addObjects(...objects),parent.transform&&group.transformByState({left:parent.transform.left,top:parent.transform.top}),transformer.clearSelectedObjects(),transformer.setSelectedControl(group)}_ungroupDrawings(drawings){drawings.forEach(drawing2=>{this._ungroupDrawing(drawing2)})}_ungroupDrawing(drawing$1){const{parent,children}=drawing$1,renderObject=this._getSceneAndTransformerByDrawingSearch(parent.unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;children.forEach(drawing2=>{const drawingKey=drawing.getDrawingShapeKeyByDrawingSearch(drawing2),object=scene.getObjectIncludeInGroup(drawingKey);if(object==null)return!0;if(object==null)return;const{transform}=drawing2;transform!=null&&(object.classType===engineRender.RENDER_CLASS_TYPE.GROUP?object.transformByState({left:transform.left,top:transform.top}):object.transformByState(transform))});const groupKey=drawing.getDrawingShapeKeyByDrawingSearch(parent),group=scene.getObject(groupKey),{width,height}=group;group.getObjects().forEach(object=>{group.removeSelfObjectAndTransform(object.oKey,width,height)}),group.dispose(),transformer.clearSelectedObjects()}_drawingAlign(params){const{alignType}=params,drawings=this._drawingManagerService.getFocusDrawings();if(alignType===AlignType.default)return;const drawingTransformCaches=[];let minLeft=Number.POSITIVE_INFINITY,minTop=Number.POSITIVE_INFINITY,maxRight=Number.NEGATIVE_INFINITY,maxBottom=Number.NEGATIVE_INFINITY,drawingCount=0;drawings.forEach(drawing2=>{const{unitId,subUnitId,drawingId,drawingType}=drawing2,drawingParam=this._drawingManagerService.getDrawingByParam({unitId,subUnitId,drawingId});if(drawingParam==null\|\|drawingParam.transform==null)return;drawingTransformCaches.push({unitId,subUnitId,drawingId,drawingType,transform:drawingParam.transform});const{left=0,top=0,width=0,height=0}=drawingParam.transform;minLeft=Math.min(minLeft,left),minTop=Math.min(minTop,top),maxRight=Math.max(maxRight,left+width),maxBottom=Math.max(maxBottom,top+height),drawingCount++}),drawingCount!==0&&(this._sortDrawingTransform(drawingTransformCaches,alignType),this._applyAlignType(drawingTransformCaches,alignType,minLeft,minTop,maxRight,maxBottom,drawingCount))}_applyAlignType(drawingTransformCaches,alignType,minLeft,minTop,maxRight,maxBottom,drawingCount){const averageHorizon=Math.round((maxRight-minLeft)/drawingCount10)/10,averageVertical=Math.round((maxBottom-minTop)/drawingCount10)/10,updateParams=[],renderObject=this._getSceneAndTransformerByDrawingSearch(drawingTransformCaches[0].unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;drawingTransformCaches.forEach((drawingTransformCache,index)=>{const{unitId,subUnitId,drawingId,transform,drawingType}=drawingTransformCache,{left=0,top=0,width=0,height=0}=transform;let newLeft=left,newTop=top;switch(alignType){case AlignType.left:newLeft=minLeft;break;case AlignType.center:newLeft=minLeft+(maxRight-minLeft)/2-width/2;break;case AlignType.right:newLeft=maxRight-width;break;case AlignType.top:newTop=minTop;break;case AlignType.middle:newTop=minTop+(maxBottom-minTop)/2-height/2;break;case AlignType.bottom:newTop=maxBottom-height;break;case AlignType.horizon:newLeft=minLeft+averageHorizonindex;break;case AlignType.vertical:newTop=minTop+averageVerticalindex;break}(newLeft!==left\|\|newTop!==top)&&updateParams.push({unitId,subUnitId,drawingId,drawingType,transform:{left:newLeft,top:newTop}})}),this._drawingManagerService.featurePluginUpdateNotification(updateParams),transformer.refreshControls().changeNotification()}_sortDrawingTransform(drawingTransformCaches,alignType){drawingTransformCaches.sort((a,b)=>{const aTransform=a.transform,bTransform=b.transform,{left:aLeft=0,top:aTop=0,width:aWidth=0,height:aHeight=0}=aTransform,{left:bLeft=0,top:bTop=0,width:bWidth=0,height:bHeight=0}=bTransform;switch(alignType){case AlignType.left:return aLeft-bLeft;case AlignType.center:return aLeft+aWidth/2-(bLeft+bWidth/2);case AlignType.right:return aLeft+aWidth-(bLeft+bWidth);case AlignType.top:return aTop-bTop;case AlignType.middle:return aTop+aHeight/2-(bTop+bHeight/2);case AlignType.bottom:return aTop+aHeight-(bTop+bHeight);case AlignType.horizon:return aLeft+aWidth/2-(bLeft+bWidth/2);case AlignType.vertical:return aTop+aHeight/2-(bTop+bHeight/2);default:return 0}})}_drawingArrangeListener(){this.disposeWithMe(this._drawingManagerService.order$.subscribe(params=>{this._drawingArrange(params)}))}_drawingArrange(params){const{unitId,subUnitId,drawingIds}=params,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject;drawingIds.forEach(drawingId=>{const oKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShapes=scene.fuzzyMathObjects(oKey,!0);if(drawingShapes==null\|\|drawingShapes.length===0)return;const index=this._drawingManagerService.getDrawingOrder(unitId,subUnitId).indexOf(drawingId);for(const shape of drawingShapes)shape.setProps({zIndex:index}),shape.makeDirty()})}_drawingAddListener(){this.disposeWithMe(this._drawingManagerService.add$.subscribe(params=>{this._insertDrawing(params)}))}_insertDrawing(params){const sceneList=[];params.forEach(param=>{const{unitId}=param;if(this._drawingManagerService.getDrawingByParam(param)==null)return;const renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject;sceneList.includes(scene)\|\|sceneList.push(scene)}),sceneList.forEach(scene=>{this._sceneListenerOnDrawingMap.has(scene)\|\|(this._addListenerOnDrawing(scene),this._sceneListenerOnDrawingMap.add(scene))})}_drawingRemoveListener(){this.disposeWithMe(this._drawingManagerService.remove$.subscribe(params=>{params.forEach(param=>{var _a7;const{unitId,subUnitId,drawingId}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject,drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShapes=scene.fuzzyMathObjects(drawingShapeKey,!0);if(drawingShapes.length>0){for(const drawingShape of drawingShapes)drawingShape.dispose();(_a7=scene.getTransformer())==null\|\|_a7.clearSelectedObjects()}})}))}_drawingUpdateListener(){this.disposeWithMe(this._drawingManagerService.update$.subscribe(params=>{params.forEach(param=>{const{unitId,subUnitId,drawingId}=param,drawingParam=this._drawingManagerService.getDrawingByParam(param);if(drawingParam==null)return;const{transform,drawingType}=drawingParam,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;if(transform==null)return!0;const{left=0,top=0,width=0,height=0,angle=0,flipX=!1,flipY=!1,skewX=0,skewY=0}=transform,drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShape=scene.getObject(drawingShapeKey);if(drawingShape==null)return!0;drawingShape.transformByState({left,top,width,height,angle,flipX,flipY,skewX,skewY})})}))}_drawingRefreshListener(){this.disposeWithMe(this._drawingManagerService.refreshTransform$.subscribe(params=>{params.forEach(param=>{const{unitId,subUnitId,drawingId}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const drawingParam=this._drawingManagerService.getDrawingByParam(param);if(drawingParam==null)return;const{transform}=drawingParam,{scene}=renderObject,drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShape=scene.getObject(drawingShapeKey);if(drawingShape==null\|\|transform==null)return!0;const{left=0,top=0,width=0,height=0,angle=0,flipX=!1,flipY=!1,skewX=0,skewY=0}=transform;drawingShape.transformByState({left,top,width,height,angle,flipX,flipY,skewX,skewY})})}))}_drawingVisibleListener(){this.disposeWithMe(this._drawingManagerService.visible$.subscribe(params=>{params.forEach(param=>{const{unitId,subUnitId,drawingId,visible}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject,drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShape=scene.getObject(drawingShapeKey);if(drawingShape==null)return!0;visible?drawingShape.show():drawingShape.hide()})}))}_filterUpdateParams(params,startTransforms){return params.filter((param,index)=>{if(param==null)return!1;const{transform}=param;return core.checkIfMove(transform,startTransforms==null?void 0:startTransforms[index])})}_addListenerOnDrawing(scene){const transformer=scene.getTransformerByCreate();let startTransforms=null;this.disposeWithMe(core.toDisposable(transformer.changeStart$.subscribe(state=>{const{objects}=state,objectArray=Array.from(objects.values()),drawings=[];startTransforms=objectArray.map(object=>{const{left,top,height,width,angle,oKey,isInGroup}=object,drawing2=this._drawingManagerService.getDrawingOKey(oKey);if(isInGroup\|\|object instanceof engineRender.Group){let group=object.ancestorGroup;if(group==null&&object instanceof engineRender.Group&&(group=object),group==null)return null;const groupDrawing=this._drawingManagerService.getDrawingOKey(group.oKey);if(groupDrawing){const{unitId,subUnitId,drawingId}=groupDrawing;drawings.push({unitId,subUnitId,drawingId});const{left:left2,top:top2,height:height2,width:width2,angle:angle2}=group;return{left:left2,top:top2,height:height2,width:width2,angle:angle2}}}else if(drawing2!=null){const{unitId,subUnitId,drawingId}=drawing2;return drawings.push({unitId,subUnitId,drawingId}),{left,top,height,width,angle}}return null}).filter(transform=>transform!=null),drawings.length>0?this._drawingManagerService.focusDrawing(drawings):this._drawingManagerService.focusDrawing(null)}))),this.disposeWithMe(core.toDisposable(transformer.changeEnd$.subscribe(state=>{const{objects}=state,params=this._filterUpdateParams(getUpdateParams(objects,this._drawingManagerService),startTransforms);params.length>0&&this._drawingManagerService.featurePluginUpdateNotification(params)})))}},__name(_a3,"DrawingUpdateController"),_a3);DrawingUpdateController=__decorateClass$3([__decorateParam$3(0,core.IUniverInstanceService),__decorateParam$3(1,core.ICommandService),__decorateParam$3(2,engineRender.IRenderManagerService),__decorateParam$3(3,drawing.IDrawingManagerService)],DrawingUpdateController);const _ImageCropperObject=class _ImageCropperObject extends engineRender.Shape{constructor(key,props){props==null&&(props={}),props.transformerConfig={keepRatio:!1,isCropper:!0,anchorFill:"rgb(0, 0, 0)",anchorStroke:"rgb(255, 255, 255)",anchorSize:24};super(key,props);__publicField(this,"_srcRect");__publicField(this,"_prstGeom");__publicField(this,"_applyTransform");__publicField(this,"_dragPadding",8);__publicField(this,"_cacheCanvas");props!=null&&props.srcRect&&(this._srcRect=props.srcRect),props!=null&&props.prstGeom&&(this._prstGeom=props.prstGeom),props!=null&&props.applyTransform&&(this._applyTransform=props.applyTransform),props!=null&&props.dragPadding&&(this._dragPadding=props.dragPadding),this._applyProps()}refreshSrcRect(value,transform){this._srcRect=value,this._applyTransform=transform,this._applyProps()}get srcRect(){return this._srcRect}dispose(){var _a7;super.dispose(),(_a7=this._cacheCanvas)==null\|\|_a7.dispose(),this._srcRect=null}isHit(coord){const oCoord=this.getInverseCoord(coord);return oCoord.x>=-this.strokeWidth/2&&oCoord.x<=this.width+this.strokeWidth/2&&oCoord.y>=-this.strokeWidth/2&&oCoord.y<=this.height+this.strokeWidth/2&&!this._inSurround(oCoord)}_inSurround(oCoord){const padding=this._dragPadding;return oCoord.x>=padding-this.strokeWidth/2&&oCoord.x<=this.width+this.strokeWidth/2-padding&&oCoord.y>=padding-this.strokeWidth/2&&oCoord.y<=this.height+this.strokeWidth/2-padding}render(mainCtx,bounds){return this.visible?(mainCtx.save(),this._draw(mainCtx),mainCtx.restore(),this.makeDirty(!1),this):(this.makeDirty(!1),this)}_draw(ctx){var _a7,_b;const engine=this.getScene().getEngine(),{width:engineWidth,height:engineHeight}=engine;this._initialCacheCanvas(),(_a7=this._cacheCanvas)==null\|\|_a7.clear();const cacheCtx=(_b=this._cacheCanvas)==null?void 0:_b.getContext();cacheCtx!=null&&(cacheCtx.save(),engineRender.Rect.drawWith(cacheCtx,{left:0,top:0,width:engineWidth,height:engineHeight,fill:"rgba(0, 0, 0, 0.5)"}),cacheCtx.setTransform(ctx.getTransform()),this._clipForApplyObject(cacheCtx),this._applyCache(ctx),cacheCtx.restore())}_clipForApplyObject(cacheCtx){let objectType=0;if(this._prstGeom!=null&&(objectType=1),cacheCtx.globalCompositeOperation="destination-out",cacheCtx.beginPath(),objectType===0){const m=this.transform.getMatrix();cacheCtx.transform(m[0],m[1],m[2],m[3],m[4],m[5]),cacheCtx.rect(0,0,this.width,this.height),cacheCtx.fill()}}_applyProps(){if(this._applyTransform==null)return;let cropLeft=0,cropTop=0,cropRight=0,cropBottom=0;const{left:applyLeft=0,top:applyTop=0,width:applyWidth=0,height:applyHeight=0,angle}=this._applyTransform;if(this._srcRect!=null){const{left:left2=0,top:top2=0,right=0,bottom=0}=this._srcRect;cropLeft=left2,cropTop=top2,cropRight=right,cropBottom=bottom}const left=applyLeft+cropLeft,top=applyTop+cropTop;this.transformByState({left,top,width:applyLeft+applyWidth-cropRight-left,height:applyTop+applyHeight-cropBottom-top,angle})}_applyCache(ctx){if(!ctx\|\|this._cacheCanvas==null)return;const cacheCtx=this._cacheCanvas.getContext();cacheCtx.save(),ctx.save(),ctx.setTransform(1,0,0,1,0,0),cacheCtx.setTransform(1,0,0,1,0,0),ctx.drawImage(this._cacheCanvas.getCanvasEle(),0,0),ctx.restore(),cacheCtx.restore()}_initialCacheCanvas(){if(this._cacheCanvas!=null)return;const scene=this.getScene();if(scene==null)return;this._cacheCanvas=new engineRender.Canvas;const engine=scene.getEngine();this._cacheCanvas.setSize(engine.width,engine.height),engine.onTransformChange$.subscribeEvent(()=>{var _a7;(_a7=this._cacheCanvas)==null\|\|_a7.setSize(engine.width,engine.height),this.makeDirty(!0)})}};__name(_ImageCropperObject,"ImageCropperObject");let ImageCropperObject=_ImageCropperObject;var __defProp$2=Object.defineProperty,__getOwnPropDesc$2=Object.getOwnPropertyDescriptor,__decorateClass$2=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$2(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$2(target,key,result),result},"__decorateClass$2"),__decorateParam$2=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$2"),_a4;let ImageCropperController=(_a4=class extends core.Disposable{constructor(_commandService,_drawingManagerService,_renderManagerService,_univerInstanceService,_messageService,_localeService){super();__publicField(this,"_sceneListenerOnImageMap",new WeakSet);this._commandService=_commandService,this._drawingManagerService=_drawingManagerService,this._renderManagerService=_renderManagerService,this._univerInstanceService=_univerInstanceService,this._messageService=_messageService,this._localeService=_localeService,this._init()}_init(){this._initOpenCrop(),this._initCloseCrop(),this._initAutoCrop()}_initAutoCrop(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id!==AutoImageCropOperation.id)return;const params=command.params;if(params==null)return;const{cropType}=params,drawingParams=this._drawingManagerService.getFocusDrawings();if(drawingParams.length!==1)return;const drawingParam=drawingParams[0],{unitId,subUnitId,drawingId}=drawingParam,renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return!0;this._searchCropObject(scene)!=null&&this._commandService.syncExecuteCommand(CloseImageCropOperation.id,{isAuto:!0});const imageShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),imageShape=scene.getObject(imageShapeKey);if(!(imageShape instanceof engineRender.Image)){this._messageService.show({type:design.MessageType.Error,content:this._localeService.t("image-cropper.error")});return}imageShape!=null&&(this._updateCropperObject(cropType,imageShape),this._commandService.executeCommand(OpenImageCropOperation.id,{unitId,subUnitId,drawingId}))}))}_calculateSrcRectByRatio(left,top,width,height,numerator,denominator){const srcRatio=width/height,ratio=numerator/denominator;let newWidth=width,newHeight=height;srcRatio>ratio?newWidth=heightratio:newHeight=width/ratio;const newLeft=(width-newWidth)/2,newTop=(height-newHeight)/2;return{left:engineRender.precisionTo(newLeft,1),top:engineRender.precisionTo(newTop,1),right:engineRender.precisionTo(width-(newLeft+newWidth),1),bottom:engineRender.precisionTo(height-(newTop+newHeight),1)}}_updateCropperObject(cropType,imageShape){const{left,top,width,height}=imageShape.calculateTransformWithSrcRect();let newSrcRect;switch(cropType){case CropType.R1_1:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,1,1);break;case CropType.R16_9:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,16,9);break;case CropType.R9_16:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,9,16);break;case CropType.R5_4:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,5,4);break;case CropType.R4_5:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,4,5);break;case CropType.R4_3:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,4,3);break;case CropType.R3_4:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,3,4);break;case CropType.R3_2:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,3,2);break;case CropType.R2_3:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,2,3);break;case CropType.FREE:}if(newSrcRect==null)return;imageShape.setSrcRect(newSrcRect);const{left:newLeft=0,top:newTop=0,bottom:newBottom=0,right:newRight=0}=newSrcRect;imageShape.transformByStateCloseCropper({left:left+newLeft,top:top+newTop,width:width-newRight-newLeft,height:height-newBottom-newTop})}_initOpenCrop(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id!==OpenImageCropOperation.id)return;const params=command.params;if(params==null)return;const{unitId,subUnitId,drawingId}=params,renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return!0;if(this._sceneListenerOnImageMap.has(scene)\|\|(this._addListenerOnImage(scene),this._sceneListenerOnImageMap.add(scene)),this._drawingManagerService.getDrawingByParam({unitId,subUnitId,drawingId})==null)return;const imageShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),imageShape=scene.getObject(imageShapeKey);if(imageShape==null)return;if(!(imageShape instanceof engineRender.Image)){this._messageService.show({type:design.MessageType.Error,content:this._localeService.t("image-cropper.error")});return}const transformer=scene.getTransformer();transformer==null\|\|transformer.clearControls();const imageCropperObject=new ImageCropperObject(`${imageShapeKey}-crop`,{srcRect:imageShape.srcRect,prstGeom:imageShape.prstGeom,applyTransform:imageShape.calculateTransformWithSrcRect()});scene.addObject(imageCropperObject,imageShape.getLayerIndex()+1).attachTransformerTo(imageCropperObject),transformer==null\|\|transformer.createControlForCopper(imageCropperObject),this._addHoverForImageCopper(imageCropperObject),imageShape.openRenderByCropper(),transformer==null\|\|transformer.refreshControls(),imageCropperObject.makeDirty(!0),this._drawingManagerService.focusDrawing([{unitId,subUnitId,drawingId}])}))}_searchCropObject(scene){const objects=scene.getAllObjectsByOrder();for(const object of objects)if(object instanceof ImageCropperObject)return object}_initCloseCrop(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id!==CloseImageCropOperation.id)return;const currentUnit=this._univerInstanceService.getFocusedUnit();if(currentUnit==null)return;const unitId=currentUnit.getUnitId(),renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return!0;const imageCropperObject=this._searchCropObject(scene);if(imageCropperObject==null)return;const imageShape=this._getApplyObjectByCropObject(imageCropperObject);if(imageShape==null)return;const transformer=scene.getTransformerByCreate();transformer.detachFrom(imageCropperObject),transformer.clearCopperControl();const srcRect=this._getSrcRectByTransformState(imageShape,imageCropperObject),drawingParam=this._drawingManagerService.getDrawingOKey(imageShape.oKey);if(drawingParam!=null){const{left,top,height,width}=imageCropperObject;this._drawingManagerService.featurePluginUpdateNotification([{...drawingParam,transform:{...drawingParam.transform,left,top,height,width},srcRect:srcRect.srcRectAngle}])}imageShape.setSrcRect({...srcRect.srcRectAngle}),imageShape.closeRenderByCropper(),imageShape.makeDirty(!0),imageCropperObject==null\|\|imageCropperObject.dispose()}));const sheetUnit=this._univerInstanceService.getCurrentTypeOfUnit$(core.UniverInstanceType.UNIVER_SHEET).pipe(rxjs.filter(workbook=>!!workbook),rxjs.switchMap(workbook=>workbook.activeSheet$));this.disposeWithMe(sheetUnit.subscribe(()=>{this._commandService.syncExecuteCommand(CloseImageCropOperation.id)}))}_getApplyObjectByCropObject(cropObject){const cropOKey=cropObject.oKey,applyOKey=cropOKey.slice(0,cropOKey.length-5),scene=cropObject.getScene();if(!scene)return null;const applyObject=scene.getObject(applyOKey);return applyObject==null?null:applyObject}_addListenerOnImage(scene){const transformer=scene.getTransformerByCreate();let startTransform=null;this.disposeWithMe(transformer.changeStart$.subscribe(state=>{const{objects}=state,cropObject=objects.values().next().value;if(cropObject==null\|\|!(cropObject instanceof ImageCropperObject))return;const{left,top,height,width,angle}=cropObject;startTransform={left,top,height,width,angle},transformer.clearCopperControl()})),this.disposeWithMe(transformer.changeEnd$.subscribe(state=>{const{objects}=state,cropObject=objects.values().next().value;if(cropObject==null\|\|!(cropObject instanceof ImageCropperObject))return;const{left,top,height,width,angle}=cropObject;if(!core.checkIfMove({left,top,height,width,angle},startTransform))return;const applyObject=this._getApplyObjectByCropObject(cropObject);if(applyObject==null)return;const srcRect=this._getSrcRectByTransformState(applyObject,cropObject);cropObject.refreshSrcRect(srcRect.srcRect,applyObject.getState()),transformer.createControlForCopper(cropObject)})),this._endCropListener(scene)}_addHoverForImageCopper(o){this.disposeWithMe(o.onPointerEnter$.subscribeEvent(()=>{o.cursor=engineRender.CURSOR_TYPE.MOVE})),this.disposeWithMe(o.onPointerLeave$.subscribeEvent(()=>{o.cursor=engineRender.CURSOR_TYPE.DEFAULT}))}_endCropListener(scene){const transformer=scene.getTransformerByCreate();this.disposeWithMe(transformer.clearControl$.subscribe(changeSelf=>{changeSelf===!0&&this._commandService.syncExecuteCommand(CloseImageCropOperation.id)}))}_getSrcRectByTransformState(applyObject,imageCropperObject){const{left,top,height,width,strokeWidth,angle:copperAngle}=imageCropperObject,{left:applyLeft,top:applyTop,width:applyWidth,height:applyHeight,angle:applyAngle,strokeWidth:applyStrokeWidth}=applyObject,newLeft=left-applyLeft,newTop=top-applyTop,srcRect={left:newLeft,top:newTop,right:applyWidth-newLeft-width,bottom:applyHeight-newTop-height},srcRectAngle={...srcRect};if(applyAngle!==0){const cx=left+width/2,cy=top+height/2,centerPoint=new engineRender.Vector2(cx,cy),newCx=applyWidth/2+applyLeft,newCy=applyHeight/2+applyTop,newCenterPoint=new engineRender.Vector2(newCx,newCy),vertexPoint=new engineRender.Vector2(applyLeft,applyTop);vertexPoint.rotateByPoint(engineRender.degToRad(applyAngle),newCenterPoint);const applyFinalPoint=vertexPoint.clone();applyFinalPoint.rotateByPoint(engineRender.degToRad(-applyAngle),centerPoint);const newAngleLeft=left-applyFinalPoint.x,newAngleTop=top-applyFinalPoint.y;srcRectAngle.left=newAngleLeft,srcRectAngle.top=newAngleTop,srcRectAngle.right=applyWidth-newAngleLeft-width,srcRectAngle.bottom=applyHeight-newAngleTop-height}return{srcRect,srcRectAngle}}},__name(_a4,"ImageCropperController"),_a4);ImageCropperController=__decorateClass$2([__decorateParam$2(0,core.ICommandService),__decorateParam$2(1,drawing.IDrawingManagerService),__decorateParam$2(2,engineRender.IRenderManagerService),__decorateParam$2(3,core.IUniverInstanceService),__decorateParam$2(4,ui.IMessageService),__decorateParam$2(5,core.Inject(core.LocaleService))],ImageCropperController);var __defProp$1=Object.defineProperty,__getOwnPropDesc$1=Object.getOwnPropertyDescriptor,__decorateClass$1=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$1(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$1(target,key,result),result},"__decorateClass$1"),__decorateParam$1=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$1");const IMAGE_VIEWER_DROPDOWN_PADDING=50;var _a5;let ImageUpdateController=(_a5=class extends core.Disposable{constructor(_commandService,_renderManagerService,_drawingManagerService,_dialogService,_imageIoService,_currentUniverService,_drawingRenderService){super(),this._commandService=_commandService,this._renderManagerService=_renderManagerService,this._drawingManagerService=_drawingManagerService,this._dialogService=_dialogService,this._imageIoService=_imageIoService,this._currentUniverService=_currentUniverService,this._drawingRenderService=_drawingRenderService,this._initialize()}dispose(){super.dispose()}_initialize(){this._drawingAddListener(),this._commandExecutedListener(),this._imageUpdateListener()}_commandExecutedListener(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id===ImageResetSizeOperation.id){const params=command.params;if(params==null)return;this._resetImageSize(params)}}))}_getSceneAndTransformerByDrawingSearch(unitId){if(unitId==null)return;const renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return null;const transformer=scene.getTransformerByCreate();return{scene,transformer}}_resetImageSize(params){const updateParams=[],sceneList=[];params.forEach(param=>{const{unitId,subUnitId,drawingId}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject,imageShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),imageShape=scene.getObject(imageShapeKey);if(imageShape==null)return!0;const imageData=this._drawingManagerService.getDrawingByParam(param);if(imageData==null)return!0;if(imageData.drawingType!==drawing.DrawingTypeEnum.DRAWING_IMAGE)return;imageShape.resetSize();const{width,height}=imageShape.getNativeSize();sceneList.includes(scene)===!1&&sceneList.push(scene),updateParams.push({...imageData,transform:{...imageData.transform,height,width,angle:0},srcRect:null,prstGeom:null})}),this._drawingManagerService.featurePluginUpdateNotification(updateParams),sceneList.forEach(scene=>{scene.getTransformerByCreate().refreshControls().changeNotification()}),this._drawingManagerService.focusDrawing(params)}_drawingAddListener(){this.disposeWithMe(this._drawingManagerService.add$.subscribe(params=>{this._insertImages(params)}))}_insertImages(params){params.forEach(async param=>{var _a7;const{unitId,subUnitId,drawingId}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId),currentSubUnitId=(_a7=getCurrentUnitInfo(this._currentUniverService,unitId))==null?void 0:_a7.subUnitId;if(renderObject==null\|\|currentSubUnitId!==subUnitId)return;const imageParam=this._drawingManagerService.getDrawingByParam(param);if(imageParam==null)return;const images=await this._drawingRenderService.renderImages(imageParam,renderObject.scene);if(!(images==null\|\|images.length===0))for(const image of images)this._addHoverForImage(image),this._addDialogForImage(image)})}_imageUpdateListener(){this.disposeWithMe(this._drawingManagerService.update$.subscribe(params=>{params.forEach(param=>{const{unitId,subUnitId,drawingId}=param,drawingParam=this._drawingManagerService.getDrawingByParam(param);if(drawingParam==null)return;const{transform,drawingType,srcRect,prstGeom,source,imageSourceType}=drawingParam;if(drawingType!==drawing.DrawingTypeEnum.DRAWING_IMAGE)return;const renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;if(transform==null)return!0;const drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),imageShape=scene.getObject(drawingShapeKey);if(imageShape==null)return!0;imageShape.setSrcRect(srcRect),imageShape.setPrstGeom(prstGeom)})}))}_addHoverForImage(o){this.disposeWithMe(core.toDisposable(o.onPointerEnter$.subscribeEvent(()=>{o.cursor=engineRender.CURSOR_TYPE.GRAB}))),this.disposeWithMe(core.toDisposable(o.onPointerLeave$.subscribeEvent(()=>{o.cursor=engineRender.CURSOR_TYPE.DEFAULT})))}_addDialogForImage(o){this.disposeWithMe(core.toDisposable(o.onDblclick$.subscribeEvent(()=>{var _a7;const dialogId=`${o.oKey}-viewer-dialog`,nativeSize=o.getNativeSize(),screenWidth=window.innerWidth-IMAGE_VIEWER_DROPDOWN_PADDING,screenHeight=window.innerHeight-IMAGE_VIEWER_DROPDOWN_PADDING,adjustSize=this._adjustImageSize(nativeSize.width,nativeSize.height,screenWidth,screenHeight),dialog=this._dialogService.open({width:adjustSize.width,id:dialogId,style:{margin:"0",top:"50%",left:"50%",transform:"translate(-50%, -50%)"},children:{label:{name:COMPONENT_IMAGE_VIEWER,props:{src:(_a7=o.getNative())==null?void 0:_a7.src,width:adjustSize.width,height:adjustSize.height}}},destroyOnClose:!0,draggable:!1,onClose:__name(()=>{this._dialogService.close(dialogId),dialog.dispose()},"onClose")})})))}_adjustImageSize(nativeWidth,nativeHeight,screenWidth,screenHeight){if(nativeWidth<=screenWidth&&nativeHeight<=screenHeight)return{width:nativeWidth,height:nativeHeight};const widthRatio=screenWidth/nativeWidth,heightRatio=screenHeight/nativeHeight,scale=Math.min(widthRatio,heightRatio);return{width:Math.floor(nativeWidthscale),height:Math.floor(nativeHeightscale)}}},__name(_a5,"ImageUpdateController"),_a5);ImageUpdateController=__decorateClass$1([__decorateParam$1(0,core.ICommandService),__decorateParam$1(1,engineRender.IRenderManagerService),__decorateParam$1(2,drawing.IDrawingManagerService),__decorateParam$1(3,ui.IDialogService),__decorateParam$1(4,drawing.IImageIoService),__decorateParam$1(5,core.IUniverInstanceService),__decorateParam$1(6,core.Inject(exports.DrawingRenderService))],ImageUpdateController);var __defProp2=Object.defineProperty,__getOwnPropDesc=Object.getOwnPropertyDescriptor,__decorateClass=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp2(target,key,result),result},"__decorateClass"),__decorateParam=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam");const PLUGIN_NAME="UNIVER_DRAWING_UI_PLUGIN";var _a6;exports.UniverDrawingUIPlugin=(_a6=class extends core.Plugin{constructor(_config=defaultPluginConfig,_injector,_configService){super(),this._config=_config,this._injector=_injector,this._configService=_configService;const{menu,...rest}=this._config;menu&&this._configService.setConfig("menu",menu,{merge:!0}),this._configService.setConfig(PLUGIN_CONFIG_KEY,rest)}onStarting(){this._initDependencies()}onRendered(){this._injector.get(DrawingUpdateController),this._injector.get(DrawingUIController),this._injector.get(ImageCropperController),this._injector.get(ImageUpdateController)}_initDependencies(){[[exports.DrawingRenderService],[DrawingUpdateController],[DrawingUIController],[ImageCropperController],[ImageUpdateController]].forEach(dependency=>this._injector.add(dependency))}},__name(_a6,"UniverDrawingUIPlugin"),__publicField(_a6,"pluginName",PLUGIN_NAME),_a6);exports.UniverDrawingUIPlugin=__decorateClass([__decorateParam(1,core.Inject(core.Injector)),__decorateParam(2,core.IConfigService)],exports.UniverDrawingUIPlugin);exports.AutoImageCropOperation=AutoImageCropOperation;exports.COMPONENT_IMAGE_POPUP_MENU=COMPONENT_IMAGE_POPUP_MENU;exports.CloseImageCropOperation=CloseImageCropOperation;exports.DrawingCommonPanel=DrawingCommonPanel;exports.ImageCropperObject=ImageCropperObject;exports.ImagePopupMenu=ImagePopupMenu;exports.ImageResetSizeOperation=ImageResetSizeOperation;exports.OpenImageCropOperation=OpenImageCropOperation;exports.SetDrawingAlignOperation=SetDrawingAlignOperation;exports.getUpdateParams=getUpdateParams;

package/lib/es/index.js CHANGED Viewed

@@ -7,7 +7,6 @@ import { Group, DRAWING_OBJECT_LAYER_INDEX, Image, IRenderManagerService, getGro
 import { UniverInstanceType, useDependency, LocaleService, debounce, CommandType, ICommandService, Tools, Inject, Disposable, checkIfMove, toDisposable, IUniverInstanceService, Injector, Plugin, IConfigService } from "@univerjs/core";
 import React, { forwardRef, useRef, createElement, useState, useEffect } from "react";
 import { Button, InputNumber, Checkbox, Select, Dropdown, MessageType } from "@univerjs/design";
-import clsx from "clsx";
 import { ComponentManager, IMessageService, IDialogService } from "@univerjs/ui";
 import { filter, switchMap } from "rxjs";
 function insertGroupObject(objectParam, object, scene, drawingManagerService) {
@@ -259,6 +258,21 @@ var element = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width:
   }));
 });
 UngroupSingle.displayName = "UngroupSingle";
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number") n += e;
+  else if (typeof e == "object") if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+__name(r, "r");
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+__name(clsx, "clsx");
 const imageCommonPanel = "univer-image-common-panel", imageCommonPanelGrid = "univer-image-common-panel-grid", imageCommonPanelBorder = "univer-image-common-panel-border", imageCommonPanelTitle = "univer-image-common-panel-title", imageCommonPanelSubtitle = "univer-image-common-panel-subtitle", imageCommonPanelRow = "univer-image-common-panel-row", imageCommonPanelRowVertical = "univer-image-common-panel-row-vertical", imageCommonPanelColumn = "univer-image-common-panel-column", imageCommonPanelColumnCenter = "univer-image-common-panel-column-center", imageCommonPanelInline = "univer-image-common-panel-inline", imageCommonPanelSpan2 = "univer-image-common-panel-span2", imageCommonPanelSpan3 = "univer-image-common-panel-span3", imageCommonPanelInput = "univer-image-common-panel-input", styles$1 = {
   imageCommonPanel,
   imageCommonPanelGrid,

package/lib/umd/index.js CHANGED Viewed

	@@ -1 +1 @@
1	- (function(global,factory){typeof exports=="object"&&typeof module<"u"?factory(exports,require("@univerjs/drawing"),require("@univerjs/engine-render"),require("@univerjs/core"),require("react"),require("@univerjs/design"),require("clsx"),require("@univerjs/ui"),require("rxjs")):typeof define=="function"&&define.amd?define(["exports","@univerjs/drawing","@univerjs/engine-render","@univerjs/core","react","@univerjs/design","clsx","@univerjs/ui","rxjs"],factory):(global=typeof globalThis<"u"?globalThis:global\|\|self,factory(global.UniverDrawingUi={},global.UniverDrawing,global.UniverEngineRender,global.UniverCore,global.React,global.UniverDesign,global.clsx,global.UniverUi,global.rxjs))})(this,function(exports2,drawing,engineRender,core,React,design,clsx,ui,rxjs){"use strict";var __defProp=Object.defineProperty;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value;var __name=(target,value)=>__defProp(target,"name",{value,configurable:!0});var __publicField=(obj,key,value)=>__defNormalProp(obj,typeof key!="symbol"?key+"":key,value);var _a,_b,_c,_d,_e,_f;function insertGroupObject(objectParam,object,scene,drawingManagerService){const groupParam=drawingManagerService.getDrawingByParam(objectParam);if(groupParam==null)return;const groupKey=drawing.getDrawingShapeKeyByDrawingSearch(objectParam),groupObject=scene.getObject(groupKey);if(groupObject&&!(groupObject instanceof engineRender.Group))return;if(groupObject!=null){groupObject.addObject(object);return}const group=new engineRender.Group(groupKey);scene.addObject(group,engineRender.DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(group),group.addObject(object);const{transform}=groupParam;transform&&group.transformByState({left:transform.left,top:transform.top,angle:transform.angle})}__name(insertGroupObject,"insertGroupObject");function getCurrentUnitInfo(currentUniverService,propUnitId){var _a2;const current=propUnitId?currentUniverService.getUnit(propUnitId):currentUniverService.getFocusedUnit();if(current==null)return;const unitId=current.getUnitId();let subUnitId;return current.type===core.UniverInstanceType.UNIVER_SHEET?subUnitId=(_a2=current.getActiveSheet())==null?void 0:_a2.getSheetId():(current.type===core.UniverInstanceType.UNIVER_DOC\|\|current.type===core.UniverInstanceType.UNIVER_SLIDE)&&(subUnitId=unitId),{unitId,subUnitId,current}}__name(getCurrentUnitInfo,"getCurrentUnitInfo");var __defProp$5=Object.defineProperty,__getOwnPropDesc$5=Object.getOwnPropertyDescriptor,__decorateClass$5=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$5(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$5(target,key,result),result},"__decorateClass$5"),__decorateParam$5=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$5");exports2.DrawingRenderService=(_a=class{constructor(_drawingManagerService,_imageIoService){this._drawingManagerService=_drawingManagerService,this._imageIoService=_imageIoService}async renderImages(imageParam,scene){const{transform:singleTransform,drawingType,source,imageSourceType,srcRect,prstGeom,groupId,unitId,subUnitId,drawingId,isMultiTransform,transforms:multiTransforms}=imageParam;if(drawingType!==drawing.DrawingTypeEnum.DRAWING_IMAGE\|\|!this._drawingManagerService.getDrawingVisible()\|\|singleTransform==null)return;const transforms=isMultiTransform&&multiTransforms?multiTransforms:[singleTransform],images=[];for(const transform of transforms){const{left,top,width,height,angle,flipX,flipY,skewX,skewY}=transform,index=transforms.indexOf(transform),imageShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId},isMultiTransform?index:void 0),imageShape=scene.getObject(imageShapeKey);if(imageShape!=null){imageShape.transformByState({left,top,width,height,angle,flipX,flipY,skewX,skewY});continue}const orders=this._drawingManagerService.getDrawingOrder(unitId,subUnitId),zIndex=orders.indexOf(drawingId),imageConfig={...transform,zIndex:zIndex===-1?orders.length-1:zIndex},imageNativeCache=this._imageIoService.getImageSourceCache(source,imageSourceType);let shouldBeCache=!1;if(imageNativeCache!=null)imageConfig.image=imageNativeCache;else{if(imageSourceType===drawing.ImageSourceType.UUID)try{imageConfig.url=await this._imageIoService.getImage(source)}catch(error){console.error(error);continue}else imageConfig.url=source;shouldBeCache=!0}if(scene.getObject(imageShapeKey))continue;imageConfig.printable=!0;const image=new engineRender.Image(imageShapeKey,imageConfig);if(shouldBeCache&&this._imageIoService.addImageSourceCache(source,imageSourceType,image.getNative()),!this._drawingManagerService.getDrawingVisible())continue;const imageObject=scene.addObject(image,engineRender.DRAWING_OBJECT_LAYER_INDEX);this._drawingManagerService.getDrawingEditable()&&imageObject.attachTransformerTo(image),groupId&&insertGroupObject({drawingId:groupId,unitId,subUnitId},image,scene,this._drawingManagerService),prstGeom!=null&&image.setPrstGeom(prstGeom),srcRect!=null&&image.setSrcRect(srcRect),images.push(image)}return images}renderDrawing(param,scene){const drawingParam=this._drawingManagerService.getDrawingByParam(param);if(drawingParam!=null)switch(drawingParam.drawingType){case drawing.DrawingTypeEnum.DRAWING_IMAGE:return this.renderImages(drawingParam,scene)}}},__name(_a,"DrawingRenderService"),_a),exports2.DrawingRenderService=__decorateClass$5([__decorateParam$5(0,drawing.IDrawingManagerService),__decorateParam$5(1,drawing.IImageIoService)],exports2.DrawingRenderService);function getUpdateParams(objects,drawingManagerService){const params=[];return objects.forEach(object=>{const{oKey,left,top,height,width,angle}=object,searchParam=drawingManagerService.getDrawingOKey(oKey);if(searchParam==null)return params.push(null),!0;const{unitId,subUnitId,drawingId,drawingType}=searchParam,param={unitId,subUnitId,drawingId,drawingType,transform:{left,top,height,width,angle}};drawingType===drawing.DrawingTypeEnum.DRAWING_IMAGE&&(param.srcRect=object.srcRect),params.push(param)}),params}__name(getUpdateParams,"getUpdateParams");var __assign=function(){return __assign=Object.assign\|\|function(t){for(var s,i=1,n=arguments.length;i<n;i++){s=arguments[i];for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p])}return t},__assign.apply(this,arguments)},__rest=function(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(s!=null&&typeof Object.getOwnPropertySymbols=="function")for(var i=0,p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]]);return t},IconBase=React.forwardRef(function(props,ref){var icon=props.icon,id=props.id,className=props.className,extend=props.extend,restProps=__rest(props,["icon","id","className","extend"]),cls="univerjs-icon univerjs-icon-".concat(id," ").concat(className\|\|"").trim(),idSuffix=React.useRef("_".concat(generateShortUuid()));return render(icon,"".concat(id),{defIds:icon.defIds,idSuffix:idSuffix.current},__assign({ref,className:cls},restProps),extend)});function render(node,id,runtimeProps,rootProps,extend){return React.createElement(node.tag,__assign(__assign({key:id},replaceRuntimeIdsAndExtInAttrs(node,runtimeProps,extend)),rootProps),(replaceRuntimeIdsInDefs(node,runtimeProps).children\|\|[]).map(function(child,index){return render(child,"".concat(id,"-").concat(node.tag,"-").concat(index),runtimeProps,void 0,extend)}))}__name(render,"render");function replaceRuntimeIdsAndExtInAttrs(node,runtimeProps,extend){var attrs=__assign({},node.attrs);extend!=null&&extend.colorChannel1&&attrs.fill==="colorChannel1"&&(attrs.fill=extend.colorChannel1);var defIds=runtimeProps.defIds;return!defIds\|\|defIds.length===0\|\|(node.tag==="use"&&attrs["xlink:href"]&&(attrs["xlink:href"]=attrs["xlink:href"]+runtimeProps.idSuffix),Object.entries(attrs).forEach(function(_a2){var key=_a2[0],value=_a2[1];typeof value=="string"&&(attrs[key]=value.replace(/url$#(.)$/,"url(#$1".concat(runtimeProps.idSuffix,")")))})),attrs}__name(replaceRuntimeIdsAndExtInAttrs,"replaceRuntimeIdsAndExtInAttrs");function replaceRuntimeIdsInDefs(node,runtimeProps){var _a2,defIds=runtimeProps.defIds;return!defIds\|\|defIds.length===0?node:node.tag==="defs"&&(!((_a2=node.children)===null\|\|_a2===void 0)&&_a2.length)?__assign(__assign({},node),{children:node.children.map(function(child){return typeof child.attrs.id=="string"&&defIds&&defIds.indexOf(child.attrs.id)>-1?__assign(__assign({},child),{attrs:__assign(__assign({},child.attrs),{id:child.attrs.id+runtimeProps.idSuffix})}):child})}):node}__name(replaceRuntimeIdsInDefs,"replaceRuntimeIdsInDefs");function generateShortUuid(){return Math.random().toString(36).substring(2,8)}__name(generateShortUuid,"generateShortUuid"),IconBase.displayName="UniverIcon";var element$8={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"colorChannel1",d:"M11.0363 12.2367V14.0367C11.0363 14.3681 11.3049 14.6367 11.6363 14.6367C11.9676 14.6367 12.2363 14.3681 12.2363 14.0367V12.2367H14.0364C14.3677 12.2367 14.6364 11.9681 14.6364 11.6367C14.6364 11.3054 14.3677 11.0367 14.0364 11.0367H12.2363V9.23672C12.2363 8.90535 11.9676 8.63672 11.6363 8.63672C11.3049 8.63672 11.0363 8.90535 11.0363 9.23672V11.0367H9.23635C8.90498 11.0367 8.63635 11.3054 8.63635 11.6367C8.63635 11.9681 8.90498 12.2367 9.23635 12.2367H11.0363Z"}},{tag:"path",attrs:{fill:"currentColor",d:"M2.56365 1.36377C1.90091 1.36377 1.36365 1.90103 1.36365 2.56377V6.16377C1.36365 6.82651 1.90091 7.36377 2.56365 7.36377H6.16365C6.82639 7.36377 7.36365 6.82651 7.36365 6.16377V2.56377C7.36365 1.90103 6.82639 1.36377 6.16365 1.36377H2.56365zM6.16365 2.56377H2.56365L2.56365 6.16377H6.16365V2.56377zM2.56365 8.63647C1.90091 8.63647 1.36365 9.17373 1.36365 9.83647V13.4365C1.36365 14.0992 1.90091 14.6365 2.56365 14.6365H6.16365C6.82639 14.6365 7.36365 14.0992 7.36365 13.4365V9.83647C7.36365 9.17373 6.82639 8.63647 6.16365 8.63647H2.56365zM6.16365 9.83647H2.56365L2.56365 13.4365H6.16365V9.83647zM9.83635 7.36377C9.17361 7.36377 8.63635 6.82651 8.63635 6.16377V2.56377C8.63635 1.90103 9.17361 1.36377 9.83635 1.36377H13.4364C14.0991 1.36377 14.6364 1.90103 14.6364 2.56377V6.16377C14.6364 6.82651 14.0991 7.36377 13.4364 7.36377H9.83635zM9.83635 6.16377V2.56377L13.4364 2.56377V6.16377H9.83635z",fillRule:"evenodd",clipRule:"evenodd"}}]},Autofill=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"autofill",ref,icon:element$8}))});Autofill.displayName="Autofill";var element$7={tag:"svg",attrs:{fill:"none",viewBox:"0 0 17 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M14.0045 4.4334C14.8881 4.4334 15.6045 3.71705 15.6045 2.8334 15.6045 1.94974 14.8881 1.2334 14.0045 1.2334H3.70449C2.82084 1.2334 2.10449 1.94974 2.10449 2.8334 2.10449 3.71705 2.82084 4.4334 3.70449 4.4334H14.0045zM14.4045 2.8334C14.4045 3.05431 14.2254 3.2334 14.0045 3.2334H3.70449C3.48358 3.2334 3.30449 3.05431 3.30449 2.8334 3.30449 2.61248 3.48358 2.4334 3.70449 2.4334H14.0045C14.2254 2.4334 14.4045 2.61249 14.4045 2.8334zM14.1544 8.5999C15.038 8.5999 15.7544 7.88356 15.7544 6.9999 15.7544 6.11625 15.038 5.3999 14.1544 5.3999H3.85439C2.97074 5.3999 2.25439 6.11625 2.25439 6.9999 2.25439 7.88356 2.97074 8.5999 3.85439 8.5999H14.1544zM14.5544 6.9999C14.5544 7.22082 14.3753 7.3999 14.1544 7.3999H3.85439C3.63348 7.3999 3.45439 7.22082 3.45439 6.9999 3.45439 6.77899 3.63348 6.5999 3.85439 6.5999H14.1544C14.3753 6.5999 14.5544 6.77899 14.5544 6.9999z",fillRule:"evenodd",clipRule:"evenodd"}},{tag:"path",attrs:{fill:"currentColor",d:"M8.57975 14.5902L6.58023 12.5907C6.34591 12.3564 6.34591 11.9765 6.58023 11.7421 6.81454 11.5078 7.19444 11.5078 7.42876 11.7421L8.40449 12.7179V10.1664C8.40449 9.83504 8.67312 9.56641 9.00449 9.56641 9.33586 9.56641 9.60449 9.83504 9.60449 10.1664V12.7179L10.5802 11.7421C10.8145 11.5078 11.1944 11.5078 11.4288 11.7421 11.6631 11.9765 11.6631 12.3564 11.4288 12.5907L9.42923 14.5902M8.57975 14.5902C8.58121 14.5917 8.58268 14.5931 8.58416 14.5946 8.64077 14.6502 8.70566 14.6923 8.77482 14.7209 8.84557 14.7502 8.92314 14.7664 9.00449 14.7664 9.08585 14.7664 9.16342 14.7502 9.23416 14.7209 9.30332 14.6923 9.36821 14.6502 9.42482 14.5946"}}]},BottomSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"bottom-single",ref,icon:element$7}))});BottomSingle.displayName="BottomSingle";var element$6={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M5.97705 7.51296C5.97705 7.18159 6.24568 6.91296 6.57705 6.91296H8.48632C8.81769 6.91296 9.08632 7.18159 9.08632 7.51296 9.08632 7.84433 8.81769 8.11296 8.48632 8.11296H6.57705C6.24568 8.11296 5.97705 7.84433 5.97705 7.51296zM6.57705 9.41028C6.24568 9.41028 5.97705 9.67891 5.97705 10.0103 5.97705 10.3416 6.24568 10.6103 6.57705 10.6103H10.8199C11.1512 10.6103 11.4199 10.3416 11.4199 10.0103 11.4199 9.67891 11.1512 9.41028 10.8199 9.41028H6.57705z"}},{tag:"path",attrs:{fill:"currentColor",d:"M3.51074 2.37063C3.51074 1.48697 4.22709 0.77063 5.11074 0.77063H9.80318L9.81294 0.770708C9.97168 0.768161 10.1311 0.82824 10.2511 0.95055L14.4317 5.21408C14.5165 5.30049 14.5697 5.406 14.5917 5.51645C14.6041 5.5644 14.6106 5.61467 14.6106 5.66648V11.6406C14.6106 12.5243 13.8943 13.2406 13.0106 13.2406H5.11074C4.22709 13.2406 3.51074 12.5243 3.51074 11.6406V2.37063ZM10.4032 4.66648V2.81964L12.6063 5.06648H10.8032C10.5823 5.06648 10.4032 4.88739 10.4032 4.66648ZM5.11074 1.97063C4.88983 1.97063 4.71074 2.14972 4.71074 2.37063V11.6406C4.71074 11.8615 4.88983 12.0406 5.11074 12.0406H13.0106C13.2316 12.0406 13.4106 11.8615 13.4106 11.6406V6.26648H10.8032C9.91953 6.26648 9.20318 5.55013 9.20318 4.66648V1.97063H5.11074Z",fillRule:"evenodd",clipRule:"evenodd"}},{tag:"path",attrs:{fill:"currentColor",d:"M2.58916 6.6741C2.58916 6.34273 2.32053 6.0741 1.98916 6.0741C1.65779 6.0741 1.38916 6.34273 1.38916 6.6741V12.6294C1.38916 14.0653 2.55322 15.2294 3.98916 15.2294H9.41408C9.74545 15.2294 10.0141 14.9607 10.0141 14.6294C10.0141 14.298 9.74545 14.0294 9.41408 14.0294H3.98916C3.21596 14.0294 2.58916 13.4026 2.58916 12.6294V6.6741Z"}}]},CreateCopySingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"create-copy-single",ref,icon:element$6}))});CreateCopySingle.displayName="CreateCopySingle";var element$5={tag:"svg",attrs:{fill:"none",viewBox:"0 0 17 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M7.38125 1.16211C6.49759 1.16211 5.78125 1.87845 5.78125 2.76211V5.6377H2.87783C1.99418 5.6377 1.27783 6.35404 1.27783 7.2377V13.2377C1.27783 14.1214 1.99418 14.8377 2.87783 14.8377H8.87783C9.76149 14.8377 10.4778 14.1214 10.4778 13.2377V10.3621H13.3813C14.2649 10.3621 14.9813 9.64577 14.9813 8.76211V2.76211C14.9813 1.87845 14.2649 1.16211 13.3813 1.16211H7.38125ZM10.4778 9.16211H13.3813C13.6022 9.16211 13.7812 8.98302 13.7812 8.76211V2.76211C13.7812 2.5412 13.6022 2.36211 13.3813 2.36211H7.38125C7.16034 2.36211 6.98125 2.5412 6.98125 2.76211V5.6377H8.87783C9.76149 5.6377 10.4778 6.35404 10.4778 7.2377V9.16211ZM6.98125 6.8377H8.87783C9.09875 6.8377 9.27783 7.01678 9.27783 7.2377V9.16211H7.38125C7.16034 9.16211 6.98125 8.98302 6.98125 8.76211V6.8377ZM5.78125 6.8377V8.76211C5.78125 9.64577 6.49759 10.3621 7.38125 10.3621H9.27783V13.2377C9.27783 13.4586 9.09875 13.6377 8.87783 13.6377H2.87783C2.65692 13.6377 2.47783 13.4586 2.47783 13.2377V7.2377C2.47783 7.01678 2.65692 6.8377 2.87783 6.8377H5.78125Z",fillRule:"evenodd",clipRule:"evenodd"}}]},GroupSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"group-single",ref,icon:element$5}))});GroupSingle.displayName="GroupSingle";var element$4={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M11.3536 6.14645C11.5488 6.34171 11.5488 6.65829 11.3536 6.85355L8.35355 9.85355C8.15829 10.0488 7.84171 10.0488 7.64645 9.85355L4.64645 6.85355C4.45118 6.65829 4.45118 6.34171 4.64645 6.14645C4.84171 5.95118 5.15829 5.95118 5.35355 6.14645L8 8.79289L10.6464 6.14645C10.8417 5.95118 11.1583 5.95118 11.3536 6.14645Z",fillRule:"evenodd",clipRule:"evenodd"}}]},MoreDownSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"more-down-single",ref,icon:element$4}))});MoreDownSingle.displayName="MoreDownSingle";var element$3={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M1.25 2.96401C1.25 3.84767 1.96634 4.56401 2.85 4.56401H13.15C14.0337 4.56401 14.75 3.84767 14.75 2.96401C14.75 2.08036 14.0337 1.36401 13.15 1.36401H2.85C1.96635 1.36401 1.25 2.08036 1.25 2.96401ZM2.85 3.36401C2.62909 3.36401 2.45 3.18493 2.45 2.96401C2.45 2.7431 2.62909 2.56401 2.85 2.56401H13.15C13.3709 2.56401 13.55 2.7431 13.55 2.96401C13.55 3.18493 13.3709 3.36401 13.15 3.36401H2.85Z",fillRule:"evenodd",clipRule:"evenodd"}},{tag:"path",attrs:{fill:"currentColor",d:"M5.57564 11.6118C5.80995 11.3774 6.18985 11.3774 6.42417 11.6118L7.3999 12.5875V6.36951C7.3999 6.03814 7.66853 5.76951 7.9999 5.76951C8.33127 5.76951 8.5999 6.03814 8.5999 6.36951V12.5875L9.57564 11.6118C9.80995 11.3774 10.1899 11.3774 10.4242 11.6118C10.6585 11.8461 10.6585 12.226 10.4242 12.4603L8.4324 14.452C8.32324 14.5655 8.16982 14.6362 7.9999 14.6362C7.82998 14.6362 7.67655 14.5655 7.56739 14.452L5.57564 12.4603C5.34132 12.226 5.34132 11.8461 5.57564 11.6118Z"}}]},MoveDownSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"move-down-single",ref,icon:element$3}))});MoveDownSingle.displayName="MoveDownSingle";var element$2={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M1.25 13.036C1.25 12.1523 1.96634 11.436 2.85 11.436H13.15C14.0337 11.436 14.75 12.1523 14.75 13.036C14.75 13.9196 14.0337 14.636 13.15 14.636H2.85C1.96635 14.636 1.25 13.9196 1.25 13.036ZM2.85 12.636C2.62909 12.636 2.45 12.8151 2.45 13.036C2.45 13.2569 2.62909 13.436 2.85 13.436H13.15C13.3709 13.436 13.55 13.2569 13.55 13.036C13.55 12.8151 13.3709 12.636 13.15 12.636H2.85Z",fillRule:"evenodd",clipRule:"evenodd"}},{tag:"path",attrs:{fill:"currentColor",d:"M5.57564 4.38825C5.80995 4.62256 6.18985 4.62256 6.42417 4.38825L7.3999 3.41251V9.63049C7.3999 9.96186 7.66853 10.2305 7.9999 10.2305C8.33127 10.2305 8.5999 9.96186 8.5999 9.63049V3.41251L9.57564 4.38825C9.80995 4.62256 10.1899 4.62256 10.4242 4.38825C10.6585 4.15393 10.6585 3.77403 10.4242 3.53972L8.4324 1.54796C8.32324 1.43445 8.16982 1.36382 7.9999 1.36382C7.82998 1.36382 7.67655 1.43446 7.56739 1.54797L5.57564 3.53972C5.34132 3.77403 5.34132 4.15393 5.57564 4.38825Z"}}]},MoveUpSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"move-up-single",ref,icon:element$2}))});MoveUpSingle.displayName="MoveUpSingle";var element$1={tag:"svg",attrs:{fill:"none",viewBox:"0 0 17 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M7.82994 1.40913C7.88746 1.35161 7.95376 1.30821 8.02453 1.27893C8.09527 1.24959 8.17285 1.2334 8.2542 1.2334C8.33555 1.2334 8.41313 1.24959 8.48387 1.27893C8.55464 1.30821 8.62094 1.35161 8.67846 1.40913L10.6785 3.40913C10.9128 3.64345 10.9128 4.02335 10.6785 4.25766C10.4441 4.49198 10.0642 4.49198 9.82994 4.25766L8.8542 3.28193V5.8334C8.8542 6.16477 8.58557 6.4334 8.2542 6.4334C7.92283 6.4334 7.6542 6.16477 7.6542 5.8334V3.28193L6.67846 4.25766C6.44415 4.49198 6.06425 4.49198 5.82994 4.25766C5.59562 4.02335 5.59562 3.64345 5.82994 3.40913L7.82994 1.40913Z"}},{tag:"path",attrs:{fill:"currentColor",d:"M1.50439 9C1.50439 8.11634 2.22074 7.4 3.10439 7.4H13.4044C14.288 7.4 15.0044 8.11634 15.0044 9 15.0044 9.88366 14.2881 10.6 13.4044 10.6H3.1044C2.22074 10.6 1.50439 9.88366 1.50439 9zM3.10439 8.6C2.88348 8.6 2.70439 8.77909 2.70439 9 2.70439 9.22091 2.88348 9.4 3.1044 9.4H13.4044C13.6253 9.4 13.8044 9.22091 13.8044 9 13.8044 8.77909 13.6253 8.6 13.4044 8.6H3.10439zM1.6543 13.1665C1.6543 12.2828 2.37064 11.5665 3.2543 11.5665H13.5543C14.438 11.5665 15.1543 12.2828 15.1543 13.1665 15.1543 14.0502 14.438 14.7665 13.5543 14.7665H3.2543C2.37064 14.7665 1.6543 14.0502 1.6543 13.1665zM3.2543 12.7665C3.03338 12.7665 2.8543 12.9456 2.8543 13.1665 2.8543 13.3874 3.03338 13.5665 3.2543 13.5665H13.5543C13.7752 13.5665 13.9543 13.3874 13.9543 13.1665 13.9543 12.9456 13.7752 12.7665 13.5543 12.7665H3.2543z",fillRule:"evenodd",clipRule:"evenodd"}}]},TopmostSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"topmost-single",ref,icon:element$1}))});TopmostSingle.displayName="TopmostSingle";var element={tag:"svg",attrs:{fill:"none",viewBox:"0 0 17 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M7.46855 2.83731C7.46855 2.61639 7.64764 2.4373 7.86855 2.4373H13.8603C14.0812 2.4373 14.2603 2.61639 14.2603 2.8373V9.5049C14.2603 9.72581 14.0812 9.90489 13.8603 9.90489H12.866C12.5346 9.90489 12.266 10.1735 12.266 10.5049C12.266 10.8363 12.5346 11.1049 12.866 11.1049H13.8603C14.7439 11.1049 15.4603 10.3886 15.4603 9.5049V2.8373C15.4603 1.95365 14.7439 1.2373 13.8603 1.2373H7.86855C6.9849 1.2373 6.26855 1.95365 6.26855 2.83731V3.48688C6.26855 3.81825 6.53718 4.08688 6.86855 4.08688C7.19993 4.08688 7.46855 3.81825 7.46855 3.48688V2.83731Z"}},{tag:"path",attrs:{fill:"currentColor",d:"M3.19888 5.56299C2.31522 5.56299 1.59888 6.27933 1.59888 7.16299V13.163C1.59888 14.0466 2.31522 14.763 3.19888 14.763H9.19888C10.0825 14.763 10.7989 14.0466 10.7989 13.163V7.16299C10.7989 6.27933 10.0825 5.56299 9.19888 5.56299H3.19888ZM2.79888 7.16299C2.79888 6.94207 2.97796 6.76299 3.19888 6.76299H9.19888C9.41979 6.76299 9.59888 6.94207 9.59888 7.16299V13.163C9.59888 13.3839 9.41979 13.563 9.19888 13.563H3.19888C2.97796 13.563 2.79888 13.3839 2.79888 13.163V7.16299Z",fillRule:"evenodd",clipRule:"evenodd"}}]},UngroupSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"ungroup-single",ref,icon:element}))});UngroupSingle.displayName="UngroupSingle";const styles$1={imageCommonPanel:"univer-image-common-panel",imageCommonPanelGrid:"univer-image-common-panel-grid",imageCommonPanelBorder:"univer-image-common-panel-border",imageCommonPanelTitle:"univer-image-common-panel-title",imageCommonPanelSubtitle:"univer-image-common-panel-subtitle",imageCommonPanelRow:"univer-image-common-panel-row",imageCommonPanelRowVertical:"univer-image-common-panel-row-vertical",imageCommonPanelColumn:"univer-image-common-panel-column",imageCommonPanelColumnCenter:"univer-image-common-panel-column-center",imageCommonPanelInline:"univer-image-common-panel-inline",imageCommonPanelSpan2:"univer-image-common-panel-span2",imageCommonPanelSpan3:"univer-image-common-panel-span3",imageCommonPanelInput:"univer-image-common-panel-input"},DrawingArrange=__name(props=>{const{arrangeShow,drawings:focusDrawings}=props,localeService=core.useDependency(core.LocaleService),drawingManagerService=core.useDependency(drawing.IDrawingManagerService),gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay"),[drawings,setDrawings]=React.useState(focusDrawings);React.useEffect(()=>{const focusDispose=drawingManagerService.focus$.subscribe(drawings2=>{setDrawings(drawings2)});return()=>{focusDispose.unsubscribe()}},[]);const onArrangeBtnClick=__name(arrangeType=>{const unitId=drawings[0].unitId,subUnitId=drawings[0].subUnitId,drawingIds=drawings.map(drawing2=>drawing2.drawingId);drawingManagerService.featurePluginOrderUpdateNotification({unitId,subUnitId,drawingIds,arrangeType})},"onArrangeBtnClick");return React.createElement("div",{className:styles$1.imageCommonPanelGrid,style:{display:gridDisplay(arrangeShow)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.arrange.title")))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onArrangeBtnClick(drawing.ArrangeTypeEnum.forward)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(MoveUpSingle,null),localeService.t("image-panel.arrange.forward")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onArrangeBtnClick(drawing.ArrangeTypeEnum.backward)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(MoveDownSingle,null),localeService.t("image-panel.arrange.backward"))))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onArrangeBtnClick(drawing.ArrangeTypeEnum.front)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(TopmostSingle,null),localeService.t("image-panel.arrange.front")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onArrangeBtnClick(drawing.ArrangeTypeEnum.back)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(BottomSingle,null),localeService.t("image-panel.arrange.back"))))))},"DrawingArrange"),MIN_DRAWING_WIDTH_LIMIT=20,MIN_DRAWING_HEIGHT_LIMIT=20,RANGE_DRAWING_ROTATION_LIMIT=[-3600,3600],INPUT_DEBOUNCE_TIME=300,DrawingTransform=__name(props=>{var _a2;const localeService=core.useDependency(core.LocaleService),drawingManagerService=core.useDependency(drawing.IDrawingManagerService),renderManagerService=core.useDependency(engineRender.IRenderManagerService),{drawings,transformShow}=props,drawingParam=drawings[0];if(drawingParam==null)return;const transform=drawingParam.transform;if(transform==null)return;const{unitId,subUnitId,drawingId,drawingType}=drawingParam,renderObject=renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return;const topScene=(_a2=scene.getEngine())==null?void 0:_a2.activeScene;if(topScene==null)return;const transformer=scene.getTransformerByCreate(),{width:originWidth=0,height:originHeight=0,left:originX=0,top:originY=0,angle:originRotation=0}=transform,[width,setWidth]=React.useState(originWidth),[height,setHeight]=React.useState(originHeight),[xPosition,setXPosition]=React.useState(originX),[yPosition,setYPosition]=React.useState(originY),[rotation,setRotation]=React.useState(originRotation),[lockRatio,setLockRatio]=React.useState(transformer.keepRatio),checkMoveBoundary=__name((left,top,width2,height2)=>{const{width:topSceneWidth,height:topSceneHeight}=topScene,{ancestorLeft,ancestorTop}=scene;let limitLeft=left,limitTop=top,limitWidth=width2,limitHeight=height2;return left+ancestorLeft<0&&(limitLeft=-ancestorLeft),top+ancestorTop<0&&(limitTop=-ancestorTop),limitWidth=topSceneWidth-limitLeft-ancestorLeft,limitWidth<MIN_DRAWING_WIDTH_LIMIT&&(limitWidth=MIN_DRAWING_WIDTH_LIMIT),limitHeight=topSceneHeight-limitTop-ancestorTop,limitHeight<MIN_DRAWING_WIDTH_LIMIT&&(limitHeight=MIN_DRAWING_WIDTH_LIMIT),left+limitWidth+ancestorLeft>topSceneWidth&&(limitLeft=topSceneWidth-width2-ancestorLeft),top+limitHeight+ancestorTop>topSceneHeight&&(limitTop=topSceneHeight-height2-ancestorTop),{limitLeft,limitTop,limitWidth,limitHeight}},"checkMoveBoundary"),changeObs=__name(state=>{const{objects}=state,params=getUpdateParams(objects,drawingManagerService);if(params.length!==1)return;const drawingParam2=params[0];if(drawingParam2==null)return;const{transform:transform2}=drawingParam2;if(transform2==null)return;const{width:originWidth2,height:originHeight2,left:originX2,top:originY2,angle:originRotation2}=transform2;originWidth2!=null&&setWidth(originWidth2),originHeight2!=null&&setHeight(originHeight2),originX2!=null&&setXPosition(originX2),originY2!=null&&setYPosition(originY2),originRotation2!=null&&setRotation(originRotation2)},"changeObs");React.useEffect(()=>{const subscriptions=[transformer.changeStart$.subscribe(state=>{changeObs(state)}),transformer.changing$.subscribe(state=>{changeObs(state)}),transformer.changeEnd$.subscribe(state=>{changeObs(state)}),drawingManagerService.focus$.subscribe(drawings2=>{if(drawings2.length!==1)return;const drawingParam2=drawingManagerService.getDrawingByParam(drawings2[0]);if(drawingParam2==null)return;const transform2=drawingParam2.transform;if(transform2==null)return;const{width:originWidth2,height:originHeight2,left:originX2,top:originY2,angle:originRotation2}=transform2;originWidth2!=null&&setWidth(originWidth2),originHeight2!=null&&setHeight(originHeight2),originX2!=null&&setXPosition(originX2),originY2!=null&&setYPosition(originY2),originRotation2!=null&&setRotation(originRotation2)})];return()=>{subscriptions.forEach(sub=>sub.unsubscribe())}},[]);const handleWidthChange=core.debounce(val=>{if(val==null)return;val=Math.max(val,MIN_DRAWING_WIDTH_LIMIT);const{limitWidth,limitHeight}=checkMoveBoundary(xPosition,yPosition,val,height);val=Math.min(val,limitWidth);const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{width:val}};if(lockRatio){let heightFix=val/widthheight;if(heightFix=Math.max(heightFix,MIN_DRAWING_HEIGHT_LIMIT),heightFix>limitHeight)return;setHeight(heightFix),updateParam.transform.height=heightFix}setWidth(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},INPUT_DEBOUNCE_TIME),handleHeightChange=core.debounce(val=>{if(val==null)return;val=Math.max(val,MIN_DRAWING_WIDTH_LIMIT);const{limitHeight,limitWidth}=checkMoveBoundary(xPosition,yPosition,width,val);val=Math.min(val,limitHeight);const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{height:val}};if(lockRatio){let widthFix=val/heightwidth;if(widthFix=Math.max(widthFix,MIN_DRAWING_WIDTH_LIMIT),widthFix>limitWidth)return;setWidth(widthFix),updateParam.transform.width=widthFix}setHeight(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},INPUT_DEBOUNCE_TIME),handleXChange=core.debounce(val=>{if(val==null)return;const{limitLeft}=checkMoveBoundary(val,yPosition,width,height);val=limitLeft;const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{left:val}};setXPosition(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},INPUT_DEBOUNCE_TIME),handleYChange=core.debounce(val=>{if(val==null)return;const{limitTop}=checkMoveBoundary(xPosition,val,width,height);val=limitTop;const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{top:val}};setYPosition(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},INPUT_DEBOUNCE_TIME),handleRotationChange=__name(val=>{if(val==null)return;const[min,max]=RANGE_DRAWING_ROTATION_LIMIT;val<min&&(val=min),val>max&&(val=max);const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{angle:val}};setRotation(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},"handleRotationChange"),handleLockRatioChange=__name(val=>{setLockRatio(val),transformer.keepRatio=val},"handleLockRatioChange"),gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay");return React.createElement("div",{className:clsx(styles$1.imageCommonPanelGrid,styles$1.imageCommonPanelBorder),style:{display:gridDisplay(transformShow)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.transform.title")))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.width"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:width,onChange:__name(val=>{handleWidthChange(val)},"onChange"),className:styles$1.imageCommonPanelInput}))))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.height"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:height,onChange:__name(val=>{handleHeightChange(val)},"onChange"),className:styles$1.imageCommonPanelInput}))))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.lock"))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelRow,styles$1.imageCommonPanelRowVertical)},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.Checkbox,{checked:lockRatio,onChange:handleLockRatioChange})))))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.x"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:xPosition,onChange:__name(val=>{handleXChange(val)},"onChange"),className:styles$1.imageCommonPanelInput}))))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.y"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:yPosition,onChange:__name(val=>{handleYChange(val)},"onChange"),className:styles$1.imageCommonPanelInput}))))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.rotate"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:rotation,onChange:handleRotationChange,className:styles$1.imageCommonPanelInput})))))))},"DrawingTransform");var AlignType=(AlignType2=>(AlignType2.default="0",AlignType2.left="1",AlignType2.center="2",AlignType2.right="3",AlignType2.top="4",AlignType2.middle="5",AlignType2.bottom="6",AlignType2.horizon="7",AlignType2.vertical="8",AlignType2))(AlignType\|\|{});const SetDrawingAlignOperation={id:"sheet.operation.set-image-align",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")},DrawingAlign=__name(props=>{const commandService=core.useDependency(core.ICommandService),localeService=core.useDependency(core.LocaleService),{alignShow}=props,[alignValue,setAlignValue]=React.useState(AlignType.default),alignOptions=[{label:localeService.t("image-panel.align.default"),value:AlignType.default},{options:[{label:localeService.t("image-panel.align.left"),value:AlignType.left},{label:localeService.t("image-panel.align.center"),value:AlignType.center},{label:localeService.t("image-panel.align.right"),value:AlignType.right}]},{options:[{label:localeService.t("image-panel.align.top"),value:AlignType.top},{label:localeService.t("image-panel.align.middle"),value:AlignType.middle},{label:localeService.t("image-panel.align.bottom"),value:AlignType.bottom}]},{options:[{label:localeService.t("image-panel.align.horizon"),value:AlignType.horizon},{label:localeService.t("image-panel.align.vertical"),value:AlignType.vertical}]}];function handleAlignChange(value){setAlignValue(value),commandService.executeCommand(SetDrawingAlignOperation.id,{alignType:value})}__name(handleAlignChange,"handleAlignChange");const gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay");return React.createElement("div",{className:clsx(styles$1.imageCommonPanelGrid,styles$1.imageCommonPanelBorder),style:{display:gridDisplay(alignShow)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.align.title")))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn)},React.createElement(design.Select,{value:alignValue,options:alignOptions,onChange:handleAlignChange}))))},"DrawingAlign"),OpenImageCropOperation={id:"sheet.operation.open-image-crop",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")},CloseImageCropOperation={id:"sheet.operation.close-image-crop",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")};var CropType=(CropType2=>(CropType2.FREE="0",CropType2.R1_1="1",CropType2.R16_9="2",CropType2.R9_16="3",CropType2.R5_4="4",CropType2.R4_5="5",CropType2.R4_3="6",CropType2.R3_4="7",CropType2.R3_2="8",CropType2.R2_3="9",CropType2))(CropType\|\|{});const AutoImageCropOperation={id:"sheet.operation.Auto-image-crop",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")},ImageCropper=__name(props=>{const commandService=core.useDependency(core.ICommandService),localeService=core.useDependency(core.LocaleService),{drawings,cropperShow}=props;if(drawings[0]==null)return;const[cropValue,setCropValue]=React.useState(CropType.FREE),cropStateRef=React.useRef(!1),cropOptions=[{label:localeService.t("image-panel.crop.mode"),value:CropType.FREE},{label:"1:1",value:CropType.R1_1},{label:"16:9",value:CropType.R16_9},{label:"9:16",value:CropType.R9_16},{label:"5:4",value:CropType.R5_4},{label:"4:5",value:CropType.R4_5},{label:"4:3",value:CropType.R4_3},{label:"3:4",value:CropType.R3_4},{label:"3:2",value:CropType.R3_2},{label:"2:3",value:CropType.R2_3}];React.useEffect(()=>{const onChangeStartObserver=commandService.onCommandExecuted(command=>{if(command.id===CloseImageCropOperation.id){const params=command.params;params!=null&&params.isAuto\|\|(cropStateRef.current=!1)}});return()=>{onChangeStartObserver==null\|\|onChangeStartObserver.dispose()}},[]);function handleCropChange(value){setCropValue(value),cropStateRef.current&&commandService.executeCommand(AutoImageCropOperation.id,{cropType:value})}__name(handleCropChange,"handleCropChange");const gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay"),onCropperBtnClick=__name(val=>{commandService.executeCommand(AutoImageCropOperation.id,{cropType:val}),cropStateRef.current=!0},"onCropperBtnClick");return React.createElement("div",{className:clsx(styles$1.imageCommonPanelGrid,styles$1.imageCommonPanelBorder),style:{display:gridDisplay(cropperShow)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.crop.title")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelRow,styles$1.imageCommonPanelRowVertical)},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onCropperBtnClick(cropValue)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(CreateCopySingle,null),localeService.t("image-panel.crop.start")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Select,{value:cropValue,options:cropOptions,onChange:handleCropChange}))))},"ImageCropper"),DrawingGroup=__name(props=>{const localeService=core.useDependency(core.LocaleService),renderManagerService=core.useDependency(engineRender.IRenderManagerService),drawingManagerService=core.useDependency(drawing.IDrawingManagerService),{hasGroup,drawings}=props,[groupShow,setGroupShow]=React.useState(!1),[groupBtnShow,setGroupBtnShow]=React.useState(!0),[ungroupBtnShow,setUngroupBtnShow]=React.useState(!0),gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay"),onGroupBtnClick=__name(()=>{const focusDrawings=drawingManagerService.getFocusDrawings(),{unitId,subUnitId}=focusDrawings[0],groupId=core.Tools.generateRandomId(10),groupTransform=engineRender.getGroupState(0,0,focusDrawings.map(o=>o.transform\|\|{})),groupParam={unitId,subUnitId,drawingId:groupId,drawingType:drawing.DrawingTypeEnum.DRAWING_GROUP,transform:groupTransform},children=focusDrawings.map(drawing2=>{const transform=drawing2.transform\|\|{left:0,top:0},{unitId:unitId2,subUnitId:subUnitId2,drawingId}=drawing2;return{unitId:unitId2,subUnitId:subUnitId2,drawingId,transform:{...transform,left:transform.left-groupTransform.left,top:transform.top-groupTransform.top},groupId}});drawingManagerService.featurePluginGroupUpdateNotification([{parent:groupParam,children}])},"onGroupBtnClick"),ungroup=__name(param=>{if(param.drawingType!==drawing.DrawingTypeEnum.DRAWING_GROUP)return;const{unitId,subUnitId,drawingId,transform:groupTransform={width:0,height:0}}=param;if(groupTransform==null)return;const objects=drawingManagerService.getDrawingsByGroup({unitId,subUnitId,drawingId});if(objects.length===0)return;const children=objects.map(object=>{const{transform}=object,{unitId:unitId2,subUnitId:subUnitId2,drawingId:drawingId2}=object,newTransform=engineRender.transformObjectOutOfGroup(transform\|\|{},groupTransform,groupTransform.width\|\|0,groupTransform.height\|\|0);return{unitId:unitId2,subUnitId:subUnitId2,drawingId:drawingId2,transform:{...transform,...newTransform},groupId:void 0}});return{parent:param,children}},"ungroup"),onUngroupBtnClick=__name(()=>{const params=drawingManagerService.getFocusDrawings().map(drawing2=>ungroup(drawing2)).filter(o=>o!=null);params.length!==0&&drawingManagerService.featurePluginUngroupUpdateNotification(params)},"onUngroupBtnClick");return React.useEffect(()=>{const drawingParam=drawings[0];if(drawingParam==null)return;const{unitId}=drawingParam,renderObject=renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return;const transformer=scene.getTransformerByCreate(),onClearControlObserver=transformer.clearControl$.subscribe(changeSelf=>{changeSelf===!0&&setGroupShow(!1)}),onChangeStartObserver=transformer.changeStart$.subscribe(state=>{const{objects}=state,params=getUpdateParams(objects,drawingManagerService),groupParams=params.filter(o=>(o==null?void 0:o.drawingType)===drawing.DrawingTypeEnum.DRAWING_GROUP);let groupBtnShow2=!1,ungroupBtnShow2=!1;params.length>1&&(groupBtnShow2=!0),groupParams.length>0&&(ungroupBtnShow2=!0),setGroupShow(groupBtnShow2\|\|ungroupBtnShow2),setGroupBtnShow(groupBtnShow2),setUngroupBtnShow(ungroupBtnShow2)});return()=>{onChangeStartObserver.unsubscribe(),onClearControlObserver.unsubscribe()}},[]),React.createElement("div",{className:clsx(styles$1.imageCommonPanelGrid,styles$1.imageCommonPanelBorder),style:{display:gridDisplay(hasGroup===!0?groupShow:!1)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.group.title")))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2,styles$1.imageCommonPanelColumnCenter)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onGroupBtnClick()},"onClick"),style:{display:gridDisplay(groupBtnShow)}},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(GroupSingle,null),localeService.t("image-panel.group.group")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2,styles$1.imageCommonPanelColumnCenter)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onUngroupBtnClick()},"onClick"),style:{display:gridDisplay(ungroupBtnShow)}},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(UngroupSingle,null),localeService.t("image-panel.group.unGroup"))))))},"DrawingGroup"),DrawingCommonPanel=__name(props=>{const drawingManagerService=core.useDependency(drawing.IDrawingManagerService),renderManagerService=core.useDependency(engineRender.IRenderManagerService),localeService=core.useDependency(core.LocaleService),{drawings,hasArrange=!0,hasTransform=!0,hasAlign=!0,hasCropper=!0,hasGroup=!0}=props,drawingParam=drawings[0];if(drawingParam==null)return;const{unitId}=drawingParam,renderObject=renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return;const transformer=scene.getTransformerByCreate(),[arrangeShow,setArrangeShow]=React.useState(!0),[transformShow,setTransformShow]=React.useState(!0),[alignShow,setAlignShow]=React.useState(!1),[cropperShow,setCropperShow]=React.useState(!0),[nullShow,setNullShow]=React.useState(!1);return React.useEffect(()=>{const clearControlSub=transformer.clearControl$.subscribe(changeSelf=>{changeSelf===!0&&(setArrangeShow(!1),setTransformShow(!1),setAlignShow(!1),setCropperShow(!1),setNullShow(!0))}),changeStartSub=transformer.changeStart$.subscribe(state=>{const{objects}=state,params=getUpdateParams(objects,drawingManagerService);params.length===0?(setArrangeShow(!1),setTransformShow(!1),setAlignShow(!1),setCropperShow(!1),setNullShow(!0)):params.length===1?(setArrangeShow(!0),setTransformShow(!0),setAlignShow(!1),setCropperShow(!0),setNullShow(!1)):(setArrangeShow(!0),setTransformShow(!1),setAlignShow(!0),setCropperShow(!1),setNullShow(!1))}),focusSub=drawingManagerService.focus$.subscribe(drawings2=>{drawings2.length===0?(setArrangeShow(!1),setTransformShow(!1),setAlignShow(!1),setCropperShow(!1),setNullShow(!0)):drawings2.length===1?(setArrangeShow(!0),setTransformShow(!0),setAlignShow(!1),setCropperShow(!0),setNullShow(!1)):(setArrangeShow(!0),setTransformShow(!1),setAlignShow(!0),setCropperShow(!1),setNullShow(!1))});return()=>{changeStartSub.unsubscribe(),clearControlSub.unsubscribe(),focusSub.unsubscribe()}},[]),React.createElement(React.Fragment,null,React.createElement("div",{style:{display:nullShow===!0?"block":"none",height:"100%"}},React.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%",top:"50%",marginTop:"-100px"}},React.createElement("span",null,localeService.t("image-panel.null")))),React.createElement(DrawingArrange,{arrangeShow:hasArrange===!0?arrangeShow:!1,drawings}),React.createElement(DrawingTransform,{transformShow:hasTransform===!0?transformShow:!1,drawings}),React.createElement(DrawingAlign,{alignShow:hasAlign===!0?alignShow:!1,drawings}),React.createElement(ImageCropper,{cropperShow:hasCropper===!0?cropperShow:!1,drawings}),React.createElement(DrawingGroup,{hasGroup,drawings}))},"DrawingCommonPanel"),styles={imagePopupMenu:"univer-image-popup-menu",imagePopupMenuItem:"univer-image-popup-menu-item",imagePopupMenuItemIcon:"univer-image-popup-menu-item-icon",imagePopupMenuItemTitle:"univer-image-popup-menu-item-title",imagePopupMenuItemHide:"univer-image-popup-menu-item-hide",btnContainer:"univer-btn-container",btnContainerExpand:"univer-btn-container-expand"},ImagePopupMenu=__name(props=>{var _a2,_b2;const menuItems=(_b2=(_a2=props.popup)==null?void 0:_a2.extraProps)==null?void 0:_b2.menuItems;if(!menuItems)return null;const commandService=core.useDependency(core.ICommandService),localeService=core.useDependency(core.LocaleService),[visible,setVisible]=React.useState(!1),[isHovered,setHovered]=React.useState(!1),handleMouseEnter=__name(()=>{setHovered(!0)},"handleMouseEnter"),handleMouseLeave=__name(()=>{setHovered(!1)},"handleMouseLeave"),onVisibleChange=__name(visible2=>{setVisible(visible2)},"onVisibleChange"),handleClick=__name(item=>{commandService.executeCommand(item.commandId,item.commandParams),setVisible(!1)},"handleClick"),showMore=visible\|\|isHovered,availableMenu=menuItems.filter(item=>!item.disable);return React.createElement("div",{onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave},React.createElement(design.Dropdown,{placement:"bottomLeft",trigger:["click"],overlay:React.createElement("ul",{className:styles.imagePopupMenu},availableMenu.map(item=>React.createElement("li",{key:item.index,onClick:__name(()=>handleClick(item),"onClick"),className:styles.imagePopupMenuItem},React.createElement("span",{className:styles.imagePopupMenuItemTitle},localeService.t(item.label))))),visible,onVisibleChange},React.createElement("div",{className:clsx(styles.btnContainer,{[styles.btnContainerExpand]:visible})},React.createElement(Autofill,{style:{color:"#35322B"},extend:{colorChannel1:"rgb(var(--green-700, #409f11))"}}),showMore&&React.createElement(MoreDownSingle,{style:{color:"#CCCCCC",fontSize:"8px",marginLeft:"8px"}}))))},"ImagePopupMenu"),COMPONENT_IMAGE_POPUP_MENU="COMPONENT_IMAGE_POPUP_MENU",PLUGIN_CONFIG_KEY="drawing-ui.config",defaultPluginConfig={},ImageResetSizeOperation={id:"sheet.operation.image-reset-size",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")},COMPONENT_IMAGE_VIEWER="COMPONENT_IMAGE_VIEWER",ImageViewer=__name(props=>{const{src}=props;return src?React.createElement("div",null,React.createElement("img",{src,alt:"Univer Image Viewer",style:{width:"100%",height:"100%",position:"relative"}})):null},"ImageViewer");var __defProp$4=Object.defineProperty,__getOwnPropDesc$4=Object.getOwnPropertyDescriptor,__decorateClass$4=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$4(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$4(target,key,result),result},"__decorateClass$4"),__decorateParam$4=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$4");let DrawingUIController=(_b=class extends core.Disposable{constructor(_componentManager,_commandService){super(),this._componentManager=_componentManager,this._commandService=_commandService,this._init()}_initCustomComponents(){const componentManager=this._componentManager;this.disposeWithMe(componentManager.register(COMPONENT_IMAGE_POPUP_MENU,ImagePopupMenu)),this.disposeWithMe(componentManager.register(COMPONENT_IMAGE_VIEWER,ImageViewer))}_initCommands(){[OpenImageCropOperation,CloseImageCropOperation,ImageResetSizeOperation,SetDrawingAlignOperation,AutoImageCropOperation].forEach(command=>this.disposeWithMe(this._commandService.registerCommand(command)))}_init(){this._initCommands(),this._initCustomComponents()}},__name(_b,"DrawingUIController"),_b);DrawingUIController=__decorateClass$4([__decorateParam$4(0,core.Inject(ui.ComponentManager)),__decorateParam$4(1,core.ICommandService)],DrawingUIController);var __defProp$3=Object.defineProperty,__getOwnPropDesc$3=Object.getOwnPropertyDescriptor,__decorateClass$3=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$3(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$3(target,key,result),result},"__decorateClass$3"),__decorateParam$3=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$3");let DrawingUpdateController=(_c=class extends core.Disposable{constructor(_currentUniverService,_commandService,_renderManagerService,_drawingManagerService){super();__publicField(this,"_sceneListenerOnDrawingMap",new WeakSet);this._currentUniverService=_currentUniverService,this._commandService=_commandService,this._renderManagerService=_renderManagerService,this._drawingManagerService=_drawingManagerService,this._initialize()}dispose(){super.dispose()}_initialize(){this._recoveryImages(),this._drawingAddListener(),this._drawingRemoveListener(),this._drawingUpdateListener(),this._commandExecutedListener(),this._drawingArrangeListener(),this._drawingGroupListener(),this._drawingRefreshListener(),this._drawingVisibleListener()}_recoveryImages(){const drawingList=this._drawingManagerService.drawingManagerData,info=getCurrentUnitInfo(this._currentUniverService);if(info==null)return;const{unitId:currentUnitId,subUnitId:currentSubUnitId}=info;Object.keys(drawingList).forEach(unitId=>{Object.keys(drawingList[unitId]).forEach(subUnitId=>{const drawingMap=drawingList[unitId][subUnitId].data;drawingMap==null\|\|unitId!==currentUnitId\|\|subUnitId!==currentSubUnitId\|\|Object.keys(drawingMap).forEach(drawingId=>{drawingMap[drawingId]&&this._insertDrawing([{unitId,subUnitId,drawingId}])})})})}_commandExecutedListener(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id===SetDrawingAlignOperation.id){const params=command.params;if(params==null)return;this._drawingAlign(params)}}))}_drawingGroupListener(){this.disposeWithMe(this._drawingManagerService.group$.subscribe(params=>{this._groupDrawings(params)})),this.disposeWithMe(this._drawingManagerService.ungroup$.subscribe(params=>{this._ungroupDrawings(params)}))}_getSceneAndTransformerByDrawingSearch(unitId){if(unitId==null)return;const renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return null;const transformer=scene.getTransformerByCreate();return{scene,transformer}}_groupDrawings(drawings){drawings.forEach(drawing2=>{this._groupDrawing(drawing2)})}_groupDrawing(params){const{parent,children}=params,{unitId,subUnitId,drawingId}=parent,renderObject=this._getSceneAndTransformerByDrawingSearch(parent.unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;this._commandService.syncExecuteCommand(CloseImageCropOperation.id);const objects=[];if(children.forEach(drawing$1=>{const drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch(drawing$1),object=scene.getObjectIncludeInGroup(drawingShapeKey);if(object==null\|\|objects.includes(object))return;objects.push(object);const{transform}=drawing$1;transform!=null&&(object.classType===engineRender.RENDER_CLASS_TYPE.GROUP?object.transformByState({left:transform.left,top:transform.top}):object.transformByState(transform))}),objects.length===0)return;const groupKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),group=new engineRender.Group(groupKey);scene.addObject(group,engineRender.DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(group),group.addObjects(...objects),parent.transform&&group.transformByState({left:parent.transform.left,top:parent.transform.top}),transformer.clearSelectedObjects(),transformer.setSelectedControl(group)}_ungroupDrawings(drawings){drawings.forEach(drawing2=>{this._ungroupDrawing(drawing2)})}_ungroupDrawing(drawing$1){const{parent,children}=drawing$1,renderObject=this._getSceneAndTransformerByDrawingSearch(parent.unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;children.forEach(drawing2=>{const drawingKey=drawing.getDrawingShapeKeyByDrawingSearch(drawing2),object=scene.getObjectIncludeInGroup(drawingKey);if(object==null)return!0;if(object==null)return;const{transform}=drawing2;transform!=null&&(object.classType===engineRender.RENDER_CLASS_TYPE.GROUP?object.transformByState({left:transform.left,top:transform.top}):object.transformByState(transform))});const groupKey=drawing.getDrawingShapeKeyByDrawingSearch(parent),group=scene.getObject(groupKey),{width,height}=group;group.getObjects().forEach(object=>{group.removeSelfObjectAndTransform(object.oKey,width,height)}),group.dispose(),transformer.clearSelectedObjects()}_drawingAlign(params){const{alignType}=params,drawings=this._drawingManagerService.getFocusDrawings();if(alignType===AlignType.default)return;const drawingTransformCaches=[];let minLeft=Number.POSITIVE_INFINITY,minTop=Number.POSITIVE_INFINITY,maxRight=Number.NEGATIVE_INFINITY,maxBottom=Number.NEGATIVE_INFINITY,drawingCount=0;drawings.forEach(drawing2=>{const{unitId,subUnitId,drawingId,drawingType}=drawing2,drawingParam=this._drawingManagerService.getDrawingByParam({unitId,subUnitId,drawingId});if(drawingParam==null\|\|drawingParam.transform==null)return;drawingTransformCaches.push({unitId,subUnitId,drawingId,drawingType,transform:drawingParam.transform});const{left=0,top=0,width=0,height=0}=drawingParam.transform;minLeft=Math.min(minLeft,left),minTop=Math.min(minTop,top),maxRight=Math.max(maxRight,left+width),maxBottom=Math.max(maxBottom,top+height),drawingCount++}),drawingCount!==0&&(this._sortDrawingTransform(drawingTransformCaches,alignType),this._applyAlignType(drawingTransformCaches,alignType,minLeft,minTop,maxRight,maxBottom,drawingCount))}_applyAlignType(drawingTransformCaches,alignType,minLeft,minTop,maxRight,maxBottom,drawingCount){const averageHorizon=Math.round((maxRight-minLeft)/drawingCount10)/10,averageVertical=Math.round((maxBottom-minTop)/drawingCount10)/10,updateParams=[],renderObject=this._getSceneAndTransformerByDrawingSearch(drawingTransformCaches[0].unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;drawingTransformCaches.forEach((drawingTransformCache,index)=>{const{unitId,subUnitId,drawingId,transform,drawingType}=drawingTransformCache,{left=0,top=0,width=0,height=0}=transform;let newLeft=left,newTop=top;switch(alignType){case AlignType.left:newLeft=minLeft;break;case AlignType.center:newLeft=minLeft+(maxRight-minLeft)/2-width/2;break;case AlignType.right:newLeft=maxRight-width;break;case AlignType.top:newTop=minTop;break;case AlignType.middle:newTop=minTop+(maxBottom-minTop)/2-height/2;break;case AlignType.bottom:newTop=maxBottom-height;break;case AlignType.horizon:newLeft=minLeft+averageHorizonindex;break;case AlignType.vertical:newTop=minTop+averageVerticalindex;break}(newLeft!==left\|\|newTop!==top)&&updateParams.push({unitId,subUnitId,drawingId,drawingType,transform:{left:newLeft,top:newTop}})}),this._drawingManagerService.featurePluginUpdateNotification(updateParams),transformer.refreshControls().changeNotification()}_sortDrawingTransform(drawingTransformCaches,alignType){drawingTransformCaches.sort((a,b)=>{const aTransform=a.transform,bTransform=b.transform,{left:aLeft=0,top:aTop=0,width:aWidth=0,height:aHeight=0}=aTransform,{left:bLeft=0,top:bTop=0,width:bWidth=0,height:bHeight=0}=bTransform;switch(alignType){case AlignType.left:return aLeft-bLeft;case AlignType.center:return aLeft+aWidth/2-(bLeft+bWidth/2);case AlignType.right:return aLeft+aWidth-(bLeft+bWidth);case AlignType.top:return aTop-bTop;case AlignType.middle:return aTop+aHeight/2-(bTop+bHeight/2);case AlignType.bottom:return aTop+aHeight-(bTop+bHeight);case AlignType.horizon:return aLeft+aWidth/2-(bLeft+bWidth/2);case AlignType.vertical:return aTop+aHeight/2-(bTop+bHeight/2);default:return 0}})}_drawingArrangeListener(){this.disposeWithMe(this._drawingManagerService.order$.subscribe(params=>{this._drawingArrange(params)}))}_drawingArrange(params){const{unitId,subUnitId,drawingIds}=params,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject;drawingIds.forEach(drawingId=>{const oKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShapes=scene.fuzzyMathObjects(oKey,!0);if(drawingShapes==null\|\|drawingShapes.length===0)return;const index=this._drawingManagerService.getDrawingOrder(unitId,subUnitId).indexOf(drawingId);for(const shape of drawingShapes)shape.setProps({zIndex:index}),shape.makeDirty()})}_drawingAddListener(){this.disposeWithMe(this._drawingManagerService.add$.subscribe(params=>{this._insertDrawing(params)}))}_insertDrawing(params){const sceneList=[];params.forEach(param=>{const{unitId}=param;if(this._drawingManagerService.getDrawingByParam(param)==null)return;const renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject;sceneList.includes(scene)\|\|sceneList.push(scene)}),sceneList.forEach(scene=>{this._sceneListenerOnDrawingMap.has(scene)\|\|(this._addListenerOnDrawing(scene),this._sceneListenerOnDrawingMap.add(scene))})}_drawingRemoveListener(){this.disposeWithMe(this._drawingManagerService.remove$.subscribe(params=>{params.forEach(param=>{var _a2;const{unitId,subUnitId,drawingId}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject,drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShapes=scene.fuzzyMathObjects(drawingShapeKey,!0);if(drawingShapes.length>0){for(const drawingShape of drawingShapes)drawingShape.dispose();(_a2=scene.getTransformer())==null\|\|_a2.clearSelectedObjects()}})}))}_drawingUpdateListener(){this.disposeWithMe(this._drawingManagerService.update$.subscribe(params=>{params.forEach(param=>{const{unitId,subUnitId,drawingId}=param,drawingParam=this._drawingManagerService.getDrawingByParam(param);if(drawingParam==null)return;const{transform,drawingType}=drawingParam,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;if(transform==null)return!0;const{left=0,top=0,width=0,height=0,angle=0,flipX=!1,flipY=!1,skewX=0,skewY=0}=transform,drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShape=scene.getObject(drawingShapeKey);if(drawingShape==null)return!0;drawingShape.transformByState({left,top,width,height,angle,flipX,flipY,skewX,skewY})})}))}_drawingRefreshListener(){this.disposeWithMe(this._drawingManagerService.refreshTransform$.subscribe(params=>{params.forEach(param=>{const{unitId,subUnitId,drawingId}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const drawingParam=this._drawingManagerService.getDrawingByParam(param);if(drawingParam==null)return;const{transform}=drawingParam,{scene}=renderObject,drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShape=scene.getObject(drawingShapeKey);if(drawingShape==null\|\|transform==null)return!0;const{left=0,top=0,width=0,height=0,angle=0,flipX=!1,flipY=!1,skewX=0,skewY=0}=transform;drawingShape.transformByState({left,top,width,height,angle,flipX,flipY,skewX,skewY})})}))}_drawingVisibleListener(){this.disposeWithMe(this._drawingManagerService.visible$.subscribe(params=>{params.forEach(param=>{const{unitId,subUnitId,drawingId,visible}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject,drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShape=scene.getObject(drawingShapeKey);if(drawingShape==null)return!0;visible?drawingShape.show():drawingShape.hide()})}))}_filterUpdateParams(params,startTransforms){return params.filter((param,index)=>{if(param==null)return!1;const{transform}=param;return core.checkIfMove(transform,startTransforms==null?void 0:startTransforms[index])})}_addListenerOnDrawing(scene){const transformer=scene.getTransformerByCreate();let startTransforms=null;this.disposeWithMe(core.toDisposable(transformer.changeStart$.subscribe(state=>{const{objects}=state,objectArray=Array.from(objects.values()),drawings=[];startTransforms=objectArray.map(object=>{const{left,top,height,width,angle,oKey,isInGroup}=object,drawing2=this._drawingManagerService.getDrawingOKey(oKey);if(isInGroup\|\|object instanceof engineRender.Group){let group=object.ancestorGroup;if(group==null&&object instanceof engineRender.Group&&(group=object),group==null)return null;const groupDrawing=this._drawingManagerService.getDrawingOKey(group.oKey);if(groupDrawing){const{unitId,subUnitId,drawingId}=groupDrawing;drawings.push({unitId,subUnitId,drawingId});const{left:left2,top:top2,height:height2,width:width2,angle:angle2}=group;return{left:left2,top:top2,height:height2,width:width2,angle:angle2}}}else if(drawing2!=null){const{unitId,subUnitId,drawingId}=drawing2;return drawings.push({unitId,subUnitId,drawingId}),{left,top,height,width,angle}}return null}).filter(transform=>transform!=null),drawings.length>0?this._drawingManagerService.focusDrawing(drawings):this._drawingManagerService.focusDrawing(null)}))),this.disposeWithMe(core.toDisposable(transformer.changeEnd$.subscribe(state=>{const{objects}=state,params=this._filterUpdateParams(getUpdateParams(objects,this._drawingManagerService),startTransforms);params.length>0&&this._drawingManagerService.featurePluginUpdateNotification(params)})))}},__name(_c,"DrawingUpdateController"),_c);DrawingUpdateController=__decorateClass$3([__decorateParam$3(0,core.IUniverInstanceService),__decorateParam$3(1,core.ICommandService),__decorateParam$3(2,engineRender.IRenderManagerService),__decorateParam$3(3,drawing.IDrawingManagerService)],DrawingUpdateController);const _ImageCropperObject=class _ImageCropperObject extends engineRender.Shape{constructor(key,props){props==null&&(props={}),props.transformerConfig={keepRatio:!1,isCropper:!0,anchorFill:"rgb(0, 0, 0)",anchorStroke:"rgb(255, 255, 255)",anchorSize:24};super(key,props);__publicField(this,"_srcRect");__publicField(this,"_prstGeom");__publicField(this,"_applyTransform");__publicField(this,"_dragPadding",8);__publicField(this,"_cacheCanvas");props!=null&&props.srcRect&&(this._srcRect=props.srcRect),props!=null&&props.prstGeom&&(this._prstGeom=props.prstGeom),props!=null&&props.applyTransform&&(this._applyTransform=props.applyTransform),props!=null&&props.dragPadding&&(this._dragPadding=props.dragPadding),this._applyProps()}refreshSrcRect(value,transform){this._srcRect=value,this._applyTransform=transform,this._applyProps()}get srcRect(){return this._srcRect}dispose(){var _a2;super.dispose(),(_a2=this._cacheCanvas)==null\|\|_a2.dispose(),this._srcRect=null}isHit(coord){const oCoord=this.getInverseCoord(coord);return oCoord.x>=-this.strokeWidth/2&&oCoord.x<=this.width+this.strokeWidth/2&&oCoord.y>=-this.strokeWidth/2&&oCoord.y<=this.height+this.strokeWidth/2&&!this._inSurround(oCoord)}_inSurround(oCoord){const padding=this._dragPadding;return oCoord.x>=padding-this.strokeWidth/2&&oCoord.x<=this.width+this.strokeWidth/2-padding&&oCoord.y>=padding-this.strokeWidth/2&&oCoord.y<=this.height+this.strokeWidth/2-padding}render(mainCtx,bounds){return this.visible?(mainCtx.save(),this._draw(mainCtx),mainCtx.restore(),this.makeDirty(!1),this):(this.makeDirty(!1),this)}_draw(ctx){var _a2,_b2;const engine=this.getScene().getEngine(),{width:engineWidth,height:engineHeight}=engine;this._initialCacheCanvas(),(_a2=this._cacheCanvas)==null\|\|_a2.clear();const cacheCtx=(_b2=this._cacheCanvas)==null?void 0:_b2.getContext();cacheCtx!=null&&(cacheCtx.save(),engineRender.Rect.drawWith(cacheCtx,{left:0,top:0,width:engineWidth,height:engineHeight,fill:"rgba(0, 0, 0, 0.5)"}),cacheCtx.setTransform(ctx.getTransform()),this._clipForApplyObject(cacheCtx),this._applyCache(ctx),cacheCtx.restore())}_clipForApplyObject(cacheCtx){let objectType=0;if(this._prstGeom!=null&&(objectType=1),cacheCtx.globalCompositeOperation="destination-out",cacheCtx.beginPath(),objectType===0){const m=this.transform.getMatrix();cacheCtx.transform(m[0],m[1],m[2],m[3],m[4],m[5]),cacheCtx.rect(0,0,this.width,this.height),cacheCtx.fill()}}_applyProps(){if(this._applyTransform==null)return;let cropLeft=0,cropTop=0,cropRight=0,cropBottom=0;const{left:applyLeft=0,top:applyTop=0,width:applyWidth=0,height:applyHeight=0,angle}=this._applyTransform;if(this._srcRect!=null){const{left:left2=0,top:top2=0,right=0,bottom=0}=this._srcRect;cropLeft=left2,cropTop=top2,cropRight=right,cropBottom=bottom}const left=applyLeft+cropLeft,top=applyTop+cropTop;this.transformByState({left,top,width:applyLeft+applyWidth-cropRight-left,height:applyTop+applyHeight-cropBottom-top,angle})}_applyCache(ctx){if(!ctx\|\|this._cacheCanvas==null)return;const cacheCtx=this._cacheCanvas.getContext();cacheCtx.save(),ctx.save(),ctx.setTransform(1,0,0,1,0,0),cacheCtx.setTransform(1,0,0,1,0,0),ctx.drawImage(this._cacheCanvas.getCanvasEle(),0,0),ctx.restore(),cacheCtx.restore()}_initialCacheCanvas(){if(this._cacheCanvas!=null)return;const scene=this.getScene();if(scene==null)return;this._cacheCanvas=new engineRender.Canvas;const engine=scene.getEngine();this._cacheCanvas.setSize(engine.width,engine.height),engine.onTransformChange$.subscribeEvent(()=>{var _a2;(_a2=this._cacheCanvas)==null\|\|_a2.setSize(engine.width,engine.height),this.makeDirty(!0)})}};__name(_ImageCropperObject,"ImageCropperObject");let ImageCropperObject=_ImageCropperObject;var __defProp$2=Object.defineProperty,__getOwnPropDesc$2=Object.getOwnPropertyDescriptor,__decorateClass$2=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$2(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$2(target,key,result),result},"__decorateClass$2"),__decorateParam$2=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$2");let ImageCropperController=(_d=class extends core.Disposable{constructor(_commandService,_drawingManagerService,_renderManagerService,_univerInstanceService,_messageService,_localeService){super();__publicField(this,"_sceneListenerOnImageMap",new WeakSet);this._commandService=_commandService,this._drawingManagerService=_drawingManagerService,this._renderManagerService=_renderManagerService,this._univerInstanceService=_univerInstanceService,this._messageService=_messageService,this._localeService=_localeService,this._init()}_init(){this._initOpenCrop(),this._initCloseCrop(),this._initAutoCrop()}_initAutoCrop(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id!==AutoImageCropOperation.id)return;const params=command.params;if(params==null)return;const{cropType}=params,drawingParams=this._drawingManagerService.getFocusDrawings();if(drawingParams.length!==1)return;const drawingParam=drawingParams[0],{unitId,subUnitId,drawingId}=drawingParam,renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return!0;this._searchCropObject(scene)!=null&&this._commandService.syncExecuteCommand(CloseImageCropOperation.id,{isAuto:!0});const imageShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),imageShape=scene.getObject(imageShapeKey);if(!(imageShape instanceof engineRender.Image)){this._messageService.show({type:design.MessageType.Error,content:this._localeService.t("image-cropper.error")});return}imageShape!=null&&(this._updateCropperObject(cropType,imageShape),this._commandService.executeCommand(OpenImageCropOperation.id,{unitId,subUnitId,drawingId}))}))}_calculateSrcRectByRatio(left,top,width,height,numerator,denominator){const srcRatio=width/height,ratio=numerator/denominator;let newWidth=width,newHeight=height;srcRatio>ratio?newWidth=heightratio:newHeight=width/ratio;const newLeft=(width-newWidth)/2,newTop=(height-newHeight)/2;return{left:engineRender.precisionTo(newLeft,1),top:engineRender.precisionTo(newTop,1),right:engineRender.precisionTo(width-(newLeft+newWidth),1),bottom:engineRender.precisionTo(height-(newTop+newHeight),1)}}_updateCropperObject(cropType,imageShape){const{left,top,width,height}=imageShape.calculateTransformWithSrcRect();let newSrcRect;switch(cropType){case CropType.R1_1:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,1,1);break;case CropType.R16_9:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,16,9);break;case CropType.R9_16:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,9,16);break;case CropType.R5_4:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,5,4);break;case CropType.R4_5:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,4,5);break;case CropType.R4_3:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,4,3);break;case CropType.R3_4:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,3,4);break;case CropType.R3_2:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,3,2);break;case CropType.R2_3:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,2,3);break;case CropType.FREE:}if(newSrcRect==null)return;imageShape.setSrcRect(newSrcRect);const{left:newLeft=0,top:newTop=0,bottom:newBottom=0,right:newRight=0}=newSrcRect;imageShape.transformByStateCloseCropper({left:left+newLeft,top:top+newTop,width:width-newRight-newLeft,height:height-newBottom-newTop})}_initOpenCrop(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id!==OpenImageCropOperation.id)return;const params=command.params;if(params==null)return;const{unitId,subUnitId,drawingId}=params,renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return!0;if(this._sceneListenerOnImageMap.has(scene)\|\|(this._addListenerOnImage(scene),this._sceneListenerOnImageMap.add(scene)),this._drawingManagerService.getDrawingByParam({unitId,subUnitId,drawingId})==null)return;const imageShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),imageShape=scene.getObject(imageShapeKey);if(imageShape==null)return;if(!(imageShape instanceof engineRender.Image)){this._messageService.show({type:design.MessageType.Error,content:this._localeService.t("image-cropper.error")});return}const transformer=scene.getTransformer();transformer==null\|\|transformer.clearControls();const imageCropperObject=new ImageCropperObject(`${imageShapeKey}-crop`,{srcRect:imageShape.srcRect,prstGeom:imageShape.prstGeom,applyTransform:imageShape.calculateTransformWithSrcRect()});scene.addObject(imageCropperObject,imageShape.getLayerIndex()+1).attachTransformerTo(imageCropperObject),transformer==null\|\|transformer.createControlForCopper(imageCropperObject),this._addHoverForImageCopper(imageCropperObject),imageShape.openRenderByCropper(),transformer==null\|\|transformer.refreshControls(),imageCropperObject.makeDirty(!0),this._drawingManagerService.focusDrawing([{unitId,subUnitId,drawingId}])}))}_searchCropObject(scene){const objects=scene.getAllObjectsByOrder();for(const object of objects)if(object instanceof ImageCropperObject)return object}_initCloseCrop(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id!==CloseImageCropOperation.id)return;const currentUnit=this._univerInstanceService.getFocusedUnit();if(currentUnit==null)return;const unitId=currentUnit.getUnitId(),renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return!0;const imageCropperObject=this._searchCropObject(scene);if(imageCropperObject==null)return;const imageShape=this._getApplyObjectByCropObject(imageCropperObject);if(imageShape==null)return;const transformer=scene.getTransformerByCreate();transformer.detachFrom(imageCropperObject),transformer.clearCopperControl();const srcRect=this._getSrcRectByTransformState(imageShape,imageCropperObject),drawingParam=this._drawingManagerService.getDrawingOKey(imageShape.oKey);if(drawingParam!=null){const{left,top,height,width}=imageCropperObject;this._drawingManagerService.featurePluginUpdateNotification([{...drawingParam,transform:{...drawingParam.transform,left,top,height,width},srcRect:srcRect.srcRectAngle}])}imageShape.setSrcRect({...srcRect.srcRectAngle}),imageShape.closeRenderByCropper(),imageShape.makeDirty(!0),imageCropperObject==null\|\|imageCropperObject.dispose()}));const sheetUnit=this._univerInstanceService.getCurrentTypeOfUnit$(core.UniverInstanceType.UNIVER_SHEET).pipe(rxjs.filter(workbook=>!!workbook),rxjs.switchMap(workbook=>workbook.activeSheet$));this.disposeWithMe(sheetUnit.subscribe(()=>{this._commandService.syncExecuteCommand(CloseImageCropOperation.id)}))}_getApplyObjectByCropObject(cropObject){const cropOKey=cropObject.oKey,applyOKey=cropOKey.slice(0,cropOKey.length-5),scene=cropObject.getScene();if(!scene)return null;const applyObject=scene.getObject(applyOKey);return applyObject==null?null:applyObject}_addListenerOnImage(scene){const transformer=scene.getTransformerByCreate();let startTransform=null;this.disposeWithMe(transformer.changeStart$.subscribe(state=>{const{objects}=state,cropObject=objects.values().next().value;if(cropObject==null\|\|!(cropObject instanceof ImageCropperObject))return;const{left,top,height,width,angle}=cropObject;startTransform={left,top,height,width,angle},transformer.clearCopperControl()})),this.disposeWithMe(transformer.changeEnd$.subscribe(state=>{const{objects}=state,cropObject=objects.values().next().value;if(cropObject==null\|\|!(cropObject instanceof ImageCropperObject))return;const{left,top,height,width,angle}=cropObject;if(!core.checkIfMove({left,top,height,width,angle},startTransform))return;const applyObject=this._getApplyObjectByCropObject(cropObject);if(applyObject==null)return;const srcRect=this._getSrcRectByTransformState(applyObject,cropObject);cropObject.refreshSrcRect(srcRect.srcRect,applyObject.getState()),transformer.createControlForCopper(cropObject)})),this._endCropListener(scene)}_addHoverForImageCopper(o){this.disposeWithMe(o.onPointerEnter$.subscribeEvent(()=>{o.cursor=engineRender.CURSOR_TYPE.MOVE})),this.disposeWithMe(o.onPointerLeave$.subscribeEvent(()=>{o.cursor=engineRender.CURSOR_TYPE.DEFAULT}))}_endCropListener(scene){const transformer=scene.getTransformerByCreate();this.disposeWithMe(transformer.clearControl$.subscribe(changeSelf=>{changeSelf===!0&&this._commandService.syncExecuteCommand(CloseImageCropOperation.id)}))}_getSrcRectByTransformState(applyObject,imageCropperObject){const{left,top,height,width,strokeWidth,angle:copperAngle}=imageCropperObject,{left:applyLeft,top:applyTop,width:applyWidth,height:applyHeight,angle:applyAngle,strokeWidth:applyStrokeWidth}=applyObject,newLeft=left-applyLeft,newTop=top-applyTop,srcRect={left:newLeft,top:newTop,right:applyWidth-newLeft-width,bottom:applyHeight-newTop-height},srcRectAngle={...srcRect};if(applyAngle!==0){const cx=left+width/2,cy=top+height/2,centerPoint=new engineRender.Vector2(cx,cy),newCx=applyWidth/2+applyLeft,newCy=applyHeight/2+applyTop,newCenterPoint=new engineRender.Vector2(newCx,newCy),vertexPoint=new engineRender.Vector2(applyLeft,applyTop);vertexPoint.rotateByPoint(engineRender.degToRad(applyAngle),newCenterPoint);const applyFinalPoint=vertexPoint.clone();applyFinalPoint.rotateByPoint(engineRender.degToRad(-applyAngle),centerPoint);const newAngleLeft=left-applyFinalPoint.x,newAngleTop=top-applyFinalPoint.y;srcRectAngle.left=newAngleLeft,srcRectAngle.top=newAngleTop,srcRectAngle.right=applyWidth-newAngleLeft-width,srcRectAngle.bottom=applyHeight-newAngleTop-height}return{srcRect,srcRectAngle}}},__name(_d,"ImageCropperController"),_d);ImageCropperController=__decorateClass$2([__decorateParam$2(0,core.ICommandService),__decorateParam$2(1,drawing.IDrawingManagerService),__decorateParam$2(2,engineRender.IRenderManagerService),__decorateParam$2(3,core.IUniverInstanceService),__decorateParam$2(4,ui.IMessageService),__decorateParam$2(5,core.Inject(core.LocaleService))],ImageCropperController);var __defProp$1=Object.defineProperty,__getOwnPropDesc$1=Object.getOwnPropertyDescriptor,__decorateClass$1=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$1(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$1(target,key,result),result},"__decorateClass$1"),__decorateParam$1=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$1");const IMAGE_VIEWER_DROPDOWN_PADDING=50;let ImageUpdateController=(_e=class extends core.Disposable{constructor(_commandService,_renderManagerService,_drawingManagerService,_dialogService,_imageIoService,_currentUniverService,_drawingRenderService){super(),this._commandService=_commandService,this._renderManagerService=_renderManagerService,this._drawingManagerService=_drawingManagerService,this._dialogService=_dialogService,this._imageIoService=_imageIoService,this._currentUniverService=_currentUniverService,this._drawingRenderService=_drawingRenderService,this._initialize()}dispose(){super.dispose()}_initialize(){this._drawingAddListener(),this._commandExecutedListener(),this._imageUpdateListener()}_commandExecutedListener(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id===ImageResetSizeOperation.id){const params=command.params;if(params==null)return;this._resetImageSize(params)}}))}_getSceneAndTransformerByDrawingSearch(unitId){if(unitId==null)return;const renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return null;const transformer=scene.getTransformerByCreate();return{scene,transformer}}_resetImageSize(params){const updateParams=[],sceneList=[];params.forEach(param=>{const{unitId,subUnitId,drawingId}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject,imageShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),imageShape=scene.getObject(imageShapeKey);if(imageShape==null)return!0;const imageData=this._drawingManagerService.getDrawingByParam(param);if(imageData==null)return!0;if(imageData.drawingType!==drawing.DrawingTypeEnum.DRAWING_IMAGE)return;imageShape.resetSize();const{width,height}=imageShape.getNativeSize();sceneList.includes(scene)===!1&&sceneList.push(scene),updateParams.push({...imageData,transform:{...imageData.transform,height,width,angle:0},srcRect:null,prstGeom:null})}),this._drawingManagerService.featurePluginUpdateNotification(updateParams),sceneList.forEach(scene=>{scene.getTransformerByCreate().refreshControls().changeNotification()}),this._drawingManagerService.focusDrawing(params)}_drawingAddListener(){this.disposeWithMe(this._drawingManagerService.add$.subscribe(params=>{this._insertImages(params)}))}_insertImages(params){params.forEach(async param=>{var _a2;const{unitId,subUnitId,drawingId}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId),currentSubUnitId=(_a2=getCurrentUnitInfo(this._currentUniverService,unitId))==null?void 0:_a2.subUnitId;if(renderObject==null\|\|currentSubUnitId!==subUnitId)return;const imageParam=this._drawingManagerService.getDrawingByParam(param);if(imageParam==null)return;const images=await this._drawingRenderService.renderImages(imageParam,renderObject.scene);if(!(images==null\|\|images.length===0))for(const image of images)this._addHoverForImage(image),this._addDialogForImage(image)})}_imageUpdateListener(){this.disposeWithMe(this._drawingManagerService.update$.subscribe(params=>{params.forEach(param=>{const{unitId,subUnitId,drawingId}=param,drawingParam=this._drawingManagerService.getDrawingByParam(param);if(drawingParam==null)return;const{transform,drawingType,srcRect,prstGeom,source,imageSourceType}=drawingParam;if(drawingType!==drawing.DrawingTypeEnum.DRAWING_IMAGE)return;const renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;if(transform==null)return!0;const drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),imageShape=scene.getObject(drawingShapeKey);if(imageShape==null)return!0;imageShape.setSrcRect(srcRect),imageShape.setPrstGeom(prstGeom)})}))}_addHoverForImage(o){this.disposeWithMe(core.toDisposable(o.onPointerEnter$.subscribeEvent(()=>{o.cursor=engineRender.CURSOR_TYPE.GRAB}))),this.disposeWithMe(core.toDisposable(o.onPointerLeave$.subscribeEvent(()=>{o.cursor=engineRender.CURSOR_TYPE.DEFAULT})))}_addDialogForImage(o){this.disposeWithMe(core.toDisposable(o.onDblclick$.subscribeEvent(()=>{var _a2;const dialogId=`${o.oKey}-viewer-dialog`,nativeSize=o.getNativeSize(),screenWidth=window.innerWidth-IMAGE_VIEWER_DROPDOWN_PADDING,screenHeight=window.innerHeight-IMAGE_VIEWER_DROPDOWN_PADDING,adjustSize=this._adjustImageSize(nativeSize.width,nativeSize.height,screenWidth,screenHeight),dialog=this._dialogService.open({width:adjustSize.width,id:dialogId,style:{margin:"0",top:"50%",left:"50%",transform:"translate(-50%, -50%)"},children:{label:{name:COMPONENT_IMAGE_VIEWER,props:{src:(_a2=o.getNative())==null?void 0:_a2.src,width:adjustSize.width,height:adjustSize.height}}},destroyOnClose:!0,draggable:!1,onClose:__name(()=>{this._dialogService.close(dialogId),dialog.dispose()},"onClose")})})))}_adjustImageSize(nativeWidth,nativeHeight,screenWidth,screenHeight){if(nativeWidth<=screenWidth&&nativeHeight<=screenHeight)return{width:nativeWidth,height:nativeHeight};const widthRatio=screenWidth/nativeWidth,heightRatio=screenHeight/nativeHeight,scale=Math.min(widthRatio,heightRatio);return{width:Math.floor(nativeWidthscale),height:Math.floor(nativeHeightscale)}}},__name(_e,"ImageUpdateController"),_e);ImageUpdateController=__decorateClass$1([__decorateParam$1(0,core.ICommandService),__decorateParam$1(1,engineRender.IRenderManagerService),__decorateParam$1(2,drawing.IDrawingManagerService),__decorateParam$1(3,ui.IDialogService),__decorateParam$1(4,drawing.IImageIoService),__decorateParam$1(5,core.IUniverInstanceService),__decorateParam$1(6,core.Inject(exports2.DrawingRenderService))],ImageUpdateController);var __defProp2=Object.defineProperty,__getOwnPropDesc=Object.getOwnPropertyDescriptor,__decorateClass=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp2(target,key,result),result},"__decorateClass"),__decorateParam=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam");const PLUGIN_NAME="UNIVER_DRAWING_UI_PLUGIN";exports2.UniverDrawingUIPlugin=(_f=class extends core.Plugin{constructor(_config=defaultPluginConfig,_injector,_configService){super(),this._config=_config,this._injector=_injector,this._configService=_configService;const{menu,...rest}=this._config;menu&&this._configService.setConfig("menu",menu,{merge:!0}),this._configService.setConfig(PLUGIN_CONFIG_KEY,rest)}onStarting(){this._initDependencies()}onRendered(){this._injector.get(DrawingUpdateController),this._injector.get(DrawingUIController),this._injector.get(ImageCropperController),this._injector.get(ImageUpdateController)}_initDependencies(){[[exports2.DrawingRenderService],[DrawingUpdateController],[DrawingUIController],[ImageCropperController],[ImageUpdateController]].forEach(dependency=>this._injector.add(dependency))}},__name(_f,"UniverDrawingUIPlugin"),__publicField(_f,"pluginName",PLUGIN_NAME),_f),exports2.UniverDrawingUIPlugin=__decorateClass([__decorateParam(1,core.Inject(core.Injector)),__decorateParam(2,core.IConfigService)],exports2.UniverDrawingUIPlugin),exports2.AutoImageCropOperation=AutoImageCropOperation,exports2.COMPONENT_IMAGE_POPUP_MENU=COMPONENT_IMAGE_POPUP_MENU,exports2.CloseImageCropOperation=CloseImageCropOperation,exports2.DrawingCommonPanel=DrawingCommonPanel,exports2.ImageCropperObject=ImageCropperObject,exports2.ImagePopupMenu=ImagePopupMenu,exports2.ImageResetSizeOperation=ImageResetSizeOperation,exports2.OpenImageCropOperation=OpenImageCropOperation,exports2.SetDrawingAlignOperation=SetDrawingAlignOperation,exports2.getUpdateParams=getUpdateParams,Object.defineProperty(exports2,Symbol.toStringTag,{value:"Module"})});
1	+ (function(global,factory){typeof exports=="object"&&typeof module<"u"?factory(exports,require("@univerjs/drawing"),require("@univerjs/engine-render"),require("@univerjs/core"),require("react"),require("@univerjs/design"),require("@univerjs/ui"),require("rxjs")):typeof define=="function"&&define.amd?define(["exports","@univerjs/drawing","@univerjs/engine-render","@univerjs/core","react","@univerjs/design","@univerjs/ui","rxjs"],factory):(global=typeof globalThis<"u"?globalThis:global\|\|self,factory(global.UniverDrawingUi={},global.UniverDrawing,global.UniverEngineRender,global.UniverCore,global.React,global.UniverDesign,global.UniverUi,global.rxjs))})(this,function(exports2,drawing,engineRender,core,React,design,ui,rxjs){"use strict";var __defProp=Object.defineProperty;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value;var __name=(target,value)=>__defProp(target,"name",{value,configurable:!0});var __publicField=(obj,key,value)=>__defNormalProp(obj,typeof key!="symbol"?key+"":key,value);var _a,_b,_c,_d,_e,_f;function insertGroupObject(objectParam,object,scene,drawingManagerService){const groupParam=drawingManagerService.getDrawingByParam(objectParam);if(groupParam==null)return;const groupKey=drawing.getDrawingShapeKeyByDrawingSearch(objectParam),groupObject=scene.getObject(groupKey);if(groupObject&&!(groupObject instanceof engineRender.Group))return;if(groupObject!=null){groupObject.addObject(object);return}const group=new engineRender.Group(groupKey);scene.addObject(group,engineRender.DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(group),group.addObject(object);const{transform}=groupParam;transform&&group.transformByState({left:transform.left,top:transform.top,angle:transform.angle})}__name(insertGroupObject,"insertGroupObject");function getCurrentUnitInfo(currentUniverService,propUnitId){var _a2;const current=propUnitId?currentUniverService.getUnit(propUnitId):currentUniverService.getFocusedUnit();if(current==null)return;const unitId=current.getUnitId();let subUnitId;return current.type===core.UniverInstanceType.UNIVER_SHEET?subUnitId=(_a2=current.getActiveSheet())==null?void 0:_a2.getSheetId():(current.type===core.UniverInstanceType.UNIVER_DOC\|\|current.type===core.UniverInstanceType.UNIVER_SLIDE)&&(subUnitId=unitId),{unitId,subUnitId,current}}__name(getCurrentUnitInfo,"getCurrentUnitInfo");var __defProp$5=Object.defineProperty,__getOwnPropDesc$5=Object.getOwnPropertyDescriptor,__decorateClass$5=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$5(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$5(target,key,result),result},"__decorateClass$5"),__decorateParam$5=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$5");exports2.DrawingRenderService=(_a=class{constructor(_drawingManagerService,_imageIoService){this._drawingManagerService=_drawingManagerService,this._imageIoService=_imageIoService}async renderImages(imageParam,scene){const{transform:singleTransform,drawingType,source,imageSourceType,srcRect,prstGeom,groupId,unitId,subUnitId,drawingId,isMultiTransform,transforms:multiTransforms}=imageParam;if(drawingType!==drawing.DrawingTypeEnum.DRAWING_IMAGE\|\|!this._drawingManagerService.getDrawingVisible()\|\|singleTransform==null)return;const transforms=isMultiTransform&&multiTransforms?multiTransforms:[singleTransform],images=[];for(const transform of transforms){const{left,top,width,height,angle,flipX,flipY,skewX,skewY}=transform,index=transforms.indexOf(transform),imageShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId},isMultiTransform?index:void 0),imageShape=scene.getObject(imageShapeKey);if(imageShape!=null){imageShape.transformByState({left,top,width,height,angle,flipX,flipY,skewX,skewY});continue}const orders=this._drawingManagerService.getDrawingOrder(unitId,subUnitId),zIndex=orders.indexOf(drawingId),imageConfig={...transform,zIndex:zIndex===-1?orders.length-1:zIndex},imageNativeCache=this._imageIoService.getImageSourceCache(source,imageSourceType);let shouldBeCache=!1;if(imageNativeCache!=null)imageConfig.image=imageNativeCache;else{if(imageSourceType===drawing.ImageSourceType.UUID)try{imageConfig.url=await this._imageIoService.getImage(source)}catch(error){console.error(error);continue}else imageConfig.url=source;shouldBeCache=!0}if(scene.getObject(imageShapeKey))continue;imageConfig.printable=!0;const image=new engineRender.Image(imageShapeKey,imageConfig);if(shouldBeCache&&this._imageIoService.addImageSourceCache(source,imageSourceType,image.getNative()),!this._drawingManagerService.getDrawingVisible())continue;const imageObject=scene.addObject(image,engineRender.DRAWING_OBJECT_LAYER_INDEX);this._drawingManagerService.getDrawingEditable()&&imageObject.attachTransformerTo(image),groupId&&insertGroupObject({drawingId:groupId,unitId,subUnitId},image,scene,this._drawingManagerService),prstGeom!=null&&image.setPrstGeom(prstGeom),srcRect!=null&&image.setSrcRect(srcRect),images.push(image)}return images}renderDrawing(param,scene){const drawingParam=this._drawingManagerService.getDrawingByParam(param);if(drawingParam!=null)switch(drawingParam.drawingType){case drawing.DrawingTypeEnum.DRAWING_IMAGE:return this.renderImages(drawingParam,scene)}}},__name(_a,"DrawingRenderService"),_a),exports2.DrawingRenderService=__decorateClass$5([__decorateParam$5(0,drawing.IDrawingManagerService),__decorateParam$5(1,drawing.IImageIoService)],exports2.DrawingRenderService);function getUpdateParams(objects,drawingManagerService){const params=[];return objects.forEach(object=>{const{oKey,left,top,height,width,angle}=object,searchParam=drawingManagerService.getDrawingOKey(oKey);if(searchParam==null)return params.push(null),!0;const{unitId,subUnitId,drawingId,drawingType}=searchParam,param={unitId,subUnitId,drawingId,drawingType,transform:{left,top,height,width,angle}};drawingType===drawing.DrawingTypeEnum.DRAWING_IMAGE&&(param.srcRect=object.srcRect),params.push(param)}),params}__name(getUpdateParams,"getUpdateParams");var __assign=function(){return __assign=Object.assign\|\|function(t){for(var s,i=1,n=arguments.length;i<n;i++){s=arguments[i];for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p])}return t},__assign.apply(this,arguments)},__rest=function(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(s!=null&&typeof Object.getOwnPropertySymbols=="function")for(var i=0,p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]]);return t},IconBase=React.forwardRef(function(props,ref){var icon=props.icon,id=props.id,className=props.className,extend=props.extend,restProps=__rest(props,["icon","id","className","extend"]),cls="univerjs-icon univerjs-icon-".concat(id," ").concat(className\|\|"").trim(),idSuffix=React.useRef("_".concat(generateShortUuid()));return render(icon,"".concat(id),{defIds:icon.defIds,idSuffix:idSuffix.current},__assign({ref,className:cls},restProps),extend)});function render(node,id,runtimeProps,rootProps,extend){return React.createElement(node.tag,__assign(__assign({key:id},replaceRuntimeIdsAndExtInAttrs(node,runtimeProps,extend)),rootProps),(replaceRuntimeIdsInDefs(node,runtimeProps).children\|\|[]).map(function(child,index){return render(child,"".concat(id,"-").concat(node.tag,"-").concat(index),runtimeProps,void 0,extend)}))}__name(render,"render");function replaceRuntimeIdsAndExtInAttrs(node,runtimeProps,extend){var attrs=__assign({},node.attrs);extend!=null&&extend.colorChannel1&&attrs.fill==="colorChannel1"&&(attrs.fill=extend.colorChannel1);var defIds=runtimeProps.defIds;return!defIds\|\|defIds.length===0\|\|(node.tag==="use"&&attrs["xlink:href"]&&(attrs["xlink:href"]=attrs["xlink:href"]+runtimeProps.idSuffix),Object.entries(attrs).forEach(function(_a2){var key=_a2[0],value=_a2[1];typeof value=="string"&&(attrs[key]=value.replace(/url$#(.)$/,"url(#$1".concat(runtimeProps.idSuffix,")")))})),attrs}__name(replaceRuntimeIdsAndExtInAttrs,"replaceRuntimeIdsAndExtInAttrs");function replaceRuntimeIdsInDefs(node,runtimeProps){var _a2,defIds=runtimeProps.defIds;return!defIds\|\|defIds.length===0?node:node.tag==="defs"&&(!((_a2=node.children)===null\|\|_a2===void 0)&&_a2.length)?__assign(__assign({},node),{children:node.children.map(function(child){return typeof child.attrs.id=="string"&&defIds&&defIds.indexOf(child.attrs.id)>-1?__assign(__assign({},child),{attrs:__assign(__assign({},child.attrs),{id:child.attrs.id+runtimeProps.idSuffix})}):child})}):node}__name(replaceRuntimeIdsInDefs,"replaceRuntimeIdsInDefs");function generateShortUuid(){return Math.random().toString(36).substring(2,8)}__name(generateShortUuid,"generateShortUuid"),IconBase.displayName="UniverIcon";var element$8={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"colorChannel1",d:"M11.0363 12.2367V14.0367C11.0363 14.3681 11.3049 14.6367 11.6363 14.6367C11.9676 14.6367 12.2363 14.3681 12.2363 14.0367V12.2367H14.0364C14.3677 12.2367 14.6364 11.9681 14.6364 11.6367C14.6364 11.3054 14.3677 11.0367 14.0364 11.0367H12.2363V9.23672C12.2363 8.90535 11.9676 8.63672 11.6363 8.63672C11.3049 8.63672 11.0363 8.90535 11.0363 9.23672V11.0367H9.23635C8.90498 11.0367 8.63635 11.3054 8.63635 11.6367C8.63635 11.9681 8.90498 12.2367 9.23635 12.2367H11.0363Z"}},{tag:"path",attrs:{fill:"currentColor",d:"M2.56365 1.36377C1.90091 1.36377 1.36365 1.90103 1.36365 2.56377V6.16377C1.36365 6.82651 1.90091 7.36377 2.56365 7.36377H6.16365C6.82639 7.36377 7.36365 6.82651 7.36365 6.16377V2.56377C7.36365 1.90103 6.82639 1.36377 6.16365 1.36377H2.56365zM6.16365 2.56377H2.56365L2.56365 6.16377H6.16365V2.56377zM2.56365 8.63647C1.90091 8.63647 1.36365 9.17373 1.36365 9.83647V13.4365C1.36365 14.0992 1.90091 14.6365 2.56365 14.6365H6.16365C6.82639 14.6365 7.36365 14.0992 7.36365 13.4365V9.83647C7.36365 9.17373 6.82639 8.63647 6.16365 8.63647H2.56365zM6.16365 9.83647H2.56365L2.56365 13.4365H6.16365V9.83647zM9.83635 7.36377C9.17361 7.36377 8.63635 6.82651 8.63635 6.16377V2.56377C8.63635 1.90103 9.17361 1.36377 9.83635 1.36377H13.4364C14.0991 1.36377 14.6364 1.90103 14.6364 2.56377V6.16377C14.6364 6.82651 14.0991 7.36377 13.4364 7.36377H9.83635zM9.83635 6.16377V2.56377L13.4364 2.56377V6.16377H9.83635z",fillRule:"evenodd",clipRule:"evenodd"}}]},Autofill=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"autofill",ref,icon:element$8}))});Autofill.displayName="Autofill";var element$7={tag:"svg",attrs:{fill:"none",viewBox:"0 0 17 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M14.0045 4.4334C14.8881 4.4334 15.6045 3.71705 15.6045 2.8334 15.6045 1.94974 14.8881 1.2334 14.0045 1.2334H3.70449C2.82084 1.2334 2.10449 1.94974 2.10449 2.8334 2.10449 3.71705 2.82084 4.4334 3.70449 4.4334H14.0045zM14.4045 2.8334C14.4045 3.05431 14.2254 3.2334 14.0045 3.2334H3.70449C3.48358 3.2334 3.30449 3.05431 3.30449 2.8334 3.30449 2.61248 3.48358 2.4334 3.70449 2.4334H14.0045C14.2254 2.4334 14.4045 2.61249 14.4045 2.8334zM14.1544 8.5999C15.038 8.5999 15.7544 7.88356 15.7544 6.9999 15.7544 6.11625 15.038 5.3999 14.1544 5.3999H3.85439C2.97074 5.3999 2.25439 6.11625 2.25439 6.9999 2.25439 7.88356 2.97074 8.5999 3.85439 8.5999H14.1544zM14.5544 6.9999C14.5544 7.22082 14.3753 7.3999 14.1544 7.3999H3.85439C3.63348 7.3999 3.45439 7.22082 3.45439 6.9999 3.45439 6.77899 3.63348 6.5999 3.85439 6.5999H14.1544C14.3753 6.5999 14.5544 6.77899 14.5544 6.9999z",fillRule:"evenodd",clipRule:"evenodd"}},{tag:"path",attrs:{fill:"currentColor",d:"M8.57975 14.5902L6.58023 12.5907C6.34591 12.3564 6.34591 11.9765 6.58023 11.7421 6.81454 11.5078 7.19444 11.5078 7.42876 11.7421L8.40449 12.7179V10.1664C8.40449 9.83504 8.67312 9.56641 9.00449 9.56641 9.33586 9.56641 9.60449 9.83504 9.60449 10.1664V12.7179L10.5802 11.7421C10.8145 11.5078 11.1944 11.5078 11.4288 11.7421 11.6631 11.9765 11.6631 12.3564 11.4288 12.5907L9.42923 14.5902M8.57975 14.5902C8.58121 14.5917 8.58268 14.5931 8.58416 14.5946 8.64077 14.6502 8.70566 14.6923 8.77482 14.7209 8.84557 14.7502 8.92314 14.7664 9.00449 14.7664 9.08585 14.7664 9.16342 14.7502 9.23416 14.7209 9.30332 14.6923 9.36821 14.6502 9.42482 14.5946"}}]},BottomSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"bottom-single",ref,icon:element$7}))});BottomSingle.displayName="BottomSingle";var element$6={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M5.97705 7.51296C5.97705 7.18159 6.24568 6.91296 6.57705 6.91296H8.48632C8.81769 6.91296 9.08632 7.18159 9.08632 7.51296 9.08632 7.84433 8.81769 8.11296 8.48632 8.11296H6.57705C6.24568 8.11296 5.97705 7.84433 5.97705 7.51296zM6.57705 9.41028C6.24568 9.41028 5.97705 9.67891 5.97705 10.0103 5.97705 10.3416 6.24568 10.6103 6.57705 10.6103H10.8199C11.1512 10.6103 11.4199 10.3416 11.4199 10.0103 11.4199 9.67891 11.1512 9.41028 10.8199 9.41028H6.57705z"}},{tag:"path",attrs:{fill:"currentColor",d:"M3.51074 2.37063C3.51074 1.48697 4.22709 0.77063 5.11074 0.77063H9.80318L9.81294 0.770708C9.97168 0.768161 10.1311 0.82824 10.2511 0.95055L14.4317 5.21408C14.5165 5.30049 14.5697 5.406 14.5917 5.51645C14.6041 5.5644 14.6106 5.61467 14.6106 5.66648V11.6406C14.6106 12.5243 13.8943 13.2406 13.0106 13.2406H5.11074C4.22709 13.2406 3.51074 12.5243 3.51074 11.6406V2.37063ZM10.4032 4.66648V2.81964L12.6063 5.06648H10.8032C10.5823 5.06648 10.4032 4.88739 10.4032 4.66648ZM5.11074 1.97063C4.88983 1.97063 4.71074 2.14972 4.71074 2.37063V11.6406C4.71074 11.8615 4.88983 12.0406 5.11074 12.0406H13.0106C13.2316 12.0406 13.4106 11.8615 13.4106 11.6406V6.26648H10.8032C9.91953 6.26648 9.20318 5.55013 9.20318 4.66648V1.97063H5.11074Z",fillRule:"evenodd",clipRule:"evenodd"}},{tag:"path",attrs:{fill:"currentColor",d:"M2.58916 6.6741C2.58916 6.34273 2.32053 6.0741 1.98916 6.0741C1.65779 6.0741 1.38916 6.34273 1.38916 6.6741V12.6294C1.38916 14.0653 2.55322 15.2294 3.98916 15.2294H9.41408C9.74545 15.2294 10.0141 14.9607 10.0141 14.6294C10.0141 14.298 9.74545 14.0294 9.41408 14.0294H3.98916C3.21596 14.0294 2.58916 13.4026 2.58916 12.6294V6.6741Z"}}]},CreateCopySingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"create-copy-single",ref,icon:element$6}))});CreateCopySingle.displayName="CreateCopySingle";var element$5={tag:"svg",attrs:{fill:"none",viewBox:"0 0 17 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M7.38125 1.16211C6.49759 1.16211 5.78125 1.87845 5.78125 2.76211V5.6377H2.87783C1.99418 5.6377 1.27783 6.35404 1.27783 7.2377V13.2377C1.27783 14.1214 1.99418 14.8377 2.87783 14.8377H8.87783C9.76149 14.8377 10.4778 14.1214 10.4778 13.2377V10.3621H13.3813C14.2649 10.3621 14.9813 9.64577 14.9813 8.76211V2.76211C14.9813 1.87845 14.2649 1.16211 13.3813 1.16211H7.38125ZM10.4778 9.16211H13.3813C13.6022 9.16211 13.7812 8.98302 13.7812 8.76211V2.76211C13.7812 2.5412 13.6022 2.36211 13.3813 2.36211H7.38125C7.16034 2.36211 6.98125 2.5412 6.98125 2.76211V5.6377H8.87783C9.76149 5.6377 10.4778 6.35404 10.4778 7.2377V9.16211ZM6.98125 6.8377H8.87783C9.09875 6.8377 9.27783 7.01678 9.27783 7.2377V9.16211H7.38125C7.16034 9.16211 6.98125 8.98302 6.98125 8.76211V6.8377ZM5.78125 6.8377V8.76211C5.78125 9.64577 6.49759 10.3621 7.38125 10.3621H9.27783V13.2377C9.27783 13.4586 9.09875 13.6377 8.87783 13.6377H2.87783C2.65692 13.6377 2.47783 13.4586 2.47783 13.2377V7.2377C2.47783 7.01678 2.65692 6.8377 2.87783 6.8377H5.78125Z",fillRule:"evenodd",clipRule:"evenodd"}}]},GroupSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"group-single",ref,icon:element$5}))});GroupSingle.displayName="GroupSingle";var element$4={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M11.3536 6.14645C11.5488 6.34171 11.5488 6.65829 11.3536 6.85355L8.35355 9.85355C8.15829 10.0488 7.84171 10.0488 7.64645 9.85355L4.64645 6.85355C4.45118 6.65829 4.45118 6.34171 4.64645 6.14645C4.84171 5.95118 5.15829 5.95118 5.35355 6.14645L8 8.79289L10.6464 6.14645C10.8417 5.95118 11.1583 5.95118 11.3536 6.14645Z",fillRule:"evenodd",clipRule:"evenodd"}}]},MoreDownSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"more-down-single",ref,icon:element$4}))});MoreDownSingle.displayName="MoreDownSingle";var element$3={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M1.25 2.96401C1.25 3.84767 1.96634 4.56401 2.85 4.56401H13.15C14.0337 4.56401 14.75 3.84767 14.75 2.96401C14.75 2.08036 14.0337 1.36401 13.15 1.36401H2.85C1.96635 1.36401 1.25 2.08036 1.25 2.96401ZM2.85 3.36401C2.62909 3.36401 2.45 3.18493 2.45 2.96401C2.45 2.7431 2.62909 2.56401 2.85 2.56401H13.15C13.3709 2.56401 13.55 2.7431 13.55 2.96401C13.55 3.18493 13.3709 3.36401 13.15 3.36401H2.85Z",fillRule:"evenodd",clipRule:"evenodd"}},{tag:"path",attrs:{fill:"currentColor",d:"M5.57564 11.6118C5.80995 11.3774 6.18985 11.3774 6.42417 11.6118L7.3999 12.5875V6.36951C7.3999 6.03814 7.66853 5.76951 7.9999 5.76951C8.33127 5.76951 8.5999 6.03814 8.5999 6.36951V12.5875L9.57564 11.6118C9.80995 11.3774 10.1899 11.3774 10.4242 11.6118C10.6585 11.8461 10.6585 12.226 10.4242 12.4603L8.4324 14.452C8.32324 14.5655 8.16982 14.6362 7.9999 14.6362C7.82998 14.6362 7.67655 14.5655 7.56739 14.452L5.57564 12.4603C5.34132 12.226 5.34132 11.8461 5.57564 11.6118Z"}}]},MoveDownSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"move-down-single",ref,icon:element$3}))});MoveDownSingle.displayName="MoveDownSingle";var element$2={tag:"svg",attrs:{fill:"none",viewBox:"0 0 16 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M1.25 13.036C1.25 12.1523 1.96634 11.436 2.85 11.436H13.15C14.0337 11.436 14.75 12.1523 14.75 13.036C14.75 13.9196 14.0337 14.636 13.15 14.636H2.85C1.96635 14.636 1.25 13.9196 1.25 13.036ZM2.85 12.636C2.62909 12.636 2.45 12.8151 2.45 13.036C2.45 13.2569 2.62909 13.436 2.85 13.436H13.15C13.3709 13.436 13.55 13.2569 13.55 13.036C13.55 12.8151 13.3709 12.636 13.15 12.636H2.85Z",fillRule:"evenodd",clipRule:"evenodd"}},{tag:"path",attrs:{fill:"currentColor",d:"M5.57564 4.38825C5.80995 4.62256 6.18985 4.62256 6.42417 4.38825L7.3999 3.41251V9.63049C7.3999 9.96186 7.66853 10.2305 7.9999 10.2305C8.33127 10.2305 8.5999 9.96186 8.5999 9.63049V3.41251L9.57564 4.38825C9.80995 4.62256 10.1899 4.62256 10.4242 4.38825C10.6585 4.15393 10.6585 3.77403 10.4242 3.53972L8.4324 1.54796C8.32324 1.43445 8.16982 1.36382 7.9999 1.36382C7.82998 1.36382 7.67655 1.43446 7.56739 1.54797L5.57564 3.53972C5.34132 3.77403 5.34132 4.15393 5.57564 4.38825Z"}}]},MoveUpSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"move-up-single",ref,icon:element$2}))});MoveUpSingle.displayName="MoveUpSingle";var element$1={tag:"svg",attrs:{fill:"none",viewBox:"0 0 17 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M7.82994 1.40913C7.88746 1.35161 7.95376 1.30821 8.02453 1.27893C8.09527 1.24959 8.17285 1.2334 8.2542 1.2334C8.33555 1.2334 8.41313 1.24959 8.48387 1.27893C8.55464 1.30821 8.62094 1.35161 8.67846 1.40913L10.6785 3.40913C10.9128 3.64345 10.9128 4.02335 10.6785 4.25766C10.4441 4.49198 10.0642 4.49198 9.82994 4.25766L8.8542 3.28193V5.8334C8.8542 6.16477 8.58557 6.4334 8.2542 6.4334C7.92283 6.4334 7.6542 6.16477 7.6542 5.8334V3.28193L6.67846 4.25766C6.44415 4.49198 6.06425 4.49198 5.82994 4.25766C5.59562 4.02335 5.59562 3.64345 5.82994 3.40913L7.82994 1.40913Z"}},{tag:"path",attrs:{fill:"currentColor",d:"M1.50439 9C1.50439 8.11634 2.22074 7.4 3.10439 7.4H13.4044C14.288 7.4 15.0044 8.11634 15.0044 9 15.0044 9.88366 14.2881 10.6 13.4044 10.6H3.1044C2.22074 10.6 1.50439 9.88366 1.50439 9zM3.10439 8.6C2.88348 8.6 2.70439 8.77909 2.70439 9 2.70439 9.22091 2.88348 9.4 3.1044 9.4H13.4044C13.6253 9.4 13.8044 9.22091 13.8044 9 13.8044 8.77909 13.6253 8.6 13.4044 8.6H3.10439zM1.6543 13.1665C1.6543 12.2828 2.37064 11.5665 3.2543 11.5665H13.5543C14.438 11.5665 15.1543 12.2828 15.1543 13.1665 15.1543 14.0502 14.438 14.7665 13.5543 14.7665H3.2543C2.37064 14.7665 1.6543 14.0502 1.6543 13.1665zM3.2543 12.7665C3.03338 12.7665 2.8543 12.9456 2.8543 13.1665 2.8543 13.3874 3.03338 13.5665 3.2543 13.5665H13.5543C13.7752 13.5665 13.9543 13.3874 13.9543 13.1665 13.9543 12.9456 13.7752 12.7665 13.5543 12.7665H3.2543z",fillRule:"evenodd",clipRule:"evenodd"}}]},TopmostSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"topmost-single",ref,icon:element$1}))});TopmostSingle.displayName="TopmostSingle";var element={tag:"svg",attrs:{fill:"none",viewBox:"0 0 17 16",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M7.46855 2.83731C7.46855 2.61639 7.64764 2.4373 7.86855 2.4373H13.8603C14.0812 2.4373 14.2603 2.61639 14.2603 2.8373V9.5049C14.2603 9.72581 14.0812 9.90489 13.8603 9.90489H12.866C12.5346 9.90489 12.266 10.1735 12.266 10.5049C12.266 10.8363 12.5346 11.1049 12.866 11.1049H13.8603C14.7439 11.1049 15.4603 10.3886 15.4603 9.5049V2.8373C15.4603 1.95365 14.7439 1.2373 13.8603 1.2373H7.86855C6.9849 1.2373 6.26855 1.95365 6.26855 2.83731V3.48688C6.26855 3.81825 6.53718 4.08688 6.86855 4.08688C7.19993 4.08688 7.46855 3.81825 7.46855 3.48688V2.83731Z"}},{tag:"path",attrs:{fill:"currentColor",d:"M3.19888 5.56299C2.31522 5.56299 1.59888 6.27933 1.59888 7.16299V13.163C1.59888 14.0466 2.31522 14.763 3.19888 14.763H9.19888C10.0825 14.763 10.7989 14.0466 10.7989 13.163V7.16299C10.7989 6.27933 10.0825 5.56299 9.19888 5.56299H3.19888ZM2.79888 7.16299C2.79888 6.94207 2.97796 6.76299 3.19888 6.76299H9.19888C9.41979 6.76299 9.59888 6.94207 9.59888 7.16299V13.163C9.59888 13.3839 9.41979 13.563 9.19888 13.563H3.19888C2.97796 13.563 2.79888 13.3839 2.79888 13.163V7.16299Z",fillRule:"evenodd",clipRule:"evenodd"}}]},UngroupSingle=React.forwardRef(function(props,ref){return React.createElement(IconBase,Object.assign({},props,{id:"ungroup-single",ref,icon:element}))});UngroupSingle.displayName="UngroupSingle";function r(e){var t,f,n="";if(typeof e=="string"\|\|typeof e=="number")n+=e;else if(typeof e=="object")if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f)}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}__name(r,"r");function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}__name(clsx,"clsx");const styles$1={imageCommonPanel:"univer-image-common-panel",imageCommonPanelGrid:"univer-image-common-panel-grid",imageCommonPanelBorder:"univer-image-common-panel-border",imageCommonPanelTitle:"univer-image-common-panel-title",imageCommonPanelSubtitle:"univer-image-common-panel-subtitle",imageCommonPanelRow:"univer-image-common-panel-row",imageCommonPanelRowVertical:"univer-image-common-panel-row-vertical",imageCommonPanelColumn:"univer-image-common-panel-column",imageCommonPanelColumnCenter:"univer-image-common-panel-column-center",imageCommonPanelInline:"univer-image-common-panel-inline",imageCommonPanelSpan2:"univer-image-common-panel-span2",imageCommonPanelSpan3:"univer-image-common-panel-span3",imageCommonPanelInput:"univer-image-common-panel-input"},DrawingArrange=__name(props=>{const{arrangeShow,drawings:focusDrawings}=props,localeService=core.useDependency(core.LocaleService),drawingManagerService=core.useDependency(drawing.IDrawingManagerService),gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay"),[drawings,setDrawings]=React.useState(focusDrawings);React.useEffect(()=>{const focusDispose=drawingManagerService.focus$.subscribe(drawings2=>{setDrawings(drawings2)});return()=>{focusDispose.unsubscribe()}},[]);const onArrangeBtnClick=__name(arrangeType=>{const unitId=drawings[0].unitId,subUnitId=drawings[0].subUnitId,drawingIds=drawings.map(drawing2=>drawing2.drawingId);drawingManagerService.featurePluginOrderUpdateNotification({unitId,subUnitId,drawingIds,arrangeType})},"onArrangeBtnClick");return React.createElement("div",{className:styles$1.imageCommonPanelGrid,style:{display:gridDisplay(arrangeShow)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.arrange.title")))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onArrangeBtnClick(drawing.ArrangeTypeEnum.forward)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(MoveUpSingle,null),localeService.t("image-panel.arrange.forward")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onArrangeBtnClick(drawing.ArrangeTypeEnum.backward)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(MoveDownSingle,null),localeService.t("image-panel.arrange.backward"))))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onArrangeBtnClick(drawing.ArrangeTypeEnum.front)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(TopmostSingle,null),localeService.t("image-panel.arrange.front")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onArrangeBtnClick(drawing.ArrangeTypeEnum.back)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(BottomSingle,null),localeService.t("image-panel.arrange.back"))))))},"DrawingArrange"),MIN_DRAWING_WIDTH_LIMIT=20,MIN_DRAWING_HEIGHT_LIMIT=20,RANGE_DRAWING_ROTATION_LIMIT=[-3600,3600],INPUT_DEBOUNCE_TIME=300,DrawingTransform=__name(props=>{var _a2;const localeService=core.useDependency(core.LocaleService),drawingManagerService=core.useDependency(drawing.IDrawingManagerService),renderManagerService=core.useDependency(engineRender.IRenderManagerService),{drawings,transformShow}=props,drawingParam=drawings[0];if(drawingParam==null)return;const transform=drawingParam.transform;if(transform==null)return;const{unitId,subUnitId,drawingId,drawingType}=drawingParam,renderObject=renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return;const topScene=(_a2=scene.getEngine())==null?void 0:_a2.activeScene;if(topScene==null)return;const transformer=scene.getTransformerByCreate(),{width:originWidth=0,height:originHeight=0,left:originX=0,top:originY=0,angle:originRotation=0}=transform,[width,setWidth]=React.useState(originWidth),[height,setHeight]=React.useState(originHeight),[xPosition,setXPosition]=React.useState(originX),[yPosition,setYPosition]=React.useState(originY),[rotation,setRotation]=React.useState(originRotation),[lockRatio,setLockRatio]=React.useState(transformer.keepRatio),checkMoveBoundary=__name((left,top,width2,height2)=>{const{width:topSceneWidth,height:topSceneHeight}=topScene,{ancestorLeft,ancestorTop}=scene;let limitLeft=left,limitTop=top,limitWidth=width2,limitHeight=height2;return left+ancestorLeft<0&&(limitLeft=-ancestorLeft),top+ancestorTop<0&&(limitTop=-ancestorTop),limitWidth=topSceneWidth-limitLeft-ancestorLeft,limitWidth<MIN_DRAWING_WIDTH_LIMIT&&(limitWidth=MIN_DRAWING_WIDTH_LIMIT),limitHeight=topSceneHeight-limitTop-ancestorTop,limitHeight<MIN_DRAWING_WIDTH_LIMIT&&(limitHeight=MIN_DRAWING_WIDTH_LIMIT),left+limitWidth+ancestorLeft>topSceneWidth&&(limitLeft=topSceneWidth-width2-ancestorLeft),top+limitHeight+ancestorTop>topSceneHeight&&(limitTop=topSceneHeight-height2-ancestorTop),{limitLeft,limitTop,limitWidth,limitHeight}},"checkMoveBoundary"),changeObs=__name(state=>{const{objects}=state,params=getUpdateParams(objects,drawingManagerService);if(params.length!==1)return;const drawingParam2=params[0];if(drawingParam2==null)return;const{transform:transform2}=drawingParam2;if(transform2==null)return;const{width:originWidth2,height:originHeight2,left:originX2,top:originY2,angle:originRotation2}=transform2;originWidth2!=null&&setWidth(originWidth2),originHeight2!=null&&setHeight(originHeight2),originX2!=null&&setXPosition(originX2),originY2!=null&&setYPosition(originY2),originRotation2!=null&&setRotation(originRotation2)},"changeObs");React.useEffect(()=>{const subscriptions=[transformer.changeStart$.subscribe(state=>{changeObs(state)}),transformer.changing$.subscribe(state=>{changeObs(state)}),transformer.changeEnd$.subscribe(state=>{changeObs(state)}),drawingManagerService.focus$.subscribe(drawings2=>{if(drawings2.length!==1)return;const drawingParam2=drawingManagerService.getDrawingByParam(drawings2[0]);if(drawingParam2==null)return;const transform2=drawingParam2.transform;if(transform2==null)return;const{width:originWidth2,height:originHeight2,left:originX2,top:originY2,angle:originRotation2}=transform2;originWidth2!=null&&setWidth(originWidth2),originHeight2!=null&&setHeight(originHeight2),originX2!=null&&setXPosition(originX2),originY2!=null&&setYPosition(originY2),originRotation2!=null&&setRotation(originRotation2)})];return()=>{subscriptions.forEach(sub=>sub.unsubscribe())}},[]);const handleWidthChange=core.debounce(val=>{if(val==null)return;val=Math.max(val,MIN_DRAWING_WIDTH_LIMIT);const{limitWidth,limitHeight}=checkMoveBoundary(xPosition,yPosition,val,height);val=Math.min(val,limitWidth);const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{width:val}};if(lockRatio){let heightFix=val/widthheight;if(heightFix=Math.max(heightFix,MIN_DRAWING_HEIGHT_LIMIT),heightFix>limitHeight)return;setHeight(heightFix),updateParam.transform.height=heightFix}setWidth(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},INPUT_DEBOUNCE_TIME),handleHeightChange=core.debounce(val=>{if(val==null)return;val=Math.max(val,MIN_DRAWING_WIDTH_LIMIT);const{limitHeight,limitWidth}=checkMoveBoundary(xPosition,yPosition,width,val);val=Math.min(val,limitHeight);const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{height:val}};if(lockRatio){let widthFix=val/heightwidth;if(widthFix=Math.max(widthFix,MIN_DRAWING_WIDTH_LIMIT),widthFix>limitWidth)return;setWidth(widthFix),updateParam.transform.width=widthFix}setHeight(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},INPUT_DEBOUNCE_TIME),handleXChange=core.debounce(val=>{if(val==null)return;const{limitLeft}=checkMoveBoundary(val,yPosition,width,height);val=limitLeft;const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{left:val}};setXPosition(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},INPUT_DEBOUNCE_TIME),handleYChange=core.debounce(val=>{if(val==null)return;const{limitTop}=checkMoveBoundary(xPosition,val,width,height);val=limitTop;const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{top:val}};setYPosition(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},INPUT_DEBOUNCE_TIME),handleRotationChange=__name(val=>{if(val==null)return;const[min,max]=RANGE_DRAWING_ROTATION_LIMIT;val<min&&(val=min),val>max&&(val=max);const updateParam={unitId,subUnitId,drawingId,drawingType,transform:{angle:val}};setRotation(val),drawingManagerService.featurePluginUpdateNotification([updateParam]),transformer.refreshControls().changeNotification()},"handleRotationChange"),handleLockRatioChange=__name(val=>{setLockRatio(val),transformer.keepRatio=val},"handleLockRatioChange"),gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay");return React.createElement("div",{className:clsx(styles$1.imageCommonPanelGrid,styles$1.imageCommonPanelBorder),style:{display:gridDisplay(transformShow)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.transform.title")))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.width"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:width,onChange:__name(val=>{handleWidthChange(val)},"onChange"),className:styles$1.imageCommonPanelInput}))))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.height"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:height,onChange:__name(val=>{handleHeightChange(val)},"onChange"),className:styles$1.imageCommonPanelInput}))))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.lock"))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelRow,styles$1.imageCommonPanelRowVertical)},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.Checkbox,{checked:lockRatio,onChange:handleLockRatioChange})))))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.x"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:xPosition,onChange:__name(val=>{handleXChange(val)},"onChange"),className:styles$1.imageCommonPanelInput}))))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.y"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:yPosition,onChange:__name(val=>{handleYChange(val)},"onChange"),className:styles$1.imageCommonPanelInput}))))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan3)},React.createElement("label",null,React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},localeService.t("image-panel.transform.rotate"))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:styles$1.imageCommonPanelColumn},React.createElement(design.InputNumber,{precision:1,value:rotation,onChange:handleRotationChange,className:styles$1.imageCommonPanelInput})))))))},"DrawingTransform");var AlignType=(AlignType2=>(AlignType2.default="0",AlignType2.left="1",AlignType2.center="2",AlignType2.right="3",AlignType2.top="4",AlignType2.middle="5",AlignType2.bottom="6",AlignType2.horizon="7",AlignType2.vertical="8",AlignType2))(AlignType\|\|{});const SetDrawingAlignOperation={id:"sheet.operation.set-image-align",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")},DrawingAlign=__name(props=>{const commandService=core.useDependency(core.ICommandService),localeService=core.useDependency(core.LocaleService),{alignShow}=props,[alignValue,setAlignValue]=React.useState(AlignType.default),alignOptions=[{label:localeService.t("image-panel.align.default"),value:AlignType.default},{options:[{label:localeService.t("image-panel.align.left"),value:AlignType.left},{label:localeService.t("image-panel.align.center"),value:AlignType.center},{label:localeService.t("image-panel.align.right"),value:AlignType.right}]},{options:[{label:localeService.t("image-panel.align.top"),value:AlignType.top},{label:localeService.t("image-panel.align.middle"),value:AlignType.middle},{label:localeService.t("image-panel.align.bottom"),value:AlignType.bottom}]},{options:[{label:localeService.t("image-panel.align.horizon"),value:AlignType.horizon},{label:localeService.t("image-panel.align.vertical"),value:AlignType.vertical}]}];function handleAlignChange(value){setAlignValue(value),commandService.executeCommand(SetDrawingAlignOperation.id,{alignType:value})}__name(handleAlignChange,"handleAlignChange");const gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay");return React.createElement("div",{className:clsx(styles$1.imageCommonPanelGrid,styles$1.imageCommonPanelBorder),style:{display:gridDisplay(alignShow)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.align.title")))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn)},React.createElement(design.Select,{value:alignValue,options:alignOptions,onChange:handleAlignChange}))))},"DrawingAlign"),OpenImageCropOperation={id:"sheet.operation.open-image-crop",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")},CloseImageCropOperation={id:"sheet.operation.close-image-crop",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")};var CropType=(CropType2=>(CropType2.FREE="0",CropType2.R1_1="1",CropType2.R16_9="2",CropType2.R9_16="3",CropType2.R5_4="4",CropType2.R4_5="5",CropType2.R4_3="6",CropType2.R3_4="7",CropType2.R3_2="8",CropType2.R2_3="9",CropType2))(CropType\|\|{});const AutoImageCropOperation={id:"sheet.operation.Auto-image-crop",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")},ImageCropper=__name(props=>{const commandService=core.useDependency(core.ICommandService),localeService=core.useDependency(core.LocaleService),{drawings,cropperShow}=props;if(drawings[0]==null)return;const[cropValue,setCropValue]=React.useState(CropType.FREE),cropStateRef=React.useRef(!1),cropOptions=[{label:localeService.t("image-panel.crop.mode"),value:CropType.FREE},{label:"1:1",value:CropType.R1_1},{label:"16:9",value:CropType.R16_9},{label:"9:16",value:CropType.R9_16},{label:"5:4",value:CropType.R5_4},{label:"4:5",value:CropType.R4_5},{label:"4:3",value:CropType.R4_3},{label:"3:4",value:CropType.R3_4},{label:"3:2",value:CropType.R3_2},{label:"2:3",value:CropType.R2_3}];React.useEffect(()=>{const onChangeStartObserver=commandService.onCommandExecuted(command=>{if(command.id===CloseImageCropOperation.id){const params=command.params;params!=null&&params.isAuto\|\|(cropStateRef.current=!1)}});return()=>{onChangeStartObserver==null\|\|onChangeStartObserver.dispose()}},[]);function handleCropChange(value){setCropValue(value),cropStateRef.current&&commandService.executeCommand(AutoImageCropOperation.id,{cropType:value})}__name(handleCropChange,"handleCropChange");const gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay"),onCropperBtnClick=__name(val=>{commandService.executeCommand(AutoImageCropOperation.id,{cropType:val}),cropStateRef.current=!0},"onCropperBtnClick");return React.createElement("div",{className:clsx(styles$1.imageCommonPanelGrid,styles$1.imageCommonPanelBorder),style:{display:gridDisplay(cropperShow)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.crop.title")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelRow,styles$1.imageCommonPanelRowVertical)},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onCropperBtnClick(cropValue)},"onClick")},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(CreateCopySingle,null),localeService.t("image-panel.crop.start")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2)},React.createElement(design.Select,{value:cropValue,options:cropOptions,onChange:handleCropChange}))))},"ImageCropper"),DrawingGroup=__name(props=>{const localeService=core.useDependency(core.LocaleService),renderManagerService=core.useDependency(engineRender.IRenderManagerService),drawingManagerService=core.useDependency(drawing.IDrawingManagerService),{hasGroup,drawings}=props,[groupShow,setGroupShow]=React.useState(!1),[groupBtnShow,setGroupBtnShow]=React.useState(!0),[ungroupBtnShow,setUngroupBtnShow]=React.useState(!0),gridDisplay=__name(isShow=>isShow?"block":"none","gridDisplay"),onGroupBtnClick=__name(()=>{const focusDrawings=drawingManagerService.getFocusDrawings(),{unitId,subUnitId}=focusDrawings[0],groupId=core.Tools.generateRandomId(10),groupTransform=engineRender.getGroupState(0,0,focusDrawings.map(o=>o.transform\|\|{})),groupParam={unitId,subUnitId,drawingId:groupId,drawingType:drawing.DrawingTypeEnum.DRAWING_GROUP,transform:groupTransform},children=focusDrawings.map(drawing2=>{const transform=drawing2.transform\|\|{left:0,top:0},{unitId:unitId2,subUnitId:subUnitId2,drawingId}=drawing2;return{unitId:unitId2,subUnitId:subUnitId2,drawingId,transform:{...transform,left:transform.left-groupTransform.left,top:transform.top-groupTransform.top},groupId}});drawingManagerService.featurePluginGroupUpdateNotification([{parent:groupParam,children}])},"onGroupBtnClick"),ungroup=__name(param=>{if(param.drawingType!==drawing.DrawingTypeEnum.DRAWING_GROUP)return;const{unitId,subUnitId,drawingId,transform:groupTransform={width:0,height:0}}=param;if(groupTransform==null)return;const objects=drawingManagerService.getDrawingsByGroup({unitId,subUnitId,drawingId});if(objects.length===0)return;const children=objects.map(object=>{const{transform}=object,{unitId:unitId2,subUnitId:subUnitId2,drawingId:drawingId2}=object,newTransform=engineRender.transformObjectOutOfGroup(transform\|\|{},groupTransform,groupTransform.width\|\|0,groupTransform.height\|\|0);return{unitId:unitId2,subUnitId:subUnitId2,drawingId:drawingId2,transform:{...transform,...newTransform},groupId:void 0}});return{parent:param,children}},"ungroup"),onUngroupBtnClick=__name(()=>{const params=drawingManagerService.getFocusDrawings().map(drawing2=>ungroup(drawing2)).filter(o=>o!=null);params.length!==0&&drawingManagerService.featurePluginUngroupUpdateNotification(params)},"onUngroupBtnClick");return React.useEffect(()=>{const drawingParam=drawings[0];if(drawingParam==null)return;const{unitId}=drawingParam,renderObject=renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return;const transformer=scene.getTransformerByCreate(),onClearControlObserver=transformer.clearControl$.subscribe(changeSelf=>{changeSelf===!0&&setGroupShow(!1)}),onChangeStartObserver=transformer.changeStart$.subscribe(state=>{const{objects}=state,params=getUpdateParams(objects,drawingManagerService),groupParams=params.filter(o=>(o==null?void 0:o.drawingType)===drawing.DrawingTypeEnum.DRAWING_GROUP);let groupBtnShow2=!1,ungroupBtnShow2=!1;params.length>1&&(groupBtnShow2=!0),groupParams.length>0&&(ungroupBtnShow2=!0),setGroupShow(groupBtnShow2\|\|ungroupBtnShow2),setGroupBtnShow(groupBtnShow2),setUngroupBtnShow(ungroupBtnShow2)});return()=>{onChangeStartObserver.unsubscribe(),onClearControlObserver.unsubscribe()}},[]),React.createElement("div",{className:clsx(styles$1.imageCommonPanelGrid,styles$1.imageCommonPanelBorder),style:{display:gridDisplay(hasGroup===!0?groupShow:!1)}},React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelTitle)},React.createElement("div",null,localeService.t("image-panel.group.title")))),React.createElement("div",{className:styles$1.imageCommonPanelRow},React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2,styles$1.imageCommonPanelColumnCenter)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onGroupBtnClick()},"onClick"),style:{display:gridDisplay(groupBtnShow)}},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(GroupSingle,null),localeService.t("image-panel.group.group")))),React.createElement("div",{className:clsx(styles$1.imageCommonPanelColumn,styles$1.imageCommonPanelSpan2,styles$1.imageCommonPanelColumnCenter)},React.createElement(design.Button,{size:"small",onClick:__name(()=>{onUngroupBtnClick()},"onClick"),style:{display:gridDisplay(ungroupBtnShow)}},React.createElement("span",{className:styles$1.imageCommonPanelInline},React.createElement(UngroupSingle,null),localeService.t("image-panel.group.unGroup"))))))},"DrawingGroup"),DrawingCommonPanel=__name(props=>{const drawingManagerService=core.useDependency(drawing.IDrawingManagerService),renderManagerService=core.useDependency(engineRender.IRenderManagerService),localeService=core.useDependency(core.LocaleService),{drawings,hasArrange=!0,hasTransform=!0,hasAlign=!0,hasCropper=!0,hasGroup=!0}=props,drawingParam=drawings[0];if(drawingParam==null)return;const{unitId}=drawingParam,renderObject=renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return;const transformer=scene.getTransformerByCreate(),[arrangeShow,setArrangeShow]=React.useState(!0),[transformShow,setTransformShow]=React.useState(!0),[alignShow,setAlignShow]=React.useState(!1),[cropperShow,setCropperShow]=React.useState(!0),[nullShow,setNullShow]=React.useState(!1);return React.useEffect(()=>{const clearControlSub=transformer.clearControl$.subscribe(changeSelf=>{changeSelf===!0&&(setArrangeShow(!1),setTransformShow(!1),setAlignShow(!1),setCropperShow(!1),setNullShow(!0))}),changeStartSub=transformer.changeStart$.subscribe(state=>{const{objects}=state,params=getUpdateParams(objects,drawingManagerService);params.length===0?(setArrangeShow(!1),setTransformShow(!1),setAlignShow(!1),setCropperShow(!1),setNullShow(!0)):params.length===1?(setArrangeShow(!0),setTransformShow(!0),setAlignShow(!1),setCropperShow(!0),setNullShow(!1)):(setArrangeShow(!0),setTransformShow(!1),setAlignShow(!0),setCropperShow(!1),setNullShow(!1))}),focusSub=drawingManagerService.focus$.subscribe(drawings2=>{drawings2.length===0?(setArrangeShow(!1),setTransformShow(!1),setAlignShow(!1),setCropperShow(!1),setNullShow(!0)):drawings2.length===1?(setArrangeShow(!0),setTransformShow(!0),setAlignShow(!1),setCropperShow(!0),setNullShow(!1)):(setArrangeShow(!0),setTransformShow(!1),setAlignShow(!0),setCropperShow(!1),setNullShow(!1))});return()=>{changeStartSub.unsubscribe(),clearControlSub.unsubscribe(),focusSub.unsubscribe()}},[]),React.createElement(React.Fragment,null,React.createElement("div",{style:{display:nullShow===!0?"block":"none",height:"100%"}},React.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%",top:"50%",marginTop:"-100px"}},React.createElement("span",null,localeService.t("image-panel.null")))),React.createElement(DrawingArrange,{arrangeShow:hasArrange===!0?arrangeShow:!1,drawings}),React.createElement(DrawingTransform,{transformShow:hasTransform===!0?transformShow:!1,drawings}),React.createElement(DrawingAlign,{alignShow:hasAlign===!0?alignShow:!1,drawings}),React.createElement(ImageCropper,{cropperShow:hasCropper===!0?cropperShow:!1,drawings}),React.createElement(DrawingGroup,{hasGroup,drawings}))},"DrawingCommonPanel"),styles={imagePopupMenu:"univer-image-popup-menu",imagePopupMenuItem:"univer-image-popup-menu-item",imagePopupMenuItemIcon:"univer-image-popup-menu-item-icon",imagePopupMenuItemTitle:"univer-image-popup-menu-item-title",imagePopupMenuItemHide:"univer-image-popup-menu-item-hide",btnContainer:"univer-btn-container",btnContainerExpand:"univer-btn-container-expand"},ImagePopupMenu=__name(props=>{var _a2,_b2;const menuItems=(_b2=(_a2=props.popup)==null?void 0:_a2.extraProps)==null?void 0:_b2.menuItems;if(!menuItems)return null;const commandService=core.useDependency(core.ICommandService),localeService=core.useDependency(core.LocaleService),[visible,setVisible]=React.useState(!1),[isHovered,setHovered]=React.useState(!1),handleMouseEnter=__name(()=>{setHovered(!0)},"handleMouseEnter"),handleMouseLeave=__name(()=>{setHovered(!1)},"handleMouseLeave"),onVisibleChange=__name(visible2=>{setVisible(visible2)},"onVisibleChange"),handleClick=__name(item=>{commandService.executeCommand(item.commandId,item.commandParams),setVisible(!1)},"handleClick"),showMore=visible\|\|isHovered,availableMenu=menuItems.filter(item=>!item.disable);return React.createElement("div",{onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave},React.createElement(design.Dropdown,{placement:"bottomLeft",trigger:["click"],overlay:React.createElement("ul",{className:styles.imagePopupMenu},availableMenu.map(item=>React.createElement("li",{key:item.index,onClick:__name(()=>handleClick(item),"onClick"),className:styles.imagePopupMenuItem},React.createElement("span",{className:styles.imagePopupMenuItemTitle},localeService.t(item.label))))),visible,onVisibleChange},React.createElement("div",{className:clsx(styles.btnContainer,{[styles.btnContainerExpand]:visible})},React.createElement(Autofill,{style:{color:"#35322B"},extend:{colorChannel1:"rgb(var(--green-700, #409f11))"}}),showMore&&React.createElement(MoreDownSingle,{style:{color:"#CCCCCC",fontSize:"8px",marginLeft:"8px"}}))))},"ImagePopupMenu"),COMPONENT_IMAGE_POPUP_MENU="COMPONENT_IMAGE_POPUP_MENU",PLUGIN_CONFIG_KEY="drawing-ui.config",defaultPluginConfig={},ImageResetSizeOperation={id:"sheet.operation.image-reset-size",type:core.CommandType.OPERATION,handler:__name((accessor,params)=>!0,"handler")},COMPONENT_IMAGE_VIEWER="COMPONENT_IMAGE_VIEWER",ImageViewer=__name(props=>{const{src}=props;return src?React.createElement("div",null,React.createElement("img",{src,alt:"Univer Image Viewer",style:{width:"100%",height:"100%",position:"relative"}})):null},"ImageViewer");var __defProp$4=Object.defineProperty,__getOwnPropDesc$4=Object.getOwnPropertyDescriptor,__decorateClass$4=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$4(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$4(target,key,result),result},"__decorateClass$4"),__decorateParam$4=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$4");let DrawingUIController=(_b=class extends core.Disposable{constructor(_componentManager,_commandService){super(),this._componentManager=_componentManager,this._commandService=_commandService,this._init()}_initCustomComponents(){const componentManager=this._componentManager;this.disposeWithMe(componentManager.register(COMPONENT_IMAGE_POPUP_MENU,ImagePopupMenu)),this.disposeWithMe(componentManager.register(COMPONENT_IMAGE_VIEWER,ImageViewer))}_initCommands(){[OpenImageCropOperation,CloseImageCropOperation,ImageResetSizeOperation,SetDrawingAlignOperation,AutoImageCropOperation].forEach(command=>this.disposeWithMe(this._commandService.registerCommand(command)))}_init(){this._initCommands(),this._initCustomComponents()}},__name(_b,"DrawingUIController"),_b);DrawingUIController=__decorateClass$4([__decorateParam$4(0,core.Inject(ui.ComponentManager)),__decorateParam$4(1,core.ICommandService)],DrawingUIController);var __defProp$3=Object.defineProperty,__getOwnPropDesc$3=Object.getOwnPropertyDescriptor,__decorateClass$3=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$3(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$3(target,key,result),result},"__decorateClass$3"),__decorateParam$3=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$3");let DrawingUpdateController=(_c=class extends core.Disposable{constructor(_currentUniverService,_commandService,_renderManagerService,_drawingManagerService){super();__publicField(this,"_sceneListenerOnDrawingMap",new WeakSet);this._currentUniverService=_currentUniverService,this._commandService=_commandService,this._renderManagerService=_renderManagerService,this._drawingManagerService=_drawingManagerService,this._initialize()}dispose(){super.dispose()}_initialize(){this._recoveryImages(),this._drawingAddListener(),this._drawingRemoveListener(),this._drawingUpdateListener(),this._commandExecutedListener(),this._drawingArrangeListener(),this._drawingGroupListener(),this._drawingRefreshListener(),this._drawingVisibleListener()}_recoveryImages(){const drawingList=this._drawingManagerService.drawingManagerData,info=getCurrentUnitInfo(this._currentUniverService);if(info==null)return;const{unitId:currentUnitId,subUnitId:currentSubUnitId}=info;Object.keys(drawingList).forEach(unitId=>{Object.keys(drawingList[unitId]).forEach(subUnitId=>{const drawingMap=drawingList[unitId][subUnitId].data;drawingMap==null\|\|unitId!==currentUnitId\|\|subUnitId!==currentSubUnitId\|\|Object.keys(drawingMap).forEach(drawingId=>{drawingMap[drawingId]&&this._insertDrawing([{unitId,subUnitId,drawingId}])})})})}_commandExecutedListener(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id===SetDrawingAlignOperation.id){const params=command.params;if(params==null)return;this._drawingAlign(params)}}))}_drawingGroupListener(){this.disposeWithMe(this._drawingManagerService.group$.subscribe(params=>{this._groupDrawings(params)})),this.disposeWithMe(this._drawingManagerService.ungroup$.subscribe(params=>{this._ungroupDrawings(params)}))}_getSceneAndTransformerByDrawingSearch(unitId){if(unitId==null)return;const renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return null;const transformer=scene.getTransformerByCreate();return{scene,transformer}}_groupDrawings(drawings){drawings.forEach(drawing2=>{this._groupDrawing(drawing2)})}_groupDrawing(params){const{parent,children}=params,{unitId,subUnitId,drawingId}=parent,renderObject=this._getSceneAndTransformerByDrawingSearch(parent.unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;this._commandService.syncExecuteCommand(CloseImageCropOperation.id);const objects=[];if(children.forEach(drawing$1=>{const drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch(drawing$1),object=scene.getObjectIncludeInGroup(drawingShapeKey);if(object==null\|\|objects.includes(object))return;objects.push(object);const{transform}=drawing$1;transform!=null&&(object.classType===engineRender.RENDER_CLASS_TYPE.GROUP?object.transformByState({left:transform.left,top:transform.top}):object.transformByState(transform))}),objects.length===0)return;const groupKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),group=new engineRender.Group(groupKey);scene.addObject(group,engineRender.DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(group),group.addObjects(...objects),parent.transform&&group.transformByState({left:parent.transform.left,top:parent.transform.top}),transformer.clearSelectedObjects(),transformer.setSelectedControl(group)}_ungroupDrawings(drawings){drawings.forEach(drawing2=>{this._ungroupDrawing(drawing2)})}_ungroupDrawing(drawing$1){const{parent,children}=drawing$1,renderObject=this._getSceneAndTransformerByDrawingSearch(parent.unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;children.forEach(drawing2=>{const drawingKey=drawing.getDrawingShapeKeyByDrawingSearch(drawing2),object=scene.getObjectIncludeInGroup(drawingKey);if(object==null)return!0;if(object==null)return;const{transform}=drawing2;transform!=null&&(object.classType===engineRender.RENDER_CLASS_TYPE.GROUP?object.transformByState({left:transform.left,top:transform.top}):object.transformByState(transform))});const groupKey=drawing.getDrawingShapeKeyByDrawingSearch(parent),group=scene.getObject(groupKey),{width,height}=group;group.getObjects().forEach(object=>{group.removeSelfObjectAndTransform(object.oKey,width,height)}),group.dispose(),transformer.clearSelectedObjects()}_drawingAlign(params){const{alignType}=params,drawings=this._drawingManagerService.getFocusDrawings();if(alignType===AlignType.default)return;const drawingTransformCaches=[];let minLeft=Number.POSITIVE_INFINITY,minTop=Number.POSITIVE_INFINITY,maxRight=Number.NEGATIVE_INFINITY,maxBottom=Number.NEGATIVE_INFINITY,drawingCount=0;drawings.forEach(drawing2=>{const{unitId,subUnitId,drawingId,drawingType}=drawing2,drawingParam=this._drawingManagerService.getDrawingByParam({unitId,subUnitId,drawingId});if(drawingParam==null\|\|drawingParam.transform==null)return;drawingTransformCaches.push({unitId,subUnitId,drawingId,drawingType,transform:drawingParam.transform});const{left=0,top=0,width=0,height=0}=drawingParam.transform;minLeft=Math.min(minLeft,left),minTop=Math.min(minTop,top),maxRight=Math.max(maxRight,left+width),maxBottom=Math.max(maxBottom,top+height),drawingCount++}),drawingCount!==0&&(this._sortDrawingTransform(drawingTransformCaches,alignType),this._applyAlignType(drawingTransformCaches,alignType,minLeft,minTop,maxRight,maxBottom,drawingCount))}_applyAlignType(drawingTransformCaches,alignType,minLeft,minTop,maxRight,maxBottom,drawingCount){const averageHorizon=Math.round((maxRight-minLeft)/drawingCount10)/10,averageVertical=Math.round((maxBottom-minTop)/drawingCount10)/10,updateParams=[],renderObject=this._getSceneAndTransformerByDrawingSearch(drawingTransformCaches[0].unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;drawingTransformCaches.forEach((drawingTransformCache,index)=>{const{unitId,subUnitId,drawingId,transform,drawingType}=drawingTransformCache,{left=0,top=0,width=0,height=0}=transform;let newLeft=left,newTop=top;switch(alignType){case AlignType.left:newLeft=minLeft;break;case AlignType.center:newLeft=minLeft+(maxRight-minLeft)/2-width/2;break;case AlignType.right:newLeft=maxRight-width;break;case AlignType.top:newTop=minTop;break;case AlignType.middle:newTop=minTop+(maxBottom-minTop)/2-height/2;break;case AlignType.bottom:newTop=maxBottom-height;break;case AlignType.horizon:newLeft=minLeft+averageHorizonindex;break;case AlignType.vertical:newTop=minTop+averageVerticalindex;break}(newLeft!==left\|\|newTop!==top)&&updateParams.push({unitId,subUnitId,drawingId,drawingType,transform:{left:newLeft,top:newTop}})}),this._drawingManagerService.featurePluginUpdateNotification(updateParams),transformer.refreshControls().changeNotification()}_sortDrawingTransform(drawingTransformCaches,alignType){drawingTransformCaches.sort((a,b)=>{const aTransform=a.transform,bTransform=b.transform,{left:aLeft=0,top:aTop=0,width:aWidth=0,height:aHeight=0}=aTransform,{left:bLeft=0,top:bTop=0,width:bWidth=0,height:bHeight=0}=bTransform;switch(alignType){case AlignType.left:return aLeft-bLeft;case AlignType.center:return aLeft+aWidth/2-(bLeft+bWidth/2);case AlignType.right:return aLeft+aWidth-(bLeft+bWidth);case AlignType.top:return aTop-bTop;case AlignType.middle:return aTop+aHeight/2-(bTop+bHeight/2);case AlignType.bottom:return aTop+aHeight-(bTop+bHeight);case AlignType.horizon:return aLeft+aWidth/2-(bLeft+bWidth/2);case AlignType.vertical:return aTop+aHeight/2-(bTop+bHeight/2);default:return 0}})}_drawingArrangeListener(){this.disposeWithMe(this._drawingManagerService.order$.subscribe(params=>{this._drawingArrange(params)}))}_drawingArrange(params){const{unitId,subUnitId,drawingIds}=params,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject;drawingIds.forEach(drawingId=>{const oKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShapes=scene.fuzzyMathObjects(oKey,!0);if(drawingShapes==null\|\|drawingShapes.length===0)return;const index=this._drawingManagerService.getDrawingOrder(unitId,subUnitId).indexOf(drawingId);for(const shape of drawingShapes)shape.setProps({zIndex:index}),shape.makeDirty()})}_drawingAddListener(){this.disposeWithMe(this._drawingManagerService.add$.subscribe(params=>{this._insertDrawing(params)}))}_insertDrawing(params){const sceneList=[];params.forEach(param=>{const{unitId}=param;if(this._drawingManagerService.getDrawingByParam(param)==null)return;const renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject;sceneList.includes(scene)\|\|sceneList.push(scene)}),sceneList.forEach(scene=>{this._sceneListenerOnDrawingMap.has(scene)\|\|(this._addListenerOnDrawing(scene),this._sceneListenerOnDrawingMap.add(scene))})}_drawingRemoveListener(){this.disposeWithMe(this._drawingManagerService.remove$.subscribe(params=>{params.forEach(param=>{var _a2;const{unitId,subUnitId,drawingId}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject,drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShapes=scene.fuzzyMathObjects(drawingShapeKey,!0);if(drawingShapes.length>0){for(const drawingShape of drawingShapes)drawingShape.dispose();(_a2=scene.getTransformer())==null\|\|_a2.clearSelectedObjects()}})}))}_drawingUpdateListener(){this.disposeWithMe(this._drawingManagerService.update$.subscribe(params=>{params.forEach(param=>{const{unitId,subUnitId,drawingId}=param,drawingParam=this._drawingManagerService.getDrawingByParam(param);if(drawingParam==null)return;const{transform,drawingType}=drawingParam,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;if(transform==null)return!0;const{left=0,top=0,width=0,height=0,angle=0,flipX=!1,flipY=!1,skewX=0,skewY=0}=transform,drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShape=scene.getObject(drawingShapeKey);if(drawingShape==null)return!0;drawingShape.transformByState({left,top,width,height,angle,flipX,flipY,skewX,skewY})})}))}_drawingRefreshListener(){this.disposeWithMe(this._drawingManagerService.refreshTransform$.subscribe(params=>{params.forEach(param=>{const{unitId,subUnitId,drawingId}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const drawingParam=this._drawingManagerService.getDrawingByParam(param);if(drawingParam==null)return;const{transform}=drawingParam,{scene}=renderObject,drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShape=scene.getObject(drawingShapeKey);if(drawingShape==null\|\|transform==null)return!0;const{left=0,top=0,width=0,height=0,angle=0,flipX=!1,flipY=!1,skewX=0,skewY=0}=transform;drawingShape.transformByState({left,top,width,height,angle,flipX,flipY,skewX,skewY})})}))}_drawingVisibleListener(){this.disposeWithMe(this._drawingManagerService.visible$.subscribe(params=>{params.forEach(param=>{const{unitId,subUnitId,drawingId,visible}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject,drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),drawingShape=scene.getObject(drawingShapeKey);if(drawingShape==null)return!0;visible?drawingShape.show():drawingShape.hide()})}))}_filterUpdateParams(params,startTransforms){return params.filter((param,index)=>{if(param==null)return!1;const{transform}=param;return core.checkIfMove(transform,startTransforms==null?void 0:startTransforms[index])})}_addListenerOnDrawing(scene){const transformer=scene.getTransformerByCreate();let startTransforms=null;this.disposeWithMe(core.toDisposable(transformer.changeStart$.subscribe(state=>{const{objects}=state,objectArray=Array.from(objects.values()),drawings=[];startTransforms=objectArray.map(object=>{const{left,top,height,width,angle,oKey,isInGroup}=object,drawing2=this._drawingManagerService.getDrawingOKey(oKey);if(isInGroup\|\|object instanceof engineRender.Group){let group=object.ancestorGroup;if(group==null&&object instanceof engineRender.Group&&(group=object),group==null)return null;const groupDrawing=this._drawingManagerService.getDrawingOKey(group.oKey);if(groupDrawing){const{unitId,subUnitId,drawingId}=groupDrawing;drawings.push({unitId,subUnitId,drawingId});const{left:left2,top:top2,height:height2,width:width2,angle:angle2}=group;return{left:left2,top:top2,height:height2,width:width2,angle:angle2}}}else if(drawing2!=null){const{unitId,subUnitId,drawingId}=drawing2;return drawings.push({unitId,subUnitId,drawingId}),{left,top,height,width,angle}}return null}).filter(transform=>transform!=null),drawings.length>0?this._drawingManagerService.focusDrawing(drawings):this._drawingManagerService.focusDrawing(null)}))),this.disposeWithMe(core.toDisposable(transformer.changeEnd$.subscribe(state=>{const{objects}=state,params=this._filterUpdateParams(getUpdateParams(objects,this._drawingManagerService),startTransforms);params.length>0&&this._drawingManagerService.featurePluginUpdateNotification(params)})))}},__name(_c,"DrawingUpdateController"),_c);DrawingUpdateController=__decorateClass$3([__decorateParam$3(0,core.IUniverInstanceService),__decorateParam$3(1,core.ICommandService),__decorateParam$3(2,engineRender.IRenderManagerService),__decorateParam$3(3,drawing.IDrawingManagerService)],DrawingUpdateController);const _ImageCropperObject=class _ImageCropperObject extends engineRender.Shape{constructor(key,props){props==null&&(props={}),props.transformerConfig={keepRatio:!1,isCropper:!0,anchorFill:"rgb(0, 0, 0)",anchorStroke:"rgb(255, 255, 255)",anchorSize:24};super(key,props);__publicField(this,"_srcRect");__publicField(this,"_prstGeom");__publicField(this,"_applyTransform");__publicField(this,"_dragPadding",8);__publicField(this,"_cacheCanvas");props!=null&&props.srcRect&&(this._srcRect=props.srcRect),props!=null&&props.prstGeom&&(this._prstGeom=props.prstGeom),props!=null&&props.applyTransform&&(this._applyTransform=props.applyTransform),props!=null&&props.dragPadding&&(this._dragPadding=props.dragPadding),this._applyProps()}refreshSrcRect(value,transform){this._srcRect=value,this._applyTransform=transform,this._applyProps()}get srcRect(){return this._srcRect}dispose(){var _a2;super.dispose(),(_a2=this._cacheCanvas)==null\|\|_a2.dispose(),this._srcRect=null}isHit(coord){const oCoord=this.getInverseCoord(coord);return oCoord.x>=-this.strokeWidth/2&&oCoord.x<=this.width+this.strokeWidth/2&&oCoord.y>=-this.strokeWidth/2&&oCoord.y<=this.height+this.strokeWidth/2&&!this._inSurround(oCoord)}_inSurround(oCoord){const padding=this._dragPadding;return oCoord.x>=padding-this.strokeWidth/2&&oCoord.x<=this.width+this.strokeWidth/2-padding&&oCoord.y>=padding-this.strokeWidth/2&&oCoord.y<=this.height+this.strokeWidth/2-padding}render(mainCtx,bounds){return this.visible?(mainCtx.save(),this._draw(mainCtx),mainCtx.restore(),this.makeDirty(!1),this):(this.makeDirty(!1),this)}_draw(ctx){var _a2,_b2;const engine=this.getScene().getEngine(),{width:engineWidth,height:engineHeight}=engine;this._initialCacheCanvas(),(_a2=this._cacheCanvas)==null\|\|_a2.clear();const cacheCtx=(_b2=this._cacheCanvas)==null?void 0:_b2.getContext();cacheCtx!=null&&(cacheCtx.save(),engineRender.Rect.drawWith(cacheCtx,{left:0,top:0,width:engineWidth,height:engineHeight,fill:"rgba(0, 0, 0, 0.5)"}),cacheCtx.setTransform(ctx.getTransform()),this._clipForApplyObject(cacheCtx),this._applyCache(ctx),cacheCtx.restore())}_clipForApplyObject(cacheCtx){let objectType=0;if(this._prstGeom!=null&&(objectType=1),cacheCtx.globalCompositeOperation="destination-out",cacheCtx.beginPath(),objectType===0){const m=this.transform.getMatrix();cacheCtx.transform(m[0],m[1],m[2],m[3],m[4],m[5]),cacheCtx.rect(0,0,this.width,this.height),cacheCtx.fill()}}_applyProps(){if(this._applyTransform==null)return;let cropLeft=0,cropTop=0,cropRight=0,cropBottom=0;const{left:applyLeft=0,top:applyTop=0,width:applyWidth=0,height:applyHeight=0,angle}=this._applyTransform;if(this._srcRect!=null){const{left:left2=0,top:top2=0,right=0,bottom=0}=this._srcRect;cropLeft=left2,cropTop=top2,cropRight=right,cropBottom=bottom}const left=applyLeft+cropLeft,top=applyTop+cropTop;this.transformByState({left,top,width:applyLeft+applyWidth-cropRight-left,height:applyTop+applyHeight-cropBottom-top,angle})}_applyCache(ctx){if(!ctx\|\|this._cacheCanvas==null)return;const cacheCtx=this._cacheCanvas.getContext();cacheCtx.save(),ctx.save(),ctx.setTransform(1,0,0,1,0,0),cacheCtx.setTransform(1,0,0,1,0,0),ctx.drawImage(this._cacheCanvas.getCanvasEle(),0,0),ctx.restore(),cacheCtx.restore()}_initialCacheCanvas(){if(this._cacheCanvas!=null)return;const scene=this.getScene();if(scene==null)return;this._cacheCanvas=new engineRender.Canvas;const engine=scene.getEngine();this._cacheCanvas.setSize(engine.width,engine.height),engine.onTransformChange$.subscribeEvent(()=>{var _a2;(_a2=this._cacheCanvas)==null\|\|_a2.setSize(engine.width,engine.height),this.makeDirty(!0)})}};__name(_ImageCropperObject,"ImageCropperObject");let ImageCropperObject=_ImageCropperObject;var __defProp$2=Object.defineProperty,__getOwnPropDesc$2=Object.getOwnPropertyDescriptor,__decorateClass$2=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$2(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$2(target,key,result),result},"__decorateClass$2"),__decorateParam$2=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$2");let ImageCropperController=(_d=class extends core.Disposable{constructor(_commandService,_drawingManagerService,_renderManagerService,_univerInstanceService,_messageService,_localeService){super();__publicField(this,"_sceneListenerOnImageMap",new WeakSet);this._commandService=_commandService,this._drawingManagerService=_drawingManagerService,this._renderManagerService=_renderManagerService,this._univerInstanceService=_univerInstanceService,this._messageService=_messageService,this._localeService=_localeService,this._init()}_init(){this._initOpenCrop(),this._initCloseCrop(),this._initAutoCrop()}_initAutoCrop(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id!==AutoImageCropOperation.id)return;const params=command.params;if(params==null)return;const{cropType}=params,drawingParams=this._drawingManagerService.getFocusDrawings();if(drawingParams.length!==1)return;const drawingParam=drawingParams[0],{unitId,subUnitId,drawingId}=drawingParam,renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return!0;this._searchCropObject(scene)!=null&&this._commandService.syncExecuteCommand(CloseImageCropOperation.id,{isAuto:!0});const imageShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),imageShape=scene.getObject(imageShapeKey);if(!(imageShape instanceof engineRender.Image)){this._messageService.show({type:design.MessageType.Error,content:this._localeService.t("image-cropper.error")});return}imageShape!=null&&(this._updateCropperObject(cropType,imageShape),this._commandService.executeCommand(OpenImageCropOperation.id,{unitId,subUnitId,drawingId}))}))}_calculateSrcRectByRatio(left,top,width,height,numerator,denominator){const srcRatio=width/height,ratio=numerator/denominator;let newWidth=width,newHeight=height;srcRatio>ratio?newWidth=heightratio:newHeight=width/ratio;const newLeft=(width-newWidth)/2,newTop=(height-newHeight)/2;return{left:engineRender.precisionTo(newLeft,1),top:engineRender.precisionTo(newTop,1),right:engineRender.precisionTo(width-(newLeft+newWidth),1),bottom:engineRender.precisionTo(height-(newTop+newHeight),1)}}_updateCropperObject(cropType,imageShape){const{left,top,width,height}=imageShape.calculateTransformWithSrcRect();let newSrcRect;switch(cropType){case CropType.R1_1:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,1,1);break;case CropType.R16_9:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,16,9);break;case CropType.R9_16:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,9,16);break;case CropType.R5_4:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,5,4);break;case CropType.R4_5:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,4,5);break;case CropType.R4_3:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,4,3);break;case CropType.R3_4:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,3,4);break;case CropType.R3_2:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,3,2);break;case CropType.R2_3:newSrcRect=this._calculateSrcRectByRatio(left,top,width,height,2,3);break;case CropType.FREE:}if(newSrcRect==null)return;imageShape.setSrcRect(newSrcRect);const{left:newLeft=0,top:newTop=0,bottom:newBottom=0,right:newRight=0}=newSrcRect;imageShape.transformByStateCloseCropper({left:left+newLeft,top:top+newTop,width:width-newRight-newLeft,height:height-newBottom-newTop})}_initOpenCrop(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id!==OpenImageCropOperation.id)return;const params=command.params;if(params==null)return;const{unitId,subUnitId,drawingId}=params,renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return!0;if(this._sceneListenerOnImageMap.has(scene)\|\|(this._addListenerOnImage(scene),this._sceneListenerOnImageMap.add(scene)),this._drawingManagerService.getDrawingByParam({unitId,subUnitId,drawingId})==null)return;const imageShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),imageShape=scene.getObject(imageShapeKey);if(imageShape==null)return;if(!(imageShape instanceof engineRender.Image)){this._messageService.show({type:design.MessageType.Error,content:this._localeService.t("image-cropper.error")});return}const transformer=scene.getTransformer();transformer==null\|\|transformer.clearControls();const imageCropperObject=new ImageCropperObject(`${imageShapeKey}-crop`,{srcRect:imageShape.srcRect,prstGeom:imageShape.prstGeom,applyTransform:imageShape.calculateTransformWithSrcRect()});scene.addObject(imageCropperObject,imageShape.getLayerIndex()+1).attachTransformerTo(imageCropperObject),transformer==null\|\|transformer.createControlForCopper(imageCropperObject),this._addHoverForImageCopper(imageCropperObject),imageShape.openRenderByCropper(),transformer==null\|\|transformer.refreshControls(),imageCropperObject.makeDirty(!0),this._drawingManagerService.focusDrawing([{unitId,subUnitId,drawingId}])}))}_searchCropObject(scene){const objects=scene.getAllObjectsByOrder();for(const object of objects)if(object instanceof ImageCropperObject)return object}_initCloseCrop(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id!==CloseImageCropOperation.id)return;const currentUnit=this._univerInstanceService.getFocusedUnit();if(currentUnit==null)return;const unitId=currentUnit.getUnitId(),renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return!0;const imageCropperObject=this._searchCropObject(scene);if(imageCropperObject==null)return;const imageShape=this._getApplyObjectByCropObject(imageCropperObject);if(imageShape==null)return;const transformer=scene.getTransformerByCreate();transformer.detachFrom(imageCropperObject),transformer.clearCopperControl();const srcRect=this._getSrcRectByTransformState(imageShape,imageCropperObject),drawingParam=this._drawingManagerService.getDrawingOKey(imageShape.oKey);if(drawingParam!=null){const{left,top,height,width}=imageCropperObject;this._drawingManagerService.featurePluginUpdateNotification([{...drawingParam,transform:{...drawingParam.transform,left,top,height,width},srcRect:srcRect.srcRectAngle}])}imageShape.setSrcRect({...srcRect.srcRectAngle}),imageShape.closeRenderByCropper(),imageShape.makeDirty(!0),imageCropperObject==null\|\|imageCropperObject.dispose()}));const sheetUnit=this._univerInstanceService.getCurrentTypeOfUnit$(core.UniverInstanceType.UNIVER_SHEET).pipe(rxjs.filter(workbook=>!!workbook),rxjs.switchMap(workbook=>workbook.activeSheet$));this.disposeWithMe(sheetUnit.subscribe(()=>{this._commandService.syncExecuteCommand(CloseImageCropOperation.id)}))}_getApplyObjectByCropObject(cropObject){const cropOKey=cropObject.oKey,applyOKey=cropOKey.slice(0,cropOKey.length-5),scene=cropObject.getScene();if(!scene)return null;const applyObject=scene.getObject(applyOKey);return applyObject==null?null:applyObject}_addListenerOnImage(scene){const transformer=scene.getTransformerByCreate();let startTransform=null;this.disposeWithMe(transformer.changeStart$.subscribe(state=>{const{objects}=state,cropObject=objects.values().next().value;if(cropObject==null\|\|!(cropObject instanceof ImageCropperObject))return;const{left,top,height,width,angle}=cropObject;startTransform={left,top,height,width,angle},transformer.clearCopperControl()})),this.disposeWithMe(transformer.changeEnd$.subscribe(state=>{const{objects}=state,cropObject=objects.values().next().value;if(cropObject==null\|\|!(cropObject instanceof ImageCropperObject))return;const{left,top,height,width,angle}=cropObject;if(!core.checkIfMove({left,top,height,width,angle},startTransform))return;const applyObject=this._getApplyObjectByCropObject(cropObject);if(applyObject==null)return;const srcRect=this._getSrcRectByTransformState(applyObject,cropObject);cropObject.refreshSrcRect(srcRect.srcRect,applyObject.getState()),transformer.createControlForCopper(cropObject)})),this._endCropListener(scene)}_addHoverForImageCopper(o){this.disposeWithMe(o.onPointerEnter$.subscribeEvent(()=>{o.cursor=engineRender.CURSOR_TYPE.MOVE})),this.disposeWithMe(o.onPointerLeave$.subscribeEvent(()=>{o.cursor=engineRender.CURSOR_TYPE.DEFAULT}))}_endCropListener(scene){const transformer=scene.getTransformerByCreate();this.disposeWithMe(transformer.clearControl$.subscribe(changeSelf=>{changeSelf===!0&&this._commandService.syncExecuteCommand(CloseImageCropOperation.id)}))}_getSrcRectByTransformState(applyObject,imageCropperObject){const{left,top,height,width,strokeWidth,angle:copperAngle}=imageCropperObject,{left:applyLeft,top:applyTop,width:applyWidth,height:applyHeight,angle:applyAngle,strokeWidth:applyStrokeWidth}=applyObject,newLeft=left-applyLeft,newTop=top-applyTop,srcRect={left:newLeft,top:newTop,right:applyWidth-newLeft-width,bottom:applyHeight-newTop-height},srcRectAngle={...srcRect};if(applyAngle!==0){const cx=left+width/2,cy=top+height/2,centerPoint=new engineRender.Vector2(cx,cy),newCx=applyWidth/2+applyLeft,newCy=applyHeight/2+applyTop,newCenterPoint=new engineRender.Vector2(newCx,newCy),vertexPoint=new engineRender.Vector2(applyLeft,applyTop);vertexPoint.rotateByPoint(engineRender.degToRad(applyAngle),newCenterPoint);const applyFinalPoint=vertexPoint.clone();applyFinalPoint.rotateByPoint(engineRender.degToRad(-applyAngle),centerPoint);const newAngleLeft=left-applyFinalPoint.x,newAngleTop=top-applyFinalPoint.y;srcRectAngle.left=newAngleLeft,srcRectAngle.top=newAngleTop,srcRectAngle.right=applyWidth-newAngleLeft-width,srcRectAngle.bottom=applyHeight-newAngleTop-height}return{srcRect,srcRectAngle}}},__name(_d,"ImageCropperController"),_d);ImageCropperController=__decorateClass$2([__decorateParam$2(0,core.ICommandService),__decorateParam$2(1,drawing.IDrawingManagerService),__decorateParam$2(2,engineRender.IRenderManagerService),__decorateParam$2(3,core.IUniverInstanceService),__decorateParam$2(4,ui.IMessageService),__decorateParam$2(5,core.Inject(core.LocaleService))],ImageCropperController);var __defProp$1=Object.defineProperty,__getOwnPropDesc$1=Object.getOwnPropertyDescriptor,__decorateClass$1=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc$1(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp$1(target,key,result),result},"__decorateClass$1"),__decorateParam$1=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam$1");const IMAGE_VIEWER_DROPDOWN_PADDING=50;let ImageUpdateController=(_e=class extends core.Disposable{constructor(_commandService,_renderManagerService,_drawingManagerService,_dialogService,_imageIoService,_currentUniverService,_drawingRenderService){super(),this._commandService=_commandService,this._renderManagerService=_renderManagerService,this._drawingManagerService=_drawingManagerService,this._dialogService=_dialogService,this._imageIoService=_imageIoService,this._currentUniverService=_currentUniverService,this._drawingRenderService=_drawingRenderService,this._initialize()}dispose(){super.dispose()}_initialize(){this._drawingAddListener(),this._commandExecutedListener(),this._imageUpdateListener()}_commandExecutedListener(){this.disposeWithMe(this._commandService.onCommandExecuted(command=>{if(command.id===ImageResetSizeOperation.id){const params=command.params;if(params==null)return;this._resetImageSize(params)}}))}_getSceneAndTransformerByDrawingSearch(unitId){if(unitId==null)return;const renderObject=this._renderManagerService.getRenderById(unitId),scene=renderObject==null?void 0:renderObject.scene;if(scene==null)return null;const transformer=scene.getTransformerByCreate();return{scene,transformer}}_resetImageSize(params){const updateParams=[],sceneList=[];params.forEach(param=>{const{unitId,subUnitId,drawingId}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene}=renderObject,imageShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),imageShape=scene.getObject(imageShapeKey);if(imageShape==null)return!0;const imageData=this._drawingManagerService.getDrawingByParam(param);if(imageData==null)return!0;if(imageData.drawingType!==drawing.DrawingTypeEnum.DRAWING_IMAGE)return;imageShape.resetSize();const{width,height}=imageShape.getNativeSize();sceneList.includes(scene)===!1&&sceneList.push(scene),updateParams.push({...imageData,transform:{...imageData.transform,height,width,angle:0},srcRect:null,prstGeom:null})}),this._drawingManagerService.featurePluginUpdateNotification(updateParams),sceneList.forEach(scene=>{scene.getTransformerByCreate().refreshControls().changeNotification()}),this._drawingManagerService.focusDrawing(params)}_drawingAddListener(){this.disposeWithMe(this._drawingManagerService.add$.subscribe(params=>{this._insertImages(params)}))}_insertImages(params){params.forEach(async param=>{var _a2;const{unitId,subUnitId,drawingId}=param,renderObject=this._getSceneAndTransformerByDrawingSearch(unitId),currentSubUnitId=(_a2=getCurrentUnitInfo(this._currentUniverService,unitId))==null?void 0:_a2.subUnitId;if(renderObject==null\|\|currentSubUnitId!==subUnitId)return;const imageParam=this._drawingManagerService.getDrawingByParam(param);if(imageParam==null)return;const images=await this._drawingRenderService.renderImages(imageParam,renderObject.scene);if(!(images==null\|\|images.length===0))for(const image of images)this._addHoverForImage(image),this._addDialogForImage(image)})}_imageUpdateListener(){this.disposeWithMe(this._drawingManagerService.update$.subscribe(params=>{params.forEach(param=>{const{unitId,subUnitId,drawingId}=param,drawingParam=this._drawingManagerService.getDrawingByParam(param);if(drawingParam==null)return;const{transform,drawingType,srcRect,prstGeom,source,imageSourceType}=drawingParam;if(drawingType!==drawing.DrawingTypeEnum.DRAWING_IMAGE)return;const renderObject=this._getSceneAndTransformerByDrawingSearch(unitId);if(renderObject==null)return;const{scene,transformer}=renderObject;if(transform==null)return!0;const drawingShapeKey=drawing.getDrawingShapeKeyByDrawingSearch({unitId,subUnitId,drawingId}),imageShape=scene.getObject(drawingShapeKey);if(imageShape==null)return!0;imageShape.setSrcRect(srcRect),imageShape.setPrstGeom(prstGeom)})}))}_addHoverForImage(o){this.disposeWithMe(core.toDisposable(o.onPointerEnter$.subscribeEvent(()=>{o.cursor=engineRender.CURSOR_TYPE.GRAB}))),this.disposeWithMe(core.toDisposable(o.onPointerLeave$.subscribeEvent(()=>{o.cursor=engineRender.CURSOR_TYPE.DEFAULT})))}_addDialogForImage(o){this.disposeWithMe(core.toDisposable(o.onDblclick$.subscribeEvent(()=>{var _a2;const dialogId=`${o.oKey}-viewer-dialog`,nativeSize=o.getNativeSize(),screenWidth=window.innerWidth-IMAGE_VIEWER_DROPDOWN_PADDING,screenHeight=window.innerHeight-IMAGE_VIEWER_DROPDOWN_PADDING,adjustSize=this._adjustImageSize(nativeSize.width,nativeSize.height,screenWidth,screenHeight),dialog=this._dialogService.open({width:adjustSize.width,id:dialogId,style:{margin:"0",top:"50%",left:"50%",transform:"translate(-50%, -50%)"},children:{label:{name:COMPONENT_IMAGE_VIEWER,props:{src:(_a2=o.getNative())==null?void 0:_a2.src,width:adjustSize.width,height:adjustSize.height}}},destroyOnClose:!0,draggable:!1,onClose:__name(()=>{this._dialogService.close(dialogId),dialog.dispose()},"onClose")})})))}_adjustImageSize(nativeWidth,nativeHeight,screenWidth,screenHeight){if(nativeWidth<=screenWidth&&nativeHeight<=screenHeight)return{width:nativeWidth,height:nativeHeight};const widthRatio=screenWidth/nativeWidth,heightRatio=screenHeight/nativeHeight,scale=Math.min(widthRatio,heightRatio);return{width:Math.floor(nativeWidthscale),height:Math.floor(nativeHeightscale)}}},__name(_e,"ImageUpdateController"),_e);ImageUpdateController=__decorateClass$1([__decorateParam$1(0,core.ICommandService),__decorateParam$1(1,engineRender.IRenderManagerService),__decorateParam$1(2,drawing.IDrawingManagerService),__decorateParam$1(3,ui.IDialogService),__decorateParam$1(4,drawing.IImageIoService),__decorateParam$1(5,core.IUniverInstanceService),__decorateParam$1(6,core.Inject(exports2.DrawingRenderService))],ImageUpdateController);var __defProp2=Object.defineProperty,__getOwnPropDesc=Object.getOwnPropertyDescriptor,__decorateClass=__name((decorators,target,key,kind)=>{for(var result=kind>1?void 0:kind?__getOwnPropDesc(target,key):target,i=decorators.length-1,decorator;i>=0;i--)(decorator=decorators[i])&&(result=(kind?decorator(target,key,result):decorator(result))\|\|result);return kind&&result&&__defProp2(target,key,result),result},"__decorateClass"),__decorateParam=__name((index,decorator)=>(target,key)=>decorator(target,key,index),"__decorateParam");const PLUGIN_NAME="UNIVER_DRAWING_UI_PLUGIN";exports2.UniverDrawingUIPlugin=(_f=class extends core.Plugin{constructor(_config=defaultPluginConfig,_injector,_configService){super(),this._config=_config,this._injector=_injector,this._configService=_configService;const{menu,...rest}=this._config;menu&&this._configService.setConfig("menu",menu,{merge:!0}),this._configService.setConfig(PLUGIN_CONFIG_KEY,rest)}onStarting(){this._initDependencies()}onRendered(){this._injector.get(DrawingUpdateController),this._injector.get(DrawingUIController),this._injector.get(ImageCropperController),this._injector.get(ImageUpdateController)}_initDependencies(){[[exports2.DrawingRenderService],[DrawingUpdateController],[DrawingUIController],[ImageCropperController],[ImageUpdateController]].forEach(dependency=>this._injector.add(dependency))}},__name(_f,"UniverDrawingUIPlugin"),__publicField(_f,"pluginName",PLUGIN_NAME),_f),exports2.UniverDrawingUIPlugin=__decorateClass([__decorateParam(1,core.Inject(core.Injector)),__decorateParam(2,core.IConfigService)],exports2.UniverDrawingUIPlugin),exports2.AutoImageCropOperation=AutoImageCropOperation,exports2.COMPONENT_IMAGE_POPUP_MENU=COMPONENT_IMAGE_POPUP_MENU,exports2.CloseImageCropOperation=CloseImageCropOperation,exports2.DrawingCommonPanel=DrawingCommonPanel,exports2.ImageCropperObject=ImageCropperObject,exports2.ImagePopupMenu=ImagePopupMenu,exports2.ImageResetSizeOperation=ImageResetSizeOperation,exports2.OpenImageCropOperation=OpenImageCropOperation,exports2.SetDrawingAlignOperation=SetDrawingAlignOperation,exports2.getUpdateParams=getUpdateParams,Object.defineProperty(exports2,Symbol.toStringTag,{value:"Module"})});

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@univerjs/drawing-ui",
-  "version": "0.4.0-alpha.0",
+  "version": "0.4.0-alpha.2",
   "private": false,
   "description": "",
   "author": "DreamNum <developer@univer.ai>",
@@ -45,23 +45,17 @@
     "lib"
   ],
   "peerDependencies": {
-    "clsx": ">=2.0.0",
     "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
-    "rxjs": ">=7.0.0",
-    "@univerjs/core": "0.4.0-alpha.0",
-    "@univerjs/design": "0.4.0-alpha.0",
-    "@univerjs/drawing": "0.4.0-alpha.0",
-    "@univerjs/engine-render": "0.4.0-alpha.0",
-    "@univerjs/ui": "0.4.0-alpha.0"
+    "rxjs": ">=7.0.0"
   },
   "dependencies": {
-    "@univerjs/icons": "^0.1.78",
+    "@univerjs/icons": "^0.1.79",
     "clsx": "^2.1.1",
-    "@univerjs/core": "0.4.0-alpha.0",
-    "@univerjs/drawing": "0.4.0-alpha.0",
-    "@univerjs/ui": "0.4.0-alpha.0",
-    "@univerjs/engine-render": "0.4.0-alpha.0",
-    "@univerjs/design": "0.4.0-alpha.0"
+    "@univerjs/core": "0.4.0-alpha.2",
+    "@univerjs/design": "0.4.0-alpha.2",
+    "@univerjs/drawing": "0.4.0-alpha.2",
+    "@univerjs/engine-render": "0.4.0-alpha.2",
+    "@univerjs/ui": "0.4.0-alpha.2"
   },
   "devDependencies": {
     "less": "^4.2.0",
@@ -70,7 +64,7 @@
     "typescript": "^5.6.3",
     "vite": "^5.4.8",
     "vitest": "^2.1.2",
-    "@univerjs-infra/shared": "0.4.0-alpha.0"
+    "@univerjs-infra/shared": "0.4.0-alpha.2"
   },
   "univerSpace": {
     ".": {