refactor: usePaper和useMaterial抽离

src/App.vue

@@ -1,11 +1,6 @@
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, onMounted, provide, reactive, toRefs, watch } from 'vue';
-import {
-    Paper as PaperClass,
-    paperInjectionKey,
-    PaperMode,
-    paperModeInjectionKey,
-} from './classes/Paper';
+import { defineAsyncComponent, onMounted, provide, toRefs, watch } from 'vue';
+import { PaperMode } from './classes/Paper';
 import Sketch from './components/core/Sketch.vue';
 import sketch from './components/core/Sketch.vue';
 import MaterialPrototype from './components/core/MaterialPrototype.vue';
@@ -18,15 +13,16 @@ import WebsiteInfo from '@/components/other/WebsiteInfo.vue';
 import Paper from '@/components/core/Paper.vue';
 import PreviewNavigator from '@/components/other/PreviewNavigator.vue';
 import { createAndInjectReactiveRuntime } from '@/composables/useRuntime';
+import { createAndInjectReactivePaper, paperModeInjectionKey } from '@/composables/usePaper';
 
 // 运行时
 const runtime = createAndInjectReactiveRuntime();
 const { copyMaterialSet, activeMaterialSet } = toRefs(runtime);
 
 // Paper实例
-const paperInstance = reactive(new PaperClass({}));
-provide(paperInjectionKey, paperInstance);
+const paperInstance = createAndInjectReactivePaper();
 onMounted(() => {
+    // 尝试从localStorage加载数据
     if (!paperInstance.loadFromStorage()) {
         paperInstance.loadData(template1);
     }
@@ -58,10 +54,11 @@ whenever(ctrl_a, () => {
 
 // 激活元素集合控制
 watch(
-    // TODO: 为什么直接监听 runtime.activeMaterialSet，nv和ov是一样的？
+    // 热知识：直接watch reactive对象的话，新旧值是一样的
+    // 所以这里使用表达式
     () => [...activeMaterialSet.value],
     (nv, ov) => {
-        if (!nv.size) {
+        if (!nv.length) {
             copyMaterialSet.value.clear();
         }
 

src/PrintPage.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import Paper from '@/components/core/Paper.vue';
 import { onMounted, provide, reactive } from 'vue';
-import { Paper as PaperClass, paperInjectionKey } from '@/classes/Paper';
+import { Paper as PaperClass } from '@/classes/Paper';
 
 import { useWindowScroll, useWindowSize } from '@vueuse/core';
 import { linear } from '@/utils/timeFunction';
+import { paperInjectionKey } from '@/composables/usePaper';
 
 // Paper实例
 const paperInstance = reactive(new PaperClass({}));

src/classes/Material.ts

@@ -1,5 +1,4 @@
 import { uniqueString } from '@/utils/uniqueString';
-import type { InjectionKey, UnwrapNestedRefs } from 'vue';
 import { calcCellingValue } from '@/utils/calcCellingValue';
 import { MaterialNames } from '@/components/materials/config';
 
@@ -10,9 +9,6 @@ export interface MaterialInjection {
     clicked: boolean;
 }
 
-export const materialInjectionKey: InjectionKey<UnwrapNestedRefs<MaterialInjection>> =
-    Symbol('Material');
-
 export interface MaterialBaseConfig {
     padding?: number;
     borderStyle?: 'solid' | 'dashed' | 'dotted' | 'none';

src/classes/Paper.ts

@@ -1,23 +1,17 @@
 import { Material, type MaterialOptions } from './Material';
 import { uniqueString } from '@/utils/uniqueString';
-import type { InjectionKey, UnwrapNestedRefs } from 'vue';
 import { easeInOut } from '@/utils/timeFunction';
 
 const LOCAL_STORAGE_KEY = 'paper_cache';
-
-const a4Ratio = 210 / 297;
+const A4_RATIO = 210 / 297;
 
 export const paperSizeMap = {
     a4: {
         w: 793,
-        h: Math.ceil(793 / a4Ratio),
+        h: Math.ceil(793 / A4_RATIO),
     },
 };
 
-export const paperInjectionKey: InjectionKey<UnwrapNestedRefs<Paper>> = Symbol('Paper');
-export const paperShowPageNumInjectionKey: InjectionKey<number | null | undefined> =
-    Symbol('PaperShowPageNum');
-export const paperModeInjectionKey: InjectionKey<PaperMode> = Symbol('PaperMode');
 export enum PaperMode {
     Preview = 'preview',
     Edit = 'edit',

src/components/core/MaterialConfigPopover.vue

@@ -89,13 +89,14 @@
 
 <script lang="ts">
 import { defineComponent, nextTick, ref, toRef } from 'vue';
-import { useMaterial, usePaper } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import ConfigItem from '../config-widgets/ConfigItem.vue';
 import BorderStyle from '../config-widgets/BorderStyle.vue';
 import Color from '../config-widgets/Color.vue';
 import useMouseDragDynamic, { type MouseEvtInfo } from '../../composables/useMouseDragDynamic';
 import { useMagicKeys } from '@vueuse/core';
 import { useRuntime } from '@/composables/useRuntime';
+import { usePaper } from '@/composables/usePaper';
 
 export default defineComponent({
     name: 'MaterialConfigPopover',

src/components/core/MaterialInstance.vue

@@ -1,14 +1,15 @@
 <script lang="ts" setup>
-import { computed, inject, provide, reactive, ref, toRef, watch } from 'vue';
+import { computed, inject, ref, toRefs, watch } from 'vue';
 import useMouseDragDynamic, { type MouseEvtInfo } from '../../composables/useMouseDragDynamic';
 import { CTRL_DOT_SIZE, UNIT_SIZE } from './config';
-import { Material, materialInjectionKey } from '@/classes/Material';
-import { usePaper } from '@/composables/useApp';
+import { Material } from '@/classes/Material';
 import { componentMap, prototypeMap } from '../materials/prototypes';
 import { type CtrlDotType } from '../materials/config';
 import { useMagicKeys } from '@vueuse/core';
-import { PaperMode, paperModeInjectionKey, paperShowPageNumInjectionKey } from '@/classes/Paper';
+import { PaperMode } from '@/classes/Paper';
 import { useRuntime } from '@/composables/useRuntime';
+import { paperShowPageNumInjectionKey, usePaper, usePaperMode } from '@/composables/usePaper';
+import { createAndInjectReactiveMaterial } from '@/composables/useMaterial';
 
 const styleMap: Record<CtrlDotType, string> = {
     tl: `top: 0px;left: 0px;cursor: nw-resize;transform-origin: top left;`,
@@ -35,42 +36,38 @@ const props = defineProps<{
 
 const runtime = useRuntime();
 const paper = usePaper();
+const material = createAndInjectReactiveMaterial(props.item);
+const { hover, active, clicked, instance } = toRefs(material);
+const { scale, activeMaterialSet } = toRefs(runtime);
+
 const { space, shift } = useMagicKeys();
 
-const material = reactive({
-    instance: props.item,
-    hover: false,
-    active: computed(() => runtime.activeMaterialSet.has(props.item.id)),
-    clicked: false,
+watch(active, (v) => {
+    if (v) clicked.value = false;
 });
-provide(materialInjectionKey, material);
-
 watch(
-    () => material.active,
+    () => [...activeMaterialSet.value],
     () => {
-        if (!material.active) material.clicked = false;
+        active.value = activeMaterialSet.value.has(material.instance.id);
     },
 );
 
 const focus = (e: MouseEvent) => {
-    material.clicked = true;
+    clicked.value = true;
     // 没按空格时阻止冒泡
     if (!space.value) e.stopPropagation();
 
     if (shift.value) {
         // 按住shift点击元素则切换选中状态
-        if (!runtime.activeMaterialSet.delete(material.instance.id)) {
-            runtime.activeMaterialSet.add(material.instance.id);
+        if (!activeMaterialSet.value.delete(material.instance.id)) {
+            activeMaterialSet.value.add(material.instance.id);
         }
     } else {
         // 否则重置为该元素
-        runtime.activeMaterialSet.clear();
-        runtime.activeMaterialSet.add(material.instance.id);
+        activeMaterialSet.value.clear();
+        activeMaterialSet.value.add(material.instance.id);
     }
 };
-const blur = () => {
-    runtime.activeMaterialSet.clear();
-};
 
 // 位置信息缓存
 const posInfoCache = {
@@ -152,12 +149,7 @@ const removeMaterialInstance = () => {
     paper.removeMaterial(material.instance.id);
 };
 
-const hover = toRef(material, 'hover');
-const active = toRef(material, 'active');
-const instance = toRef(material, 'instance');
-const scale = toRef(runtime.scale, 'value');
-
-const isEdit = inject(paperModeInjectionKey, PaperMode.Edit) === PaperMode.Edit;
+const isEdit = usePaperMode() === PaperMode.Edit;
 
 const showPageNum = inject(paperShowPageNumInjectionKey, undefined);
 const realY = computed(() => {
@@ -263,7 +255,7 @@ const realY = computed(() => {
                 v-for="dot in ableCtrlDots"
                 :key="dot"
                 :style="[
-                    `transform: scale(${1 / scale});${styleMap[dot]}`,
+                    `transform: scale(${1 / scale.value});${styleMap[dot]}`,
                     {
                         opacity: (clickingDot && clickingDot !== dot) || !(active || hover) ? 0 : 1,
                         width: CTRL_DOT_SIZE + 'px',

src/components/core/MaterialPrototype.vue

@@ -3,8 +3,8 @@ import { reactive, ref } from 'vue';
 import useMouseDragDynamic, { type MouseEvtInfo } from '../../composables/useMouseDragDynamic';
 import { prototypeMap } from '../materials/prototypes';
 import { MaterialNames } from '../materials/config';
-import { usePaper } from '@/composables/useApp';
 import { useRuntime } from '@/composables/useRuntime';
+import { usePaper } from '@/composables/usePaper';
 
 const runtime = useRuntime();
 const paper = usePaper();

src/components/core/Paper.vue

@@ -2,13 +2,13 @@
 import { computed, inject, ref, watch, watchEffect } from 'vue';
 import useMouseDragDynamic, { type MouseEvtInfo } from '@/composables/useMouseDragDynamic';
 import MaterialInstance from './MaterialInstance.vue';
-import { usePaper } from '@/composables/useApp';
 import { useElementBounding, useMagicKeys, useUrlSearchParams } from '@vueuse/core';
 import type { Material } from '@/classes/Material';
 import { vElementHover } from '@vueuse/components';
-import { PaperMode, paperModeInjectionKey } from '@/classes/Paper';
+import { PaperMode } from '@/classes/Paper';
 import AddPageBtn from '@/components/other/AddPageBtn.vue';
 import { useRuntime } from '@/composables/useRuntime';
+import { paperModeInjectionKey, usePaper } from '@/composables/usePaper';
 
 const runtime = useRuntime();
 const paper = usePaper();

src/components/core/Sketch.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { computed, nextTick, onMounted, onUnmounted, ref, watchEffect } from 'vue';
 import useMouseDragDynamic, { type MouseEvtInfo } from '@/composables/useMouseDragDynamic';
-import { usePaper } from '@/composables/useApp';
 import { useActiveElement, useDebounceFn, useMagicKeys, useWindowSize } from '@vueuse/core';
 import { paperSizeMap } from '@/classes/Paper';
 import useWindowMouseWheel from '@/composables/useWindowMouseWheel';
 import { SCALE_RANGE } from '@/components/core/config';
 import { useRuntime } from '@/composables/useRuntime';
+import { usePaper } from '@/composables/usePaper';
 
 const { height: windowHeight, width: windowWidth } = useWindowSize();
 

src/components/materials/MDivider.vue

@@ -53,7 +53,7 @@
 import { defineComponent, toRef, watch } from 'vue';
 import { type ProtoInfo } from './prototypes';
 import MaterialConfigPopover from '../core/MaterialConfigPopover.vue';
-import { useMaterial } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import ConfigItem from '../config-widgets/ConfigItem.vue';
 import BorderStyle from '../config-widgets/BorderStyle.vue';
 import ConfigToggle from '../config-widgets/ConfigToggle.vue';
@@ -130,6 +130,7 @@ export default defineComponent({
             border-left: none;
             border-right: none;
         }
+
         &.vertical {
             width: 0;
             border-top: none;

src/components/materials/MIcon.vue

@@ -64,7 +64,7 @@ import { defineComponent, toRef, watch } from 'vue';
 import { type MaterialBaseConfig } from '@/classes/Material';
 import { type ProtoInfo } from './prototypes';
 import MaterialConfigPopover from '../core/MaterialConfigPopover.vue';
-import { useMaterial } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import ConfigItem from '../config-widgets/ConfigItem.vue';
 import Color from '../config-widgets/Color.vue';
 import { iconInfo } from './iconInfo';

src/components/materials/MImage.vue

@@ -64,7 +64,7 @@
 import { defineComponent, nextTick, toRef, watch } from 'vue';
 import { type ProtoInfo } from './prototypes';
 import MaterialConfigPopover from '../core/MaterialConfigPopover.vue';
-import { useMaterial } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import ConfigItem from '../config-widgets/ConfigItem.vue';
 import ConfigToggle from '../config-widgets/ConfigToggle.vue';
 import ConfigToggleOption from '../config-widgets/ConfigToggleOption.vue';

src/components/materials/MList.vue

@@ -148,7 +148,7 @@ import { type MaterialBaseConfig } from '@/classes/Material';
 import { type ProtoInfo } from './prototypes';
 import { fontWeightClass, MaterialNames, typographyClass } from './config';
 import MaterialConfigPopover from '../core/MaterialConfigPopover.vue';
-import { useMaterial } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import ConfigItem from '../config-widgets/ConfigItem.vue';
 import Color from '../config-widgets/Color.vue';
 
@@ -288,6 +288,7 @@ export default defineComponent({
         position: absolute;
         width: 100%;
         z-index: 2;
+
         textarea {
             resize: none;
             word-break: break-word;
@@ -296,6 +297,7 @@ export default defineComponent({
             color: inherit;
         }
     }
+
     &.placeholder {
         white-space: pre-wrap;
         word-break: break-word;

src/components/materials/MPie.vue

@@ -3,7 +3,7 @@ import { computed, defineComponent, nextTick, toRef, watch } from 'vue';
 import { type MaterialBaseConfig } from '@/classes/Material';
 import { type ProtoInfo } from '@/components/materials/prototypes';
 import { fontWeightClass, MaterialNames, typographyClass } from '@/components/materials/config';
-import { useMaterial } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import MaterialConfigPopover from '@/components/core/MaterialConfigPopover.vue';
 import ConfigItem from '@/components/config-widgets/ConfigItem.vue';
 import BorderStyle from '@/components/config-widgets/BorderStyle.vue';
@@ -262,18 +262,21 @@ export default defineComponent({
     border-radius: 50%;
     position: relative;
 }
+
 .labels {
     width: 40%;
     position: absolute;
     right: 0;
     top: 0;
     padding-left: 0.5em;
+
     .label-item {
         display: flex;
         align-items: center;
         gap: 0.5em;
         word-break: break-all;
     }
+
     .color-block {
         width: 1em;
         min-width: 1em;

src/components/materials/MRating.vue

@@ -54,7 +54,7 @@ import { defineComponent, nextTick, ref, toRef, watch } from 'vue';
 import { type MaterialBaseConfig } from '@/classes/Material';
 import { type ProtoInfo } from './prototypes';
 import MaterialConfigPopover from '../core/MaterialConfigPopover.vue';
-import { useMaterial } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import ConfigItem from '../config-widgets/ConfigItem.vue';
 import Color from '../config-widgets/Color.vue';
 import { MaterialNames } from '@/components/materials/config';

src/components/materials/MRect.vue

@@ -12,7 +12,7 @@ import { defineComponent, toRef } from 'vue';
 import { type MaterialBaseConfig } from '@/classes/Material';
 import { type ProtoInfo } from './prototypes';
 import MaterialConfigPopover from '../core/MaterialConfigPopover.vue';
-import { useMaterial } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import { MaterialNames } from '@/components/materials/config';
 
 const protoInfo: ProtoInfo<MaterialBaseConfig> = {

src/components/materials/MText.vue

@@ -76,7 +76,7 @@ import { computed, defineComponent, nextTick, ref, toRef, watch } from 'vue';
 import { type ProtoInfo } from './prototypes';
 import MaterialConfigPopover from '../core/MaterialConfigPopover.vue';
 import { fontWeightClass, MaterialNames, textAlignOptions, typographyClass } from './config';
-import { useMaterial } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import ConfigItem from '../config-widgets/ConfigItem.vue';
 import ConfigToggle from '../config-widgets/ConfigToggle.vue';
 import ConfigToggleOption from '../config-widgets/ConfigToggleOption.vue';
@@ -177,6 +177,7 @@ export default defineComponent({
     white-space: pre-wrap;
     word-break: break-word;
     color: transparent;
+
     textarea {
         width: 100%;
         height: calc(100% + 12px);

src/components/materials/MTimeline.vue

@@ -40,7 +40,7 @@ export default {
 
 <script setup lang="ts">
 import { computed, toRef, watch } from 'vue';
-import { useMaterial } from '@/composables/useApp';
+import { useMaterial } from '@/composables/useMaterial';
 import MaterialConfigPopover from '@/components/core/MaterialConfigPopover.vue';
 import ConfigToggle from '@/components/config-widgets/ConfigToggle.vue';
 import ConfigItem from '@/components/config-widgets/ConfigItem.vue';

src/components/other/AddPageBtn.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { usePaper } from '@/composables/useApp';
 import { useRuntime } from '@/composables/useRuntime';
+import { usePaper } from '@/composables/usePaper';
 
 const paper = usePaper();
 const runtime = useRuntime();