perf: 添加正在绘制元素状态显示

This commit is contained in:
pipipi-pikachu 2022-05-01 09:48:30 +08:00
parent 56fadef948
commit e450a944a9

View File

@ -11,7 +11,7 @@
<div class="add-element-handler"> <div class="add-element-handler">
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入文字"> <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入文字">
<IconFontSize class="handler-item" @click="drawText()" /> <IconFontSize class="handler-item" :class="{ 'active': creatingElement?.type === 'text' }" @click="drawText()" />
</Tooltip> </Tooltip>
<FileInput @change="files => insertImageElement(files)"> <FileInput @change="files => insertImageElement(files)">
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图片"> <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图片">
@ -23,7 +23,7 @@
<ShapePool @select="shape => drawShape(shape)" /> <ShapePool @select="shape => drawShape(shape)" />
</template> </template>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入形状"> <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入形状">
<IconGraphicDesign class="handler-item" /> <IconGraphicDesign class="handler-item" :class="{ 'active': creatingElement?.type === 'shape' }" />
</Tooltip> </Tooltip>
</Popover> </Popover>
<Popover trigger="click" v-model:visible="linePoolVisible"> <Popover trigger="click" v-model:visible="linePoolVisible">
@ -31,7 +31,7 @@
<LinePool @select="line => drawLine(line)" /> <LinePool @select="line => drawLine(line)" />
</template> </template>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入线条"> <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入线条">
<IconConnection class="handler-item" /> <IconConnection class="handler-item" :class="{ 'active': creatingElement?.type === 'line' }" />
</Tooltip> </Tooltip>
</Popover> </Popover>
<Popover trigger="click" v-model:visible="chartPoolVisible"> <Popover trigger="click" v-model:visible="chartPoolVisible">
@ -136,6 +136,7 @@ export default defineComponent({
}, },
setup() { setup() {
const mainStore = useMainStore() const mainStore = useMainStore()
const { creatingElement } = storeToRefs(mainStore)
const { canUndo, canRedo } = storeToRefs(useSnapshotStore()) const { canUndo, canRedo } = storeToRefs(useSnapshotStore())
const { redo, undo } = useHistorySnapshot() const { redo, undo } = useHistorySnapshot()
@ -220,6 +221,7 @@ export default defineComponent({
tableGeneratorVisible, tableGeneratorVisible,
mediaInputVisible, mediaInputVisible,
latexEditorVisible, latexEditorVisible,
creatingElement,
drawText, drawText,
drawShape, drawShape,
drawLine, drawLine,
@ -263,6 +265,9 @@ export default defineComponent({
&.disable { &.disable {
opacity: .5; opacity: .5;
} }
&.active {
color: $themeColor;
}
} }
.right-handler { .right-handler {
display: flex; display: flex;