Release 2.1.6 / 2.1.7

jest.config.js

@@ -20,6 +20,9 @@ module.exports = {
     '<rootDir>/src/**/*.spec.jsx', '<rootDir>/src/**/*.spec.tsx',
   ],
   transformIgnorePatterns: ['<rootDir>/node_modules/'],
+  moduleNameMapper: {
+    '\\.svg(\\?raw)?$': '<rootDir>/src/__svg_mock.ts'
+  },
 
   resetMocks: true
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@day1co/fastcomposer",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "author": "fastcampus",
   "main": "./dist/fastcomposer.js",
   "exports": {

src/__svg_mock.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg"></svg>'

src/layout/legacy.ts

@@ -52,7 +52,7 @@ export default class LegacyLayout extends LayoutBase {
     params: Array<LegacyLayoutParameter> | Map<string, LayoutParameter>,
     template: string,
     values: any,
-    meta: any
+    meta?: any
   }) {
     const createdMeta = meta || { description, icon }
 

src/legacy/assets/scss/_pane.scss

@@ -11,14 +11,14 @@
 
   user-select: none;
 
-  > .fcc-pane-title {
+  .fcc-pane-title {
     display: flex;
     position: sticky;
     top: 0;
 
     z-index: 999;
   }
-  > .fcc-pane-toolbar {
+  .fcc-pane-toolbar {
     display: flex;
     align-items: center;
 
@@ -74,7 +74,7 @@
     }
   }
 
-  > .fcc-pane-content {
+  .fcc-pane-content {
     min-height: 0;
     overflow-y: scroll;
     overscroll-behavior: contain;

src/legacy/components/layout-info.vue

@@ -2,10 +2,24 @@
   <figure class="fcc-layout-info">
     <img class="fcc-layout-info__icon" :src="icon" :alt="layout.id" />
     <figcaption class="fcc-layout-info__label">
-      <strong class="__item__group__name"> {{ layout.id }} </strong>
-      <span v-if="index != null"> #{{ index }} </span>
+      <strong class="fcc-layout-info__id"> {{ layout.id }} </strong>
+      <span class="fcc-layout-info__index" v-if="index != null"> #{{ index }} </span>
       <br />
-      {{ layout.meta.description }}
+      <span
+        v-if="!isEditing"
+        @dblclick.stop="startEditing"
+        :class="{
+          'fcc-layout-info__label-text': true,
+          'fcc-is-label': label
+        }">{{ label || layout.meta.description }}</span>
+      <input
+        v-else
+        :placeholder="layout.meta.description"
+        v-model="editableText"
+        @blur="save"
+        @keyup.enter="save"
+        ref="editInput"
+        class="fcc-layout-info__label-input" />
     </figcaption>
   </figure>
 </template>
@@ -21,11 +35,36 @@ export default {
       default() { return {} },
       required: true
     },
-    index: Number
+    index: Number,
+    label: String
+  },
+  data() {
+    return {
+      isEditing: false,
+      editableText: ''
+    }
   },
   computed: {
     icon() {
       return iconToUri(this.layout.meta.icon)
+    },
+    canEdit() {
+      return this.label !== null && this.label !== undefined
+    }
+  },
+  methods: {
+    startEditing() {
+      if(!this.canEdit)
+        return
+      this.editableText = this.label
+      this.isEditing = true
+      this.$nextTick(() => this.$refs.editInput.focus())
+    },
+    save() {
+      if(this.isEditing) {
+        this.isEditing = false
+        this.$emit('update:label', this.editableText.trim())
+      }
     }
   }
 }
@@ -40,6 +79,8 @@ export default {
   display: flex;
   align-items: center;
 
+  flex-grow: 1;
+
   margin: 0;
 
   text-align: left;
@@ -65,9 +106,14 @@ export default {
     }
   }
 
+  &__index {
+    opacity: 0.5;
+  }
   &__label {
     line-height: 2.2rem;
-    font-size: 1.6rem;
+    font-size: 1.8rem;
+
+    flex-grow: 1;
 
     white-space: nowrap;
     text-overflow: clip;
@@ -76,10 +122,6 @@ export default {
     > strong, > span {
       @include readable-font-features;
       font-variant-numeric: tabular-nums;
-      font-size: 1.8rem;
-    }
-    > span {
-      opacity: 0.5;
     }
     .fcc-composer__simple-layers & {
       display: flex;
@@ -89,13 +131,33 @@ export default {
         display: none;
       }
     }
+
+    &-input {
+      @include readable-font-features;
+      font: inherit;
+      line-height: inherit;
+      width: 100%;
+      padding: 0;
+      margin: 0;
+      border: none;
+      outline: none;
+    }
+
+    &-text {
+      display: inline;
+      font-size: 1.4rem;
+
+      &.fcc-is-label {
+        font-style: italic;
+      }
+    }
   }
   &.small &__label {
     line-height: 1.8rem;
     font-size: 1.4rem;
 
-    > strong, > span {
-      font-size: 1.6rem;
+    .fcc-layout-info__id, .fcc-layout-info__index {
+      font-size: 1.5rem;
     }
   }
 }

src/legacy/views/changelog.vue

@@ -1,5 +1,18 @@
 <template>
   <div class="fcc-changelog">
+    <section>
+      <h4> 2.1.6 <time>2025/03/14</time> </h4>
+      <ul>
+        <li> 레이어 여러 개를 한 번에 삭제하는 기능 추가 </li>
+        <li> 레이어 목록 버튼 스타일 깨짐 수정 </li>
+      </ul>
+    </section>
+    <section>
+      <h4> 2.1.5 <time>2025/02/03</time> </h4>
+      <ul>
+        <li> 스니펫을 저장하고 같은 에디터에서 불러오면 값이 같이 바뀌는 문제 수정 </li>
+      </ul>
+    </section>
     <section>
       <h4> 2.1.1 <time>2024/07/02</time> </h4>
       <ul>

src/legacy/views/history/index.vue

@@ -88,6 +88,9 @@ export default {
 @import '../../assets/scss/utils/utilities';
 
 .fcc-history-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
   > .fcc-history-item {
     margin: 0.4rem 0 0.4rem 0.4rem;
   }

src/legacy/views/history/item.vue

@@ -46,6 +46,7 @@ export default {
   .fcc-history-icon {
     width: 2.4rem;
     height: 2.4rem;
+    vertical-align: top;
   }
   &.current {
     box-shadow: 0 0 0 0.2rem $foreground;

src/legacy/views/layers.vue

@@ -35,6 +35,12 @@
         :disabled="!checkedCount">
         <span class="material-icons">{{ checkedCount && areEveryCheckedLayerVisible? 'visibility_off' : 'visibility' }}</span>
       </button>
+      <button
+        class="fcc-pane-toolbar-button"
+        @click="trashChecked"
+        :disabled="!checkedCount">
+        <span class="material-icons">delete</span>
+      </button>
       <button class="fcc-pane-toolbar-button" @click="$emit('toggle-layouts')"> <!-- @click="onShowLayouts" -->
         <span class="material-icons">add</span>
       </button>
@@ -51,15 +57,15 @@
       <button
         class="fcc-pane-toolbar-button"
         @click="$emit('save-snippets', checkedLayers)"
-        :disabled="!checkedCount">
+        :disabled="!checkedCount"
+        title="스니펫으로 저장하기">
         <span class="material-icons">attach_file</span>
-        <label> 스니펫 </label>
       </button>
       <button
         class="fcc-pane-toolbar-button"
         @click="$emit('toggle-snippets')">
-        <span class="material-icons">content_paste</span>
-        <label> 가져오기 </label>
+        <span class="material-icons"
+        title="스니펫 가져오기">content_paste</span>
       </button>
     </div>
     <Container class="fcc-pane-content" @drop="onDrop" :get-ghost-parent="getGhostParent">
@@ -85,7 +91,12 @@
               @click="e => $nextTick(() => onCheck(layer, e))" />
             <i class="material-icons">{{ checked[layer.id]? 'check_box' : 'check_box_outline_blank' }}</i>
           </label>
-          <layout-info :layout="layer.layout" :index="index" class="small"></layout-info>
+          <layout-info
+            :layout="layer.layout"
+            :index="index"
+            class="small"
+            :label="layer.meta.label"
+            @update:label="v => state.act('layer.edit.meta', layer.path, ['label', v])"></layout-info>
         </div>
         <div class="fcc-layer-buttons">
           <button class="fcc-layer-action" @click="state.act('layer.hide', layer.path)">
@@ -209,6 +220,10 @@
           this.$set(this, 'checked', Object.fromEntries(this.layers.map(_ => [_.id, true])))
         }
       },
+      trashChecked() {
+        const paths = new Paths(this.checkedLayers.map(_ => _.layer.path))
+        this.state.act('layer.remove', paths)
+      },
       hideChecked() {
         const paths = new Paths(this.checkedLayers.map(_ => _.layer.path))
         this.state.act('layer.hide', paths)
@@ -315,9 +330,8 @@
     }
     &-info {
       display: flex;
-      align-items: stretch;
       flex-direction: row;
-      width: percentage(1);
+      width: 100%;
       color: $foreground;
       line-height: 2rem;
 

src/page/actions/Layer.Edit.Meta.ts

@@ -0,0 +1,49 @@
+import type Action from '../../state/action'
+import type Page from '..'
+import type Path from '../path'
+import type { LayerMeta } from '../layer'
+
+import icon from './icons/Layer.Edit.svg?raw'
+
+export default <Action<Page, Path>>{
+  id: 'layer.edit.meta',
+  title: '레이어 속성 수정',
+  icon,
+  perform(root, self, act) {
+    const path = act.target
+    const [key, value] = act.arg as [keyof LayerMeta, string]
+    if(key == null || value == null)
+      throw new TypeError('invalid arg on Layer.Edit.Meta')
+
+    const layer = self.getLayerByPath(path)
+    if(!layer)
+      throw new ReferenceError('attempted to edit meta of nonexistent layer')
+
+    act.remember(layer.meta[key])
+    if(act.remembered)
+      self.setFocus(path)
+
+    layer.setMeta(key, value)
+
+    return act
+  },
+  compose(root, self, previousAct, act) {
+    previousAct.update(act.arg)
+    if(previousAct.arg === previousAct.capturedState)
+      return null
+
+    return previousAct
+  },
+  rollback(root, self, rememberedAct) {
+    rememberedAct.seal()
+    const path = rememberedAct.target!
+    const [key, value] = rememberedAct.capturedState as [keyof LayerMeta, string]
+
+    const layer = self.getLayerByPath(path)
+    if(!layer)
+      throw new ReferenceError('layer or path to rollback couldn\'t be found…maybe time paradox?')
+
+    self.setFocus(path)
+    layer.setMeta(key, value)
+  }
+}