|
|
@@ -2,7 +2,119 @@
|
|
|
<div class="props">
|
|
|
<t-tabs v-model="data.tab">
|
|
|
<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 :value="2" label="事件"> </t-tab-panel>
|
|
|
<t-tab-panel :value="3" label="动画"> </t-tab-panel>
|
|
|
@@ -12,8 +124,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { reactive } from 'vue';
|
|
|
+import { onBeforeMount, onUnmounted, reactive } from 'vue';
|
|
|
import { getCookie } from '@/services/cookie';
|
|
|
+import { useSelection } from '@/services/selections';
|
|
|
|
|
|
const headers = {
|
|
|
Authorization: 'Bearer ' + (localStorage.token || getCookie('token') || ''),
|
|
|
@@ -22,8 +135,49 @@ const updataData = { directory: '/项目' };
|
|
|
|
|
|
const data = reactive<any>({
|
|
|
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>
|
|
|
<style lang="postcss" scoped>
|
Alsmile