소스 검색

合并冲突

Wind-Breaker1 1 년 전
부모
커밋
fe421b9cd6
6개의 변경된 파일163개의 추가작업 그리고 92개의 파일을 삭제
  1. 2 2
      index.html
  2. 1 1
      src/services/common.ts
  3. 147 81
      src/services/defaults.ts
  4. 4 2
      src/views/components/ElementTree.vue
  5. 7 5
      src/views/components/Graphics.vue
  6. 2 1
      src/views/components/View.vue

+ 2 - 2
index.html

@@ -24,10 +24,10 @@
       }
     </style>
     <link
-      href="//at.alicdn.com/t/c/font_4042197_yrikqthz1j.css"
+      href="//at.alicdn.com/t/c/font_4042197_esjv5wscsw6.css"
       rel="stylesheet"
     />
-    <script src="//at.alicdn.com/t/c/font_4042197_yrikqthz1j.js"></script>
+    <script src="//at.alicdn.com/t/c/font_4042197_esjv5wscsw6.js"></script>
   </head>
   <body>
     <div id="app"></div>

+ 1 - 1
src/services/common.ts

@@ -129,7 +129,7 @@ export const save = async (
   if (!(data.teams && data.owner?.id !== user.id)) {
     let blob: Blob;
     try {
-      blob = dataURLtoBlob(meta2d.toPng(10) + '');
+      blob = dataURLtoBlob(meta2d.toPng(0) + '');
     } catch (e) {
       MessagePlugin.error(
         '无法下载,宽度不合法,画布可能没有画笔/画布大小超出浏览器最大限制'

+ 147 - 81
src/services/defaults.ts

@@ -926,7 +926,7 @@ export const formComponents = [
     list: [
       {
         name: '文本',
-        icon: 'l-text',
+        icon: 'l-wenben',
         data: {
           width: 160,
           height: 30,
@@ -936,7 +936,7 @@ export const formComponents = [
       },
       {
         name: '数字',
-        icon: 'l-text',
+        icon: 'l-shuzi',
         data: {
           width: 160,
           height: 30,
@@ -974,7 +974,7 @@ export const formComponents = [
       },
       {
         name: '图片',
-        icon: 'l-image',
+        icon: 'l-tupian',
         data: {
           width: 100,
           height: 100,
@@ -984,7 +984,7 @@ export const formComponents = [
       },
       {
         name: 'GIF',
-        icon: 'l-image',
+        icon: 'l-GIF',
         data: {
           width: 100,
           height: 100,
@@ -994,7 +994,7 @@ export const formComponents = [
       },
       {
         name: '视频',
-        icon: 'l-pc',
+        icon: 'l-shipin',
         data: {
           width: 200,
           height: 200,
@@ -1020,7 +1020,7 @@ export const formComponents = [
       },
       {
         name: '音频',
-        icon: 'l-pc',
+        icon: 'l-yinpin',
         data: {
           width: 200,
           height: 200,
@@ -1031,7 +1031,7 @@ export const formComponents = [
       },
       {
         name: '头像',
-        icon: 'l-pc',
+        icon: 'l-touxiang',
         data: {
           width: 30,
           height: 30,
@@ -1047,7 +1047,7 @@ export const formComponents = [
       },
       {
         name: '徽标',
-        icon: 'l-pc',
+        icon: 'l-huibiao',
         data: {
           width: 35,
           height: 20,
@@ -1061,7 +1061,7 @@ export const formComponents = [
       },
       {
         name: '标签',
-        icon: 'l-pc',
+        icon: 'l-biaoqian',
         data: {
           text: 'success',
           width: 80,
@@ -1090,7 +1090,7 @@ export const formComponents = [
     list: [
       {
         name: '时间',
-        icon: 'l-shijianxuanzekuang',
+        icon: 'l-clock',
         data: {
           name: 'leTime',
           width: 300,
@@ -1102,7 +1102,7 @@ export const formComponents = [
       },
       {
         name: '倒计时',
-        icon: 'l-shijianxuanzekuang',
+        icon: 'l-daojishi',
         data: {
           name: 'countdown',
           width: 300,
@@ -1115,7 +1115,7 @@ export const formComponents = [
       },
       {
         name: '水平时间轴',
-        icon: 'l-shijianzhou',
+        icon: 'l-shuipingshijianzhou',
         data: {
           name: 'leTimeline',
           width: 500,
@@ -1152,7 +1152,7 @@ export const formComponents = [
       },
       {
         name: '垂直时间轴',
-        icon: 'l-shijianzhou',
+        icon: 'l-chuizhishijianzhou',
         data: {
           name: 'leTimeline',
           width: 40,
@@ -1189,7 +1189,7 @@ export const formComponents = [
       },
       {
         name: '日历',
-        icon: 'l-pc',
+        icon: 'l-rili',
         data: {
           width: 200,
           height: 200,
@@ -1204,7 +1204,7 @@ export const formComponents = [
     list: [
       {
         name: '列表',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-liebiao
         data: {
           width: 200,
           height: 200,
@@ -1304,7 +1304,7 @@ export const formComponents = [
       },
       {
         name: '树',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-shu
         data: {
           width: 200,
           height: 200,
@@ -1312,7 +1312,7 @@ export const formComponents = [
       },
       {
         name: '网页',
-        icon: 'l-02',
+        icon: 'l-pc',
         data: {
           name: 'iframe',
           width: 500,
@@ -1329,7 +1329,7 @@ export const formComponents = [
     list: [
       {
         name: '业务指标',
-        icon: 'l-pc',
+        icon: 'l-yewuzhibiao',
         data: {
           width: 115,
           height: 25,
@@ -1361,7 +1361,7 @@ export const formComponents = [
       },
       {
         name: '全局消息',
-        icon: 'l-pc',
+        icon: 'l-quanjuxiaoxi',
         data: {
           width: 200,
           height: 46,
@@ -1388,20 +1388,20 @@ export const formComponents = [
       },
       {
         name: '通知',
-        icon: 'l-pc',
-        data: {
-          width: 200,
-          height: 200,
-        },
-      },
-      {
-        name: '对话框',
-        icon: 'l-pc',
+        icon: 'l-tongzhi',
         data: {
           width: 200,
           height: 200,
         },
       },
+      // {
+      //   name: '对话框',
+      //   icon: 'l-pc',
+      //   data: {
+      //     width: 200,
+      //     height: 200,
+      //   },
+      // },
     ],
   },
   {
@@ -1410,7 +1410,7 @@ export const formComponents = [
     list: [
       {
         name: '水平轮播',
-        icon: 'l-shijianzhou',
+        icon: 'l-pc',
         data: {
           name: 'leSwiperline',
           width: 200,
@@ -1421,7 +1421,7 @@ export const formComponents = [
       },
       {
         name: '垂直轮播',
-        icon: 'l-shijianzhou',
+        icon: 'l-pc',
         data: {
           name: 'leSwiperline',
           width: 200,
@@ -1434,7 +1434,7 @@ export const formComponents = [
       },
       {
         name: '轮播图',
-        icon: 'l-pc',
+        icon: 'l-lunbotu',
         data: {
           name: 'leSwiper',
           width: 400,
@@ -1495,7 +1495,7 @@ export const formComponents = [
     list: [
       {
         name: '链接',
-        icon: 'l-pc',
+        icon: 'l-lianjie',
         data: {
           text: '乐吾乐2D编辑器',
           width: 100,
@@ -1518,15 +1518,26 @@ export const formComponents = [
       },
       {
         name: '返回',
-        icon: 'l-pc',
+        icon: 'l-fanhui',
         data: {
-          width: 200,
-          height: 200,
+          width: 40,
+          height: 40,
+          name: 'image',
+          icon: '\ue697',
+          iconFamily: 'l-icon',
+          events: [
+            {
+              action: 5,
+              name: 'click',
+              value: 'window.history.go(-1);',
+              where: { type: null },
+            },
+          ],
         },
       },
       {
         name: '锚点',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-anchor
         data: {
           width: 200,
           height: 200,
@@ -1534,7 +1545,7 @@ export const formComponents = [
       },
       {
         name: '回到顶部',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-huidaodingbu
         data: {
           width: 200,
           height: 200,
@@ -1542,7 +1553,7 @@ export const formComponents = [
       },
       {
         name: '面包屑',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-mianbaoxie
         data: {
           width: 200,
           height: 200,
@@ -1550,7 +1561,7 @@ export const formComponents = [
       },
       {
         name: '下拉菜单',
-        icon: 'l-daohangcaidan',
+        icon: 'l-xialacaidan',
         data: {
           name: 'leHeadMenu',
           width: 650,
@@ -1601,7 +1612,7 @@ export const formComponents = [
       },
       {
         name: '导航菜单',
-        icon: 'l-zhediemianban',
+        icon: 'l-daohangcaidan',
         data: {
           name: 'leMenu',
           width: 200,
@@ -1664,7 +1675,7 @@ export const formComponents = [
       },
       {
         name: '分页',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-fenye
         data: {
           width: 200,
           height: 200,
@@ -1672,20 +1683,49 @@ export const formComponents = [
       },
       {
         name: '步骤条',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-buzhoutiao
         data: {
-          width: 200,
-          height: 200,
+          name: 'steps',
+          width: 500,
+          height: 40,
+          hiddenText: true,
+          direction: 'horizontal',
+          labelAlign: '', //left/right/alternate/top/bottom
+          mode: 'alternate', //alternate
+          data: [
+            {
+              label: '2022-01-01',
+              content: '事件一',
+              // path: 'M71.3,61.9v2.21L56.66,66V63.82l3.27-.43.25-1-2.39.31V60.84l2.84-.37.21-.87-3.4.44V57.85l13.08-1.73v2.2l-6.85.9-.21.88,6-.79-.15,2.85ZM58.11,66.56,69.86,65v5.63L58.11,72.19Zm2.59,3.09,6.44-.84V67.52l-6.44.85ZM62.78,63l3.87-.51.07-.95L63,62.05Z',
+            },
+            {
+              label: '2022-01-01',
+              content: '事件一',
+            },
+            {
+              label: '2022-02-01',
+              content: '事件二',
+            },
+            {
+              label: '2022-03-01',
+              content: '事件三',
+            },
+            {
+              label: '2022-04-01',
+              content: '事件四',
+            },
+          ],
+          text: '时间轴',
         },
       },
       {
         name: '选项卡',
-        icon: 'l-pc',
+        icon: 'l-xuanxiangka',
         data: {
           name: 'leTab',
           width: 500,
           height: 50,
-          direction:'vertical',
+          direction:'horizontal',
           selectKey:'1',
           selectedKeys:[],
           theme:'',
@@ -1701,7 +1741,7 @@ export const formComponents = [
         name: '多选选项卡',
         icon: 'l-pc',
         data: {
-          name:'leTab',
+          name: 'leTab',
           width: 500,
           height: 50,
           direction:'horizontal',
@@ -1746,7 +1786,7 @@ export const formComponents = [
       },
       {
         name: '文本输入框',
-        icon: 'l-shurukuang',
+        icon: 'l-wenbenshurukuang',
         data: {
           x: 100,
           y: 100,
@@ -1757,59 +1797,85 @@ export const formComponents = [
           borderRadius: 0.05,
           input: true,
           ellipsis: true,
-          text: '输入数据',
+          text: '输入文本',
           textAlign: 'left',
-          color: '#D9D9D9FF',
-          textColor: '#000000FF',
-          hoverTextColor: '#000000FF',
-          activeTextColor: '#000000FF',
+          // color: '#D9D9D9FF',
+          // textColor: '#000000FF',
+          // hoverTextColor: '#000000FF',
+          // activeTextColor: '#000000FF',
           textLeft: 10,
         },
       },
       {
         name: '数字输入框',
-        icon: 'l-shurukuang',
-        data: {},
+        icon: 'l-shuzishurukuang',
+        data: {
+          x: 100,
+          y: 100,
+          height: 40,
+          width: 200,
+          disableAnchor: true,
+          name: 'rectangle',
+          borderRadius: 0.05,
+          input: true,
+          ellipsis: true,
+          text: '输入数字',
+          textAlign: 'left',
+          // color: '#D9D9D9FF',
+          // textColor: '#000000FF',
+          // hoverTextColor: '#000000FF',
+          // activeTextColor: '#000000FF',
+          textLeft: 10,
+          events: [
+            {
+              action: 5,
+              name: 'inactive',
+              value:
+                'context.meta2d.setValue({ id: pen.id, text: parseFloat(pen.text) }, { doEvent: false });',
+              where: { type: null },
+            },
+          ],
+        },
       },
       {
         name: '单选框',
-        icon: 'l-danxuankuang',
+        icon: 'l-danxuanxiang',
         data: {
           name: 'leRadio',
           width: 300,
           height: 30,
           disableAnchor: true,
           direction: 'horizontal', // 'vertical', //'horizontal',
-          them:'',
+          theme:'',
           itemPosition:[],
           data: [
-            {key:'1', text: '选项一', isForbidden: true },
-            {key:'2', text: '选项示例二' },
-            {key:'3', text: '选项三' },
+            { key: '1', text: '选项一', isForbidden: true },
+            { key: '2', text: '选项示例二' },
+            { key: '3', text: '选项三' },
           ],
           selectKey: '2',
         },
       },
       {
         name: '多选框',
-        icon: 'l-xuanzeqi',
+        icon: 'l-duoxuanxiang',
         data: {
           name: 'leCheckBox',
           width: 300,
           height: 30,
           direction: 'horizontal', // 'vertical', //'horizontal',
-          them:'',
+          theme:'',
           data: [
-            {key:'1', text: '选项一', isForbidden: true },
-            {key:'2', text: '选项示例二' },
-            {key:'3', text: '选项三' },
+            { key: '1', text: '选项一', isForbidden: true },
+            { key: '2', text: '选项示例二' },
+            { key: '3', text: '选项三' },
           ],
-          selectedKeys:['2','3']
+          selectedKeys: ['2', '3'],
         },
       },
       {
         name: '下拉选择器',
-        icon: 'l-xuanzeqi',
+        icon: 'l-xialaxuanzekuang',
         data: {
           x: 100,
           y: 100,
@@ -1842,7 +1908,7 @@ export const formComponents = [
       },
       {
         name: '时间选择器',
-        icon: 'l-riqixuanzekuang',
+        icon: 'l-shijianxuanzekuang',
         data: {
           name: 'leInput',
           width: 200,
@@ -1870,7 +1936,7 @@ export const formComponents = [
       },
       {
         name: '颜色选择器',
-        icon: 'l-maodian',
+        icon: 'l-yansexuanzekuang',
         data: {
           name: 'leInput',
           width: 200,
@@ -1900,7 +1966,7 @@ export const formComponents = [
       },
       {
         name: '滑块',
-        icon: 'l-kaiguan',
+        icon: 'l-huakuai',
         data: {
           anchors: [],
           disableAnchor: true,
@@ -1926,7 +1992,7 @@ export const formComponents = [
     list: [
       {
         name: '圆柱水位',
-        icon: 'l-db',
+        icon: 'l-yuanzhushuiwei',
         data: {
           name: 'waterTank',
           width: 100,
@@ -1939,7 +2005,7 @@ export const formComponents = [
       },
       {
         name: '球形水位',
-        icon: 'l-shuiliujianceqi',
+        icon: 'l-qiuxingshuiwei',
         data: {
           name: 'watermeter',
           width: 100,
@@ -1958,7 +2024,7 @@ export const formComponents = [
       },
       {
         name: '指示灯',
-        icon: 'l-tuxingzhishideng1',
+        icon: 'l-zhishideng',
         data: {
           name: 'indicatorLight',
           width: 100,
@@ -1990,17 +2056,17 @@ export const formComponents = [
       },
       {
         name: '圆形按钮',
-        icon: 'l-tuxingzhishideng1',
+        icon: 'l-pc', //l-yuanxinganniu
         data: {},
       },
       {
         name: '船型开关',
-        icon: 'l-tuxingzhishideng1',
+        icon: 'l-pc', //l-chuanxingkaiguan
         data: {},
       },
       {
         name: '转换开关',
-        icon: 'l-tuxingzhishideng1',
+        icon: 'l-pc', //l-zhuanhuankaiguan
         data: {},
       },
       {
@@ -2044,7 +2110,7 @@ export const formComponents = [
       },
       {
         name: '空气开关',
-        icon: 'l-bodongkaiguan',
+        icon: 'l-kongqikaiguan',
         data: {
           name: 'airSwitch',
           width: 180,
@@ -2056,7 +2122,7 @@ export const formComponents = [
       },
       {
         name: '水柱温度计',
-        icon: 'l-wenduji',
+        icon: 'l-shuizhuwendu',
         data: {
           name: 'thermometer',
           width: 100,
@@ -2070,7 +2136,7 @@ export const formComponents = [
       },
       {
         name: '扁平温度计',
-        icon: 'l-wenduji',
+        icon: 'l-bianpingwendu',
         data: {
           name: 'thermometer1',
           width: 200,
@@ -2113,6 +2179,6 @@ export const cases: any[] = [
 ];
 
 export const templates: any[] = [
-  { name: '科技蓝', list: [] },
-  { name: '简约', list: [] },
+  { name: '主题', list: [] },
+  { name: '布局', list: [] },
 ];

+ 4 - 2
src/views/components/ElementTree.vue

@@ -160,6 +160,7 @@ onBeforeMount(() => {
   meta2d.on('delete', getTree);
   meta2d.on('combine', getTree);
   meta2d.on('click', getActived);
+  meta2d.on('paste', getActived);
 
   if (inTreePanel.timer) {
     clearTimeout(inTreePanel.timer);
@@ -318,11 +319,12 @@ onBeforeUnmount(() => {
   meta2d.off('redo', getTree);
   meta2d.off('delete', getTree);
   meta2d.off('combine', getTree);
-  meta2d.on('click', getActived);
+  meta2d.off('click', getActived);
+  meta2d.off('paste', getActived);
 
   inTreePanel.timer = setTimeout(() => {
     inTreePanel.value = false;
-  }, 1000);
+  }, 500);
 });
 </script>
 <style lang="postcss" scoped>

+ 7 - 5
src/views/components/Graphics.vue

@@ -536,18 +536,19 @@ const dragStart = async (event: DragEvent | MouseEvent, item: any) => {
     let target: any = event.target;
     target.children[0] && (target = target.children[0].children[0]);
     // firefox naturalWidth svg 图片 可能是 0
-    const normalWidth = target.naturalWidth || target.width;
-    const normalHeight = target.naturalHeight || target.height;
+    const width = target.naturalWidth || target.width;
+    const height = target.naturalHeight || target.height;
     const [name, lockedOnCombine] = isGif(item.image)
       ? ['gif', 0]
       : ['image', undefined];
 
     data = {
       name,
-      width: 100,
-      height: 100 * (normalHeight / normalWidth),
+      width,
+      height,
       image: item.image,
       imageRatio: true,
+      ratio: true,
       lockedOnCombine,
     };
   } else {
@@ -590,6 +591,7 @@ const open = async (item: any) => {
     return;
   }
 
+  sessionStorage.setItem('opening', '1');
   router.push({
     path: '/',
     query: {
@@ -600,9 +602,9 @@ const open = async (item: any) => {
   for (const k of delAttrs) {
     delete ret[k];
   }
-
   autoSave();
   meta2d.open(ret);
+  meta2d.fitView();
 };
 
 const getPrivateGraphics = async () => {

+ 2 - 1
src/views/components/View.vue

@@ -857,9 +857,10 @@ const open = async (flag: boolean = false) => {
     if (data) {
       meta2d.open(JSON.parse(data));
     }
-  } else {
+  } else if (!sessionStorage.getItem('opening')) {
     meta2d.open({ name: '新建项目', pens: [] } as any);
   }
+  sessionStorage.removeItem('opening');
   !meta2d.store.data.x && (meta2d.store.data.x = meta2d.store.options.x || 0);
   !meta2d.store.data.y && (meta2d.store.data.y = meta2d.store.options.y || 0);
 };