feat:iframe&ElementTree_active

src/services/defaults.ts

@@ -216,6 +216,46 @@ export interface FormItemType extends FormItem {
   hidden?: boolean; //是否隐藏
 }
 
+export const iframeCustom = [
+  {
+    key: 'iframe',
+    label: '网页地址',
+    type: 'string',
+  },
+  {
+    key: 'operationalRect.x',
+    label: '可操作x',
+    type: 'number',
+    min: 0,
+    max: 1,
+    placeholder: '范围0-1',
+  },
+  {
+    key: 'operationalRect.y',
+    label: '可操作y',
+    type: 'number',
+    min: 0,
+    max: 1,
+    placeholder: '范围0-1',
+  },
+  {
+    key: 'operationalRect.width',
+    label: '可操作宽度',
+    type: 'number',
+    min: 0,
+    max: 1,
+    placeholder: '范围0-1',
+  },
+  {
+    key: 'operationalRect.height',
+    label: '可操作高度',
+    type: 'number',
+    min: 0,
+    max: 1,
+    placeholder: '范围0-1',
+  },
+];
+
 export const shapes = [
   {
     name: '基本形状',
@@ -1357,9 +1397,9 @@ export const formComponents = [
           name: 'calendar',
           background: '#fff0',
           hoverTextColor: '#fff',
-          dbInput:true,
+          dbInput: true,
           // input: true,
-          text:'8月'
+          text: '8月',
         },
       },
       {
@@ -1372,10 +1412,10 @@ export const formComponents = [
           name: 'calendar',
           background: '#fff0',
           hoverTextColor: '#fff',
-          dbInput:true,
+          dbInput: true,
           // input: true,
           text: '8月',
-          calendarType:'time'
+          calendarType: 'time',
         },
       },
     ],
@@ -1732,13 +1772,7 @@ export const formComponents = [
           externElement: true,
           iframe: 'https://le5le.com',
           props: {
-            custom: [
-              {
-                key: 'iframe',
-                label: '网页地址',
-                type: 'string',
-              },
-            ],
+            custom: iframeCustom,
           },
         },
       },
@@ -2739,7 +2773,7 @@ export const formComponents = [
           background: '#4583FF33',
           color: '#4583FF',
           hiddenText: true,
-          onColor:'#58CC84',
+          onColor: '#58CC84',
           frames: [
             {
               background: '#4583FF33',
@@ -2889,10 +2923,10 @@ export const formComponents = [
           width: 32,
           height: 128,
           disableAnchor: true,
-          color:'#4583FF',
-          fontColor:'#FFFFFFB3',
+          color: '#4583FF',
+          fontColor: '#FFFFFFB3',
           background: '#FF5D3C33',
-          activeBacground:'#FF5D3C',
+          activeBacground: '#FF5D3C',
           value: -10,
           min: -20,
           max: 20,
@@ -2910,10 +2944,10 @@ export const formComponents = [
           value: 0,
           min: -20,
           max: 20,
-          color:'#4583FF',
+          color: '#4583FF',
           markColor: '#fff',
-          background:'#FF5D3C33',
-          activeBackground:'#FF5D3C',
+          background: '#FF5D3C33',
+          activeBackground: '#FF5D3C',
           fontColor: '#FFFFFFB3',
           sub: 5,
           barrel: {

src/views/components/ElementTree.vue

@@ -265,7 +265,9 @@ const onActive = (value: string[]) => {
       }
     }
   }
-  meta2d.active(pens, false);
+  meta2d.active(pens, true);
+  meta2d.gotoView(pens[0]);
+  meta2d.resize();
   meta2d.render();
 };
 

src/views/components/Graphics.vue

@@ -250,6 +250,7 @@ import { getCookie } from '@/services/cookie';
 import WechatPay from './WechatPay.vue';
 import { filename } from '@/services/file';
 import { useUser } from '@/services/user';
+import { iframeCustom } from '@/services/defaults';
 
 const { user } = useUser();
 const router = useRouter();
@@ -514,6 +515,15 @@ const dragStart = async (event: DragEvent | MouseEvent, item: any) => {
       y: 0,
       tags: ['meta3d'],
       zIndex: 1,
+      operationalRect: {
+        x: 0.1,
+        y: 0.2,
+        height: 0.9,
+        width: 0.6,
+      },
+      props: {
+        custom: iframeCustom,
+      },
       width: meta2d.store.data.width || meta2d.store.options.width,
       height: meta2d.store.data.height || meta2d.store.options.height,
       externElement: true,