修复快捷键
This commit is contained in:
@@ -43,7 +43,9 @@
|
|||||||
<div class="item">
|
<div class="item">
|
||||||
<sketchLeft></sketchLeft>
|
<sketchLeft></sketchLeft>
|
||||||
</div>
|
</div>
|
||||||
<div></div>
|
<div class="item">
|
||||||
|
<model></model>
|
||||||
|
</div>
|
||||||
<div></div>
|
<div></div>
|
||||||
<div class="gallery_btn submit">Submit</div>
|
<div class="gallery_btn submit">Submit</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -58,6 +60,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||||
import sketchLeft from './sketchLeft.vue'
|
import sketchLeft from './sketchLeft.vue'
|
||||||
|
import model from './model/index.vue'
|
||||||
|
|
||||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
@@ -70,7 +73,7 @@ import { useI18n } from 'vue-i18n'
|
|||||||
import addDetails from '@/component/Detail/addDetails.vue'
|
import addDetails from '@/component/Detail/addDetails.vue'
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{
|
components:{
|
||||||
sketchLeft,
|
sketchLeft,model
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
|
|||||||
74
src/component/DetailCopy/model/index.vue
Normal file
74
src/component/DetailCopy/model/index.vue
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<div class="modelindex">
|
||||||
|
<div class="detail_btn">
|
||||||
|
<!-- 全屏 -->
|
||||||
|
<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
|
||||||
|
<!-- 编辑 -->
|
||||||
|
<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail(3)"></i>
|
||||||
|
<i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
|
||||||
|
<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i>
|
||||||
|
|
||||||
|
<!-- 层 -->
|
||||||
|
<i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg" @touchstart="mousedownDesignImg" @touchend="mouseupDesignImg"></i>
|
||||||
|
<i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
|
||||||
|
<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
|
||||||
|
</div>
|
||||||
|
<div>21313</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||||
|
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||||
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
|
||||||
|
},
|
||||||
|
setup(props,{emit}) {
|
||||||
|
const store = useStore();
|
||||||
|
const detailData = reactive({
|
||||||
|
|
||||||
|
})
|
||||||
|
const getDetailListData = reactive({
|
||||||
|
total:0,
|
||||||
|
pageSize:10,
|
||||||
|
currentPage:1,
|
||||||
|
})
|
||||||
|
const getDetailListDom = reactive({
|
||||||
|
libraryList:null as any,
|
||||||
|
})
|
||||||
|
|
||||||
|
const showDesignImgDetail = ()=>{
|
||||||
|
|
||||||
|
}
|
||||||
|
const deleteNav = ()=>{
|
||||||
|
|
||||||
|
}
|
||||||
|
return{
|
||||||
|
...toRefs(detailData),
|
||||||
|
...toRefs(getDetailListData),
|
||||||
|
...toRefs(getDetailListDom),
|
||||||
|
showDesignImgDetail,
|
||||||
|
deleteNav,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.modelindex{
|
||||||
|
width: 80rem;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-top: 3rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
0
src/component/DetailCopy/model/modelPosition.vue
Normal file
0
src/component/DetailCopy/model/modelPosition.vue
Normal file
0
src/component/DetailCopy/model/position.vue
Normal file
0
src/component/DetailCopy/model/position.vue
Normal file
@@ -158,6 +158,7 @@ export default defineComponent({
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
> .content_item{
|
> .content_item{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -555,6 +555,8 @@ export default defineComponent({
|
|||||||
let createCanvas = (oldExportCanvas) => {
|
let createCanvas = (oldExportCanvas) => {
|
||||||
showUpgradePlan.value = true;
|
showUpgradePlan.value = true;
|
||||||
clearTimeout(submitCanvasContent)
|
clearTimeout(submitCanvasContent)
|
||||||
|
document.addEventListener("keydown", setCanvasKeyDown);
|
||||||
|
document.addEventListener("keyup", clearCanvasKeyDown);
|
||||||
normalCanvasState.value = []
|
normalCanvasState.value = []
|
||||||
reverseCanvasState.value = []
|
reverseCanvasState.value = []
|
||||||
allBoardData.value.likeDesignCollectionList =
|
allBoardData.value.likeDesignCollectionList =
|
||||||
@@ -565,8 +567,6 @@ export default defineComponent({
|
|||||||
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
|
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
|
||||||
let oldCanvasDom1 = canvasBox.querySelector('canvas')
|
let oldCanvasDom1 = canvasBox.querySelector('canvas')
|
||||||
var canvasDom = document.createElement("canvas");
|
var canvasDom = document.createElement("canvas");
|
||||||
document.addEventListener("keydown", setCanvasKeyDown);
|
|
||||||
document.addEventListener("keyup", clearCanvasKeyDown);
|
|
||||||
if(oldCanvasDom)oldCanvasDom.remove()
|
if(oldCanvasDom)oldCanvasDom.remove()
|
||||||
if(oldCanvasDom)loadingShow.value = false
|
if(oldCanvasDom)loadingShow.value = false
|
||||||
if(oldCanvasDom1)oldCanvasDom1.remove()
|
if(oldCanvasDom1)oldCanvasDom1.remove()
|
||||||
@@ -1277,13 +1277,13 @@ export default defineComponent({
|
|||||||
foldEnd('Enter')
|
foldEnd('Enter')
|
||||||
}else if(event.key === 'Delete'){
|
}else if(event.key === 'Delete'){
|
||||||
deleteObject()
|
deleteObject()
|
||||||
}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
|
}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyZ' && keyDown.indexOf('ShiftLeft') > -1){
|
||||||
historyState('reverse')
|
historyState('reverse')
|
||||||
}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && keyDown.indexOf('KeyZ') > -1){
|
}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyZ'){
|
||||||
historyState('')
|
historyState('')
|
||||||
}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && keyDown.indexOf('KeyC') > -1){
|
}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyC'){
|
||||||
copy()
|
copy()
|
||||||
}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && keyDown.indexOf('KeyV') > -1){
|
}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyV'){
|
||||||
paste()
|
paste()
|
||||||
}else if(keyDown.indexOf('BracketLeft') > -1){
|
}else if(keyDown.indexOf('BracketLeft') > -1){
|
||||||
let width = canvasPencilWidth.value[operation.value]
|
let width = canvasPencilWidth.value[operation.value]
|
||||||
@@ -1297,9 +1297,9 @@ export default defineComponent({
|
|||||||
getColor()//吸色
|
getColor()//吸色
|
||||||
}else if(keyDown.indexOf('KeyM') > -1){
|
}else if(keyDown.indexOf('KeyM') > -1){
|
||||||
setOperation('move')
|
setOperation('move')
|
||||||
}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && keyDown.indexOf('KeyD') > -1){
|
}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyD'){
|
||||||
canvas.discardActiveObject().renderAll();
|
canvas.discardActiveObject().renderAll();
|
||||||
}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && keyDown.indexOf('KeyO') > -1){
|
}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyO'){
|
||||||
let input = document.querySelector('.uploadImage input')
|
let input = document.querySelector('.uploadImage input')
|
||||||
input.click()
|
input.click()
|
||||||
}else if(keyDown.indexOf('Backquote') > -1){
|
}else if(keyDown.indexOf('Backquote') > -1){
|
||||||
@@ -1311,6 +1311,7 @@ export default defineComponent({
|
|||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
console.log(keyDown);
|
||||||
}
|
}
|
||||||
let getColor = async ()=>{
|
let getColor = async ()=>{
|
||||||
try {
|
try {
|
||||||
@@ -1328,9 +1329,15 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
let canvasKeyUp = (event) =>{
|
let canvasKeyUp = (event) =>{
|
||||||
|
let keys = ['Enter','Delete','ControlLeft','KeyZ','ShiftLeft','KeyC','KeyV','BracketLeft','BracketRight','KeyI','KeyD','KeyO','Backquote','MetaLeft']
|
||||||
|
if(keys.indexOf(event.code) > -1){
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
keyDown = keyDown.filter(function(item) {
|
keyDown = keyDown.filter(function(item) {
|
||||||
return event.code !== item;
|
return event.code !== item;
|
||||||
})
|
})
|
||||||
|
console.log(keyDown,'UP',event.code);
|
||||||
|
|
||||||
if(event.code == 'Backquote' && oldOperation){
|
if(event.code == 'Backquote' && oldOperation){
|
||||||
// setOperation(oldOperation)
|
// setOperation(oldOperation)
|
||||||
oldOperation = ''
|
oldOperation = ''
|
||||||
|
|||||||
Reference in New Issue
Block a user