in-place editing

https://gyazo.com/bc75ab38b28b3e4e3f284b5ef794fe72

複数行

code: edit.html

<div class="editor" v-if="editing">

<div class="editor__frame" :style="styleObj">

<textarea class="editor__textarea" v-model="editingText" @blur="editItem" autofocus></textarea>

</div>

</div>

code: edit.js

openEditor(index: number) {

this.editing = true;

this.selectedIndex = index;

this.editingText = this.selectedItem.text;

},

editItem() {

this.selectedItem.text = this.editingText;

this.editingText = "";

this.editing = false;

},

...

watch: {

editing(value) {

if (value) {

Vue.nextTick(() => {

const el = <HTMLTextAreaElement>this.$el.querySelector(

".editor__textarea"

);

el.focus();

});

}

}

},

computed: {

styleObj() {

const selected: FusenItem = this.selectedItem;

if (this.selectedItem) {

return {

top: selected.y + "px",

left: selected.x + "px",

width: selected.w + "px",

height: selected.h + "px"

};

}

return {};

}

},

SVGとは別レイヤでtextareaを置いて、focusはnextTickで実行する必要がある。

hidden inputを使う場合

inputにfocusをずっと保ったままで表示は行わず、I/Oとして使うやり方がある

一行版

コンポーネント化できてなくて汚いけど（そのうちリファクタする）

Enter確定に対応するためには、formでwrapしてEnterでsubmitを発火させ、onSubmitでpreventDefaultでリロードを殺す。

ESCでキャンセル等はisComposingの仕様を見るに実装不可能そう