From 3b8fc807f7ab4ca180398138121ef9e3c0ff836e Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Thu, 26 Dec 2024 17:40:27 +0100
Subject: [PATCH] Add corner markers to editor resizer area

---
 src/csui/src/components/TriggerZoneEditor.vue |  32 +++++++++++++-----
 src/res/img/corner-marker_64.webp             | Bin 0 -> 3564 bytes
 2 files changed, 23 insertions(+), 9 deletions(-)
 create mode 100644 src/res/img/corner-marker_64.webp

diff --git a/src/csui/src/components/TriggerZoneEditor.vue b/src/csui/src/components/TriggerZoneEditor.vue
index 9d176f2..33b9cf5 100644
--- a/src/csui/src/components/TriggerZoneEditor.vue
+++ b/src/csui/src/components/TriggerZoneEditor.vue
@@ -8,28 +8,24 @@
       @mousedown="(event) => handleMouseDown('offset', event)"
     >
       <div
-        class="uw-clickable tl"
+        class="uw-clickable corner tl"
         @mousedown.stop="(event) => handleMouseDown('tl', event)"
       >
-        XX
       </div>
       <div
-        class="uw-clickable tr"
+        class="uw-clickable corner tr"
         @mousedown.stop="(event) => handleMouseDown('tr', event)"
       >
-        XX
       </div>
       <div
-        class="uw-clickable bl"
+        class="uw-clickable corner bl"
         @mousedown.stop="(event) => handleMouseDown('bl', event)"
       >
-        XX
       </div>
       <div
-        class="uw-clickable br"
+        class="uw-clickable corner br"
         @mousedown.stop="(event) => handleMouseDown('br', event)"
       >
-        XX
       </div>
     </div>
   </div>
@@ -58,6 +54,7 @@ export default {
   created() {
     document.addEventListener("mouseup", this.handleMouseUp);
     document.addEventListener("mousemove", this.handleMouseMove);
+    updateTriggerZones();
   },
   methods: {
     updateTriggerZones() {
@@ -169,6 +166,8 @@ export default {
 <style lang="scss" scoped>
 .active-trigger-area {
   background-image: url('/res/img/grid_512.webp');
+  background-position: center;
+  background-attachment: fixed;
 }
 
 .trigger-zone-editor {
@@ -176,8 +175,14 @@ export default {
   height: 100%;
   position: relative;
 
-  > * {
+  > .corner {
     position: absolute;
+    width: 32px;
+    height: 32px;
+    background-color: #000;
+    background-image: url('/res/img/corner-marker_64.webp');
+    background-size: cover;
+
   }
   .tr, .tl {
     top: 0;
@@ -191,6 +196,15 @@ export default {
   .tr, .br {
     right: 0;
   }
+  .br {
+    transform: rotate(90deg);
+  }
+  .bl {
+    transform: rotate(180deg);
+  }
+  .tl {
+    transform: rotate(-90deg);
+  }
 }
 
 </style>
diff --git a/src/res/img/corner-marker_64.webp b/src/res/img/corner-marker_64.webp
new file mode 100644
index 0000000000000000000000000000000000000000..69598891f52decfdc2c83ac345d5c3b933ad4d03
GIT binary patch
literal 3564
zcmaJ@c{r3^A3n%Z$Tp}K*@i;)YKRbJUxvt%3S(!oFE23_8f8uPeTkB_7^1Rf%~q3r
z&A!AimZ31;qxZYM_xs~}zjHn3ocp<d_x*d$`JLx_uE$7AU451j0MqNL$eTzxvl9RS
zDX1&|zO>ZTklB>bEuhSHMWMZpsQ`e!=j~~vp~`1wZox;p2p9k}fB`tTWR3E2*Sn!^
ze5C&0ZD#;b97XWrN4fsD<{w!`TRSfl02F+XLIvgS=?!5k2w(E^c0a<&5Qd=~t!*J(
z4B_*h&;lVmbi~{Ig?}7jhu`@3reL1NMrzRBU=Yve@L$;Gzc9+t6AfuDKpMC$`W}>@
z((Es6dxY;FVYI6cw6@>vXon1T_e^d;GaTyNKm%w2J%9v!zy|mLC*TUafjBhZgBUMh
z1jSYV!T-l^KN51;KrSbMf*jX?8$bi=-+pj(29O47f7jN_URLHeMZus70QCf!yeR|#
z?Q;MQV#(xRIb`xdE&x<x05shD+wYbQfZR63$NtU1vjAWU1)%EF-<(Yn0M%FkP7S+T
zds_c~4iz*~+S>y_d<g)fIRI>Z0Gzn>SKXl4Q5@tA0$>c)O1B$;lvDtO9iZHn|FCa5
z$nc-K{a?+$>vvTbsp$_LDMfY#dQ@5~v+qiz=ozk*qTCKw1Lxk*D)eY3?#5^py6RVR
z;AF(>mvw|7K^sb>T}+KvASkJgJoSa8q?W-IOI)S#b)xoav(Ydc%{cJ)qtFRfM7ZPc
ze!a1<4UKN~ig)tdOf!`$4nO5emlf_*2#&UHuZ}M4+^s%I4j8-@;4oY@&PH#i&8w;H
zB6PiTq|j6J*Hg*|XR<`6uz>sK5PtotRg*$v2IJcJR2{?GT*F!`uKbKMwyo)pW9gkw
z=8|8WzD=V)do?clg_l#@r$TrwJXeHrV19m)doE5+KeyoL&)QUbyg@@I_qjOZKQC*E
z<ku?e@=_u^W3Rpb**ZzCq(ka=maoMSZp6rx?B%KFTu*dq2t4fX41n!+z8|s2AD?m|
zET=DdO(6)&P66Dz<L}!GSnq6>4iBGc{*z$IUWR(*_9D+oBymsJXkcE#zY$@y^Uxn(
zUHP=~>@4E8c4}o8XRS<hkMx@>%MpS?&%C`0(WhG#n9L00^1KQr18nL(z=gC~wT2Nh
zKFY<$36j(7ldtQZ-la?nZ!MpuoM8NnYo=y9z^mxuq#i)|`)Bv@?%ynIXx3qwZ?8#k
zX?NLW3F*u77b<ejpmo?}jY>KDtO^Ue;RJgB7Gi%jMZEhMG4T1fvA*<chH+n?J3MSV
zudcE8Q@%l0v5q}m`yHY@VTf%=x0u0|?j+U(Pt6qOlgkd<v9-E&=gkuK1fz01zbOp3
z;`coBbFi7UwK_l5zDD}y@g7X}i<HF|1~~@28G5s|MCM@cBSaxeIe+emXHUl=Cd?jn
zq9a;@ft2@XRStMux7&XUZ|Koch32uQg}$78nb2F?Cjc@iL{)$aP?Cp*s|oP)bM4ar
zKB~|vpr3*Y>CxJGxjGr*e~RAE@G`?8?$B?DluWzmpnX^BjK^U(BKiurY*z16Zza{B
zSnKt&k+)gN;8*n=iNCuhfN>xDqwV{C0hwir{MrC1*;1cK4x6OvtM3S)2pHcakS1u9
zM*`@#Lk>(|D=+dce#rg6rdTvYzn8QVL#pej@4!rv6&A!cl{YY3L5+~vgq*dK@`LmR
zMdD$ZDG$Xf?-eaP-tN1oJw4R*mUpuv$L`zN@JlUKl2&c9iNy|{w&kg6H);GyHWXNa
zMWW(z!MFl-t9c88_-M$l)O9}@es`#4P*|d?xy|}Cx>{xI47+Y?@y+XFV$SMnIFs62
zXS)D6{6$47OJQIX`Ihv&t<L8DGF|8^+83<iV<{pSx5FF*hcEj!pQkq3y@+I39QKc?
z&GRumItr}oyS*WdhIy!HE6wH@^OwYzj7j;elXX9SYOCS$TYb;5XGpY(3YN))DD6t5
zmu;Tmot5XZPH17?IjG-@51jPgFEYP{Sgs-7Pr~BTA9ZG4*b&QE3ymD<*<<%%8R&NC
z*6$U{(QLF~8^G{qKYFXSZjHri*s7~nqu^<Ku|se5ZprtfkbUw*brW=a40A@c{Jg|`
z#1=ey-d-efYyd}&_^yXJYprAGb|^s@VB0)VX`I}y@|J;tTwmM7DI1$u91T9g?^~h}
z(WLqJf#p-P!J0fq(&De;6c2?h_L44#waqxz-R@r7lb{c+pI@==bJyU=ID3bQpIs~d
zdF{YF`5}#mF3E`0xjoFdB7L$zus%DL6Q`GrSs3E+LeW#dpyE#ZUQX5^J~Phz`fPMP
zzCD9|ZTY>GWvj+;yL%e0AWUCH0BdOKe6wv)mh0Rn))KwX*2h1`_ZlHq6bu(f)xy7!
z$3}3faz2lpl!B*f5)DJ0_LVP6bq6zfkDIysYJW|aj6jY^|IlUT*AZ5u%ectaCzI5z
zu`AZSrTm9z-qPMyR0OBxlT})5ms#QY;J(;ZxyjzXv<6bCSQc69@_p5T%h#^pXp7d(
z-R*M2S$8`eJ8$tZA9KScY<oV79~1t>qcxENUv?Rxs(3ALXB18F$goz4|1gvFF|Ma?
z^VPWX!<L-g<OK_hnZRT3dwTHTuyZ|)<?%DoxPsbedijAgm<a*m9Ri2rg+WO^B_p@v
z^81a$z|Q6XB#km`|GNEv`IPfr6rFJsT0q<70wJ8k<#g1?C2bc4F})t5Y8gTFQfYPm
zH;xb5yvLa?e!RE2-4kp+tO7Tm6T15_-#1#|<%Effc^q<mYLb{zmNqSCP05<!yqbd8
zvU#6LYnV~Jq(gX@6n~0Le;{Tn*{E}NK&m70>V3bS;{KXm+Q4b#=k2N0g$~8l?(!Qi
zKY#PE(Bj)5sVdV96&tpRvh_?<cFX83+h00AWYx@j2v=EW_iIWyzfz>8>JhsTmajZg
z$BluBOZO|V2pN7d6+AX$dT>#GwHcv`nNF%W**W>n&0jbNrJ1l%(g!0KRqE_?8RZ|p
zC`n}{=zK^Bx0&&<yLVa-z3v?&%@*RHEw@mn$lrFK;qZBuh?$&F2u3wBnAx-{tV!+L
zY&(-qj{Oz-Qp#0&S)APUhNoi&CX`73l-bp%9K4%t6>|IZZ;9tj=Z=M|{U|LGTbbuh
z>*!+3=E_!_4;AUK-iP0JON^cK4SY+X<(hrCMz3GH$?1dONeQSh2}V>%nFN?eHRT3}
zg?-X2n2+K$(z>arbS;GL$-R~<8*&SN60FI^%EeDy6G~HVFsJ{JQJCs7LVf+EcaU_B
zv@yCmuA6wW+ewz*VtZu;=6u-uNT<f<4DV?}$+aw1g?Flx^}8%5nX3+~n)dgDK=!n;
z_>%5Tb{Rg&opIZQ5=hw|%_0iReW5*yDP8Oif`69KA+*1#4Bz;(<xd_9^!(%od+4~w
zeBl#k=8x7ynDEy*7xca?W_fdUuSy{Bgj3hZ)<h8|<M<aXeqlRZYFsMYMF(jP%($^u
zOz8FYv+ik4nWClVJrO<Jd*oayzop9c?Vt+NjPIRyl7~i@;^K;@xk%H#Ohoh+Ol<?x
znCOFE^nJpb2791cq0DO6A9gG%cb!UsM*j(GcX^$JU}xULeWg2=LVi5&rlzDAxQX0T
z%PyMYY?aDY>ZJ)2!h7h)4@N)Kv~OxE9Vj^mI3{a_+xH>GuX2};q)Np*=9t?0#O3z4
zMH;xKGfwoRdwNJsu<YW{EdGj;J$clP61c=y6(jJ1j(Bz4`&8F=gNF*rzbyNx7dBd!
z43<6#nw;QS8O2-hbXEpjadlMC<H*HYh@1?Cd)EmI+Lu~rpRm_sV*KGB95%Q$nOf!W
zwwz|>9ST*l7$Y0m`>^fHGZP&Wr<btO_o1B8T>cvOS8JxWYaTX(c)Eq}v+E}3@B|CS
z406dEpLfXUdHt0HH=gh;fysQ+WxA7r0^FN=PgxweoRcrEUz+4N+e{8w{8lM!FlovV
zbh}>)uX8znyTXk!zCT@Pno02iPiaXQiBFfa#)iDI9mdh@i4zwyw8Y3(58ja1`N)0d
z#Uo}$oVu-EEb?-wIQ%-EFQ0h4X1yyRx?`o#-pQgBWoJ2OJ$`BUe9VQcpj<#Hze5-8
zK1gp%DmG9Xuxwc<(K^=tIylTago#|g+HcVQkokDH<d?0&7Fv}6K0U{(E<uA#pN_j@
zyit~q<w9jKa0gFq1J1w*nYo}OZxb3WPF)Mvt4QwhiE7=MjTQyFh@k$c3$Oetb1ywx
z;3Yim#Kg)Ot@|Rfcd%LI6WNhVyHc+HUsY36t9A1|3Z(3#Qm$czcvo0^5DhvH=texB
z(3i87Gp9N965Nsl6K(74HpF*fT)}HxjhyWQsdBD$D+Y;%8?>{HFH8kkhxE#-=Y4g$
JTaW(1{{?hIH%R~h

literal 0
HcmV?d00001