StardewValley
/
SDV_VirtualKeyboard_ConfigEditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

performance

This commit is contained in:
ZaneYork 2020-10-23 18:12:28 +08:00
parent 5edc75069b
commit fe0a81b9be
1 changed files with 37 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/VirtualKeyboard.vue
View File

@ -1,34 +1,39 @@
<template> <template>
<div> <div>
<v-stage :config="{height: height, width: width}" @tap="onParentClick" <v-stage :config="{height: height, width: width}" @tap="onParentClick" @click="onParentClick"
:style="{transform: 'scale(' + scale +')', 'transform-origin': '0 0', 'margin-bottom': '-' + height*(1-scale) + 'px'}"> :style="{transform: 'scale(' + scale +')', 'transform-origin': '0 0', 'margin-bottom': '-' + height*(1-scale) + 'px'}">
<v-layer> <v-layer>
<v-rect <v-rect
:config="{x:0,y:0,width:width,height:height,stroke: 'cyan',strokeWidth: 1 / this.scale, dash: [5 / this.scale, 5 / this.scale]}"></v-rect> :config="{x:0,y:0,width:width,height:height,stroke: 'cyan',strokeWidth: 1 / this.scale, dash: [5 / this.scale, 5 / this.scale],preventDefault:false}"></v-rect>
<v-rect <v-rect
:config="{x:4,y:16,width:slotSize+24,height:slotSize*24+24,stroke: 'gold',strokeWidth: 1 / this.scale, dash: [3 / this.scale, 3 / this.scale]}"></v-rect> :config="{x:4,y:16,width:slotSize+24,height:slotSize*24+24,stroke: 'gold',strokeWidth: 1 / this.scale, dash: [3 / this.scale, 3 / this.scale],preventDefault:false}"></v-rect>
<v-rect <v-rect
:config="{x:16,y:height - slotSize - 28,width:slotSize*24+24,height:slotSize+24,stroke: 'gold',strokeWidth: 1 / this.scale, dash: [3 / this.scale, 3 / this.scale]}"></v-rect> :config="{x:16,y:height - slotSize - 28,width:slotSize*24+24,height:slotSize+24,stroke: 'gold',strokeWidth: 1 / this.scale, dash: [3 / this.scale, 3 / this.scale],preventDefault:false}"></v-rect>
<v-group @tap="toggle"> <v-group @tap="toggle" @click="toggle">
<v-rect :config="getButtonConfig(config.vToggle, 'lightyellow')"></v-rect> <v-rect :config="getButtonConfig(config.vToggle, 'lightyellow')"></v-rect>
<v-text :config="getTextConfig(config.vToggle, $t('toggle'))"></v-text> <v-text :config="getTextConfig(config.vToggle, $t('toggle'))"></v-text>
</v-group> </v-group>
</v-layer> </v-layer>
<v-layer> <v-layer>
<v-group v-for="button in config.buttons" :key="firstNotEmpty(button.id, button.key)" <v-group v-for="button in config.buttons" :key="firstNotEmpty(button.id, button.key)"
v-if="button.id !== currentButtonId" @tap="() => onActivated(button)"> v-if="button.id !== currentButtonId" @tap="() => onActivated(button)"
@click="() => onActivated(button)">
<v-rect :config="getButtonConfig(button, 'darkorange')"></v-rect> <v-rect :config="getButtonConfig(button, 'darkorange')"></v-rect>
<v-text :config="getTextConfig(button, firstNotEmpty(button.alias, button.key))"></v-text> <v-text :config="getTextConfig(button, firstNotEmpty(button.alias, button.key))"></v-text>
</v-group> </v-group>
</v-layer>
<v-layer v-if="toggleState">
<v-group v-for="button in config.buttonsExtend" :key="firstNotEmpty(button.id, button.key)" <v-group v-for="button in config.buttonsExtend" :key="firstNotEmpty(button.id, button.key)"
v-if="toggleState && button.id !== currentButtonId" @tap="() => onActivated(button)"> v-if="button.id !== currentButtonId" @tap="() => onActivated(button)"
@click="() => onActivated(button)">
<v-rect :config="getButtonConfig(button, 'lightyellow')"></v-rect> <v-rect :config="getButtonConfig(button, 'lightyellow')"></v-rect>
<v-text :config="getTextConfig(button, firstNotEmpty(button.alias, button.key))"></v-text> <v-text :config="getTextConfig(button, firstNotEmpty(button.alias, button.key))"></v-text>
</v-group> </v-group>
</v-layer> </v-layer>
<v-layer v-if="!isEmpty(currentButtonId)"> <v-layer v-if="!isEmpty(currentButtonId)">
<v-rect :config="getButtonConfig(currentButton, 'lightcyan')"></v-rect> <v-rect :config="getButtonConfig(currentButton, 'lightcyan')" ref="currentButtonRect"></v-rect>
<v-text :config="getTextConfig(currentButton, firstNotEmpty(currentButton.alias, currentButton.key))"></v-text> <v-text :config="getTextConfig(currentButton, firstNotEmpty(currentButton.alias, currentButton.key))"
ref="currentButtonText"></v-text>
</v-layer> </v-layer>
</v-stage> </v-stage>
<el-drawer <el-drawer
@ -308,7 +313,7 @@
}; };
window.setJson(window.webObject.getText()); window.setJson(window.webObject.getText());
window.getJsonCallback = () => { window.getJsonCallback = () => {
let conf = JSON.parse(JSON.stringify(this.config)); let conf = this.deepCopy(this.config);
for (let button of conf.buttons) { for (let button of conf.buttons) {
delete button.id; delete button.id;
} }
@ -323,7 +328,6 @@
if (button === undefined) { if (button === undefined) {
return {}; return {};
} }
debugger
return { return {
x: button.rectangle.X, x: button.rectangle.X,
y: button.rectangle.Y, y: button.rectangle.Y,
@ -335,6 +339,7 @@
fontSize: Math.sqrt(144 / this.scale), fontSize: Math.sqrt(144 / this.scale),
perfectDrawEnabled: false, perfectDrawEnabled: false,
transformsEnabled: 'position', transformsEnabled: 'position',
listening: false,
}; };
}, },
getButtonConfig: function (button, color) { getButtonConfig: function (button, color) {
@ -367,14 +372,21 @@
event.cancelBubble = true; event.cancelBubble = true;
}, },
onActivated: function (button) { onActivated: function (button) {
if (this.isEmpty(this.currentButtonId)) {
this.$nextTick(() => {
this.$nextTick(() => {
this.$refs.currentButtonRect.getNode().cache();
this.$refs.currentButtonText.getNode().cache();
});
});
}
this.currentButton = button; this.currentButton = button;
this.currentButtonId = button.id; this.currentButtonId = button.id;
}, },
getNodeParentFor(node, parentName, attrName) { getNodeParentFor(node, parentName, attrName) {
if (node[attrName] !== undefined) { if (node[attrName] !== undefined) {
return node; return node;
} } else if (node[parentName] !== undefined && node[parentName] != null) {
else if(node[parentName] !== undefined && node[parentName] != null) {
return this.getNodeParentFor(node[parentName], parentName, attrName); return this.getNodeParentFor(node[parentName], parentName, attrName);
} }
return null; return null;
@ -455,6 +467,9 @@
firstNotEmpty: function (alias, key) { firstNotEmpty: function (alias, key) {
return this.isEmpty(alias) ? key : alias; return this.isEmpty(alias) ? key : alias;
}, },
deepCopy: function (obj) {
return JSON.parse(JSON.stringify(obj));
},
//判断字符是否为空的方法 //判断字符是否为空的方法
isEmpty: function (obj) { isEmpty: function (obj) {
return typeof obj == "undefined" || obj == null || obj === ""; return typeof obj == "undefined" || obj == null || obj === "";