chore: 修复一些问题

package.json

@@ -13,11 +13,11 @@
     "axios": "^0.23.0",
     "gifuct-js": "^2.1.2",
     "mousetrap": "^1.6.5",
-    "moveable": "^0.27.2",
+    "moveable": "^0.51.2",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.6",
     "progressbar.js": "^1.1.0",
-    "selecto": "^1.13.0",
+    "selecto": "^1.26.0",
     "vue": "^3.3.4"
   },
   "devDependencies": {
@@ -32,4 +32,4 @@
     "vite-plugin-svg-icons": "^2.0.1",
     "vue-tsc": "^1.8.11"
   }
-}
+}

packages/sky-ui/SkyInput.vue

@@ -1,3 +1,21 @@
+<template>
+  <div class="sky-input" :class="[...rootClass, attrs.class]">
+    <input
+      ref="elInput"
+      class="sky-input__inner"
+      :type="type"
+      :value="value"
+      v-bind="$attrs"
+      @input="handleInput"
+      @change="handleChange"
+    />
+
+    <div v-if="$slots.append" class="sky-input__append flex-center">
+      <slot name="append" />
+    </div>
+  </div>
+</template>
+
 <script>
 export default {
   name: 'SkyInput',
@@ -55,24 +73,6 @@ function handleChange(event) {
 }
 </script>
 
-<template>
-  <div class="sky-input" :class="[...rootClass, attrs.class]">
-    <input
-      ref="elInput"
-      class="sky-input__inner"
-      :type="type"
-      :value="value"
-      v-bind="$attrs"
-      @input="handleInput"
-      @change="handleChange"
-    />
-
-    <div v-if="$slots.append" class="sky-input__append flex-center">
-      <slot name="append" />
-    </div>
-  </div>
-</template>
-
 <style lang="scss" scoped>
 .sky-input {
   @apply relative inline-block;

packages/sky-ui/SkyPopup.vue

@@ -11,7 +11,6 @@
 
 <script>
 import mixinPopup from './mixins/popup';
-import { OnClickOutside } from '@vueuse/components';
 
 export default {
   name: 'SkyPopup',
@@ -21,6 +20,7 @@ export default {
 
 <script setup>
 import { computed } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
 
 const props = defineProps({
   visible: {

packages/sky-ui/sky-color-picker/index.vue

@@ -64,7 +64,7 @@
       </div>
     </div>
 
-    <div class="flex justify-between mt-3.5">
+    <div class="flex justify-between mt-3">
       <SkyButton size="small" @click="onClickStraw">
         <svg-icon filename="straw" />
       </SkyButton>

packages/sky/editor/SkyEditor.vue

@@ -99,8 +99,10 @@ async function mouseup(event) {
   mousedownTarget = null;
 }
 
-// 点击左键的时候就需要获取目标图层，但是不选中
-// 等到 mousemove or mouseup 的时候再选中
+/**
+ * 点击左键的时候就需要获取目标图层，但是不选中
+ * 等到 mousemove or mouseup 的时候再选中
+ */
 function onMousedownLeft(event) {
   mousedownEvent = event;
   mousedownTarget = sky.moveable.getTarget(event);

packages/sky/editor/index.ts

@@ -56,23 +56,27 @@ export default function createSky(options: CreateSkyOptions): Sky {
     cloudVM: {},
     birdVM: {},
   } as unknown as Sky;
+
   module.state = {
     width: 800,
     height: 800,
     scale: 1,
     bgStyle: {},
     clouds: [],
   };
+
   module.runtime = {
     targetClouds: [],
     selectCloud: null,
     clipboard: '',
   };
+
   module.editor = createEditor(module);
   module.cloud = createCloud(module);
   module.moveable = createMoveable(module);
   module.selecto = createSelecto(module);
   module.history = createHistory(module);
+
   module.setState = async (state) => {
     if (Reflect.has(state, 'width')) {
       module.moveable.instance.verticalGuidelines = [0, state.width];
@@ -89,6 +93,7 @@ export default function createSky(options: CreateSkyOptions): Sky {
     }
     Object.assign(module.state, state);
   };
+
   options.initMousetrap?.(module);
   return module;
 }

packages/sky/editor/plugins/cloud.ts

@@ -18,7 +18,7 @@ export interface Cloud {
   transform?: string;
   minDistance?: number;
   clouds?: Cloud[];
-  [propsName: string]: any;
+  [key: string]: any;
 }
 
 export interface CloudPlugin {
@@ -62,7 +62,10 @@ export interface CloudPlugin {
 export default function createCloud(sky: Sky) {
   const module: CloudPlugin = {} as unknown as CloudPlugin;
 
-  // 还原到画布未缩放的数据
+  /**
+   * 还原到画布未缩放的数据
+   * @returns
+   */
   module.getClouds = () => {
     const { scale, clouds } = sky.state;
     const _clouds: Cloud[] = JSON.parse(JSON.stringify(clouds));

packages/sky/editor/plugins/moveable.ts

@@ -30,7 +30,7 @@ export interface MoveablePlugin {
   getTarget(event: any): HTMLElement[];
   setTarget(target: HTMLElement[] | null): void;
   updateState(): void;
-  [propsName: string]: any;
+  [key: string]: any;
 }
 
 const DIRECTION = {
@@ -131,8 +131,7 @@ export default function createMoveable(sky: Sky) {
       if (isEqualArray(target, oldTarget)) return;
       module.instance.target = target;
 
-      // FIXME: moveable target 的赋值有 setTimeout 延迟
-      await sleep();
+      await module.instance.waitToChangeTarget();
 
       const targetClouds = target.map((el) =>
         sky.cloud.findCloudById(el.dataset.cloudId),

packages/sky/renderer/Cloud.vue

@@ -16,6 +16,7 @@
     <i class="border-before" />
   </div>
 </template>
+
 <script>
 export default {
   name: 'Cloud',
@@ -24,7 +25,7 @@ export default {
 </script>
 
 <script setup>
-import { computed, inject, onMounted, ref } from 'vue';
+import { computed, inject, onMounted, ref, watchEffect } from 'vue';
 
 const SkyCloudComponents = inject('SkyCloudComponents');
 
@@ -45,15 +46,13 @@ const rootStyle = computed(() => {
 });
 
 onMounted(() => {
-  // 不做成 computed
-  // cloud width height top left 变更
-  // 调用 sky.cloud.updateCloudsElementRect 更新 sky-cloud
-  // 避免不必要开销
-  Object.assign(elRoot.value.style, {
-    width: `${props.cloud.width}px`,
-    height: `${props.cloud.height}px`,
-    top: `${props.cloud.top}px`,
-    left: `${props.cloud.left}px`,
+  watchEffect(() => {
+    Object.assign(elRoot.value.style, {
+      width: `${props.cloud.width}px`,
+      height: `${props.cloud.height}px`,
+      top: `${props.cloud.top}px`,
+      left: `${props.cloud.left}px`,
+    });
   });
 });
 </script>

packages/sky/renderer/Clouds.vue

@@ -29,7 +29,7 @@ export default {
 </script>
 
 <script setup>
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted, watchEffect } from 'vue';
 import Cloud from './Cloud.vue';
 
 const props = defineProps({
@@ -48,15 +48,13 @@ const rootStyle = computed(() => {
 });
 
 onMounted(() => {
-  // 不做成 computed
-  // cloud width height top left 变更
-  // 调用 sky.cloud.updateCloudsElementRect 更新 sky-cloud
-  // 避免不必要开销
-  Object.assign(elRoot.value.style, {
-    width: `${props.cloud.width}px`,
-    height: `${props.cloud.height}px`,
-    top: `${props.cloud.top}px`,
-    left: `${props.cloud.left}px`,
+  watchEffect(() => {
+    Object.assign(elRoot.value.style, {
+      width: `${props.cloud.width}px`,
+      height: `${props.cloud.height}px`,
+      top: `${props.cloud.top}px`,
+      left: `${props.cloud.left}px`,
+    });
   });
 });
 </script>

packages/sky/renderer/index.ts

@@ -1,8 +1,9 @@
 import { App, ComponentOptions } from 'vue';
 import SkyRenderer from './SkyRenderer.vue';
+import './index.css';
 
 export const skyRendererVuePlugin = {
-  install(app: App, components?: { [propname: string]: ComponentOptions }) {
+  install(app: App, components?: { [key: string]: ComponentOptions }) {
     app.component(SkyRenderer.name, SkyRenderer);
     app.provide('SkyCloudComponents', components);
   },

src/components/biz/BarColorPicker.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="bar__color-picker"
-    @pointerdown.stop="showSkyColorPicker = !showSkyColorPicker"
+    @click.stop="showSkyColorPicker = !showSkyColorPicker"
   >
     <div
       class="relative h-6 rounded cursor-pointer"
@@ -10,11 +10,7 @@
       <div v-if="multiple" class="multiple-mask flex-center">多种颜色</div>
     </div>
 
-    <SkyPopup
-      v-model:visible="showSkyColorPicker"
-      :width="256"
-      @pointerdown.stop
-    >
+    <SkyPopup v-model:visible="showSkyColorPicker" :width="256" @click.stop>
       <SkyColorPicker
         :straw-el="strawEl"
         :straw-css="strawCSS"

src/components/clouds/image/Editor.vue

@@ -1,3 +1,7 @@
+<template>
+  <CloudImage v-bind="$attrs" />
+</template>
+
 <script>
 export default {
   name: 'CloudImageEditor',
@@ -15,7 +19,3 @@ const skyHooks = {
 
 defineExpose({ skyHooks });
 </script>
-
-<template>
-  <CloudImage v-bind="$attrs" />
-</template>

src/components/clouds/image/create.ts

@@ -13,7 +13,7 @@ const GIFS = [
 export interface CloudImage extends Cloud {
   src: string;
   mime: string;
-  [propsName: string]: unknown;
+  [key: string]: unknown;
 }
 
 export default function createCloudImage(props = {}): CloudImage {

src/components/clouds/image/index.vue

@@ -1,3 +1,9 @@
+<template>
+  <div class="cloud__image">
+    <img :src="cloud.src" alt="" class="image__content" />
+  </div>
+</template>
+
 <script>
 export default {
   name: 'CloudImage',
@@ -13,8 +19,4 @@ const props = defineProps({
 });
 </script>
 
-<template>
-  <div class="cloud__image">
-    <img :src="cloud.src" alt="" class="image__content" />
-  </div>
-</template>
+<style src="./index.css"></style>

src/components/clouds/text/ControlPanel.vue

@@ -229,6 +229,19 @@ function changeCloudProp(key, value, defaultValue) {
   targetClouds.forEach((cloud) => {
     cloud[key] = result;
   });
+
+  nextTick(() => {
+    // 以下属性会变更元素大小
+    if (['fontSize', 'lineHeight', 'letterSpacing'].includes(key)) {
+      const { firstElementChild } = sky.birdVM[targetCloud0.id].subTree.el;
+      targetCloud0.width = firstElementChild.clientWidth * sky.state.scale;
+      targetCloud0.height = firstElementChild.clientHeight * sky.state.scale;
+    }
+
+    nextTick(() => {
+      sky.moveable.instance.updateRect();
+    });
+  });
 }
 
 function changeCloudTextsProp(texts, key, value, defaultValue) {

src/components/clouds/text/create.ts

@@ -23,7 +23,7 @@ export interface CloudText extends Cloud {
   texts: TextItem[];
   type: string;
   letterSpacing: number;
-  [propsName: string]: unknown;
+  [key: string]: unknown;
 }
 
 export default function createTextCloud(props = {}): CloudText {

src/components/clouds/text/index.vue

@@ -55,7 +55,7 @@ export default {
 </script>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch, watchEffect } from 'vue';
 import { WRITING_MODE } from '@/constants';
 
 const props = defineProps({
@@ -88,11 +88,13 @@ const textContentStyle = computed(() => {
 });
 
 onMounted(() => {
-  // 以下属性都会影响图层尺寸，要求同步更新
-  Object.assign(elTextContent.value.style, {
-    fontSize: `${props.cloud.fontSize}px`,
-    lineHeight: props.cloud.lineHeight,
-    letterSpacing: `${props.cloud.letterSpacing}px`,
+  watchEffect(() => {
+    // 以下属性会变更元素大小
+    Object.assign(elTextContent.value.style, {
+      fontSize: `${props.cloud.fontSize}px`,
+      lineHeight: props.cloud.lineHeight,
+      letterSpacing: `${props.cloud.letterSpacing}px`,
+    });
   });
 });
 

src/components/control-panel/Container.vue

@@ -33,7 +33,7 @@
         <SkyButton
           plain
           :disabled="cloud0.lock"
-          @pointerdown.stop="showLayerPopup = !showLayerPopup"
+          @click.stop="showLayerPopup = !showLayerPopup"
         >
           <SkyTooltip content="图层顺序" />
           <svg-icon filename="layer" />