1048 lines
27 KiB
Vue
1048 lines
27 KiB
Vue
|
<template>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="canvasBox" ref="box"></div>
|
|||
|
|
<div class="toolbar" v-if="!readonly">
|
|||
|
|
<el-radio-group v-model="currentType" @change="onCurrentTypeChange">
|
|||
|
|
<el-radio-button label="selection">选择</el-radio-button>
|
|||
|
|
<el-radio-button label="rectangle">矩形</el-radio-button>
|
|||
|
|
<el-radio-button label="diamond">菱形</el-radio-button>
|
|||
|
|
<el-radio-button label="triangle">三角形</el-radio-button>
|
|||
|
|
<el-radio-button label="circle">圆形</el-radio-button>
|
|||
|
|
<el-radio-button label="line">线段</el-radio-button>
|
|||
|
|
<el-radio-button label="arrow">箭头</el-radio-button>
|
|||
|
|
<el-radio-button label="freedraw">自由画笔</el-radio-button>
|
|||
|
|
<el-radio-button label="text">文字</el-radio-button>
|
|||
|
|
<el-radio-button label="image">图片</el-radio-button>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</div>
|
|||
|
|
<Transition>
|
|||
|
|
<div class="sidebar" v-show="activeElement || hasSelectedElements">
|
|||
|
|
<div class="elementStyle">
|
|||
|
|
<!-- 描边 -->
|
|||
|
|
<div
|
|||
|
|
class="styleBlock"
|
|||
|
|
v-if="
|
|||
|
|
!['text', 'image'].includes(activeElement?.type) ||
|
|||
|
|
hasSelectedElements
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
<div class="styleBlockTitle">描边</div>
|
|||
|
|
<div class="styleBlockContent">
|
|||
|
|
<ColorPicker
|
|||
|
|
type="stroke"
|
|||
|
|
:value="activeElement?.style.strokeStyle"
|
|||
|
|
@change="updateStyle('strokeStyle', $event)"
|
|||
|
|
></ColorPicker>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 填充 -->
|
|||
|
|
<div
|
|||
|
|
class="styleBlock"
|
|||
|
|
v-if="
|
|||
|
|
!['image', 'line', 'arrow', 'freedraw'].includes(
|
|||
|
|
activeElement?.type
|
|||
|
|
) || hasSelectedElements
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
<div class="styleBlockTitle">填充</div>
|
|||
|
|
<div class="styleBlockContent">
|
|||
|
|
<ColorPicker
|
|||
|
|
type="fill"
|
|||
|
|
:value="activeElement?.style.fillStyle"
|
|||
|
|
@change="updateStyle('fillStyle', $event)"
|
|||
|
|
></ColorPicker>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 字体 -->
|
|||
|
|
<div
|
|||
|
|
class="styleBlock"
|
|||
|
|
v-if="['text'].includes(activeElement?.type) || hasSelectedElements"
|
|||
|
|
>
|
|||
|
|
<div class="styleBlockTitle">字体</div>
|
|||
|
|
<div class="styleBlockContent">
|
|||
|
|
<el-select
|
|||
|
|
size="mini"
|
|||
|
|
v-model="fontFamily"
|
|||
|
|
placeholder="字体"
|
|||
|
|
@change="updateStyle('fontFamily', $event)"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in fontFamilyList"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.name"
|
|||
|
|
:value="item.value"
|
|||
|
|
:style="{ fontFamily: item.value }"
|
|||
|
|
>
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 字号 -->
|
|||
|
|
<div
|
|||
|
|
class="styleBlock"
|
|||
|
|
v-if="['text'].includes(activeElement?.type) || hasSelectedElements"
|
|||
|
|
>
|
|||
|
|
<div class="styleBlockTitle">字号</div>
|
|||
|
|
<div class="styleBlockContent">
|
|||
|
|
<el-select
|
|||
|
|
size="mini"
|
|||
|
|
v-model="fontSize"
|
|||
|
|
placeholder="字号"
|
|||
|
|
@change="updateStyle('fontSize', $event)"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in fontSizeList"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.name"
|
|||
|
|
:value="item.value"
|
|||
|
|
:style="{ fontSize: item.value }"
|
|||
|
|
>
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 描边宽度 -->
|
|||
|
|
<div
|
|||
|
|
class="styleBlock"
|
|||
|
|
v-if="
|
|||
|
|
!['image', 'text'].includes(activeElement?.type) ||
|
|||
|
|
hasSelectedElements
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
<div class="styleBlockTitle">描边宽度</div>
|
|||
|
|
<div class="styleBlockContent">
|
|||
|
|
<el-radio-group
|
|||
|
|
v-model="lineWidth"
|
|||
|
|
@change="updateStyle('lineWidth', $event)"
|
|||
|
|
>
|
|||
|
|
<el-radio-button label="small">
|
|||
|
|
<div class="lineWidthItem small">
|
|||
|
|
<div class="bar"></div>
|
|||
|
|
</div>
|
|||
|
|
</el-radio-button>
|
|||
|
|
<el-radio-button label="middle">
|
|||
|
|
<div class="lineWidthItem middle">
|
|||
|
|
<div class="bar"></div>
|
|||
|
|
</div>
|
|||
|
|
</el-radio-button>
|
|||
|
|
<el-radio-button label="large">
|
|||
|
|
<div class="lineWidthItem large">
|
|||
|
|
<div class="bar"></div>
|
|||
|
|
</div>
|
|||
|
|
</el-radio-button>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 边框样式 -->
|
|||
|
|
<div
|
|||
|
|
class="styleBlock"
|
|||
|
|
v-if="
|
|||
|
|
!['freedraw', 'image', 'text'].includes(activeElement?.type) ||
|
|||
|
|
hasSelectedElements
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
<div class="styleBlockTitle">边框样式</div>
|
|||
|
|
<div class="styleBlockContent">
|
|||
|
|
<el-radio-group
|
|||
|
|
v-model="lineDash"
|
|||
|
|
@change="updateStyle('lineDash', $event)"
|
|||
|
|
>
|
|||
|
|
<el-radio-button :label="0">
|
|||
|
|
<div>实线</div>
|
|||
|
|
</el-radio-button>
|
|||
|
|
<el-radio-button :label="5">
|
|||
|
|
<div>大虚线</div>
|
|||
|
|
</el-radio-button>
|
|||
|
|
<el-radio-button :label="2">
|
|||
|
|
<div>小虚线</div>
|
|||
|
|
</el-radio-button>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 透明度 -->
|
|||
|
|
<div class="styleBlock">
|
|||
|
|
<div class="styleBlockTitle">透明度</div>
|
|||
|
|
<div class="styleBlockContent">
|
|||
|
|
<el-slider
|
|||
|
|
v-model="globalAlpha"
|
|||
|
|
:min="0"
|
|||
|
|
:max="1"
|
|||
|
|
:step="0.1"
|
|||
|
|
@change="updateStyle('globalAlpha', $event)"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 角度 -->
|
|||
|
|
<div class="styleBlock" v-if="!hasSelectedElements">
|
|||
|
|
<div class="styleBlockTitle">角度</div>
|
|||
|
|
<div class="styleBlockContent">
|
|||
|
|
<el-slider
|
|||
|
|
v-model="rotate"
|
|||
|
|
:min="0"
|
|||
|
|
:max="360"
|
|||
|
|
:step="1"
|
|||
|
|
@input="onRotateChange"
|
|||
|
|
/>
|
|||
|
|
<el-input-number
|
|||
|
|
style="width: 80px; margin-left: 20px"
|
|||
|
|
:controls="false"
|
|||
|
|
v-model="rotate"
|
|||
|
|
:min="0"
|
|||
|
|
:max="360"
|
|||
|
|
@focus="onInputNumberFocus"
|
|||
|
|
@blur="onInputNumberBlur"
|
|||
|
|
@change="onRotateChange"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 操作 -->
|
|||
|
|
<div class="styleBlock">
|
|||
|
|
<div class="styleBlockTitle">操作</div>
|
|||
|
|
<div class="styleBlockContent">
|
|||
|
|
<el-button
|
|||
|
|
type="danger"
|
|||
|
|
:icon="Delete"
|
|||
|
|
circle
|
|||
|
|
@click="deleteElement"
|
|||
|
|
/>
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
:icon="CopyDocument"
|
|||
|
|
circle
|
|||
|
|
@click="copyElement"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Transition>
|
|||
|
|
<div class="footerLeft" @click.stop>
|
|||
|
|
<!-- 缩放 -->
|
|||
|
|
<div class="blockBox">
|
|||
|
|
<el-tooltip effect="light" content="缩小" placement="top">
|
|||
|
|
<el-button :icon="ZoomOut" circle @click="zoomOut" />
|
|||
|
|
</el-tooltip>
|
|||
|
|
<el-tooltip effect="light" content="重置缩放" placement="top">
|
|||
|
|
<span class="zoom" @click="resetZoom">{{ currentZoom }}%</span>
|
|||
|
|
</el-tooltip>
|
|||
|
|
<el-tooltip effect="light" content="放大" placement="top">
|
|||
|
|
<el-button :icon="ZoomIn" circle @click="zoomIn" />
|
|||
|
|
</el-tooltip>
|
|||
|
|
</div>
|
|||
|
|
<!-- 前进回退 -->
|
|||
|
|
<div class="blockBox" v-if="!readonly">
|
|||
|
|
<el-tooltip effect="light" content="回退" placement="top">
|
|||
|
|
<el-button
|
|||
|
|
:icon="RefreshLeft"
|
|||
|
|
circle
|
|||
|
|
:disabled="!canUndo"
|
|||
|
|
@click="undo"
|
|||
|
|
/>
|
|||
|
|
</el-tooltip>
|
|||
|
|
<el-tooltip effect="light" content="前进" placement="top">
|
|||
|
|
<el-button
|
|||
|
|
:icon="RefreshRight"
|
|||
|
|
circle
|
|||
|
|
:disabled="!canRedo"
|
|||
|
|
@click="redo"
|
|||
|
|
/>
|
|||
|
|
</el-tooltip>
|
|||
|
|
</div>
|
|||
|
|
<!-- 滚动 -->
|
|||
|
|
<div class="blockBox">
|
|||
|
|
<el-tooltip effect="light" content="滚动至中心" placement="top">
|
|||
|
|
<el-button @click="scrollToCenter"
|
|||
|
|
>X:{{ scroll.x }} Y:{{ scroll.y }}
|
|||
|
|
</el-button>
|
|||
|
|
</el-tooltip>
|
|||
|
|
</div>
|
|||
|
|
<!-- 橡皮擦、显示网格、清空 -->
|
|||
|
|
<div class="blockBox">
|
|||
|
|
<!-- 橡皮擦 -->
|
|||
|
|
<el-tooltip
|
|||
|
|
effect="light"
|
|||
|
|
:content="currentType === 'eraser' ? '关闭橡皮擦' : '橡皮擦'"
|
|||
|
|
placement="top"
|
|||
|
|
>
|
|||
|
|
<el-button
|
|||
|
|
v-if="!readonly"
|
|||
|
|
:icon="Remove"
|
|||
|
|
circle
|
|||
|
|
:type="currentType === 'eraser' ? 'primary' : null"
|
|||
|
|
@click="toggleEraser"
|
|||
|
|
/>
|
|||
|
|
</el-tooltip>
|
|||
|
|
<!-- 网格 -->
|
|||
|
|
<el-tooltip
|
|||
|
|
effect="light"
|
|||
|
|
:content="showGrid ? '隐藏网格' : '显示网格'"
|
|||
|
|
placement="top"
|
|||
|
|
>
|
|||
|
|
<el-button
|
|||
|
|
:icon="Grid"
|
|||
|
|
circle
|
|||
|
|
:type="showGrid ? 'primary' : null"
|
|||
|
|
@click="toggleGrid"
|
|||
|
|
/>
|
|||
|
|
</el-tooltip>
|
|||
|
|
<!-- 只读、编辑模式切换 -->
|
|||
|
|
<el-tooltip
|
|||
|
|
effect="light"
|
|||
|
|
:content="readonly ? '切换到编辑模式' : '切换到只读模式'"
|
|||
|
|
placement="top"
|
|||
|
|
>
|
|||
|
|
<el-button
|
|||
|
|
:icon="readonly ? View : Edit"
|
|||
|
|
circle
|
|||
|
|
@click="toggleMode"
|
|||
|
|
/>
|
|||
|
|
</el-tooltip>
|
|||
|
|
<!-- 清空 -->
|
|||
|
|
<el-tooltip effect="light" content="清空" placement="top">
|
|||
|
|
<el-button v-if="!readonly" :icon="Delete" circle @click="empty" />
|
|||
|
|
</el-tooltip>
|
|||
|
|
</div>
|
|||
|
|
<!-- 导入导出 -->
|
|||
|
|
<div class="blockBox">
|
|||
|
|
<el-tooltip effect="light" content="从json文件导入" placement="top">
|
|||
|
|
<el-button
|
|||
|
|
v-if="!readonly"
|
|||
|
|
:icon="Upload"
|
|||
|
|
circle
|
|||
|
|
style="margin-right: 10px"
|
|||
|
|
@click="importFromJson"
|
|||
|
|
/>
|
|||
|
|
</el-tooltip>
|
|||
|
|
<el-dropdown @command="handleExportCommand">
|
|||
|
|
<span class="el-dropdown-link">
|
|||
|
|
<el-button :icon="Download" circle />
|
|||
|
|
</span>
|
|||
|
|
<template #dropdown>
|
|||
|
|
<el-dropdown-menu>
|
|||
|
|
<el-dropdown-item command="png">导出为图片</el-dropdown-item>
|
|||
|
|
<el-dropdown-item command="json">导出为json</el-dropdown-item>
|
|||
|
|
</el-dropdown-menu>
|
|||
|
|
</template>
|
|||
|
|
</el-dropdown>
|
|||
|
|
</div>
|
|||
|
|
<!-- 背景 -->
|
|||
|
|
<div class="blockBox">
|
|||
|
|
<ColorPicker
|
|||
|
|
style="width: 280px"
|
|||
|
|
type="background"
|
|||
|
|
:value="backgroundColor"
|
|||
|
|
:showEmptySelect="true"
|
|||
|
|
placement="top"
|
|||
|
|
name="背景颜色"
|
|||
|
|
@change="setBackgroundColor"
|
|||
|
|
></ColorPicker>
|
|||
|
|
</div>
|
|||
|
|
<!-- 帮助 -->
|
|||
|
|
<div class="blockBox">
|
|||
|
|
<el-tooltip effect="light" content="帮助" placement="top">
|
|||
|
|
<el-button
|
|||
|
|
:icon="QuestionFilled"
|
|||
|
|
circle
|
|||
|
|
style="margin-right: 10px"
|
|||
|
|
@click="helpDialogVisible = !helpDialogVisible"
|
|||
|
|
/>
|
|||
|
|
</el-tooltip>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 导出图片弹窗 -->
|
|||
|
|
<el-dialog
|
|||
|
|
v-model="exportImageDialogVisible"
|
|||
|
|
title="导出为图片"
|
|||
|
|
:width="800"
|
|||
|
|
>
|
|||
|
|
<div class="exportImageContainer">
|
|||
|
|
<div class="imagePreviewBox">
|
|||
|
|
<img :src="exportImageUrl" alt="" />
|
|||
|
|
</div>
|
|||
|
|
<div class="handleBox">
|
|||
|
|
<el-checkbox
|
|||
|
|
v-model="exportOnlySelected"
|
|||
|
|
label="仅导出被选中"
|
|||
|
|
size="large"
|
|||
|
|
@change="reRenderExportImage"
|
|||
|
|
style="margin-right: 10px"
|
|||
|
|
/>
|
|||
|
|
<el-checkbox
|
|||
|
|
v-model="exportRenderBackground"
|
|||
|
|
label="背景"
|
|||
|
|
size="large"
|
|||
|
|
@change="reRenderExportImage"
|
|||
|
|
style="margin-right: 10px"
|
|||
|
|
/>
|
|||
|
|
<el-input
|
|||
|
|
v-model="exportFileName"
|
|||
|
|
style="width: 150px; margin-right: 10px"
|
|||
|
|
></el-input>
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="exportImagePaddingX"
|
|||
|
|
:min="10"
|
|||
|
|
:max="100"
|
|||
|
|
:step="5"
|
|||
|
|
controls-position="right"
|
|||
|
|
@change="reRenderExportImage"
|
|||
|
|
style="margin-right: 10px"
|
|||
|
|
/>
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="exportImagePaddingY"
|
|||
|
|
:min="10"
|
|||
|
|
:max="100"
|
|||
|
|
:step="5"
|
|||
|
|
controls-position="right"
|
|||
|
|
@change="reRenderExportImage"
|
|||
|
|
style="margin-right: 10px"
|
|||
|
|
/>
|
|||
|
|
<el-button type="primary" @click="downloadExportImage"
|
|||
|
|
>下载</el-button
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
<!-- 导出json弹窗 -->
|
|||
|
|
<el-dialog
|
|||
|
|
v-model="exportJsonDialogVisible"
|
|||
|
|
title="导出为json"
|
|||
|
|
:width="800"
|
|||
|
|
>
|
|||
|
|
<div class="exportJsonContainer">
|
|||
|
|
<div class="jsonPreviewBox" ref="jsonPreviewBox"></div>
|
|||
|
|
<div class="handleBox">
|
|||
|
|
<el-input
|
|||
|
|
v-model="exportFileName"
|
|||
|
|
style="width: 150px; margin-right: 10px"
|
|||
|
|
></el-input>
|
|||
|
|
<el-button type="primary" @click="downloadExportJson">下载</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
<!-- 帮助弹窗 -->
|
|||
|
|
<el-dialog v-model="helpDialogVisible" title="帮助" :width="500">
|
|||
|
|
<div class="helpDialogContent">
|
|||
|
|
<h2>获取源码</h2>
|
|||
|
|
<p>
|
|||
|
|
github：<a
|
|||
|
|
style="color: #409eff"
|
|||
|
|
href="https://github.com/wanglin2/tiny_whiteboard"
|
|||
|
|
target="_blank"
|
|||
|
|
>https://github.com/wanglin2/tiny_whiteboard</a
|
|||
|
|
>
|
|||
|
|
</p>
|
|||
|
|
<h2>tips</h2>
|
|||
|
|
<p>移动画布：按住空格键进行拖动</p>
|
|||
|
|
<h2>快捷键</h2>
|
|||
|
|
<el-table :data="shortcutKeyList">
|
|||
|
|
<el-table-column property="name" label="操作" />
|
|||
|
|
<el-table-column property="value" label="快捷键" />
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
<!-- 右键菜单 -->
|
|||
|
|
<Contextmenu v-if="appInstance" :app="appInstance"></Contextmenu>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { onMounted, ref, watch, toRaw, nextTick, computed, reactive } from 'vue'
|
|||
|
|
import TinyWhiteboard from 'tiny-whiteboard'
|
|||
|
|
import ColorPicker from './components/ColorPicker.vue'
|
|||
|
|
import {
|
|||
|
|
Delete,
|
|||
|
|
CopyDocument,
|
|||
|
|
ZoomIn,
|
|||
|
|
ZoomOut,
|
|||
|
|
Remove,
|
|||
|
|
RefreshLeft,
|
|||
|
|
RefreshRight,
|
|||
|
|
Download,
|
|||
|
|
Upload,
|
|||
|
|
CaretTop,
|
|||
|
|
CaretBottom,
|
|||
|
|
Minus,
|
|||
|
|
Grid,
|
|||
|
|
View,
|
|||
|
|
Edit,
|
|||
|
|
QuestionFilled
|
|||
|
|
} from '@element-plus/icons-vue'
|
|||
|
|
import Contextmenu from './components/Contextmenu.vue'
|
|||
|
|
import { fontFamilyList, fontSizeList } from './constants'
|
|||
|
|
|
|||
|
|
// 当前操作类型
|
|||
|
|
const currentType = ref('selection')
|
|||
|
|
|
|||
|
|
// dom节点
|
|||
|
|
const box = ref(null)
|
|||
|
|
|
|||
|
|
// 应用实例
|
|||
|
|
let app = null
|
|||
|
|
const appInstance = ref(null)
|
|||
|
|
// 当前激活的元素
|
|||
|
|
const activeElement = ref(null)
|
|||
|
|
// 当前多选的元素
|
|||
|
|
const selectedElements = ref([])
|
|||
|
|
const hasSelectedElements = computed(() => {
|
|||
|
|
return selectedElements.value.length > 0
|
|||
|
|
})
|
|||
|
|
// 描边宽度
|
|||
|
|
const lineWidth = ref('small')
|
|||
|
|
// 字体
|
|||
|
|
const fontFamily = ref('微软雅黑, Microsoft YaHei')
|
|||
|
|
// 字号
|
|||
|
|
const fontSize = ref(18)
|
|||
|
|
// 边框样式
|
|||
|
|
const lineDash = ref(0)
|
|||
|
|
// 透明度
|
|||
|
|
const globalAlpha = ref(1)
|
|||
|
|
// 角度
|
|||
|
|
const rotate = ref(0)
|
|||
|
|
// 当前缩放
|
|||
|
|
const currentZoom = ref(100)
|
|||
|
|
// 缩放允许前进后退
|
|||
|
|
const canUndo = ref(false)
|
|||
|
|
const canRedo = ref(false)
|
|||
|
|
// 图片导出弹窗
|
|||
|
|
const exportImageDialogVisible = ref(false)
|
|||
|
|
const exportImageUrl = ref('')
|
|||
|
|
const exportOnlySelected = ref(false)
|
|||
|
|
const exportRenderBackground = ref(true)
|
|||
|
|
const exportFileName = ref('未命名')
|
|||
|
|
const exportImagePaddingX = ref(10)
|
|||
|
|
const exportImagePaddingY = ref(10)
|
|||
|
|
// json导出弹窗
|
|||
|
|
const exportJsonDialogVisible = ref(false)
|
|||
|
|
const exportJsonData = ref('')
|
|||
|
|
const tree = ref(null)
|
|||
|
|
const jsonPreviewBox = ref(null)
|
|||
|
|
// 背景颜色
|
|||
|
|
const backgroundColor = ref('')
|
|||
|
|
// 当前滚动距离
|
|||
|
|
const scroll = reactive({
|
|||
|
|
x: 0,
|
|||
|
|
y: 0
|
|||
|
|
})
|
|||
|
|
// 切换显示网格
|
|||
|
|
const showGrid = ref(false)
|
|||
|
|
// 模式切换
|
|||
|
|
const readonly = ref(false)
|
|||
|
|
// 帮助弹窗
|
|||
|
|
const helpDialogVisible = ref(false)
|
|||
|
|
const shortcutKeyList = reactive([
|
|||
|
|
{
|
|||
|
|
name: '全部选中',
|
|||
|
|
value: 'Control + a'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '删除',
|
|||
|
|
value: 'Del 或 Backspace'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '复制',
|
|||
|
|
value: 'Control + c'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '粘贴',
|
|||
|
|
value: 'Control + v'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '放大',
|
|||
|
|
value: 'Control + +'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '缩小',
|
|||
|
|
value: 'Control + -'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '重置缩放',
|
|||
|
|
value: 'Control + 0'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '缩放以适应所有元素',
|
|||
|
|
value: 'Shift + 1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '撤销',
|
|||
|
|
value: 'Control + z'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '重做',
|
|||
|
|
value: 'Control + y'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '显示隐藏网格',
|
|||
|
|
value: "Control + '"
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
// 通知app更当前类型
|
|||
|
|
watch(currentType, () => {
|
|||
|
|
app.updateCurrentType(currentType.value)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 元素角度变化
|
|||
|
|
const onElementRotateChange = elementRotate => {
|
|||
|
|
rotate.value = elementRotate
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 修改元素角度
|
|||
|
|
const onRotateChange = rotate => {
|
|||
|
|
app.updateActiveElementRotate(rotate)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 数字输入框聚焦事件
|
|||
|
|
const onInputNumberFocus = () => {
|
|||
|
|
// 解绑快捷键按键事件，防止冲突
|
|||
|
|
app.keyCommand.unBindEvent()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 数字输入框失焦事件
|
|||
|
|
const onInputNumberBlur = () => {
|
|||
|
|
// 重新绑定快捷键按键事件
|
|||
|
|
app.keyCommand.bindEvent()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新样式
|
|||
|
|
const updateStyle = (key, value) => {
|
|||
|
|
app.setCurrentElementsStyle({
|
|||
|
|
[key]: value
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 类型变化
|
|||
|
|
const onCurrentTypeChange = () => {
|
|||
|
|
// 清除激活项
|
|||
|
|
app.cancelActiveElement()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除元素
|
|||
|
|
const deleteElement = () => {
|
|||
|
|
app.deleteCurrentElements()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 复制元素
|
|||
|
|
const copyElement = () => {
|
|||
|
|
app.copyPasteCurrentElements()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 放大
|
|||
|
|
const zoomIn = () => {
|
|||
|
|
app.zoomIn()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 缩小
|
|||
|
|
const zoomOut = () => {
|
|||
|
|
app.zoomOut()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 恢复初始缩放
|
|||
|
|
const resetZoom = () => {
|
|||
|
|
app.setZoom(1)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 橡皮擦
|
|||
|
|
const toggleEraser = () => {
|
|||
|
|
currentType.value = currentType.value === 'eraser' ? 'selection' : 'eraser'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 回退
|
|||
|
|
const undo = () => {
|
|||
|
|
app.undo()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 前进
|
|||
|
|
const redo = () => {
|
|||
|
|
app.redo()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 清空
|
|||
|
|
const empty = () => {
|
|||
|
|
app.empty()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 导入
|
|||
|
|
const importFromJson = () => {
|
|||
|
|
let el = document.createElement('input')
|
|||
|
|
el.type = 'file'
|
|||
|
|
el.accept = 'application/json'
|
|||
|
|
el.addEventListener('input', () => {
|
|||
|
|
let reader = new FileReader()
|
|||
|
|
reader.onload = () => {
|
|||
|
|
el.value = null
|
|||
|
|
if (reader.result) {
|
|||
|
|
app.setData(JSON.parse(reader.result))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
reader.readAsText(el.files[0])
|
|||
|
|
})
|
|||
|
|
el.click()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 导出
|
|||
|
|
const handleExportCommand = type => {
|
|||
|
|
if (type === 'png') {
|
|||
|
|
exportImageUrl.value = app.exportImage({
|
|||
|
|
renderBg: exportRenderBackground.value,
|
|||
|
|
paddingX: exportImagePaddingX.value,
|
|||
|
|
paddingY: exportImagePaddingY.value,
|
|||
|
|
onlySelected: exportOnlySelected.value
|
|||
|
|
})
|
|||
|
|
exportImageDialogVisible.value = true
|
|||
|
|
} else if (type === 'json') {
|
|||
|
|
exportJsonData.value = app.exportJson()
|
|||
|
|
exportJsonDialogVisible.value = true
|
|||
|
|
nextTick(() => {
|
|||
|
|
if (!tree.value) {
|
|||
|
|
tree.value = jsonTree.create(exportJsonData.value, jsonPreviewBox.value)
|
|||
|
|
} else {
|
|||
|
|
tree.value.loadData(exportJsonData.value)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重新生成导出图片
|
|||
|
|
const reRenderExportImage = () => {
|
|||
|
|
exportImageUrl.value = app.exportImage({
|
|||
|
|
renderBg: exportRenderBackground.value,
|
|||
|
|
paddingX: exportImagePaddingX.value,
|
|||
|
|
paddingY: exportImagePaddingY.value,
|
|||
|
|
onlySelected: exportOnlySelected.value
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 下载导出的图片
|
|||
|
|
const downloadExportImage = () => {
|
|||
|
|
TinyWhiteboard.utils.downloadFile(
|
|||
|
|
exportImageUrl.value,
|
|||
|
|
exportFileName.value + '.png'
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 下载导出的json
|
|||
|
|
const downloadExportJson = () => {
|
|||
|
|
let str = JSON.stringify(exportJsonData.value, null, 4)
|
|||
|
|
let blob = new Blob([str])
|
|||
|
|
TinyWhiteboard.utils.downloadFile(
|
|||
|
|
URL.createObjectURL(blob),
|
|||
|
|
exportFileName.value + '.json'
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新背景颜色
|
|||
|
|
const setBackgroundColor = value => {
|
|||
|
|
app.setBackgroundColor(value)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 滚动至中心
|
|||
|
|
const scrollToCenter = () => {
|
|||
|
|
app.scrollToCenter()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 切换显示网格
|
|||
|
|
const toggleGrid = () => {
|
|||
|
|
if (showGrid.value) {
|
|||
|
|
showGrid.value = false
|
|||
|
|
app.hideGrid()
|
|||
|
|
} else {
|
|||
|
|
showGrid.value = true
|
|||
|
|
app.showGrid()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 模式切换
|
|||
|
|
const toggleMode = () => {
|
|||
|
|
if (readonly.value) {
|
|||
|
|
readonly.value = false
|
|||
|
|
app.setEditMode()
|
|||
|
|
} else {
|
|||
|
|
readonly.value = true
|
|||
|
|
app.setReadonlyMode()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// dom元素挂载完成
|
|||
|
|
onMounted(() => {
|
|||
|
|
// 创建实例
|
|||
|
|
app = new TinyWhiteboard({
|
|||
|
|
container: box.value,
|
|||
|
|
drawType: currentType.value,
|
|||
|
|
state: {
|
|||
|
|
// backgroundColor: '#121212',
|
|||
|
|
// strokeStyle: '#fff',
|
|||
|
|
// fontFamily: '楷体, 楷体_GB2312, SimKai, STKaiti',
|
|||
|
|
// dragStrokeStyle: '#999'
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
let storeData = localStorage.getItem('TINY_WHITEBOARD_DATA')
|
|||
|
|
if (storeData) {
|
|||
|
|
storeData = JSON.parse(storeData)
|
|||
|
|
;[['backgroundColor', ''],['strokeStyle', '#000000'],['fontFamily', '微软雅黑, Microsoft YaHei'],['dragStrokeStyle', '#666'], ['fillStyle', 'transparent'], ['fontSize', 18]].forEach((item) => {
|
|||
|
|
if (storeData.state[item[0]] === undefined) {
|
|||
|
|
storeData.state[item[0]] = item[1]
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
currentZoom.value = parseInt(storeData.state.scale * 100)
|
|||
|
|
scroll.x = parseInt(storeData.state.scrollX)
|
|||
|
|
scroll.y = parseInt(storeData.state.scrollY)
|
|||
|
|
showGrid.value = storeData.state.showGrid
|
|||
|
|
readonly.value = storeData.state.readonly
|
|||
|
|
app.setData(storeData)
|
|||
|
|
|
|||
|
|
|
|||
|
|
document.body.addEventListener('touchmove', function (e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
}, {passive: false});
|
|||
|
|
}
|
|||
|
|
// 监听app内部修改类型事件
|
|||
|
|
app.on('currentTypeChange', type => {
|
|||
|
|
currentType.value = type
|
|||
|
|
})
|
|||
|
|
// 监听元素激活事件
|
|||
|
|
app.on('activeElementChange', element => {
|
|||
|
|
if (activeElement.value) {
|
|||
|
|
activeElement.value.off('elementRotateChange', onElementRotateChange)
|
|||
|
|
}
|
|||
|
|
activeElement.value = element
|
|||
|
|
if (element) {
|
|||
|
|
let { style, rotate: elementRotate } = element
|
|||
|
|
lineWidth.value = style.lineWidth
|
|||
|
|
fontFamily.value = style.fontFamily
|
|||
|
|
fontSize.value = style.fontSize
|
|||
|
|
lineDash.value = style.lineDash
|
|||
|
|
globalAlpha.value = style.globalAlpha
|
|||
|
|
rotate.value = elementRotate
|
|||
|
|
element.on('elementRotateChange', onElementRotateChange)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// 元素多选变化
|
|||
|
|
app.on('multiSelectChange', elements => {
|
|||
|
|
selectedElements.value = elements
|
|||
|
|
})
|
|||
|
|
// 缩放变化
|
|||
|
|
app.on('zoomChange', scale => {
|
|||
|
|
currentZoom.value = parseInt(scale * 100)
|
|||
|
|
})
|
|||
|
|
// 监听前进后退事件
|
|||
|
|
app.on('shuttle', (index, length) => {
|
|||
|
|
canUndo.value = index > 0
|
|||
|
|
canRedo.value = index < length - 1
|
|||
|
|
})
|
|||
|
|
// 监听数据变化
|
|||
|
|
app.on('change', data => {
|
|||
|
|
showGrid.value = data.state.showGrid
|
|||
|
|
localStorage.setItem('TINY_WHITEBOARD_DATA', JSON.stringify(data))
|
|||
|
|
})
|
|||
|
|
// 监听滚动变化
|
|||
|
|
app.on('scrollChange', (x, y) => {
|
|||
|
|
scroll.y = parseInt(y)
|
|||
|
|
scroll.x = parseInt(x)
|
|||
|
|
})
|
|||
|
|
appInstance.value = app
|
|||
|
|
// 窗口尺寸变化
|
|||
|
|
let resizeTimer = null
|
|||
|
|
window.addEventListener('resize', () => {
|
|||
|
|
clearTimeout(resizeTimer)
|
|||
|
|
resizeTimer = setTimeout(() => {
|
|||
|
|
app.resize()
|
|||
|
|
}, 300)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less">
|
|||
|
|
ul,
|
|||
|
|
ol {
|
|||
|
|
list-style: none;
|
|||
|
|
}
|
|||
|
|
.v-enter-active,
|
|||
|
|
.v-leave-active {
|
|||
|
|
transition: all 0.5s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.v-enter-from,
|
|||
|
|
.v-leave-to {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateX(-300px);
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.container {
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
.toolbar {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 50%;
|
|||
|
|
top: 10px;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
z-index: 2;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.canvasBox {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 50%;
|
|||
|
|
top: 50%;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sidebar {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 10px;
|
|||
|
|
top: 10px;
|
|||
|
|
width: 250px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
|
|||
|
|
.elementStyle {
|
|||
|
|
padding: 10px;
|
|||
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
|
|||
|
|
.styleBlock {
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
|
|||
|
|
.styleBlockTitle {
|
|||
|
|
color: #343a40;
|
|||
|
|
font-size: 14px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.styleBlockContent {
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.lineWidthItem {
|
|||
|
|
display: flex;
|
|||
|
|
width: 30px;
|
|||
|
|
height: 10px;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.bar {
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: #212529;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.small {
|
|||
|
|
.bar {
|
|||
|
|
height: 2px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.middle {
|
|||
|
|
.bar {
|
|||
|
|
height: 4px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.large {
|
|||
|
|
.bar {
|
|||
|
|
height: 6px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/deep/ .el-radio-group {
|
|||
|
|
.el-radio-button {
|
|||
|
|
&.is-active {
|
|||
|
|
.lineWidthItem {
|
|||
|
|
.bar {
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footerLeft {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 10px;
|
|||
|
|
bottom: 10px;
|
|||
|
|
height: 40px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.blockBox {
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0 10px;
|
|||
|
|
|
|||
|
|
.zoom {
|
|||
|
|
width: 40px;
|
|||
|
|
margin: 0 10px;
|
|||
|
|
user-select: none;
|
|||
|
|
color: #606266;
|
|||
|
|
cursor: pointer;
|
|||
|
|
height: 32px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
padding: 0 5px;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.exportImageContainer {
|
|||
|
|
.imagePreviewBox {
|
|||
|
|
height: 400px;
|
|||
|
|
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==')
|
|||
|
|
0;
|
|||
|
|
padding: 10px;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: scale-down;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.handleBox {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 50px;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.exportJsonContainer {
|
|||
|
|
.jsonPreviewBox {
|
|||
|
|
height: 400px;
|
|||
|
|
overflow: auto;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #000;
|
|||
|
|
|
|||
|
|
/deep/ .jsontree_tree {
|
|||
|
|
font-family: 'Trebuchet MS', Arial, sans-serif !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.handleBox {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 50px;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.helpDialogContent {
|
|||
|
|
height: 500px;
|
|||
|
|
overflow: auto;
|
|||
|
|
}
|
|||
|
|
</style>
|