/*
 * This file is part of the TYPO3 CMS project.
 *
 * It is free software; you can redistribute it and/or modify it under
 * the terms of the GNU General Public License, either version 2
 * of the License, or any later version.
 *
 * For the full copyright and license information, please read the
 * LICENSE.txt file that was distributed with this source code.
 *
 * The TYPO3 project - inspiring people to share!
 */
import{LitElement as u,html as f}from"lit";import{property as c,state as p,customElement as z}from"lit/decorators.js";import{Offset as v}from"@typo3/backend/offset.js";var l=function(n,e,t,r){var o=arguments.length,i=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(n,e,t,r);else for(var d=n.length-1;d>=0;d--)(a=n[d])&&(i=(o<3?a(i):o>3?a(e,t,i):a(e,t))||i);return o>3&&i&&Object.defineProperty(e,t,i),i},s;(function(n){n.move="move",n.resizeN="resizeN",n.resizeE="resizeE",n.resizeS="resizeS",n.resizeW="resizeW",n.resizeSE="resizeSE",n.resizeSW="resizeSW",n.resizeNE="resizeNE",n.resizeNW="resizeNW"})(s||(s={}));const g=[s.resizeNW,s.resizeN,s.resizeNE],m=[s.resizeNE,s.resizeE,s.resizeSE],b=[s.resizeSE,s.resizeS,s.resizeSW],E=[s.resizeSW,s.resizeW,s.resizeNW];let h=class extends u{constructor(){super(...arguments),this.reverting=!1,this.action=null,this.originOffset=null,this.originPosition=null,this.handleStart=e=>{const t=e.target;if(!(e.buttons!==1||!this.contains(t))){if(t.dataset.resize){const r="resize"+t.dataset.resize.toUpperCase();this.action=s[r]}else this.action=s.move;this.reverting=!1,this.originOffset=this.offset.clone(),this.originPosition={x:e.clientX,y:e.clientY},this.dispatchEvent(this.createEvent("draggable-resizable-started",{action:this.action,originOffset:this.originOffset}))}},this.handleUpdate=e=>{if(!this.action)return;const t={x:e.clientX-this.originPosition.x,y:e.clientY-this.originPosition.y};this.offset=this.adjustOffset(this.originOffset,t),this.dispatchEvent(this.createEvent("draggable-resizable-updated",{action:this.action,originOffset:this.originOffset}))},this.handleFinish=()=>{this.action&&(this.dispatchEvent(this.createEvent("draggable-resizable-finished",{action:this.action,originOffset:this.originOffset})),this.action=null,this.originOffset=null,this.originPosition=null)}}revert(e){this.reverting=!0,this.offset=e,setTimeout(()=>this.reverting=!1,500)}connectedCallback(){super.connectedCallback(),this.pointerEventNames.pointerDown.forEach(e=>document.addEventListener(e,this.handleStart,!0)),this.pointerEventNames.pointerMove.forEach(e=>document.addEventListener(e,this.handleUpdate,!0)),this.pointerEventNames.pointerUp.forEach(e=>document.addEventListener(e,this.handleFinish,!0))}disconnectedCallback(){super.disconnectedCallback(),this.pointerEventNames.pointerDown.forEach(e=>document.removeEventListener(e,this.handleStart,!0)),this.pointerEventNames.pointerMove.forEach(e=>document.removeEventListener(e,this.handleUpdate,!0)),this.pointerEventNames.pointerUp.forEach(e=>document.removeEventListener(e,this.handleFinish,!0))}render(){return f`<div class="cropper-focus-area ui-draggable ui-draggable-handle ui-resizable"><div class="ui-resizable-handle ui-resizable-n" data-resize=n></div><div class="ui-resizable-handle ui-resizable-e" data-resize=e></div><div class="ui-resizable-handle ui-resizable-s" data-resize=s></div><div class="ui-resizable-handle ui-resizable-w" data-resize=w></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" data-resize=se></div><div class="ui-resizable-handle ui-resizable-sw" data-resize=sw></div><div class="ui-resizable-handle ui-resizable-ne" data-resize=ne></div><div class="ui-resizable-handle ui-resizable-nw" data-resize=nw></div></div>`}update(e){super.update(e),Object.assign(this.style,this.getOffsetStyles(this.offset))}createRenderRoot(){return this}adjustOffset(e,t){const o=this.parentElement.getBoundingClientRect(),i=e.clone();if(this.action===s.move&&(i.left=this.minMax(i.left+t.x,0,o.width-i.width),i.top=this.minMax(i.top+t.y,0,o.height-i.height)),g.includes(this.action)){const a=this.minMax(t.y,-i.top,i.height-2);i.top+=a,i.height-=a}else b.includes(this.action)&&(i.height=this.minMax(i.height+t.y,2,o.height-i.top));if(E.includes(this.action)){const a=this.minMax(t.x,-i.left,i.width-2);i.left+=a,i.width-=a}else m.includes(this.action)&&(i.width+=t.x);return i}minMax(e,t,r){return e<t?t:e>r?r:e}createEvent(e,t){return new CustomEvent(e,{detail:t,bubbles:!0,composed:!0})}getOffsetStyles(e){return{left:`${e.left}px`,top:`${e.top}px`,width:`${e.width}px`,height:`${e.height}px`}}};l([c({type:Object,converter:n=>v.fromObject(JSON.parse(n)),reflect:!0})],h.prototype,"offset",void 0),l([c({type:Object})],h.prototype,"pointerEventNames",void 0),l([c({type:Boolean,reflect:!0})],h.prototype,"reverting",void 0),l([p()],h.prototype,"action",void 0),h=l([z("typo3-backend-draggable-resizable")],h);export{h as DraggableResizableElement};