首頁 探索 說明
註冊 登入
wangcong
/
visualization-design
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

pen props

Alsmile 2 年之前
父節點
9b42a15eaf
當前提交
fd86d2322a
共有 6 個文件被更改，包括 199 次插入 和 14 次删除
統一視圖 顯示文件統計
  1. 1 5
      index.html
  2. 6 1
      src/services/selections.ts
  3. 24 0
      src/styles/app.css
  4. 8 2
      src/styles/props.css
  5. 2 2
      src/views/components/FileProps.vue
  6. 158 4
      src/views/components/PenProps.vue

+ 1 - 5
index.html
查看文件 

@@ -14,10 +14,6 @@
 
       content="乐吾乐Le5le - 帮助企业快速搭建可视化或企业信息系统，提高开发效率，降低开发成本和运营成本。"
 
       content="乐吾乐Le5le - 帮助企业快速搭建可视化或企业信息系统，提高开发效率，降低开发成本和运营成本。"
 
     />
 
     />
 
 
 
-    <link
 
-      href="https://editor.yuque.com/ne-editor/lake-content-v1.css"
 
-      rel="stylesheet"
 
-    />
 
     <style type="text/css">
 
     <style type="text/css">
 
       .l-icon {
 
       .l-icon {
 
         width: 1em;
 
         width: 1em;
 
@@ -27,7 +23,7 @@
 
         overflow: hidden;
 
         overflow: hidden;
 
       }
 
       }
 
     </style>
 
     </style>
 
-    <script src="//at.alicdn.com/t/c/font_4042197_m37o5op4iyq.js"></script>
 
+    <script src="//at.alicdn.com/t/c/font_4042197_zjhjxu3egl.js"></script>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>

+ 6 - 1
src/services/selections.ts
查看文件 

@@ -1,3 +1,4 @@
 
+import { Pen } from '@meta2d/core';
 
 import { reactive } from 'vue';
 
 import { reactive } from 'vue';
 
 
 
 export enum SelectionMode {
 
 export enum SelectionMode {
 
@@ -6,7 +7,11 @@ export enum SelectionMode {
 
   Pens,
 
   Pens,
 
 }
 
 }
 
 
 
-const selections = reactive<any>({
 
+const selections = reactive<{
 
+  mode: SelectionMode;
 
+  pen?: Pen;
 
+  pens?: Pen[];
 
+}>({
 
   // 选中对象类型：0 - 画布；1 - 单个图元；2 - 多选
 
   // 选中对象类型：0 - 画布；1 - 单个图元；2 - 多选
 
   mode: SelectionMode.File,
 
   mode: SelectionMode.File,
 
   pen: undefined,
 
   pen: undefined,

+ 24 - 0
src/styles/app.css
查看文件 

@@ -173,6 +173,26 @@ a.hover:hover {
 
   color: var(--color-bland-hover) !important;

   color: var(--color-bland-hover) !important;

 }

 }

 

 

+.visible {

+  visibility: visible;

+}

+

+.hidden {

+  visibility: hidden;

+}

+

+.hover-icons {

+  .icon {

+    visibility: hidden;

+  }

+

+  &:hover {

+    .icon {

+      visibility: visible;

+    }

+  }

+}

+

 .flex {

 .flex {

   display: flex;

   display: flex;

   &.middle {

   &.middle {

@@ -207,6 +227,10 @@ a.hover:hover {
 
   margin-left: 8px;

   margin-left: 8px;

 }

 }

 

 

+.ml-16 {

+  margin-left: 16px;

+}

+

 .mt-8 {

 .mt-8 {

   margin-top: 8px;

   margin-top: 8px;

 }

 }

+ 8 - 2
src/styles/props.css
查看文件 

@@ -13,7 +13,7 @@
 
     display: flex;

     display: flex;

 

 

     label {

     label {

-      width: 80px;

+      width: 72px;

       font-size: 12px;

       font-size: 12px;

       line-height: 30px;

       line-height: 30px;

       flex-shrink: 0;

       flex-shrink: 0;

@@ -33,7 +33,6 @@
 
           background: none;

           background: none;

           border-color: transparent;

           border-color: transparent;

           color: var(--color-title);

           color: var(--color-title);

-          padding-right: 16px;

 

 

           &:hover,

           &:hover,

           &.t-is-focused {

           &.t-is-focused {

@@ -202,6 +201,13 @@
 
     border: 1px solid var(--color-border-input);

     border: 1px solid var(--color-border-input);

   }

   }

 

 

+  .t-slider {

+    .t-slider__rail,

+    .t-slider__track {

+      height: 2px;

+    }

+  }

+

   ::-webkit-scrollbar {

   ::-webkit-scrollbar {

     width: 2px;

     width: 2px;

     height: 6px;

     height: 6px;

+ 2 - 2
src/views/components/FileProps.vue
查看文件 

@@ -9,7 +9,7 @@
 
               label="W"

               label="W"

               :value="data.meta2dData.width"

               :value="data.meta2dData.width"

               placeholder="宽"

               placeholder="宽"

-              theme="column"

+              theme="normal"

               min="1"

               min="1"

               style="width: 80px"

               style="width: 80px"

               @change="changeValue($event, 'width')"

               @change="changeValue($event, 'width')"

@@ -18,7 +18,7 @@
 
               class="ml-8"

               class="ml-8"

               label="H"

               label="H"

               placeholder="高"

               placeholder="高"

-              theme="column"

+              theme="normal"

               min="1"

               min="1"

               :value="data.meta2dData.height"

               :value="data.meta2dData.height"

               style="width: 80px"

               style="width: 80px"

+ 158 - 4
src/views/components/PenProps.vue
查看文件 

@@ -2,7 +2,119 @@
 
   <div class="props">

   <div class="props">

     <t-tabs v-model="data.tab">

     <t-tabs v-model="data.tab">

       <t-tab-panel :value="1" label="外观">

       <t-tab-panel :value="1" label="外观">

-        <t-space direction="vertical" class="panel"> </t-space>

+        <t-space direction="vertical" class="panel">

+          <div class="form-item">

+            <t-input-number

+              label="X"

+              v-model="data.rect.x"

+              placeholder="x"

+              theme="normal"

+              style="width: 80px"

+              @change="changeRect"

+            />

+            <t-icon name="link" class="hidden ml-4" />

+            <t-input-number

+              class="ml-8"

+              label="Y"

+              placeholder="y"

+              theme="normal"

+              v-model="data.rect.y"

+              style="width: 80px"

+              @change="changeRect"

+            />

+

+            <t-input

+              class="ml-8"

+              v-model="data.pen.rotate"

+              placeholder="旋转"

+              style="width: 72px"

+              @change="changeValue"

+            >

+              <template #prefix-icon>

+                <svg class="l-icon" aria-hidden="true">

+                  <use xlink:href="#l-rotate"></use>

+                </svg>

+              </template>

+            </t-input>

+          </div>

+          <div class="form-item hover-icons" style="margin-top: -12px">

+            <t-input-number

+              label="W"

+              v-model="data.rect.width"

+              placeholder="宽"

+              theme="normal"

+              min="1"

+              style="width: 80px"

+              @change="changeRect(1)"

+            />

+            <t-tooltip v-if="data.pen.ratio" content="固定比例" placement="top">

+              <t-icon

+                name="link"

+                class="ml-4 hover"

+                @click="data.pen.ratio = !data.pen.ratio"

+              />

+            </t-tooltip>

+            <t-tooltip v-else content="不固定比例" placement="top">

+              <t-icon

+                name="link-unlink"

+                class="ml-4 hover icon"

+                @click="data.pen.ratio = !data.pen.ratio"

+              />

+            </t-tooltip>

+

+            <t-input-number

+              class="ml-8"

+              label="H"

+              placeholder="高"

+              theme="normal"

+              min="1"

+              v-model="data.rect.height"

+              style="width: 80px"

+              @change="changeRect(2)"

+            />

+

+            <t-input

+              class="ml-8"

+              v-model.number="data.pen.borderRadius"

+              placeholder="圆角"

+              style="width: 72px"

+              @change="changeValue"

+            >

+              <template #prefix-icon>

+                <svg class="l-icon" aria-hidden="true">

+                  <use xlink:href="#l-border-radius"></use>

+                </svg>

+              </template>

+            </t-input>

+          </div>

+          <t-divider style="margin: -8px 0" />

+          <div class="form-item" style="margin-top: -12px">

+            <label>不透明度</label>

+            <t-slider

+              v-model="data.pen.globalAlpha"

+              :min="0"

+              :max="1"

+              :step="0.01"

+              @change="changeValue"

+            />

+            <span class="ml-16" style="width: 50px; line-height: 30px">

+              {{ data.pen.globalAlpha }}

+            </span>

+          </div>

+          <div class="form-item" style="margin-top: -12px">

+            <label>不透明度</label>

+            <t-slider

+              v-model="data.pen.globalAlpha"

+              :min="0"

+              :max="1"

+              :step="0.01"

+              @change="changeValue"

+            />

+            <span class="ml-16" style="width: 50px; line-height: 30px">

+              {{ data.pen.globalAlpha }}

+            </span>

+          </div>

+        </t-space>

       </t-tab-panel>

       </t-tab-panel>

       <t-tab-panel :value="2" label="事件"> </t-tab-panel>

       <t-tab-panel :value="2" label="事件"> </t-tab-panel>

       <t-tab-panel :value="3" label="动画"> </t-tab-panel>

       <t-tab-panel :value="3" label="动画"> </t-tab-panel>

@@ -12,8 +124,9 @@
 
 </template>

 </template>

 

 

 <script lang="ts" setup>

 <script lang="ts" setup>

-import { reactive } from 'vue';

+import { onBeforeMount, onUnmounted, reactive } from 'vue';

 import { getCookie } from '@/services/cookie';

 import { getCookie } from '@/services/cookie';

+import { useSelection } from '@/services/selections';

 

 

 const headers = {

 const headers = {

   Authorization: 'Bearer ' + (localStorage.token || getCookie('token') || ''),

   Authorization: 'Bearer ' + (localStorage.token || getCookie('token') || ''),

@@ -22,8 +135,49 @@ const updataData = { directory: '/项目' };
 
 

 

 const data = reactive<any>({

 const data = reactive<any>({

   tab: 1,

   tab: 1,

-  background: [],

-  meta2dData: {},

+  pen: {},

+  rect: {},

+});

+

+const { selections } = useSelection();

+

+onBeforeMount(() => {

+  data.pen = selections.pen;

+  getRect();

+  meta2d.on('translatePens', getRect);

+  meta2d.on('resizePens', getRect);

+  meta2d.on('rotatePens', getRect);

+});

+

+const getRect = () => {

+  data.rect = meta2d.getPenRect(data.pen);

+};

+

+const changeRect = (mode?: number) => {

+  //宽高比锁定

+  if (data.pen.ratio) {

+    if (mode === 1) {

+      data.rect.height = (data.rect.width / data.pen.width) * data.pen.height;

+    } else if (mode === 2) {

+      data.rect.width = (data.rect.height / data.pen.height) * data.pen.width;

+    }

+  }

+

+  meta2d.setPenRect(data.pen, data.rect, true);

+};

+

+const changeValue = (mode?: number) => {

+  switch (mode) {

+    case 1:

+      break;

+  }

+  meta2d.render();

+};

+

+onUnmounted(() => {

+  meta2d.off('translatePens', getRect);

+  meta2d.off('resizePens', getRect);

+  meta2d.off('rotatePens', getRect);

 });

 });

 </script>

 </script>

 <style lang="postcss" scoped>

 <style lang="postcss" scoped>