mirror of
https://github.com/JannisX11/blockbench.git
synced 2024-11-27 04:21:46 +08:00
Draw rectangle around UV selection
This commit is contained in:
parent
09549458c4
commit
59c45890bf
@ -2034,15 +2034,23 @@ span.controller_state_section_info {
|
|||||||
color: var(--color-light);
|
color: var(--color-light);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
#uv_selection_frame {
|
||||||
|
border: 2px dashed var(--color-grid);
|
||||||
|
pointer-events: none;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
#uv_rotate_handle {
|
#uv_rotate_handle {
|
||||||
width: 21.4px;
|
width: 21.4px;
|
||||||
height: 21.4px;
|
height: 21.4px;
|
||||||
|
left: -21px;
|
||||||
|
top: -21px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: url('../assets/rotate_cursor.png') 9 9, auto;
|
cursor: url('../assets/rotate_cursor.png') 9 9, auto;
|
||||||
z-index: 1;
|
|
||||||
background: var(--color-back);
|
background: var(--color-back);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
|
pointer-events: initial;
|
||||||
}
|
}
|
||||||
#uv_rotate_handle:hover {
|
#uv_rotate_handle:hover {
|
||||||
color: var(--color-light);
|
color: var(--color-light);
|
||||||
@ -2050,11 +2058,13 @@ span.controller_state_section_info {
|
|||||||
#uv_scale_handle {
|
#uv_scale_handle {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
right: -16px;
|
||||||
|
bottom: -16px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: nw-resize;
|
cursor: nw-resize;
|
||||||
z-index: 1;
|
|
||||||
background-color: var(--color-back);
|
background-color: var(--color-back);
|
||||||
|
pointer-events: initial;
|
||||||
}
|
}
|
||||||
#uv_scale_handle:hover {
|
#uv_scale_handle:hover {
|
||||||
color: var(--color-light);
|
color: var(--color-light);
|
||||||
|
@ -3188,6 +3188,7 @@ Interface.definePanels(function() {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
getSelectedUVBoundingBox() {
|
getSelectedUVBoundingBox() {
|
||||||
|
if (!Project) return [0, 0, 0, 0];
|
||||||
let min = [UVEditor.getUVWidth(), UVEditor.getUVHeight()];
|
let min = [UVEditor.getUVWidth(), UVEditor.getUVHeight()];
|
||||||
let max = [0, 0];
|
let max = [0, 0];
|
||||||
this.selected_faces.forEach(fkey => {
|
this.selected_faces.forEach(fkey => {
|
||||||
@ -3569,6 +3570,16 @@ Interface.definePanels(function() {
|
|||||||
uv_grid: false
|
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() {
|
isTransformingLayer() {
|
||||||
if (!this.texture || !this.texture.selected_layer) return false;
|
if (!this.texture || !this.texture.selected_layer) return false;
|
||||||
let tool = Toolbox.selected;
|
let tool = Toolbox.selected;
|
||||||
@ -3868,26 +3879,20 @@ Interface.definePanels(function() {
|
|||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div id="uv_rotate_handle" v-if="mode == 'uv' && isRotatingAvailable()"
|
<div id="uv_selection_frame" v-if="mode == 'uv'" :style="getUVSelectionFrameStyle()">
|
||||||
@mousedown.stop="rotateFace($event)" @touchstart.prevent.stop="rotateFace($event)"
|
<div id="uv_rotate_handle" v-if="isRotatingAvailable()"
|
||||||
:title="tl('uv_editor.rotate_uv')"
|
@mousedown.stop="rotateFace($event)" @touchstart.prevent.stop="rotateFace($event)"
|
||||||
:style="{
|
:title="tl('uv_editor.rotate_uv')"
|
||||||
left: toPixels(getSelectedUVBoundingBox()[0], -25),
|
>
|
||||||
top: toPixels(getSelectedUVBoundingBox()[1], -25),
|
<i class="material-icons">rotate_right</i>
|
||||||
}
|
</div>
|
||||||
">
|
|
||||||
<i class="material-icons">rotate_right</i>
|
<div id="uv_scale_handle" v-if="isScalingAvailable()"
|
||||||
</div>
|
@mousedown.stop="scaleFaces($event)" @touchstart.prevent.stop="scaleFaces($event)"
|
||||||
|
:title="tl('uv_editor.scale_uv')"
|
||||||
<div id="uv_scale_handle" v-if="mode == 'uv' && isScalingAvailable()"
|
>
|
||||||
@mousedown.stop="scaleFaces($event)" @touchstart.prevent.stop="scaleFaces($event)"
|
<i class="fa fa-solid fa-square-up-right"></i>
|
||||||
:title="tl('uv_editor.scale_uv')"
|
</div>
|
||||||
:style="{
|
|
||||||
left: toPixels(getSelectedUVBoundingBox()[2], -2),
|
|
||||||
top: toPixels(getSelectedUVBoundingBox()[3], -2),
|
|
||||||
}
|
|
||||||
">
|
|
||||||
<i class="fa fa-solid fa-square-up-right"></i>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="selection_rectangle"
|
<div class="selection_rectangle"
|
||||||
|
Loading…
Reference in New Issue
Block a user