|
|
@@ -109,25 +109,34 @@
|
|
|
<t-checkbox
|
|
|
v-model="data.pen.flipX"
|
|
|
@change="changeValue('flipX')"
|
|
|
- style="width: 100px"
|
|
|
+ style="width: 90px"
|
|
|
>
|
|
|
水平翻转
|
|
|
</t-checkbox>
|
|
|
<t-checkbox
|
|
|
v-model="data.pen.flipY"
|
|
|
@change="changeValue('flipY')"
|
|
|
- style="width: 100px"
|
|
|
+ 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']"
|
|
|
+ :defaultValue="['1', '2']"
|
|
|
expandIconPlacement="right"
|
|
|
:borderless="true"
|
|
|
>
|
|
|
<t-collapse-panel
|
|
|
- v-if="data.pen.props.color !== false"
|
|
|
+ v-if="data.pen.props.look !== false"
|
|
|
value="1"
|
|
|
header="外观"
|
|
|
>
|
|
|
@@ -377,31 +386,213 @@
|
|
|
<t-input
|
|
|
class="ml-4"
|
|
|
label="X"
|
|
|
- placeholder="x偏移"
|
|
|
+ placeholder="0"
|
|
|
v-model.number="data.pen.shadowOffsetX"
|
|
|
style="width: 60px"
|
|
|
@change="changeValue('x')"
|
|
|
+ title="X偏移"
|
|
|
/>
|
|
|
<t-input
|
|
|
class="ml-4"
|
|
|
label="Y"
|
|
|
- placeholder="y偏移"
|
|
|
+ placeholder="0"
|
|
|
v-model.number="data.pen.shadowOffsetY"
|
|
|
style="width: 60px"
|
|
|
@change="changeValue('shadowOffsetY')"
|
|
|
+ title="Y偏移"
|
|
|
/>
|
|
|
<t-input
|
|
|
class="ml-4"
|
|
|
label="模糊"
|
|
|
- placeholder="模糊"
|
|
|
+ placeholder="0"
|
|
|
v-model.number="data.pen.shadowBlur"
|
|
|
style="width: 64px"
|
|
|
@change="changeValue('shadowBlur')"
|
|
|
+ title="模糊大小"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</t-space>
|
|
|
</t-collapse-panel>
|
|
|
+ <t-collapse-panel
|
|
|
+ v-if="data.pen.props.text"
|
|
|
+ value="2"
|
|
|
+ header="文字"
|
|
|
+ >
|
|
|
+ <t-space direction="vertical" size="small" class="w-full">
|
|
|
+ <div class="form-item">
|
|
|
+ <div class="flex middle" style="margin-left: -10px">
|
|
|
+ <t-select-input
|
|
|
+ :value="data.pen.fontFamily"
|
|
|
+ :popup-visible="data.fontFamilyPopupVisible"
|
|
|
+ placeholder="字体名"
|
|
|
+ allow-input
|
|
|
+ style="width: 170px"
|
|
|
+ @change="changeValue('fontFamily')"
|
|
|
+ @enter="changeValue('fontFamily')"
|
|
|
+ @blur="changeValue('fontFamily')"
|
|
|
+ @popup-visible-change="onFontPopupVisible"
|
|
|
+ :popup-props="{
|
|
|
+ overlayInnerStyle: { width: 'auto' },
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <template #panel>
|
|
|
+ <ul style="padding: 12px">
|
|
|
+ <li
|
|
|
+ v-for="item in fonts"
|
|
|
+ :key="item"
|
|
|
+ @click="onFontFamily(item)"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </template>
|
|
|
+ <template #suffixIcon>
|
|
|
+ <t-icon name="chevron-down" />
|
|
|
+ </template>
|
|
|
+ </t-select-input>
|
|
|
+
|
|
|
+ <t-input
|
|
|
+ class="ml-8"
|
|
|
+ placeholder="字体大小"
|
|
|
+ v-model.number="data.pen.fontSize"
|
|
|
+ style="width: 80px"
|
|
|
+ :format="decimalRound"
|
|
|
+ @change="changeValue('fontSize')"
|
|
|
+ />
|
|
|
+ </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"
|
|
|
+ v-model="data.pen.textAlign"
|
|
|
+ default-value="center"
|
|
|
+ @change="changeValue('textAlign')"
|
|
|
+ >
|
|
|
+ <t-radio-button value="left">
|
|
|
+ <t-tooltip content="居左" placement="top">
|
|
|
+ <t-icon name="format-vertical-align-left" />
|
|
|
+ </t-tooltip>
|
|
|
+ </t-radio-button>
|
|
|
+ <t-radio-button value="center">
|
|
|
+ <t-tooltip content="居中" placement="top">
|
|
|
+ <t-icon name="format-vertical-align-center" />
|
|
|
+ </t-tooltip>
|
|
|
+ </t-radio-button>
|
|
|
+ <t-radio-button value="right">
|
|
|
+ <t-tooltip content="居右" placement="top">
|
|
|
+ <t-icon name="format-vertical-align-right" />
|
|
|
+ </t-tooltip>
|
|
|
+ </t-radio-button>
|
|
|
+ </t-radio-group>
|
|
|
+ <t-radio-group
|
|
|
+ class="ml-8"
|
|
|
+ size="small"
|
|
|
+ v-model="data.pen.textBaseline"
|
|
|
+ default-value="top"
|
|
|
+ @change="changeValue('textBaseline')"
|
|
|
+ >
|
|
|
+ <t-radio-button value="top">
|
|
|
+ <t-tooltip content="顶部对齐" placement="top">
|
|
|
+ <t-icon name="format-horizontal-align-top" />
|
|
|
+ </t-tooltip>
|
|
|
+ </t-radio-button>
|
|
|
+ <t-radio-button value="middle">
|
|
|
+ <t-tooltip content="垂直居中" placement="middle">
|
|
|
+ <t-icon name="format-horizontal-align-center" />
|
|
|
+ </t-tooltip>
|
|
|
+ </t-radio-button>
|
|
|
+ <t-radio-button value="bottom">
|
|
|
+ <t-tooltip content="底部对齐" placement="top">
|
|
|
+ <t-icon name="format-horizontal-align-bottom" />
|
|
|
+ </t-tooltip>
|
|
|
+ </t-radio-button>
|
|
|
+ </t-radio-group>
|
|
|
+
|
|
|
+ <t-button
|
|
|
+ :class="{ active: data.pen.fontWeight === 'bold' }"
|
|
|
+ class="ml-8 icon"
|
|
|
+ shape="rectangle"
|
|
|
+ variant="text"
|
|
|
+ @click="
|
|
|
+ data.pen.fontWeight === 'bold'
|
|
|
+ ? (data.pen.fontWeight = 'normal')
|
|
|
+ : (data.pen.fontWeight = 'bold');
|
|
|
+ changeValue('fontWeight');
|
|
|
+ "
|
|
|
+ >
|
|
|
+ B
|
|
|
+ </t-button>
|
|
|
+
|
|
|
+ <t-button
|
|
|
+ :class="{ active: data.pen.fontStyle === 'italic' }"
|
|
|
+ class="ml-4 icon"
|
|
|
+ shape="rectangle"
|
|
|
+ variant="text"
|
|
|
+ @click="
|
|
|
+ data.pen.fontStyle === 'italic'
|
|
|
+ ? (data.pen.fontStyle = 'normal')
|
|
|
+ : (data.pen.fontStyle = 'italic');
|
|
|
+ changeValue('fontStyle');
|
|
|
+ "
|
|
|
+ style="font-style: italic; font-family: serif"
|
|
|
+ >I</t-button
|
|
|
+ >
|
|
|
+ </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')"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </t-space>
|
|
|
+ </t-collapse-panel>
|
|
|
</t-collapse>
|
|
|
</t-space>
|
|
|
</t-tab-panel>
|
|
|
@@ -428,6 +619,26 @@ const data = reactive<any>({
|
|
|
rect: {},
|
|
|
});
|
|
|
|
|
|
+const fonts = [
|
|
|
+ '新宋体',
|
|
|
+ '微软雅黑',
|
|
|
+ '黑体',
|
|
|
+ '楷体',
|
|
|
+ '-apple-system',
|
|
|
+ 'BlinkMacSystemFont',
|
|
|
+ 'PingFang SC',
|
|
|
+ 'Hiragino Sans GB',
|
|
|
+ 'Microsoft YaHei UI',
|
|
|
+ 'Microsoft YaHei',
|
|
|
+ 'fangsong',
|
|
|
+ 'Source Han Sans CN',
|
|
|
+ 'sans-serif',
|
|
|
+ 'serif',
|
|
|
+ 'Apple Color Emoji',
|
|
|
+ 'Segoe UI Emoji',
|
|
|
+ 'Segoe UI Symbol',
|
|
|
+];
|
|
|
+
|
|
|
const { selections } = useSelection();
|
|
|
|
|
|
onBeforeMount(() => {
|
|
|
@@ -441,6 +652,9 @@ onBeforeMount(() => {
|
|
|
if (!data.pen.dash) {
|
|
|
data.pen.dash = 0;
|
|
|
}
|
|
|
+ if (!data.pen.props.text && data.pen.text) {
|
|
|
+ data.pen.props.text = true;
|
|
|
+ }
|
|
|
data.pen.shadow = !!data.pen.shadowColor;
|
|
|
getRect();
|
|
|
meta2d.on('translatePens', getRect);
|
|
|
@@ -486,6 +700,16 @@ const changeValue = (prop: string) => {
|
|
|
meta2d.setValue(v);
|
|
|
};
|
|
|
|
|
|
+const onFontPopupVisible = (val: boolean) => {
|
|
|
+ data.fontFamilyPopupVisible = val;
|
|
|
+};
|
|
|
+
|
|
|
+const onFontFamily = (fontFamily: string) => {
|
|
|
+ data.pen.fontFamily = fontFamily;
|
|
|
+ data.fontFamilyPopupVisible = false;
|
|
|
+ changeValue('fontFamily');
|
|
|
+};
|
|
|
+
|
|
|
onUnmounted(() => {
|
|
|
meta2d.off('translatePens', getRect);
|
|
|
meta2d.off('resizePens', getRect);
|
Alsmile