|
|
@@ -104,34 +104,9 @@
|
|
|
{{ data.pen.globalAlpha }}
|
|
|
</span>
|
|
|
</div>
|
|
|
- <t-divider style="margin: -8px 0" />
|
|
|
- <div class="form-item px-16" style="margin-top: -12px">
|
|
|
- <t-checkbox
|
|
|
- v-model="data.pen.flipX"
|
|
|
- @change="changeValue('flipX')"
|
|
|
- style="width: 90px"
|
|
|
- >
|
|
|
- 水平翻转
|
|
|
- </t-checkbox>
|
|
|
- <t-checkbox
|
|
|
- v-model="data.pen.flipY"
|
|
|
- @change="changeValue('flipY')"
|
|
|
- style="width: 90px"
|
|
|
- >
|
|
|
- 垂直翻转
|
|
|
- </t-checkbox>
|
|
|
|
|
|
- <label style="width: 50px">锚点半径</label>
|
|
|
- <input
|
|
|
- class="ml-4"
|
|
|
- v-model.number="data.pen.anchorRadius"
|
|
|
- style="width: 20px"
|
|
|
- @change="changeValue('anchorRadius')"
|
|
|
- placeholder="4"
|
|
|
- />
|
|
|
- </div>
|
|
|
<t-collapse
|
|
|
- :defaultValue="['1', '2']"
|
|
|
+ :defaultValue="['1', '2', '3', '4']"
|
|
|
expandIconPlacement="right"
|
|
|
:borderless="true"
|
|
|
>
|
|
|
@@ -462,48 +437,6 @@
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="form-item">
|
|
|
- <t-color-picker
|
|
|
- class="simple mt-8 mr-4"
|
|
|
- format="CSS"
|
|
|
- :enable-alpha="true"
|
|
|
- :color-modes="['monochrome']"
|
|
|
- :show-primary-color-preview="false"
|
|
|
- :clearable="true"
|
|
|
- v-model="data.pen.color"
|
|
|
- @change="changeValue('color')"
|
|
|
- />
|
|
|
- <label style="width: 44px">前景</label>
|
|
|
- <t-color-picker
|
|
|
- class="simple mt-8 mr-4"
|
|
|
- format="CSS"
|
|
|
- :color-modes="['monochrome']"
|
|
|
- :show-primary-color-preview="false"
|
|
|
- v-model="data.pen.background"
|
|
|
- @change="changeValue('background')"
|
|
|
- />
|
|
|
- <label style="width: 44px">背景</label>
|
|
|
-
|
|
|
- <t-color-picker
|
|
|
- class="simple mt-8 mr-4"
|
|
|
- format="CSS"
|
|
|
- :color-modes="['monochrome']"
|
|
|
- :show-primary-color-preview="false"
|
|
|
- v-model="data.pen.hoverColor"
|
|
|
- @change="changeValue('hoverColor')"
|
|
|
- />
|
|
|
- <label style="width: 44px">悬停</label>
|
|
|
-
|
|
|
- <t-color-picker
|
|
|
- class="simple mt-8 mr-4"
|
|
|
- format="CSS"
|
|
|
- :color-modes="['monochrome']"
|
|
|
- :show-primary-color-preview="false"
|
|
|
- v-model="data.pen.activeColor"
|
|
|
- @change="changeValue('activeColor')"
|
|
|
- />
|
|
|
- <label style="width: 44px">选中</label>
|
|
|
- </div>
|
|
|
<div class="flex middle">
|
|
|
<t-radio-group
|
|
|
size="small"
|
|
|
@@ -582,18 +515,215 @@
|
|
|
>
|
|
|
</div>
|
|
|
<div class="form-item">
|
|
|
- <t-input
|
|
|
- class="ml-4"
|
|
|
- label="X"
|
|
|
- placeholder="x偏移"
|
|
|
- v-model.number="data.pen.shadowOffsetX"
|
|
|
- style="width: 60px"
|
|
|
- @change="changeValue('x')"
|
|
|
+ <t-color-picker
|
|
|
+ class="simple mt-8 mr-4"
|
|
|
+ format="CSS"
|
|
|
+ :enable-alpha="true"
|
|
|
+ :color-modes="['monochrome']"
|
|
|
+ :show-primary-color-preview="false"
|
|
|
+ :clearable="true"
|
|
|
+ v-model="data.pen.color"
|
|
|
+ @change="changeValue('color')"
|
|
|
+ />
|
|
|
+ <label style="width: 44px">前景</label>
|
|
|
+ <t-color-picker
|
|
|
+ class="simple mt-8 mr-4"
|
|
|
+ format="CSS"
|
|
|
+ :color-modes="['monochrome']"
|
|
|
+ :show-primary-color-preview="false"
|
|
|
+ v-model="data.pen.background"
|
|
|
+ @change="changeValue('background')"
|
|
|
+ />
|
|
|
+ <label style="width: 44px">背景</label>
|
|
|
+
|
|
|
+ <t-color-picker
|
|
|
+ class="simple mt-8 mr-4"
|
|
|
+ format="CSS"
|
|
|
+ :color-modes="['monochrome']"
|
|
|
+ :show-primary-color-preview="false"
|
|
|
+ v-model="data.pen.hoverColor"
|
|
|
+ @change="changeValue('hoverColor')"
|
|
|
+ />
|
|
|
+ <label style="width: 44px">悬停</label>
|
|
|
+
|
|
|
+ <t-color-picker
|
|
|
+ class="simple mt-8 mr-4"
|
|
|
+ format="CSS"
|
|
|
+ :color-modes="['monochrome']"
|
|
|
+ :show-primary-color-preview="false"
|
|
|
+ v-model="data.pen.activeColor"
|
|
|
+ @change="changeValue('activeColor')"
|
|
|
/>
|
|
|
+ <label style="width: 44px">选中</label>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <t-checkbox
|
|
|
+ v-model="data.pen.whiteSpace"
|
|
|
+ @change="changeValue('whiteSpace')"
|
|
|
+ style="width: 64px"
|
|
|
+ >
|
|
|
+ 换行
|
|
|
+ </t-checkbox>
|
|
|
+ <t-checkbox
|
|
|
+ v-model="data.pen.ellipsis"
|
|
|
+ @change="changeValue('ellipsis')"
|
|
|
+ style="width: 68px"
|
|
|
+ >
|
|
|
+ 省略号
|
|
|
+ </t-checkbox>
|
|
|
+ <t-tooltip content="行高">
|
|
|
+ <t-input
|
|
|
+ placeholder="行高"
|
|
|
+ v-model.number="data.pen.lineHeight"
|
|
|
+ style="width: 40px"
|
|
|
+ @change="changeValue('lineHeight')"
|
|
|
+ />
|
|
|
+ </t-tooltip>
|
|
|
+ <t-tooltip content="显示时保留小数位数">
|
|
|
+ <t-input
|
|
|
+ class="ml-4"
|
|
|
+ placeholder="小数"
|
|
|
+ v-model.number="data.pen.keepDecimal"
|
|
|
+ style="width: 60px"
|
|
|
+ @change="changeValue('keepDecimal')"
|
|
|
+ />
|
|
|
+ </t-tooltip>
|
|
|
+ </div>
|
|
|
+ <div class="form-item" style="margin-top: -4px">
|
|
|
+ <t-tooltip content="水平偏移">
|
|
|
+ <t-input
|
|
|
+ placeholder="X"
|
|
|
+ v-model.number="data.pen.textLeft"
|
|
|
+ style="width: 60px; margin-left: -8px"
|
|
|
+ @change="changeValue('textLeft')"
|
|
|
+ />
|
|
|
+ </t-tooltip>
|
|
|
+ <t-tooltip content="垂直偏移">
|
|
|
+ <t-input
|
|
|
+ class="ml-4"
|
|
|
+ placeholder="Y"
|
|
|
+ v-model.number="data.pen.textTop"
|
|
|
+ style="width: 60px"
|
|
|
+ @change="changeValue('textTop')"
|
|
|
+ />
|
|
|
+ </t-tooltip>
|
|
|
+ <t-tooltip content="宽">
|
|
|
+ <t-input
|
|
|
+ class="ml-4"
|
|
|
+ placeholder="宽"
|
|
|
+ v-model.number="data.pen.textWidth"
|
|
|
+ style="width: 60px"
|
|
|
+ @change="changeValue('textWidth')"
|
|
|
+ />
|
|
|
+ </t-tooltip>
|
|
|
+ <t-tooltip content="高">
|
|
|
+ <t-input
|
|
|
+ class="ml-4"
|
|
|
+ placeholder="高"
|
|
|
+ v-model.number="data.pen.textHeight"
|
|
|
+ style="width: 60px"
|
|
|
+ @change="changeValue('textHeight')"
|
|
|
+ />
|
|
|
+ </t-tooltip>
|
|
|
+ </div>
|
|
|
+ <div class="flex middle">
|
|
|
+ <t-checkbox
|
|
|
+ v-model="data.pen.disableInput"
|
|
|
+ @change="changeValue('disableInput')"
|
|
|
+ style="width: 64px"
|
|
|
+ >
|
|
|
+ 只读
|
|
|
+ </t-checkbox>
|
|
|
+
|
|
|
+ <t-checkbox
|
|
|
+ v-model="data.pen.hiddenText"
|
|
|
+ @change="changeValue('hiddenText')"
|
|
|
+ style="width: 90px"
|
|
|
+ >
|
|
|
+ 隐藏文字
|
|
|
+ </t-checkbox>
|
|
|
+ </div>
|
|
|
+ </t-space>
|
|
|
+ </t-collapse-panel>
|
|
|
+ <t-collapse-panel
|
|
|
+ v-if="data.pen.props.image"
|
|
|
+ value="3"
|
|
|
+ header="图片"
|
|
|
+ >
|
|
|
+ <t-space direction="vertical" size="small" class="w-full">
|
|
|
+ <div>
|
|
|
+ <t-upload
|
|
|
+ v-model="data.images"
|
|
|
+ action="/api/image/upload"
|
|
|
+ theme="image"
|
|
|
+ accept="image/*"
|
|
|
+ :headers="headers"
|
|
|
+ :data="updataData"
|
|
|
+ draggable
|
|
|
+ @success="fileSuccessed"
|
|
|
+ @remove="fileRemoved"
|
|
|
+ >
|
|
|
+ <template #fileListDisplay></template>
|
|
|
+ </t-upload>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <div class="flex middle" style="margin-left: -10px"></div>
|
|
|
</div>
|
|
|
</t-space>
|
|
|
</t-collapse-panel>
|
|
|
</t-collapse>
|
|
|
+
|
|
|
+ <t-divider style="margin: -8px 0" />
|
|
|
+ <div class="form-item px-16" style="margin-top: -12px">
|
|
|
+ <t-checkbox
|
|
|
+ v-model="data.pen.flipX"
|
|
|
+ @change="changeValue('flipX')"
|
|
|
+ style="width: 90px"
|
|
|
+ >
|
|
|
+ 水平翻转
|
|
|
+ </t-checkbox>
|
|
|
+ <t-checkbox
|
|
|
+ v-model="data.pen.flipY"
|
|
|
+ @change="changeValue('flipY')"
|
|
|
+ style="width: 90px"
|
|
|
+ >
|
|
|
+ 垂直翻转
|
|
|
+ </t-checkbox>
|
|
|
+
|
|
|
+ <label style="width: 50px">锚点半径</label>
|
|
|
+ <input
|
|
|
+ class="ml-4"
|
|
|
+ v-model.number="data.pen.anchorRadius"
|
|
|
+ style="width: 20px"
|
|
|
+ @change="changeValue('anchorRadius')"
|
|
|
+ placeholder="4"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <t-divider style="margin: -8px 0" />
|
|
|
+ <div class="form-item px-16" style="margin-top: -12px">
|
|
|
+ <t-checkbox
|
|
|
+ v-model="data.pen.disableRotate"
|
|
|
+ @change="changeValue('disableRotate')"
|
|
|
+ style="width: 90px"
|
|
|
+ >
|
|
|
+ 禁止旋转
|
|
|
+ </t-checkbox>
|
|
|
+ <t-checkbox
|
|
|
+ v-model="data.pen.disableSize"
|
|
|
+ @change="changeValue('disableSize')"
|
|
|
+ style="width: 90px"
|
|
|
+ >
|
|
|
+ 禁止缩放
|
|
|
+ </t-checkbox>
|
|
|
+ <t-checkbox
|
|
|
+ v-model="data.pen.disableAnchor"
|
|
|
+ @change="changeValue('disableAnchor')"
|
|
|
+ style="width: 90px"
|
|
|
+ >
|
|
|
+ 禁用锚点
|
|
|
+ </t-checkbox>
|
|
|
+ </div>
|
|
|
+ <t-space />
|
|
|
</t-space>
|
|
|
</t-tab-panel>
|
|
|
<t-tab-panel :value="2" label="事件"> </t-tab-panel>
|
|
|
@@ -652,8 +782,22 @@ onBeforeMount(() => {
|
|
|
if (!data.pen.dash) {
|
|
|
data.pen.dash = 0;
|
|
|
}
|
|
|
- if (!data.pen.props.text && data.pen.text) {
|
|
|
- data.pen.props.text = true;
|
|
|
+ if (!data.pen.props.text) {
|
|
|
+ if (data.pen.text || data.pen.name === 'text') {
|
|
|
+ data.pen.props.text = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (!data.pen.props.image) {
|
|
|
+ if (data.pen.image || data.pen.name === 'image') {
|
|
|
+ data.pen.props.image = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (data.pen.image) {
|
|
|
+ data.images = [
|
|
|
+ {
|
|
|
+ url: data.pen.image,
|
|
|
+ },
|
|
|
+ ];
|
|
|
}
|
|
|
data.pen.shadow = !!data.pen.shadowColor;
|
|
|
getRect();
|
|
|
@@ -710,6 +854,20 @@ const onFontFamily = (fontFamily: string) => {
|
|
|
changeValue('fontFamily');
|
|
|
};
|
|
|
|
|
|
+const fileSuccessed = async (content: any) => {
|
|
|
+ meta2d.store.patchFlagsBackground = true;
|
|
|
+ meta2d.setBackgroundImage(content.response.url);
|
|
|
+ meta2d.store.patchFlagsBackground = true;
|
|
|
+ meta2d.render();
|
|
|
+};
|
|
|
+
|
|
|
+const fileRemoved = () => {
|
|
|
+ meta2d.setBackgroundImage('');
|
|
|
+ meta2d.store.patchFlagsBackground = true;
|
|
|
+ meta2d.render();
|
|
|
+ data.background = [];
|
|
|
+};
|
|
|
+
|
|
|
onUnmounted(() => {
|
|
|
meta2d.off('translatePens', getRect);
|
|
|
meta2d.off('resizePens', getRect);
|
Alsmile
