Draw rectangle around UV selection

This commit is contained in:
JannisX11 2023-12-01 11:53:52 +01:00
parent 09549458c4
commit 59c45890bf
2 changed files with 37 additions and 22 deletions

View File

@ -2034,15 +2034,23 @@ span.controller_state_section_info {
color: var(--color-light);
cursor: pointer;
}
#uv_selection_frame {
border: 2px dashed var(--color-grid);
pointer-events: none;
position: relative;
z-index: 1;
}
#uv_rotate_handle {
width: 21.4px;
height: 21.4px;
left: -21px;
top: -21px;
position: absolute;
text-align: center;
cursor: url('../assets/rotate_cursor.png') 9 9, auto;
z-index: 1;
background: var(--color-back);
border-radius: 12px;
pointer-events: initial;
}
#uv_rotate_handle:hover {
color: var(--color-light);
@ -2050,11 +2058,13 @@ span.controller_state_section_info {
#uv_scale_handle {
width: 18px;
height: 18px;
right: -16px;
bottom: -16px;
position: absolute;
text-align: center;
cursor: nw-resize;
z-index: 1;
background-color: var(--color-back);
pointer-events: initial;
}
#uv_scale_handle:hover {
color: var(--color-light);

View File

@ -3188,6 +3188,7 @@ Interface.definePanels(function() {
}
},
getSelectedUVBoundingBox() {
if (!Project) return [0, 0, 0, 0];
let min = [UVEditor.getUVWidth(), UVEditor.getUVHeight()];
let max = [0, 0];
this.selected_faces.forEach(fkey => {
@ -3569,6 +3570,16 @@ Interface.definePanels(function() {
uv_grid: false
})
},
getUVSelectionFrameStyle() {
let box = this.getSelectedUVBoundingBox();
if (!box) return {};
return {
left: this.toPixels(box[0], 0),
top: this.toPixels(box[1], 0),
width: this.toPixels(box[2] - box[0], 0),
height: this.toPixels(box[3] - box[1], 0),
};
},
isTransformingLayer() {
if (!this.texture || !this.texture.selected_layer) return false;
let tool = Toolbox.selected;
@ -3868,26 +3879,20 @@ Interface.definePanels(function() {
</template>
<div id="uv_rotate_handle" v-if="mode == 'uv' && isRotatingAvailable()"
@mousedown.stop="rotateFace($event)" @touchstart.prevent.stop="rotateFace($event)"
:title="tl('uv_editor.rotate_uv')"
:style="{
left: toPixels(getSelectedUVBoundingBox()[0], -25),
top: toPixels(getSelectedUVBoundingBox()[1], -25),
}
">
<i class="material-icons">rotate_right</i>
</div>
<div id="uv_scale_handle" v-if="mode == 'uv' && isScalingAvailable()"
@mousedown.stop="scaleFaces($event)" @touchstart.prevent.stop="scaleFaces($event)"
:title="tl('uv_editor.scale_uv')"
:style="{
left: toPixels(getSelectedUVBoundingBox()[2], -2),
top: toPixels(getSelectedUVBoundingBox()[3], -2),
}
">
<i class="fa fa-solid fa-square-up-right"></i>
<div id="uv_selection_frame" v-if="mode == 'uv'" :style="getUVSelectionFrameStyle()">
<div id="uv_rotate_handle" v-if="isRotatingAvailable()"
@mousedown.stop="rotateFace($event)" @touchstart.prevent.stop="rotateFace($event)"
:title="tl('uv_editor.rotate_uv')"
>
<i class="material-icons">rotate_right</i>
</div>
<div id="uv_scale_handle" v-if="isScalingAvailable()"
@mousedown.stop="scaleFaces($event)" @touchstart.prevent.stop="scaleFaces($event)"
:title="tl('uv_editor.scale_uv')"
>
<i class="fa fa-solid fa-square-up-right"></i>
</div>
</div>
<div class="selection_rectangle"