@arcgis/core/views/draw/support/GraphicMover.js

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

/* COPYRIGHT Esri - https://js.arcgis.com/5.0.8/LICENSE.txt */
import{__decorate as i}from"tslib";import{EventedAccessor as t}from"../../../core/Evented.js";import{clone as e}from"../../../core/lang.js";import{watch as s,when as r}from"../../../core/reactiveUtils.js";import{property as h,subclass as o}from"../../../core/accessorSupport/decorators.js";import a from"../../../layers/GraphicsLayer.js";import n from"../../../symbols/SimpleFillSymbol.js";import c from"../../../symbols/SimpleLineSymbol.js";import l from"../../../symbols/SimpleMarkerSymbol.js";import{cloneMove as p}from"./drawUtils.js";import d from"./HighlightHelper.js";import{addUniqueLayer as g,findLayerView as v}from"./layerUtils.js";import{GraphicClickEvent as y,GraphicDoubleClickEvent as _,GraphicPointerDownEvent as m,GraphicPointerUpEvent as f,GraphicPointerOutEvent as u,GraphicPointerOverEvent as w,GraphicMoveStartEvent as G,GraphicMoveEvent as b,GraphicMoveStopEvent as k}from"./input/GraphicMoverEvents.js";import{ViewEventPriorities as O}from"../../input/InputManager.js";import{createScreenPointFromEvent as x}from"../../support/screenUtils.js";const H="indicator-symbols";let M=class extends t{constructor(i){super(i),this._activeGraphic=null,this._dragEvent=null,this._hoverGraphic=null,this._indicators=[],this._initialDragGeometry=null,this._layerViews=null,this.type="graphic-mover",this.callbacks={onGraphicClick(){},onGraphicDoubleClick(){},onGraphicMoveStart(){},onGraphicMove(){},onGraphicMoveStop(){},onGraphicPointerOver(){},onGraphicPointerOut(){},onGraphicPointerDown(){},onGraphicPointerUp(){}},this.enableMoveAllGraphics=!1,this.graphics=[],this.highlightName=null,this.highlightsEnabled=!1,this.indicatorsEnabled=!1,this._defaultLayer=new a({listMode:"hide",internal:!0,title:"GraphicMover highlight layer"}),this.layer=this._defaultLayer,this.view=null}initialize(){g(this.view,this.layer),this._highlightHelper=new d({view:this.view}),this.refresh(),this.addHandles([s(()=>this.graphics.length,()=>this.refresh()),r(()=>this.view?.ready,()=>{this.addHandles([this.view.on("immediate-click",i=>this._clickHandler(i),O.TOOL),this.view.on("double-click",i=>this._doubleClickHandler(i),O.TOOL),this.view.on("pointer-down",i=>this._pointerDownHandler(i),O.TOOL),this.view.on("pointer-move",i=>this._pointerMoveHandler(i),O.TOOL),this.view.on("pointer-up",i=>this._pointerUpHandler(i),O.TOOL),this.view.on("drag",i=>this._dragHandler(i),O.TOOL),this.view.on("key-down",i=>this._keyDownHandler(i),O.TOOL)])},{once:!0,initial:!0}),s(()=>this.view,i=>{this._highlightHelper.removeAll(),this._highlightHelper.view=i}),s(()=>[this.highlightsEnabled,this.highlightName],()=>{this._highlightHelper?.removeAll(),this._setUpHighlights()})])}destroy(){this._removeIndicators(),this.view.map?.remove(this.layer),this._defaultLayer.destroy(),this.reset()}get state(){const i=this.view.ready,t=this.graphics.length>0,e=this._activeGraphic;return i&&t?e?"moving":"active":i?"ready":"disabled"}refresh(){this.reset(),this._setup()}reset(){this._activeGraphic=null,this._hoverGraphic=null,this._dragEvent=null,this._highlightHelper.removeAll()}updateGeometry(i,t){const e=this.graphics[i];e&&(e.set("geometry",t),this._setUpIndicators())}_setup(){this._setUpHighlights(),this._setUpIndicators(),this._syncLayerViews()}_clickHandler(i){const t=this._findTargetGraphic(x(i));if(t){const e=new y(t,this.graphics.indexOf(t),i.x,i.y,i);this.emit("graphic-click",e),this.callbacks.onGraphicClick?.(e)}}_doubleClickHandler(i){const t=this._findTargetGraphic(x(i));if(t){const e=new _(t,this.graphics.indexOf(t),i.x,i.y,i);this.emit("graphic-double-click",e),this.callbacks.onGraphicDoubleClick?.(e)}}_pointerDownHandler(i){const t=this._findTargetGraphic(x(i));if(t){this._activeGraphic=t;const{x:e,y:s}=i,r=new m(t,this.graphics.indexOf(t),e,s,i);this.emit("graphic-pointer-down",r),this.callbacks.onGraphicPointerDown?.(r)}else this._activeGraphic=null}_pointerUpHandler(i){if(this._activeGraphic){const{x:t,y:e}=i,s=this.graphics.indexOf(this._activeGraphic),r=new f(this._activeGraphic,s,t,e,i);this.emit("graphic-pointer-up",r),this.callbacks.onGraphicPointerUp?.(r),this._hoverGraphic=this._activeGraphic}}_pointerMoveHandler(i){if(this._dragEvent)return;const t=this._findTargetGraphic(x(i));if(t){const{x:e,y:s}=i;if(this._hoverGraphic){if(this._hoverGraphic===t)return;const r=this.graphics.indexOf(this._hoverGraphic),h=new u(this.graphics[r],r,e,s,i);this._hoverGraphic=null,this.emit("graphic-pointer-out",h),this.callbacks.onGraphicPointerOut?.(h)}const r=this.graphics.indexOf(t),h=new w(t,r,e,s,i);return this._hoverGraphic=t,this.emit("graphic-pointer-over",h),void this.callbacks.onGraphicPointerOver?.(h)}if(this._hoverGraphic){const{x:t,y:e}=i,s=this.graphics.indexOf(this._hoverGraphic),r=new u(this.graphics[s],s,t,e,i);this._hoverGraphic=null,this.emit("graphic-pointer-out",r),this.callbacks.onGraphicPointerOut?.(r)}}_dragHandler(i){if("start"!==i.action&&!this._dragEvent||!this._activeGraphic?.geometry)return;"start"===i.action&&this._removeIndicators(),i.stopPropagation();const{action:t,x:s,y:r}=i,h=this.graphics.indexOf(this._activeGraphic),o=this._dragEvent?s-this._dragEvent.x:0,a=this._dragEvent?r-this._dragEvent.y:0,n=s-i.origin.x,c=r-i.origin.y,l="start"===t?this._activeGraphic.geometry:this._initialDragGeometry,d=p(l,n,c,this.view);if(this._activeGraphic.geometry=d,this.enableMoveAllGraphics&&this.graphics.forEach(i=>{i!==this._activeGraphic&&(i.geometry=p(i.geometry,o,a,this.view))}),this._dragEvent=i,"start"===t){this._initialDragGeometry=e(l);const t=new G(this._activeGraphic,this.graphics,h,s,r,o,a,n,c,i);this.emit("graphic-move-start",t),this.callbacks.onGraphicMoveStart?.(t),t.defaultPrevented&&this._activeGraphic.set("geometry",l)}else if("update"===t){const t=new b(this._activeGraphic,this.graphics,h,s,r,o,a,n,c,i);this.emit("graphic-move",t),this.callbacks.onGraphicMove?.(t),t.defaultPrevented&&(this._activeGraphic.geometry=l)}else{const t=new k(this._activeGraphic,this.graphics,h,s,r,o,a,n,c,i);this._dragEvent=null,this._activeGraphic=null,this._setUpIndicators(),this.emit("graphic-move-stop",t),this.callbacks.onGraphicMoveStop?.(t),t.defaultPrevented&&(this.graphics[h].set("geometry",this._initialDragGeometry),this._setUpIndicators()),this._initialDragGeometry=null}}_keyDownHandler(i){"a"!==i.key&&"d"!==i.key&&"n"!==i.key||"moving"!==this.state||i.stopPropagation()}_findTargetGraphic(i){const t=this.view.toMap(i),e=this.graphics;this._syncLayerViews();const s=this._layerViews.flatMap(i=>"graphicsViews"in i?Array.from(i.graphicsViews(),i=>i.hitTest(t)).flat():i.graphicsView.hitTest(t)).filter(i=>e.includes(i)).sort((i,t)=>e.indexOf(i)-e.indexOf(t));return s.length?s[0]:null}_syncLayerViews(){this._layerViews=[];const i=new Set;for(const t of this.graphics){const e=v(this.view,t.layer);e&&i.add(e)}this._layerViews=[...i]}_setUpHighlights(){this.highlightsEnabled&&this.graphics.length&&this._highlightHelper.add(this.graphics,this.highlightName)}_setUpIndicators(){if(this._removeIndicators(),this.indicatorsEnabled){for(const i of this.graphics){const t=i.clone();t.symbol=E(i),this._indicators.push(t),this.addHandles(s(()=>i.symbol,()=>this._setUpIndicators()),H)}this.layer.addMany(this._indicators)}}_removeIndicators(){this.removeHandles(H),this._indicators.length&&(this.layer.removeMany(this._indicators),this._indicators.forEach(i=>i.destroy()),this._indicators=[])}};function E(i){const t=12;if(null==i.symbol)return null;switch(i.symbol.type){case"cim":return new l({style:"circle",size:t,color:[0,0,0,0],outline:{color:[255,127,0,1],width:1}});case"picture-marker":{const{xoffset:t,yoffset:e,height:s,width:r}=i.symbol,h=s===r?r:Math.max(s,r);return new l({xoffset:t,yoffset:e,size:h,style:"square",color:[0,0,0,0],outline:{color:[255,127,0,1],width:1}})}case"simple-marker":{const{xoffset:t,yoffset:e,size:s,style:r}=i.symbol;return new l({xoffset:t,yoffset:e,style:"circle"===r?"circle":"square",size:s+2,color:[0,0,0,0],outline:{color:[255,127,0,1],width:1}})}case"simple-fill":return new n({color:[0,0,0,0],outline:{style:"dash",color:[255,127,0,1],width:1}});case"simple-line":return new c({color:[255,127,0,1],style:"dash",width:1});case"text":{const{xoffset:e,yoffset:s}=i.symbol;return new l({xoffset:e,yoffset:s,size:t,color:[0,0,0,0],outline:{color:[255,127,0,1],width:1}})}default:return null}}i([h()],M.prototype,"_activeGraphic",void 0),i([h({readOnly:!0})],M.prototype,"type",void 0),i([h()],M.prototype,"callbacks",void 0),i([h()],M.prototype,"enableMoveAllGraphics",void 0),i([h()],M.prototype,"graphics",void 0),i([h()],M.prototype,"highlightName",void 0),i([h()],M.prototype,"highlightsEnabled",void 0),i([h()],M.prototype,"indicatorsEnabled",void 0),i([h()],M.prototype,"_defaultLayer",void 0),i([h()],M.prototype,"layer",void 0),i([h({readOnly:!0})],M.prototype,"state",null),i([h()],M.prototype,"view",void 0),M=i([o("esri.views.draw.support.GraphicMover")],M);const U=M;export{U as default};