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>
<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'}">
<v-layer>
<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
: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
: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>
<v-group @tap="toggle">
: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" @click="toggle">
<v-rect :config="getButtonConfig(config.vToggle, 'lightyellow')"></v-rect>
<v-text :config="getTextConfig(config.vToggle, $t('toggle'))"></v-text>
</v-group>
</v-layer>
<v-layer>
<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-text :config="getTextConfig(button, firstNotEmpty(button.alias, button.key))"></v-text>
</v-group>
</v-layer>
<v-layer v-if="toggleState">
<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-text :config="getTextConfig(button, firstNotEmpty(button.alias, button.key))"></v-text>
</v-group>
</v-layer>
<v-layer v-if="!isEmpty(currentButtonId)">
<v-rect :config="getButtonConfig(currentButton, 'lightcyan')"></v-rect>
<v-text :config="getTextConfig(currentButton, firstNotEmpty(currentButton.alias, currentButton.key))"></v-text>
<v-rect :config="getButtonConfig(currentButton, 'lightcyan')" ref="currentButtonRect"></v-rect>
<v-text :config="getTextConfig(currentButton, firstNotEmpty(currentButton.alias, currentButton.key))"
ref="currentButtonText"></v-text>
</v-layer>
</v-stage>
<el-drawer
@ -308,7 +313,7 @@
};
window.setJson(window.webObject.getText());
window.getJsonCallback = () => {
let conf = JSON.parse(JSON.stringify(this.config));
let conf = this.deepCopy(this.config);
for (let button of conf.buttons) {
delete button.id;
}
@ -323,7 +328,6 @@
if (button === undefined) {
return {};
}
debugger
return {
x: button.rectangle.X,
y: button.rectangle.Y,
@ -335,6 +339,7 @@
fontSize: Math.sqrt(144 / this.scale),
perfectDrawEnabled: false,
transformsEnabled: 'position',
listening: false,
};
},
getButtonConfig: function (button, color) {
@ -367,14 +372,21 @@
event.cancelBubble = true;
},
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.currentButtonId = button.id;
},
getNodeParentFor(node, parentName, attrName) {
if (node[attrName] !== undefined) {
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 null;
@ -455,6 +467,9 @@
firstNotEmpty: function (alias, key) {
return this.isEmpty(alias) ? key : alias;
},
deepCopy: function (obj) {
return JSON.parse(JSON.stringify(obj));
},
//判断字符是否为空的方法
isEmpty: function (obj) {
return typeof obj == "undefined" || obj == null || obj === "";