From 0036fe1e3ae10ed0df325110e5b24316ae999e7a Mon Sep 17 00:00:00 2001
From: aoitaku <aoitaku@gmail.com>
Date: Sun, 11 Mar 2018 18:35:28 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=E3=82=B3=E3=83=B3=E3=83=9D?=
 =?UTF-8?q?=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=AE=E5=BD=B9=E5=89=B2?=
 =?UTF-8?q?=E3=81=AB=E5=BF=9C=E3=81=98=E3=81=A6=E5=87=A6=E7=90=86=E3=82=92?=
 =?UTF-8?q?=E5=88=86=E9=9B=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/components/Project.vue           | 166 +-----------------
 src/renderer/components/Project/Editor.vue    |  32 ++--
 .../components/Project/EditorHeader.vue       | 117 ++++++++++--
 .../components/Project/EditorHeader/Save.vue  |  37 ++++
 .../Project/EditorHeader/TestPlay.vue         |  36 ++++
 .../components/Project/EditorResult.vue       |  27 +--
 src/renderer/store.ts                         |  32 +++-
 7 files changed, 242 insertions(+), 205 deletions(-)
 create mode 100644 src/renderer/components/Project/EditorHeader/Save.vue
 create mode 100644 src/renderer/components/Project/EditorHeader/TestPlay.vue

diff --git a/src/renderer/components/Project.vue b/src/renderer/components/Project.vue
index 5477303..565c4e1 100644
--- a/src/renderer/components/Project.vue
+++ b/src/renderer/components/Project.vue
@@ -1,39 +1,22 @@
 <template lang="pug">
 .project
-  editor-header(
-    @play-clicked="play",
-    @file-save-clicked="save",
-    @file-open-clicked="beforeOpen",
-    :filename="filename",
-    :disabled="!canPlay"
-  )
+  editor-header
   .middle
     command-palette
-    editor(:content='source', @input-changed="inputChanged")
-    editor-result(@copy-clicked="copy", :content="parseResult", :disabled="!canCopy")
-
-  el-dialog(title="確認", ref="discardConfirmation", :visible.sync="confirmDiscarding")
-    span 現在の変更内容が失われます。よろしいですか？
-    span.dialog-footer(slot="footer")
-      el-button(@click="discardCancelled()") いいえ
-      el-button(type="primary", @click="discardConfirmed()") はい
+    editor
+    editor-result
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import { Component } from 'vue-property-decorator'
-import { ipcRenderer, remote } from 'electron'
 import path from 'path'
 import * as fs from 'fs'
 import { store } from '../store'
-import * as Parser from '../parser'
-import errorTransform from '../parser-error-transform'
-import resultTransform, { describeResult } from '../parser-result-transform'
 import CommandPalette from './Project/CommandPalette.vue'
 import EditorHeader from './Project/EditorHeader.vue'
 import Editor from './Project/Editor.vue'
 import EditorResult from './Project/EditorResult.vue'
-import { promisify } from 'util'
 
 @Component({
   components: {
@@ -45,46 +28,11 @@ import { promisify } from 'util'
 })
 export default class Project extends Vue {
   public sharedState = store.state
-  public source: string = ''
-  public edited = false
-  public filename: string | null = null
-  public confirmDiscarding = false
-  public discard = false
-  public busy = false
-  public watcher: MutationObserver
 
   public get selectedProject () {
     return this.sharedState.selectedProject
   }
 
-  public get eventDataJSON () {
-    return this.sharedState.eventDataJSON
-  }
-
-  public set eventDataJSON (eventDataJSON) {
-    this.sharedState.eventDataJSON = eventDataJSON
-  }
-
-  public get parseResult () {
-    return this.sharedState.parseResult
-  }
-
-  public set parseResult (parseResult) {
-    this.sharedState.parseResult = parseResult
-  }
-
-  public get discardConfirmation () {
-    return (this.$refs.discardConfirmation as Vue).$el
-  }
-
-  public created () {
-    this.watcher = new MutationObserver(() => {
-      if (this.discardConfirmation.style.display === 'none') {
-        this.discardConfirmationClosed()
-      }
-    })
-  }
-
   public mounted () {
     if (!this.selectedProject) {
       this.$router.push({ name: 'open-project' })
@@ -92,114 +40,6 @@ export default class Project extends Vue {
     }
     const title = document.title.split('-').slice(-1)[0].trim()
     document.title = `${this.projectNameFromPath(this.selectedProject)} - ${title}`
-    this.watcher.observe(this.discardConfirmation, { attributes: true, attributeFilter: ['style'] })
-  }
-
-  public destroyed () {
-    this.watcher.disconnect()
-  }
-
-  public canPlay () {
-    return this.selectedProject && !this.busy && 0 < this.eventDataJSON.length
-  }
-
-  public canCopy () {
-    return !this.busy && 0 < this.eventDataJSON.length
-  }
-
-  public play () {
-    if (!this.selectedProject || !this.canCopy()) {
-      return
-    }
-    const projectDir = path.dirname(this.selectedProject)
-    const testEventData = path.join(projectDir, 'data/Test_Event.json')
-    fs.writeFileSync(testEventData, this.eventDataJSON)
-    ipcRenderer.send('runTestPlay', projectDir)
-  }
-
-  public async save () {
-    if (!this.filename) {
-      const file = remote.dialog.showSaveDialog({
-        title: 'Save file',
-        defaultPath: '.',
-      })
-      if (!file) {
-        return
-      }
-      this.filename = file
-    }
-    await promisify(fs.writeFile)(this.filename, this.source, 'utf-8')
-    this.edited = false
-    this.$notify({
-      title: '保存しました',
-      message: `${this.filename} を更新しました。`,
-      type: 'success'
-    })
-  }
-
-  public beforeOpen () {
-    if (this.edited) {
-      this.busy = true
-      this.confirmDiscarding = true
-      return
-    }
-    this.open()
-  }
-
-  public open () {
-    const files = remote.dialog.showOpenDialog({
-      properties: ['openFile'],
-      title: 'Open file',
-      defaultPath: '.',
-    })
-    if (!files) {
-      return
-    }
-    this.filename = files[0]
-    this.source = fs.readFileSync(this.filename, 'utf-8')
-    this.edited = false
-  }
-
-  public async copy () {
-    if (!this.canCopy()) {
-      return
-    }
-    const testEventBuffer = new Buffer(this.eventDataJSON, 'utf-8')
-    await remote.clipboard.writeBuffer('application/rpgmv-EventCommand', testEventBuffer)
-    this.$notify({
-      title: 'クリップボードにコピーしました',
-      message: 'イベントエディターの実行内容に貼り付けることができます',
-      type: 'success'
-    })
-  }
-
-  public discardConfirmationClosed () {
-    if (this.discard) {
-      this.discard = false
-      this.open()
-    }
-    this.busy = false
-  }
-
-  public discardCancelled () {
-    this.confirmDiscarding = false
-  }
-
-  public discardConfirmed () {
-    this.confirmDiscarding = false
-    this.discard = true
-  }
-
-  public inputChanged (newValue: string, oldValue: string) {
-    this.edited = this.edited || newValue !== oldValue
-    this.source = newValue
-    try {
-      const result = resultTransform(Parser.parse(newValue))
-      this.eventDataJSON = JSON.stringify(result)
-      this.parseResult = describeResult(result)
-    } catch (err) {
-      this.parseResult = errorTransform(err)
-    }
   }
 
   private projectNameFromPath (projectPath: string) {
diff --git a/src/renderer/components/Project/Editor.vue b/src/renderer/components/Project/Editor.vue
index 0ef41a0..104c5d2 100644
--- a/src/renderer/components/Project/Editor.vue
+++ b/src/renderer/components/Project/Editor.vue
@@ -5,18 +5,19 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { Component, Prop, Watch } from 'vue-property-decorator'
+import { Component, Watch } from 'vue-property-decorator'
 import CodeMirror from 'codemirror'
+import { store } from '../../store'
 
 @Component
 export default class Editor extends Vue {
   public editor: CodeMirror.Editor
   public skipNextChangeEvent = false
+  public sharedState = store.state
 
-  @Prop({
-    default: ''
-  })
-  public content: string
+  public get source () {
+    return this.sharedState.source
+  }
 
   public get textarea () {
     return this.$refs.codemirror as HTMLTextAreaElement
@@ -28,17 +29,20 @@ export default class Editor extends Vue {
       lineNumbers: true,
       lineWrapping: true,
     })
-    this.editor.setValue(this.content)
-    this.editor.on('change', (codemirror) => {
-      if (this.skipNextChangeEvent) {
-        this.skipNextChangeEvent = false
-        return
-      }
-      this.$emit('input-changed', codemirror.getValue())
-    })
+    this.editor.setValue(this.sharedState.source)
+    this.editor.on('change', this.inputChanged)
+  }
+
+  public inputChanged (codemirror: CodeMirror.Editor) {
+    if (this.skipNextChangeEvent) {
+      this.skipNextChangeEvent = false
+      return
+    }
+    store.updateSource(codemirror.getValue())
+    this.sharedState.edited = true
   }
 
-  @Watch('content')
+  @Watch('source')
   public contentChanged (newContent: string, oldContent: string) {
     const content = this.editor.getValue()
     if (newContent !== content) {
diff --git a/src/renderer/components/Project/EditorHeader.vue b/src/renderer/components/Project/EditorHeader.vue
index 7b10958..2eff1b7 100644
--- a/src/renderer/components/Project/EditorHeader.vue
+++ b/src/renderer/components/Project/EditorHeader.vue
@@ -1,40 +1,123 @@
 <template lang="pug">
 .editor-header
-  el-button.nav-backward(type="text", @click="back") ‹ 戻る
-  el-button.open(type="text", @click="open") 開く
-  el-button.save(type="text", @click="save") 保存
-  .filename {{ filename ? filename : '新規ファイル' }} を編集中
-  el-button.test-play(type="text", @click="play", :disabled="disabled") テストプレイ
+  el-button.nav-backward(type="text", @click="beforeBack") ‹ 戻る
+  el-button.open(type="text", @click="beforeOpen") 開く
+  save
+  .filename {{ filename }} を編集中
+  test-play
+
+  el-dialog(title="確認", ref="discardConfirmation", :visible.sync="confirmDiscarding")
+    span 現在の変更内容が失われます。よろしいですか？
+    span.dialog-footer(slot="footer")
+      el-button(@click="discardCancelled()") いいえ
+      el-button(type="primary", @click="discardConfirmed()") はい
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import { Component, Prop } from 'vue-property-decorator'
-import { ipcRenderer } from 'electron'
+import { Component } from 'vue-property-decorator'
+import { ipcRenderer, remote } from 'electron'
+import * as fs from 'fs'
+import { store } from '../../store'
+import Save from './EditorHeader/Save.vue'
+import TestPlay from './EditorHeader/TestPlay.vue'
 
-@Component
+@Component({
+  components: {
+    Save,
+    TestPlay,
+  },
+})
 export default class EditorHeader extends Vue {
-  @Prop({ default: false })
-  public disabled: boolean
+  public sharedState = store.state
+  public watcher: MutationObserver
+  public confirmDiscarding = false
+  public discard = false
+  public task: (() => void) | null = null
+
+  public get discardConfirmation () {
+    return (this.$refs.discardConfirmation as Vue).$el
+  }
+
+  public get filename () {
+    return this.sharedState.selectedFile ? this.sharedState.selectedFile : '新規ファイル'
+  }
+
+  public created () {
+    this.watcher = new MutationObserver(() => {
+      if (this.discardConfirmation.style.display === 'none') {
+        this.discardConfirmationClosed()
+      }
+    })
+  }
+
+  public mounted () {
+    this.watcher.observe(this.discardConfirmation, { attributes: true, attributeFilter: ['style'] })
+  }
+
+  public destroyed () {
+    this.watcher.disconnect()
+  }
 
-  @Prop({ default: null })
-  public filename: string | null
+  public beforeBack () {
+    if (this.sharedState.edited) {
+      this.sharedState.busy = true
+      this.confirmDiscarding = true
+      this.task = this.back
+      return
+    }
+    this.back()
+  }
 
   public back () {
     ipcRenderer.send('cleanTestData')
+    store.initState()
     this.$router.push({ name: 'open-project' })
   }
 
+  public beforeOpen () {
+    if (this.sharedState.edited) {
+      this.sharedState.busy = true
+      this.confirmDiscarding = true
+      this.task = this.open
+      return
+    }
+    this.open()
+  }
+
   public open () {
-    this.$emit('file-open-clicked')
+    const files = remote.dialog.showOpenDialog({
+      properties: ['openFile'],
+      title: 'Open file',
+      defaultPath: '.',
+    })
+    if (!files) {
+      return
+    }
+    this.sharedState.selectedFile = files[0]
+    store.updateSource(fs.readFileSync(this.sharedState.selectedFile, 'utf-8'))
+    this.sharedState.edited = false
+  }
+
+  public discardConfirmationClosed () {
+    const task = this.task
+    this.task = null
+    if (this.discard) {
+      this.discard = false
+      if (task) {
+        task()
+      }
+    }
+    this.sharedState.busy = false
   }
 
-  public save () {
-    this.$emit('file-save-clicked')
+  public discardCancelled () {
+    this.confirmDiscarding = false
   }
 
-  public play () {
-    this.$emit('play-clicked')
+  public discardConfirmed () {
+    this.confirmDiscarding = false
+    this.discard = true
   }
 }
 </script>
diff --git a/src/renderer/components/Project/EditorHeader/Save.vue b/src/renderer/components/Project/EditorHeader/Save.vue
new file mode 100644
index 0000000..2893d84
--- /dev/null
+++ b/src/renderer/components/Project/EditorHeader/Save.vue
@@ -0,0 +1,37 @@
+<template lang="pug">
+el-button.save(type="text", @click="save") 保存
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { Component } from 'vue-property-decorator'
+import { promisify } from 'util'
+import * as fs from 'fs'
+import { remote } from 'electron'
+import { store } from '../../../store'
+
+@Component
+export default class Save extends Vue {
+  public sharedState = store.state
+
+  public async save () {
+    if (!this.sharedState.selectedFile) {
+      const file = remote.dialog.showSaveDialog({
+        title: 'Save file',
+        defaultPath: '.',
+      })
+      if (!file) {
+        return
+      }
+      this.sharedState.selectedFile = file
+    }
+    await promisify(fs.writeFile)(this.sharedState.selectedFile, this.sharedState.source, 'utf-8')
+    this.sharedState.edited = false
+    this.$notify({
+      title: '保存しました',
+      message: `${this.sharedState.selectedFile} を更新しました。`,
+      type: 'success'
+    })
+  }
+}
+</script>
diff --git a/src/renderer/components/Project/EditorHeader/TestPlay.vue b/src/renderer/components/Project/EditorHeader/TestPlay.vue
new file mode 100644
index 0000000..a886129
--- /dev/null
+++ b/src/renderer/components/Project/EditorHeader/TestPlay.vue
@@ -0,0 +1,36 @@
+<template lang="pug">
+el-button.test-play(type="text", @click="play", :disabled="!canPlay()") テストプレイ
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { Component } from 'vue-property-decorator'
+import { ipcRenderer } from 'electron'
+import * as fs from 'fs'
+import path from 'path'
+import { store } from '../../../store'
+
+
+@Component
+export default class TestPlay extends Vue {
+  public sharedState = store.state
+
+  public eventDataExists () {
+    return 0 < this.sharedState.eventDataJSON.length
+  }
+
+  public canPlay () {
+    return !this.sharedState.busy && this.sharedState.selectedProject && this.eventDataExists()
+  }
+
+  public play () {
+    if (this.sharedState.busy || !this.sharedState.selectedProject || !this.eventDataExists()) {
+      return
+    }
+    const projectDir = path.dirname(this.sharedState.selectedProject)
+    const testEventData = path.join(projectDir, 'data/Test_Event.json')
+    fs.writeFileSync(testEventData, this.sharedState.eventDataJSON)
+    ipcRenderer.send('runTestPlay', projectDir)
+  }
+}
+</script>
diff --git a/src/renderer/components/Project/EditorResult.vue b/src/renderer/components/Project/EditorResult.vue
index bc8f375..9fd0b71 100644
--- a/src/renderer/components/Project/EditorResult.vue
+++ b/src/renderer/components/Project/EditorResult.vue
@@ -1,16 +1,18 @@
 <template lang="pug">
 .editor-result
   .content
-    | {{ content }}
+    | {{ sharedState.parseResult }}
   toolbar(position="bottom")
-    el-button(type="text", size="mini", @click="copyClicked", :disabled="disabled")
+    el-button(type="text", size="mini", @click="copy")
       | イベントコマンド形式でクリップボードにコピー
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import { Component, Prop } from 'vue-property-decorator'
+import { Component } from 'vue-property-decorator'
 import Toolbar from './Toolbar.vue'
+import { remote } from 'electron'
+import { store } from '../../store'
 
 @Component({
   components: {
@@ -18,14 +20,19 @@ import Toolbar from './Toolbar.vue'
   },
 })
 export default class EditorResult extends Vue {
-  @Prop({ default: '' })
-  public content: string
+  public sharedState = store.state
 
-  @Prop({ default: false })
-  public disabled: boolean
-
-  public copyClicked () {
-    this.$emit('copy-clicked')
+  public async copy () {
+    if (this.sharedState.busy || this.sharedState.eventDataJSON.length < 1) {
+      return
+    }
+    const testEventBuffer = new Buffer(this.sharedState.eventDataJSON, 'utf-8')
+    await remote.clipboard.writeBuffer('application/rpgmv-EventCommand', testEventBuffer)
+    this.$notify({
+      title: 'クリップボードにコピーしました',
+      message: 'イベントエディターの実行内容に貼り付けることができます',
+      type: 'success'
+    })
   }
 }
 </script>
diff --git a/src/renderer/store.ts b/src/renderer/store.ts
index 3bbeb7c..7f70f55 100644
--- a/src/renderer/store.ts
+++ b/src/renderer/store.ts
@@ -1,23 +1,53 @@
 import { ShowMessageParameters } from './commands/parameters'
+import * as Parser from './parser'
+import errorTransform from './parser-error-transform'
+import resultTransform, { describeResult } from './parser-result-transform'
 
 export interface ISharedState  {
-  selectedProject: string | null 
+  selectedProject: string | null
+  selectedFile: string | null
   eventDataJSON: string
   parseResult: string
   source: string
   showMessageParameters: ShowMessageParameters
+  edited: boolean
+  busy: boolean
 }
 
 export interface IStore {
   state: ISharedState
+  initState (): void
+  updateSource (newValue: string): void
 }
 
 export const store: IStore = {
   state: {
     selectedProject: null,
+    selectedFile: null,
     eventDataJSON: '',
     parseResult: '',
     source: '',
     showMessageParameters: ["Actor1", 0, 0, 2],
+    edited: false,
+    busy: false,
+  },
+  initState () {
+    this.state.selectedProject = null
+    this.state.selectedFile = null
+    this.state.eventDataJSON = ''
+    this.state.parseResult = ''
+    this.state.source = ''
+    this.state.edited = false
+    this.state.busy = false
+  },
+  updateSource (newValue: string) {
+    this.state.source = newValue
+    try {
+      const result = resultTransform(Parser.parse(this.state.source))
+      this.state.eventDataJSON = JSON.stringify(result)
+      this.state.parseResult = describeResult(result)
+    } catch (err) {
+      this.state.parseResult = errorTransform(err)
+    }
   },
 }