v0.0.6-alpha

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 nameEO
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jumpspace",
-  "version": "0.0.5-alpha",
+  "version": "0.0.6-alpha",
   "author": "@nameEO",
   "description": "The visual SSH connection editor",
   "scripts": {
@@ -36,6 +36,7 @@
     "vue": "^2.6.12",
     "vue-awesome": "^4.1.0",
     "vue-router": "^3.4.5",
+    "vuedraggable": "^2.24.1",
     "vuex": "^3.4.0"
   },
   "devDependencies": {
@@ -47,15 +48,15 @@
     "@vue/cli-service": "~4.5.6",
     "@vue/eslint-config-standard": "^5.1.2",
     "babel-eslint": "^10.1.0",
-    "electron": "^10.1.2",
+    "electron": "^10.1.3",
     "electron-devtools-installer": "^3.1.0",
     "electron-icon-builder": "^1.0.2",
     "eslint": "^7.10.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^7.0.0",
     "node-sass": "^4.12.0",
     "sass-loader": "^10.0.2",
     "vue-cli-plugin-electron-builder": "~2.0.0-rc.4",

src/background.js

@@ -9,17 +9,6 @@ import Store from 'electron-store'
 
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
-// 세팅 값 저장
-const store = new Store()
-
-ipcMain.on('getStore', event => {
-  event.returnValue = store.get('setting')
-})
-
-ipcMain.on('setStore', (event, data) => {
-  store.set('setting', data)
-})
-
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let win
@@ -28,11 +17,29 @@ let tray
 // 종료 제어용
 let isQuitting = false
 
+// Single instance lock. package.json의 name으로 구분
+const singleInstanceLock = app.requestSingleInstanceLock()
+
+if (!singleInstanceLock) {
+  app.quit()
+}
+
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([
   { scheme: 'app', privileges: { secure: true, standard: true } }
 ])
 
+// 세팅 값 저장
+const store = new Store()
+
+ipcMain.on('getStore', event => {
+  event.returnValue = store.get('setting')
+})
+
+ipcMain.on('setStore', (event, data) => {
+  store.set('setting', data)
+})
+
 async function createWindow() {
   // Create the browser window.
   win = new BrowserWindow({
@@ -81,6 +88,17 @@ async function createWindow() {
   })
 }
 
+// Singleton instance
+app.on('second-instance', () => {
+  if (!win.isVisible()) {
+    win.show()
+  } else if (win.isMinimized()) {
+    win.restore()
+  }
+
+  win.focus()
+})
+
 // Quit when all windows are closed.
 app.on('window-all-closed', () => {
   // On macOS it is common for applications and their menu bar

src/components/layout/main-navigator.vue

@@ -99,10 +99,69 @@
     </div>
 
     <!-- navigator-content -->
-    <div class="p-3 main-navigator-content">
-      <template v-for="(item, index) in items">
+    <div
+      class="p-3 main-navigator-content"
+    >
+      <!-- 편집 모드 -->
+      <draggable
+        v-if="isEditing"
+        v-model="items"
+        v-bind="dragOptions"
+        @start="drag = true"
+        @end="drag = false"
+      >
+        <transition-group
+          type="transition"
+          :name="!drag ? 'flip-list' : null"
+        >
+          <div
+            v-for="(item, index) in items"
+            :key="`${_uid}-input-${index}`"
+            class="list-item mt-1 editing"
+          >
+            <b-button
+              variant="white"
+              class="handle"
+            >
+              <v-icon
+                class="handle-icon text-secondary"
+                height="14"
+                name="grip-vertical"
+                scale="1"
+                width="14"
+              />
+            </b-button>
+            <b-form-checkbox
+              size="lg"
+              class="align-self-center"
+              @change="check(item, $event)"
+            />
+            <b-form-input
+              v-model="item.name"
+              placeholder="untitled"
+            />
+            <b-button
+              class="ml-1"
+              variant="danger"
+              @click="remove(item)"
+            >
+              <v-icon
+                height="14"
+                name="trash"
+                scale="1"
+                width="14"
+              />
+            </b-button>
+          </div>
+        </transition-group>
+      </draggable>
+
+      <!-- 기본 모드 -->
+      <template
+        v-for="(item, index) in items"
+        v-else
+      >
         <b-button
-          v-if="!isEditing"
           :key="`${_uid}-button-${index}`"
           v-b-toggle="`collapse-${index}`"
           :pressed="item === selectedItem"
@@ -119,41 +178,19 @@
           <b-card>I am collapsible content!</b-card>
         </b-collapse>
         -->
-        <div
-          v-else
-          :key="`${_uid}-input-${index}`"
-          class="list-item mt-1 editing"
-        >
-          <b-form-checkbox
-            size="lg"
-            class="align-self-center ml-2"
-            @change="check(item, $event)"
-          />
-          <b-form-input
-            v-model="item.name"
-            placeholder="untitled"
-          />
-          <b-button
-            class="ml-1"
-            variant="danger"
-            @click="remove(item)"
-          >
-            <v-icon
-              height="14"
-              name="trash"
-              scale="1"
-              width="14"
-            />
-          </b-button>
-        </div>
       </template>
     </div>
   </div>
 </template>
 
 <script>
+import draggable from 'vuedraggable'
+
 export default {
   name: 'MainNavigator',
+  components: {
+    draggable
+  },
   props: {
     projectData: {
       type: Array,
@@ -162,12 +199,24 @@ export default {
   },
   data() {
     return {
+      drag: false,
       isEditing: false,
       items: [],
       checkedItems: [],
       selectedItem: null
     }
   },
+  computed: {
+    dragOptions() {
+      return {
+        animation: 200,
+        group: 'description',
+        disabled: false,
+        ghostClass: 'ghost',
+        handle: '.handle'
+      }
+    }
+  },
   watch: {
     projectData() {
       this.selectedItem = null
@@ -255,6 +304,14 @@ export default {
   box-shadow: none;
 }
 
+.sortable-chosen > .handle > .handle-icon {
+  color: initial !important;
+}
+
+.ghost {
+  opacity: 0;
+}
+
 /* width */
 ::-webkit-scrollbar {
   width: 10px;

src/main.js

@@ -23,8 +23,10 @@ Vue.use(VTooltip, {
 })
 Vue.use(BootstrapVue)
 ;(async () => {
-  await store.dispatch('diagramLoad')
-  await store.dispatch('settingLoad')
+  await Promise.all([
+    store.dispatch('diagramLoad'),
+    store.dispatch('settingLoad')
+  ])
 
   new Vue({
     router,