whiteboard/index.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>