perfect_格式刷

src/services/defaults.ts

@@ -1,3 +1,5 @@
+import { Pen } from "@meta2d/core";
+
 export const lineDashObj = [
   undefined,
   [5, 5],
@@ -94,3 +96,75 @@ export const normalAnimate: any = {
     },
   ],
 };
+
+export const defaultFormat: Pen = {
+  borderRadius: 0,
+  rotate: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+  paddingTop: 0,
+  paddingBottom: 0,
+  progress: 0,
+  progressColor: "#fff0",
+  verticalProgress: false,
+  flipX: false,
+  flipY: false,
+  input: false,
+  lineDash: [],
+  lineCap: "round",
+  lineJoin: "round",
+  strokeType: 0,
+  lineGradientFromColor: undefined,
+  lineGradientToColor: undefined,
+  lineGradientAngle: 0,
+  // color: "#222",
+  hoverColor: undefined,
+  activeColor: undefined,
+  lineWidth: 0,
+  bkType: 0,
+  gradientFromColor: undefined,
+  gradientToColor: undefined,
+  gradientAngle: 0,
+  gradientRadius: 0,
+  hoverBackground: undefined,
+  activeBackground: undefined,
+  globalAlpha: 1,
+  anchorColor: undefined,
+  anchorRadius: 0,
+  shadowColor: undefined,
+  shadowBlur: 0,
+  shadowOffsetX: 0,
+  shadowOffsetY: 0,
+  textHasShadow: undefined,
+  fontFamily: undefined,
+  fontSize: 0,
+  textColor: undefined,
+  hoverTextColor: undefined,
+  activeTextColor: undefined,
+  textBackground: undefined,
+  fontStyle: undefined,
+  fontWeight: undefined,
+  textAlign: undefined,
+  textBaseline: undefined,
+  lineHeight: 0,
+  whiteSpace: undefined,
+  textWidth: 0,
+  textHeight: 0,
+  textLeft: 0,
+  textTop: 0,
+  ellipsis: false,
+  hiddenText: false,
+  keepDecimal: 0,
+  borderWidth: 0,
+  borderColor: undefined,
+  animateLineWidth: 0,
+  lineAnimateType: 0,
+  frames: [],
+  animateColor: undefined,
+  // animateType: undefined,
+  animateReverse: false,
+  background: "#fff0",
+  gradientColors: undefined,
+  lineGradientColors: undefined,
+  gradientSmooth: 0,
+};

src/views/components/View.vue

@@ -10,11 +10,13 @@
             <t-icon name="save" @click="save(SaveType.Save)" /></t-badge
         ></a>
       </t-tooltip>
-      <t-tooltip content="保存为模板" placement="bottom">
+      <t-tooltip content="保存为我的组件" placement="bottom">
         <a><t-icon name="layers" @click="save(SaveType.Save, true)" /></a>
       </t-tooltip>
       <t-tooltip content="格式化" placement="bottom">
-        <a>
+        <a @click="oneFormat" @dblclick="alwaysFormat" :style="{
+          color:(one||always)?' #1677ff':''
+        }">
           <svg
             width="1em"
             height="1em"
@@ -38,7 +40,7 @@
         </a>
       </t-tooltip>
       <t-tooltip content="清除格式" placement="bottom">
-        <a>
+        <a @click="clearFormat">
           <svg
             width="1em"
             height="1em"
@@ -104,7 +106,7 @@
 
 <script lang="ts" setup>
 import { Meta2d, Options, Pen } from '@meta2d/core';
-import { onMounted, onUnmounted, watch } from 'vue';
+import { onMounted, onUnmounted, watch,ref } from 'vue';
 import { registerBasicDiagram } from '@/services/register';
 import { useRouter, useRoute } from 'vue-router';
 import { useUser } from '@/services/user';
@@ -112,6 +114,7 @@ import { getLe5le2d } from '@/services/api';
 import { useDot } from '@/services/common';
 import { save, newFile } from './Header.vue';
 import { useSelection, SelectionMode } from '@/services/selections';
+import {defaultFormat} from '@/services/defaults'
 
 const router = useRouter();
 const route = useRoute();
@@ -127,6 +130,7 @@ const meta2dOptions: Options = {
   y: 32,
   width: 1920,
   height: 1080,
+  defaultFormat:{...defaultFormat}
 };
 onMounted(() => {
   meta2d = new Meta2d('meta2d', meta2dOptions);
@@ -136,6 +140,7 @@ onMounted(() => {
   meta2d.on('active', active);
   // @ts-ignore
   meta2d.on('inactive', inactive);
+
 });
 
 const watcher = watch(
@@ -187,6 +192,12 @@ const active = (oldPens: Pen[]) => {
     checkPropType(pens);
     selections.pens = oldPens;
   }, 10);
+
+  //格式刷处理
+  if (one.value||always.value) {
+    meta2d.formatPainter();
+    one.value = false;
+  }
 };
 
 /**
@@ -205,6 +216,32 @@ const checkPropType = (pens: Pen[]) => {
     selections.mode = SelectionMode.File;
   }
 };
+
+const one = ref(false);
+const always = ref(false);
+
+const oneFormat = () => {
+  if (one.value) {
+    one.value = false
+  } else {
+    one.value = true;
+    meta2d.setFormatPainter();
+  }
+  if (always.value) {
+    always.value = false;
+    one.value = false
+  }
+}
+
+const alwaysFormat = () => {
+  always.value = true;
+}
+
+const clearFormat = () => {
+  always.value = false;
+  one.value = false
+  meta2d.clearFormatPainter();
+}
 </script>
 <style lang="postcss" scoped>
 .meta2d {