refactor: re1.0
咬轮猫
3 years ago
parent
1b375106c9
commit
d94609d1f4
@ -0,0 +1,5 @@
|
|||||||
|
*.md
|
||||||
|
.vscode
|
||||||
|
.idea
|
||||||
|
dist
|
||||||
|
node_modules
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: {
|
||||||
|
browser: true,
|
||||||
|
node: true,
|
||||||
|
es6: true
|
||||||
|
},
|
||||||
|
parser: 'vue-eslint-parser',
|
||||||
|
parserOptions: {
|
||||||
|
parser: '@typescript-eslint/parser',
|
||||||
|
ecmaVersion: 'latest',
|
||||||
|
sourceType: 'module',
|
||||||
|
jsxPragma: 'React',
|
||||||
|
ecmaFeatures: {
|
||||||
|
jsx: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
'plugin:vue/vue3-recommended',
|
||||||
|
'plugin:@typescript-eslint/recommended',
|
||||||
|
'prettier',
|
||||||
|
'plugin:prettier/recommended' // 一定要放在最后。因为 extends 中后引入的规则会覆盖前面的规则。
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
// @typescript-eslint
|
||||||
|
'@typescript-eslint/explicit-function-return-type': 'off', // 需要函数和类方法的显式返回类型
|
||||||
|
'@typescript-eslint/no-explicit-any': 'off', // 禁止使用该 any 类型
|
||||||
|
'@typescript-eslint/no-var-requires': 'off', // 不允许使用 require 语句，除了在 import 语句中
|
||||||
|
'@typescript-eslint/no-empty-function': 'off', // 禁止空函数
|
||||||
|
'@typescript-eslint/no-use-before-define': 'off', // 在定义之前禁止使用变量
|
||||||
|
'@typescript-eslint/ban-ts-comment': 'off', // 禁止 @ts-<directive> 使用评论或在指令后要求描述
|
||||||
|
'@typescript-eslint/ban-types': 'off', // 禁止使用特定类型
|
||||||
|
'@typescript-eslint/no-non-null-assertion': 'off', // '!'不允许使用后缀运算符的非空断言
|
||||||
|
'@typescript-eslint/explicit-module-boundary-types': 'off', // 需要导出函数和类的公共类方法的显式返回和参数类型
|
||||||
|
'@typescript-eslint/no-unused-vars': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
argsIgnorePattern: '^_',
|
||||||
|
varsIgnorePattern: '^_'
|
||||||
|
}
|
||||||
|
], // 禁止未使用的变量
|
||||||
|
// vue
|
||||||
|
'vue/custom-event-name-casing': 'off', // 为自定义事件名称强制使用特定大小写
|
||||||
|
'vue/attributes-order': 'off', // 强制执行属性顺序
|
||||||
|
'vue/one-component-per-file': 'off', // 强制每个组件都应该在自己的文件中
|
||||||
|
'vue/html-closing-bracket-newline': 'off', // 在标签的右括号之前要求或禁止换行
|
||||||
|
'vue/multiline-html-element-content-newline': 'off', // 在多行元素的内容之前和之后需要换行符
|
||||||
|
'vue/singleline-html-element-content-newline': 'off', // 在单行元素的内容之前和之后需要换行符
|
||||||
|
'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
|
||||||
|
'vue/require-default-prop': 'off', // 需要 props 的默认值
|
||||||
|
'vue/html-indent': ['error', 2], // 在<template>中强制一致缩进
|
||||||
|
'vue/html-self-closing': 'off', // 执行自闭合的风格
|
||||||
|
'vue/max-attributes-per-line': 'off', // 强制每行属性的最大数量
|
||||||
|
'vue/multi-word-component-names': 'off', // 是否开启组件命名规则校验（强制多个单词以驼峰或'-'链接的命名规则）
|
||||||
|
// ESLint
|
||||||
|
'no-use-before-define': 'off', // 禁止在变量定义之前使用它们
|
||||||
|
'space-before-function-paren': 'off' // 强制在 function的左括号之前使用一致的空格
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -1,5 +1,22 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
node_modules
|
node_modules
|
||||||
.DS_Store
|
|
||||||
dist
|
dist
|
||||||
dist-ssr
|
dist-ssr
|
||||||
*.local
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|||||||
@ -0,0 +1 @@
|
|||||||
|
_
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
. "$(dirname "$0")/_/husky.sh"
|
||||||
|
|
||||||
|
npx --no -- commitlint --edit $1
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
command_exists () {
|
||||||
|
command -v "$1" >/dev/null 2>&1
|
||||||
|
}
|
||||||
|
|
||||||
|
# Workaround for Windows 10, Git Bash and Yarn
|
||||||
|
if command_exists winpty && test -t 1; then
|
||||||
|
exec < /dev/tty
|
||||||
|
fi
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
. "$(dirname "$0")/_/husky.sh"
|
||||||
|
|
||||||
|
npx lint-staged
|
||||||
|
npx lint-staged
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
/node_modules/**
|
||||||
|
/dist*
|
||||||
|
/public/*
|
||||||
@ -1,3 +1,3 @@
|
|||||||
{
|
{
|
||||||
"recommendations": ["johnsoncodehk.volar"]
|
"recommendations": ["Vue.volar"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"editor.codeActionsOnSave": {
|
||||||
|
"source.fixAll.eslint": true,
|
||||||
|
"eslint.autoFixOnSave": true
|
||||||
|
},
|
||||||
|
"files.eol": "\n"
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
module.exports = { extends: ['@commitlint/config-conventional'] };
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -1,17 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<noscript>
|
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
|
||||||
</noscript>
|
|
||||||
<div id="app"></div>
|
|
||||||
<!-- built files will be auto injected -->
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 589 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 476 KiB |
@ -1,77 +0,0 @@
|
|||||||
/**
|
|
||||||
* @description: 数据结构
|
|
||||||
* @param {*} commonComponentList 常规组件列表
|
|
||||||
* @param {*} drawComponentList 绘制组件列表
|
|
||||||
* @param {*} chartComponentList 图表组件列表
|
|
||||||
* @return {*}
|
|
||||||
*/
|
|
||||||
export interface ILeftImgLists {
|
|
||||||
commonComponentList?: Array<IComponentInfo>,
|
|
||||||
drawComponentList?: Array<IComponentInfo>,
|
|
||||||
chartComponentList?: Array<IComponentInfo>
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description: 画好的组件数据列表
|
|
||||||
* @param {*}
|
|
||||||
* @return {*}
|
|
||||||
*/
|
|
||||||
export interface ISvgDataLists {
|
|
||||||
id: string,
|
|
||||||
type?: string,
|
|
||||||
title?: string,
|
|
||||||
svgPositionX: number,
|
|
||||||
svgPositionY: number,
|
|
||||||
angle?: number,
|
|
||||||
size?: number,
|
|
||||||
extend_attr?: any
|
|
||||||
}
|
|
||||||
export interface ISvgCanvas {
|
|
||||||
width: number,
|
|
||||||
height: number
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description: 组件信息格式
|
|
||||||
* @param {*} type 组件类型
|
|
||||||
* @param {*} title 组件显示标题
|
|
||||||
* @param {*} panel_class 面板显示类型 拖放 绘制
|
|
||||||
* @param {*} template 组件渲染模板
|
|
||||||
* @param {*} props 组件传值
|
|
||||||
* @param {*} extend_attr 组件拓展属性
|
|
||||||
* @param {*} create_type 组件创建类型
|
|
||||||
* @param {*} priview_img 组件预览图片
|
|
||||||
* @return {*}
|
|
||||||
*/
|
|
||||||
export interface IComponentInfo {
|
|
||||||
type?: string,
|
|
||||||
title?: string,
|
|
||||||
panel_class?: string,
|
|
||||||
template?: string,//
|
|
||||||
props?: Array<string>,
|
|
||||||
extend_attr?: any,
|
|
||||||
create_type?: string,
|
|
||||||
priview_img?: string
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description: 鼠标信息
|
|
||||||
* @param {*} status 1按下 0弹起
|
|
||||||
* @param {*} mPositionX 鼠标x轴坐标
|
|
||||||
* @param {*} mPositionY 鼠标y轴坐标
|
|
||||||
* @return {*}
|
|
||||||
*/
|
|
||||||
export interface IMouseInfo {
|
|
||||||
status: number,
|
|
||||||
mPositionX: number
|
|
||||||
mPositionY: number
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description: 选中的svg属性
|
|
||||||
* @param {*}
|
|
||||||
* @return {*}
|
|
||||||
*/
|
|
||||||
export interface ISelectSvg {
|
|
||||||
id: string,
|
|
||||||
index: number,
|
|
||||||
sPositionX: number,
|
|
||||||
sPositionY: number,
|
|
||||||
create_type: string,
|
|
||||||
}
|
|
||||||
@ -1,111 +0,0 @@
|
|||||||
/* 正向流动效果 */
|
|
||||||
.svg_ani_flow {
|
|
||||||
stroke-dasharray: 1000;
|
|
||||||
stroke-dashoffset: 1000;
|
|
||||||
animation: ani_flow 10s linear infinite;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
-webkit-animation: ani_flow 10s linear infinite;
|
|
||||||
-webkit-animation-fill-mode: forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes ani_flow {
|
|
||||||
from {
|
|
||||||
stroke-dasharray: 10, 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
stroke-dasharray: 13, 5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@-webkit-keyframes ani_flow {
|
|
||||||
from {
|
|
||||||
stroke-dasharray: 10, 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
stroke-dasharray: 13, 5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 停止流动效果 */
|
|
||||||
.svg_ani_flow_stop {
|
|
||||||
stroke-dasharray: 1000;
|
|
||||||
stroke-dashoffset: 1000;
|
|
||||||
animation: ani_flow_stop 10s linear infinite;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
-webkit-animation: ani_flow_stop 10s linear infinite;
|
|
||||||
-webkit-animation-fill-mode: forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes ani_flow_stop {
|
|
||||||
from {
|
|
||||||
stroke-dasharray: 10, 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
stroke-dasharray: 10, 5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@-webkit-keyframes ani_flow_stop {
|
|
||||||
from {
|
|
||||||
stroke-dasharray: 10, 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
stroke-dasharray: 10, 5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* 反向流动效果 */
|
|
||||||
.svg_ani_flow_back {
|
|
||||||
stroke-dasharray: 1000;
|
|
||||||
stroke-dashoffset: 1000;
|
|
||||||
animation: ani_flow_back 10s linear infinite;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
-webkit-animation: ani_flow_back 10s linear infinite;
|
|
||||||
-webkit-animation-fill-mode: forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes ani_flow_back {
|
|
||||||
from {
|
|
||||||
stroke-dasharray: 13, 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
stroke-dasharray: 10, 5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@-webkit-keyframes ani_flow_stop {
|
|
||||||
from {
|
|
||||||
stroke-dasharray: 10, 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
stroke-dasharray: 10, 5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* 以最大40高度填充 */
|
|
||||||
.svg_ani_fill_h40 {
|
|
||||||
animation: ani_fill_h40 5s linear infinite;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
-webkit-animation: ani_fill_h40 5s linear infinite;
|
|
||||||
-webkit-animation-fill-mode: forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes ani_fill_h40 {
|
|
||||||
from {
|
|
||||||
height: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@-webkit-keyframes ani_flow_stop {
|
|
||||||
from {
|
|
||||||
stroke-dasharray: 10, 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
stroke-dasharray: 10, 5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M9 10V44H39V10H9Z" fill="none" />
|
||||||
|
<path d="M20 20V33" />
|
||||||
|
<path d="M28 20V33" />
|
||||||
|
<path d="M4 10H44" />
|
||||||
|
<path d="M16 10L19.289 4H28.7771L32 10H16Z" fill="none" />
|
||||||
|
</g>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 451 B |
@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024">
|
||||||
|
<path d="M888.3 757.4h-53.8c-4.2 0-7.7 3.5-7.7 7.7v61.8H197.1V197.1h629.8v61.8c0 4.2 3.5 7.7 7.7 7.7h53.8c4.2 0 7.7-3.4 7.7-7.7V158.7c0-17-13.7-30.7-30.7-30.7H158.7c-17 0-30.7 13.7-30.7 30.7v706.6c0 17 13.7 30.7 30.7 30.7h706.6c17 0 30.7-13.7 30.7-30.7V765.1c0-4.3-3.5-7.7-7.7-7.7zm18.6-251.7L765 393.7c-5.3-4.2-13-.4-13 6.3v76H438c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112a8 8 0 0 0 0-12.6z" fill="currentColor"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 576 B |
@ -0,0 +1,13 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 4H4V12H12V4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||||
|
<path d="M44 36H36V44H44V36Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||||
|
<path d="M12 36H4V44H12V36Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||||
|
<path d="M44 4H36V12H44V4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||||
|
<path d="M8 36V12" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M40 36V12" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M12 8H36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M12 40H36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 16H25.6V22.4H32V32H22.4V25.6H16V16Z" fill="none" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024">
|
||||||
|
<path d="M888.3 757.4h-53.8c-4.2 0-7.7 3.5-7.7 7.7v61.8H197.1V197.1h629.8v61.8c0 4.2 3.5 7.7 7.7 7.7h53.8c4.2 0 7.7-3.4 7.7-7.7V158.7c0-17-13.7-30.7-30.7-30.7H158.7c-17 0-30.7 13.7-30.7 30.7v706.6c0 17 13.7 30.7 30.7 30.7h706.6c17 0 30.7-13.7 30.7-30.7V765.1c0-4.3-3.5-7.7-7.7-7.7zM902 476H588v-76c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-76h314c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z" fill="currentColor"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 575 B |
@ -0,0 +1,7 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="6" y="22" width="36" height="22" rx="2" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||||
|
<path d="M14 22V14C14 8.47715 18.4772 4 24 4C29.5228 4 34 8.47715 34 14V22" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M24 30V36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 531 B |
@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M8 10.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M24 19.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M24 28.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M8 37.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M8 19L16 24L8 29V19Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 671 B |
@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M8 10.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M24 19.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M24 28.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M8 37.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M16 19L8 24L16 29V19Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 672 B |
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M24 36C35.0457 36 44 24 44 24C44 24 35.0457 12 24 12C12.9543 12 4 24 4 24C4 24 12.9543 36 24 36Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||||
|
<path d="M24 29C26.7614 29 29 26.7614 29 24C29 21.2386 26.7614 19 24 19C21.2386 19 19 21.2386 19 24C19 26.7614 21.2386 29 24 29Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 528 B |
@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M36.728 36.728A17.943 17.943 0 0 1 24 42c-9.941 0-18-8.059-18-18S14.059 6 24 6c4.97 0 9.47 2.015 12.728 5.272C38.386 12.93 42 17 42 17"></path>
|
||||||
|
<path d="M42 8v9h-9"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 438 B |
@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12.9998 8L6 14L12.9998 21" stroke="#333" stroke-width="4" stroke-linecap="round"
|
||||||
|
stroke-linejoin="round" />
|
||||||
|
<path
|
||||||
|
d="M6 14H28.9938C35.8768 14 41.7221 19.6204 41.9904 26.5C42.2739 33.7696 36.2671 40 28.9938 40H11.9984"
|
||||||
|
stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 482 B |
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C30.9566 44 37.0836 40.4483 40.6667 35.0593" stroke="#333" stroke-width="4" stroke-linecap="round"/><path d="M44 24H30" stroke="#333" stroke-width="4" stroke-linecap="round"/><circle cx="24" cy="24" r="6" fill="#333" stroke="#333" stroke-width="4"/></svg>
|
||||||
|
After Width: | Height: | Size: 481 B |
@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g stroke="#ffffff" stroke-width="4">
|
||||||
|
<path d="M39.3 6.00012H8.7C7.20883 6.00012 6 7.20895 6 8.70012V39.3001C6 40.7913 7.20883 42.0001 8.7 42.0001H39.3C40.7912 42.0001 42 40.7913 42 39.3001V8.70012C42 7.20895 40.7912 6.00012 39.3 6.00012Z" fill="none" stroke-linejoin="round" />
|
||||||
|
<path d="M32 6V24H15V6H32Z" fill="none" stroke-linejoin="round" />
|
||||||
|
<path d="M26 13.0001V17.0001" stroke-linecap="round" />
|
||||||
|
<path d="M10.9969 6.00012H35.9985" stroke-linecap="round" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 653 B |
@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M38 20H18V28H38V20Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||||
|
<path d="M32 6H18V14H32V6Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||||
|
<path d="M44 34H18V42H44V34Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||||
|
<path d="M17 10H5" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M17 24H5" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M17 38H5" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M5 44V4" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 863 B |
@ -0,0 +1,7 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M11.2721 36.7279C14.5294 39.9853 19.0294 42 24 42C33.9411 42 42 33.9411 42 24C42 14.0589 33.9411 6 24 6C19.0294 6 14.5294 8.01472 11.2721 11.2721C9.61407 12.9301 6 17 6 17"/>
|
||||||
|
<path d="M6 9V17H14" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 460 B |
@ -0,0 +1,16 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M11.2727 4H4V11.2727H11.2727V4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||||
|
<path d="M43.9998 36.7271H36.7271V43.9998H43.9998V36.7271Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||||
|
<path d="M11.2727 24H4V31.2727H11.2727V24Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||||
|
<path d="M23.9998 36.7271H16.7271V43.9998H23.9998V36.7271Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||||
|
<path d="M31.2727 4H24V11.2727H31.2727V4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||||
|
<path d="M43.9998 16.7271H36.7271V23.9998H43.9998V16.7271Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||||
|
<path d="M11.2729 7.63623H24.0002" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M24 40.3638H36.7273" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M11.2729 27.6366H27.6366V11.2729" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M28.8275 20.3633H36.7269M20.3633 36.7269V27.6282V36.7269Z" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M7.63672 11.2725V23.9997" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M40.3633 24V36.7273" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,7 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="7" y="22.0476" width="34" height="22" rx="2" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||||
|
<path d="M14 22V14.0047C13.9948 8.87022 17.9227 4.56718 23.0859 4.05117C28.249 3.53516 32.9673 6.97408 34 12.0059" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M24 30V36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 575 B |
@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<svg viewBox="0 0 1024 1024" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
|
||||||
|
<path d="M512 273.194667A238.805333 238.805333 0 1 1 273.194667 512 238.805333 238.805333 0 0 1 512 273.194667M512 234.666667a277.333333 277.333333 0 1 0 277.333333 277.333333 277.333333 277.333333 0 0 0-277.333333-277.333333z"></path>
|
||||||
|
<path d="M675.157333 556.928a14.677333 14.677333 0 0 0-12.8 7.445333 96 96 0 0 1-137.109333 24.661334 125.098667 125.098667 0 0 0-188.032 24.149333 14.208 14.208 0 0 0-1.28 2.133333 5.802667 5.802667 0 0 0-0.661333 1.408 14.656 14.656 0 0 0 24.149333 15.68 6.272 6.272 0 0 0 1.28-1.493333 96.832 96.832 0 0 1 13.248-16.490667 95.765333 95.765333 0 0 1 124.629333-9.301333 125.077333 125.077333 0 0 0 189.269334-26.176 5.824 5.824 0 0 0 0.682666-1.493333 14.634667 14.634667 0 0 0-13.44-20.437334z"></path>
|
||||||
|
<path d="M593.834667 444.778667l-12.8 1.557333c-0.192 13.674667-0.384 27.733333-0.384 43.2v9.621333a89.6 89.6 0 0 1-47.296 12.8 76.16 76.16 0 0 1 1.173333-152.277333 81.066667 81.066667 0 0 1 42.666667 10.666667l-0.405334 33.813333h-11.648l-8.213333-32.426667a41.088 41.088 0 0 0-18.965333-4.117333c-29.333333 0-50.837333 23.104-50.837334 68.053333 0 42.666667 20.714667 68.266667 49.642667 68.266667a65.088 65.088 0 0 0 17.792-2.304v-12.8c0-14.272-0.192-27.946667-0.597333-42.026667l-21.461334-2.133333v-6.848h61.376z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,11 @@
|
|||||||
|
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200"
|
||||||
|
height="200">
|
||||||
|
<path
|
||||||
|
d="M600.7,404.1v-16.7c0-13-5.5-25.9-16.4-33.3l-54.8-44.5c-5.5-5.6-9.1-13-9.1-20.4v-66.7c0-13-11-24.1-23.7-24.1
|
||||||
|
H260.9c-12.8,0-23.7,11.1-23.7,24.1v607.5c0,13,11,24.1,23.7,24.1h235.7c12.8,0,23.7-11.1,23.7-24.1v-35.2c0-14.8,11-25.9,25.6-25.9
|
||||||
|
h12.8c23.7,0,43.8-20.4,43.8-44.5V656c62.1-7.4,111.4-61.1,111.4-125.9c0-29.6-9.1-57.4-27.4-77.8
|
||||||
|
C675.4,430,626.2,407.8,600.7,404.1z M576.9,726.4h-1.8c0,9.3-7.3,18.5-18.3,18.5H544c-27.4,0-51.2,24.1-51.2,51.9v33.3H262.7V378.2
|
||||||
|
h124.2v231.5c0,7.4,5.5,13,12.8,13s12.8-5.6,12.8-13V365.2c0-7.4-5.5-13-12.8-13h-137V224.4h232v64.8c0,16.7,7.3,31.5,20.1,40.7
|
||||||
|
l54.8,44.5c3.7,3.7,7.3,9.3,7.3,13V726.4z M600.7,630.1V430c49.3,5.6,85.9,48.2,85.9,100C686.5,581.9,648.2,624.5,600.7,630.1z" fill-opacity="1"/>
|
||||||
|
<polygon points="854.5,400.6 693.6,461.2 703,490.5 863.9,430"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 970 B |
@ -0,0 +1,5 @@
|
|||||||
|
<svg viewBox="0 0 1024 1024" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
|
||||||
|
<text x="250" y="700" font-family="Microsoft YaHei" font-size="505" >文</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 244 B |
@ -0,0 +1,7 @@
|
|||||||
|
<svg viewBox="0 0 1024 1024" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
width="200" height="200">
|
||||||
|
<path
|
||||||
|
d="M746.666667 213.333333h-469.333334C243.2 213.333333 213.333333 243.2 213.333333 277.333333v469.333334c0 34.133333 29.866667 64 64 64h469.333334c34.133333 0 64-29.866667 64-64v-469.333334c0-34.133333-29.866667-64-64-64zM256 439.466667h140.8v140.8H256v-140.8z m21.333333 328.533333c-12.8 0-21.333333-8.533333-21.333333-21.333333v-119.466667h140.8V768H277.333333z m307.2 0h-140.8v-140.8h140.8V768z m0-183.466667h-140.8v-140.8h140.8v140.8z m183.466667 162.133334c0 12.8-8.533333 21.333333-21.333333 21.333333h-119.466667v-140.8H768v119.466667z m0-162.133334h-140.8v-140.8H768v140.8z m0-187.733333H256V277.333333c0-12.8 8.533333-21.333333 21.333333-21.333333h469.333334c12.8 0 21.333333 8.533333 21.333333 21.333333v119.466667z"
|
||||||
|
fill="#1296db"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 937 B |
@ -0,0 +1,10 @@
|
|||||||
|
<svg viewBox="0 0 1024 1024" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" p-id="3587" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
width="200" height="200">
|
||||||
|
<path
|
||||||
|
d="M883.3 745H142.7c-41.9 0-76-34.1-76-76V351.6c0-41.9 34.1-76 76-76h740.6c41.9 0 76 34.1 76 76V669c0 41.9-34.1 76-76 76zM142.7 321.8c-16.4 0-29.8 13.3-29.8 29.8V669c0 16.4 13.3 29.8 29.8 29.8h740.6c16.4 0 29.8-13.3 29.8-29.8V351.6c0-16.4-13.3-29.8-29.8-29.8H142.7z"
|
||||||
|
fill="#7D7D7D"></path>
|
||||||
|
<path
|
||||||
|
d="M191.3 576c-10.1 0-13.9 0.1-19.6 0.4 0.8-5.7 1.1-10.2 1.1-19.4v-72.4c0-7-0.3-12.7-1.1-19 6.7 0.4 8.6 0.4 19.4 0.4h34.7c21.4 0 34 10.3 34 27.8 0 8.1-2.6 14.4-7.7 18.9-2.9 2.5-5.3 3.8-10.7 5.8 6.5 1.5 9.9 3 13.8 6.4 5.7 5 8.6 12.2 8.6 20.9 0 19-13.5 30.3-36.5 30.3h-36z m30.6-67.6c7 0 11.4-4.1 11.4-10.6s-4.1-10.2-11.6-10.2h-23v20.8h23.2z m-23.2 45.8H223c8.3 0 13.4-4.6 13.4-12.4 0-7.7-5-12.2-13.5-12.2h-24.2v24.6z m186.2-88.3c-0.8 5.7-1.1 10.4-1.1 20v45.5c0 30.2-18.1 47.2-50 47.2-16.4 0-29.8-4.6-37.7-13-7.7-8.2-11.6-19.7-11.6-34.5v-45.2c0-9.1-0.3-14.9-1.1-20H312c-0.8 4.9-1.1 10.2-1.1 20v45.5c0 16.7 7.5 24.6 23 24.6 15.9 0 23.4-7.9 23.4-24.6v-45.5c0-9.9-0.3-14-1.1-20h28.7z m79.2 90.1c0 7.9 0.3 13.8 1.1 20H436c0.8-6.2 1.1-11.6 1.1-20v-66.7h-15.6c-8.3 0-10.6 0.1-20 0.9V465c4.4 0.5 11.6 0.9 19.7 0.9H479c9.3 0 14.5-0.3 20.6-0.9v25.3c-6-0.7-11.1-0.9-20.6-0.9h-14.9V556z m108.8 0c0 7.9 0.3 13.8 1.1 20h-29.2c0.8-6.2 1.1-11.6 1.1-20v-66.7h-15.6c-8.3 0-10.6 0.1-20 0.9V465c4.4 0.5 11.6 0.9 19.7 0.9h57.9c9.3 0 14.5-0.3 20.6-0.9v25.3c-6-0.7-11.1-0.9-20.6-0.9H573V556z m155.8-35.6c0 34.9-21.3 58.1-53.4 58.1-32.4 0-53.3-22.6-53.3-57.7 0-34.9 20.9-57.3 53.4-57.3 32.6 0 53.3 22.3 53.3 56.9z m-27.5 0.3c0-21.4-9.8-34.4-25.8-34.4-16.1 0-26.1 13.1-26.1 34.4 0 21.6 9.9 34.9 26.1 34.9 16 0 25.8-13.2 25.8-34.9z m110.6-0.7c3.8 5.7 6.3 9.9 9.5 15.7-0.5-6.1-0.8-12.2-0.8-19.6V486c0-8.7-0.3-14-1.1-20.1h28.2c-0.8 6-1.1 11.5-1.1 20.1v70.2c0 8.1 0.4 14.2 1.1 19.7h-29c-2.4-5-5.4-9.9-9.9-16.8l-24.5-36.9c-3.6-5.3-5.8-9.3-9.5-16.3 0.7 6 0.9 13.2 0.9 19.7v29.6c0 9.1 0.3 14.9 1.1 20.6h-28.2c0.8-5.2 1.1-11 1.1-20.8v-69.6c0-7.7-0.3-13.6-1.1-19.7h28.7c1.3 3.6 4.2 8.9 9.4 16.5l25.2 37.8z"
|
||||||
|
fill="#7D7D7D"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1,13 @@
|
|||||||
|
<svg viewBox="0 0 1024 1024" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" p-id="4650" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
width="200" height="200">
|
||||||
|
<path
|
||||||
|
d="M767.1 292.6c-0.2-19-15.6-34.4-34.6-34.6l-202.2-2.5c-9.5-0.1-18.6 3.6-25.2 10.3l-35.4 35.4c48.4 138.5 72.4 282.3 42.1 433.8-1.7 10.4-3.9 21.1-6.4 31.9 6-1.5 11.7-4.4 16.3-9.1l237.6-237.6c6.7-6.7 10.4-15.8 10.3-25.2l-2.5-202.4zM664.3 429c-17.1 17.1-44.9 17.1-62 0s-17.1-44.9 0-62 44.9-17.1 62 0 17.2 44.8 0 62z"
|
||||||
|
fill="#FFDE55"></path>
|
||||||
|
<path
|
||||||
|
d="M779.6 292.5c-0.2-12.5-5.1-24.2-13.9-33.1-8.8-8.8-20.6-13.8-33.1-13.9L530.4 243c-12.7-0.1-25.2 4.9-34.2 13.9L258.6 494.6c-9 9-13.9 20.9-13.9 33.6 0 12.7 4.9 24.7 13.9 33.6l204.7 204.7c9 9 20.9 13.9 33.6 13.9 12.7 0 24.7-4.9 33.6-13.9l237.6-237.6c9-9 14.1-21.5 13.9-34.2l-2.4-202.2z m-29.1 218.7L512.9 748.8c-4.3 4.3-9.9 6.6-16 6.6-6 0-11.7-2.3-16-6.6L276.3 544.2c-4.3-4.3-6.6-9.9-6.6-16s2.3-11.7 6.6-16l237.6-237.6c4.2-4.2 10-6.6 16-6.6h0.3l202.2 2.5c12.4 0.2 22.2 9.9 22.3 22.3l2.5 202.2c0 6-2.4 11.9-6.7 16.2z"
|
||||||
|
fill=""></path>
|
||||||
|
<path
|
||||||
|
d="M593.5 358.1c-22 22-22 57.7 0 79.7 10.6 10.6 24.8 16.5 39.8 16.5s29.2-5.9 39.8-16.5c22-22 22-57.7 0-79.7-21.9-22-57.6-22-79.6 0z m62 62c-5.9 5.9-13.8 9.2-22.2 9.2s-16.2-3.3-22.2-9.2c-12.2-12.2-12.2-32.1 0-44.3 6.1-6.1 14.1-9.2 22.2-9.2 8 0 16.1 3.1 22.2 9.2 12.2 12.2 12.2 32.1 0 44.3z"
|
||||||
|
fill=""></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,10 @@
|
|||||||
|
<svg t="1673874136249" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
width="200" height="200">
|
||||||
|
<path
|
||||||
|
d="M538.4 504.4l280.9 144.3c9.9 5.1 22.2 0.5 26-10 14.3-38.7 22.1-80.6 22.1-124.3 0-186.2-141.6-339.3-323-357.5-7.9-0.8-14.7 5.3-14.7 13.3v320.1c0 5.9 3.4 11.4 8.7 14.1z"
|
||||||
|
fill="#64B5F6"></path>
|
||||||
|
<path
|
||||||
|
d="M492.5 514.5V172.3c0-9.3-8-16.6-17.3-15.8C289 173.4 143.7 332.3 148.7 524.1c5 190.9 161.5 346.1 352.4 349.7 131.3 2.5 246.8-65.5 311.5-168.7 4.6-7.3 2-17-5.7-21L499.8 526.4c-4.5-2.3-7.3-6.9-7.3-11.9z"
|
||||||
|
fill="#1E88E5"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 665 B |
@ -0,0 +1,10 @@
|
|||||||
|
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200"
|
||||||
|
height="200">
|
||||||
|
<rect transform="rotate(180,427,410)" x="0" y="0" width="680" height="400" stroke="none">
|
||||||
|
<animate attributeName="height" from="0" to="400" dur="5s" repeatCount="indefinite" />
|
||||||
|
</rect>
|
||||||
|
<polygon
|
||||||
|
points="283.2,131 87.7,129.1 85.1,911.2 938.9,911.2 938.9,131 740.8,131 740.8,241.3 849,245.4 853.1,807.1
|
||||||
|
177.1,799.2 181.1,246.6 283.2,245 "
|
||||||
|
stroke-width="10" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 478 B |
@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<svg viewBox="0 0 1024 1024" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
|
||||||
|
<path d="M500.181333 308.757333a118.421333 118.421333 0 1 1-118.421333 118.421334 118.421333 118.421333 0 0 1 118.421333-118.421334m0-19.2a137.514667 137.514667 0 1 0 137.514667 137.514667 137.514667 137.514667 0 0 0-137.514667-137.514667z"></path>
|
||||||
|
<path d="M500.181333 478.741333a118.421333 118.421333 0 1 1-118.421333 118.421334 118.421333 118.421333 0 0 1 118.421333-118.421334m0-19.2a137.514667 137.514667 0 1 0 137.514667 137.514667 137.514667 137.514667 0 0 0-137.514667-137.514667z"></path>
|
||||||
|
<path d="M500.266667 234.666667a9.557333 9.557333 0 0 1 9.557333 9.557333v54.869333a9.557333 9.557333 0 0 1-9.557333 9.557334 9.557333 9.557333 0 0 1-9.557334-9.557334v-54.848A9.557333 9.557333 0 0 1 500.266667 234.666667z"></path>
|
||||||
|
<path d="M500.266667 715.349333a9.557333 9.557333 0 0 1 9.557333 9.557334v54.890666a9.557333 9.557333 0 0 1-9.557333 9.557334 9.557333 9.557333 0 0 1-9.557334-9.557334v-54.869333a9.557333 9.557333 0 0 1 9.557334-9.578667z"></path>
|
||||||
|
<path d="M500.266667 446.357333a10.666667 10.666667 0 0 1-10.218667-6.186666l-36.053333-77.312a10.666667 10.666667 0 0 1 5.205333-14.186667 10.666667 10.666667 0 0 1 14.101333 5.205333l26.986667 57.728 26.922667-57.728a10.666667 10.666667 0 0 1 14.186666-5.205333 10.666667 10.666667 0 0 1 5.12 14.186667l-36.053333 77.312a10.666667 10.666667 0 0 1-9.664 6.208z"></path>
|
||||||
|
<path d="M500.266667 681.024a10.666667 10.666667 0 0 1-10.218667-6.186667l-36.053333-77.312a10.666667 10.666667 0 0 1 5.205333-14.186666 10.666667 10.666667 0 0 1 14.101333 5.205333l26.986667 57.728 26.922667-57.728a10.666667 10.666667 0 0 1 14.186666-5.205333 10.666667 10.666667 0 0 1 5.12 14.186666l-36.053333 77.312a10.666667 10.666667 0 0 1-9.664 6.208z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
@ -1,20 +0,0 @@
|
|||||||
<template>
|
|
||||||
<n-card title="操作说明" embedded :bordered="false">
|
|
||||||
<ul>
|
|
||||||
<li>常规组件和图表组件用鼠标左键选中并按住可拖动至画布</li>
|
|
||||||
<li>绘制组件需先选中 再将鼠标移至画布中按住左键开始绘制 松开左键结束绘制</li>
|
|
||||||
<li>在画布上单击左键并按住可以拖动组件改变位置</li>
|
|
||||||
<li>当组件选中时会有选中效果 此时右侧面板弹出 可使用快捷键和编辑右侧面板属性更改组件</li>
|
|
||||||
<li>鼠标右键点击组件可以进行一些快捷操作</li>
|
|
||||||
<li>键盘↑↓←→可移动选中组件 ctrl+c复制当前选中组件 deleted删除当前选中组件</li>
|
|
||||||
<li>ctrl+键盘↑↓←→可移动组件图层</li>
|
|
||||||
<li>点击画布空白处可以取消选中组件 并关闭属性面板</li>
|
|
||||||
<li>点击《 符号可以显示或隐藏左侧面板</li>
|
|
||||||
<li>如果使用我的在线体验地址 请先保存绘制再切换到预览界面</li>
|
|
||||||
<li>更多使用帮助请参考<a href="https://github.com/yaolunmao/vue-webtopo-svgeditor">github</a>或<a href="https://gitee.com/yaolunmao/vue-webtopo-svgeditor">gitee</a></li>
|
|
||||||
</ul>
|
|
||||||
</n-card>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { NCard } from "naive-ui";
|
|
||||||
</script>
|
|
||||||
@ -1,155 +0,0 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed, reactive, ref, watch } from 'vue';
|
|
||||||
import { ChevronDoubleLeft20Regular, ChevronDoubleRight20Regular } from '@vicons/fluent';
|
|
||||||
import { NIcon, NCollapse, NCollapseItem, useMessage } from "naive-ui";
|
|
||||||
import { ILeftImgLists, IComponentInfo } from "../Model";
|
|
||||||
const emit = defineEmits(['setCreatSvgInfo'])
|
|
||||||
const message = useMessage();
|
|
||||||
const props = defineProps({
|
|
||||||
left_imglists: {
|
|
||||||
type: Object as () => ILeftImgLists,
|
|
||||||
default: []
|
|
||||||
},
|
|
||||||
//选中的左侧工具图标
|
|
||||||
select_toolbar: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const leftnav = reactive({
|
|
||||||
navclass: 'leftnavDisplay',
|
|
||||||
navopen: true
|
|
||||||
});
|
|
||||||
const clickHandleIcon = () => {
|
|
||||||
leftnav.navopen = !leftnav.navopen;
|
|
||||||
leftnav.navclass = leftnav.navclass == 'leftnavDisplay' ? 'leftnavNone' : 'leftnavDisplay'
|
|
||||||
};
|
|
||||||
const dragStartEvent = (leftImgItem: IComponentInfo, e: DragEvent) => {
|
|
||||||
//设置要创建的svg组件信息
|
|
||||||
emit('setCreatSvgInfo', leftImgItem);
|
|
||||||
}
|
|
||||||
const dragEndEvent = (leftImgItem: IComponentInfo, e: DragEvent) => {
|
|
||||||
//拖动时记录拖动的svg信息
|
|
||||||
if (e.dataTransfer?.dropEffect !== 'copy') {
|
|
||||||
message.error('请将组件拖到画布中!');
|
|
||||||
//清空已选择的信息
|
|
||||||
emit('setCreatSvgInfo', {});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div :class="leftnav.navclass">
|
|
||||||
<div class="svgimg" v-show="leftnav.navopen">
|
|
||||||
<n-collapse default-expanded-names="1" accordion>
|
|
||||||
<n-collapse-item title="常规组件" name="1" style="margin-top: 15px;">
|
|
||||||
<ul class="leftImgUl">
|
|
||||||
<li v-for="leftImgItem in props.left_imglists.commonComponentList">
|
|
||||||
<img
|
|
||||||
:title="leftImgItem.title"
|
|
||||||
:src="leftImgItem.priview_img"
|
|
||||||
draggable="true"
|
|
||||||
@dragstart="dragStartEvent(leftImgItem, $event)"
|
|
||||||
@dragend="dragEndEvent(leftImgItem, $event)"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</n-collapse-item>
|
|
||||||
<n-collapse-item title="绘制组件" name="2">
|
|
||||||
<ul class="leftImgUl">
|
|
||||||
<li v-for="leftImgItem in props.left_imglists.drawComponentList">
|
|
||||||
<img
|
|
||||||
:class="props.select_toolbar == leftImgItem.type ? 'svg-selected' : ''"
|
|
||||||
:title="leftImgItem.title"
|
|
||||||
:src="leftImgItem.priview_img"
|
|
||||||
@click="() => { emit('setCreatSvgInfo', leftImgItem) }"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</n-collapse-item>
|
|
||||||
<n-collapse-item title="图表组件" name="3">
|
|
||||||
<ul class="leftImgUl">
|
|
||||||
<li v-for="leftImgItem in props.left_imglists.chartComponentList">
|
|
||||||
<img
|
|
||||||
:title="leftImgItem.title"
|
|
||||||
:src="leftImgItem.priview_img"
|
|
||||||
draggable="true"
|
|
||||||
@dragstart="dragStartEvent(leftImgItem, $event)"
|
|
||||||
@dragend="dragEndEvent(leftImgItem, $event)"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</n-collapse-item>
|
|
||||||
</n-collapse>
|
|
||||||
</div>
|
|
||||||
<div class="handlehidden">
|
|
||||||
<n-icon class="handleicon" size="10" @click="clickHandleIcon">
|
|
||||||
<chevron-double-left20-regular v-if="leftnav.navopen" />
|
|
||||||
<chevron-double-right20-regular v-else />
|
|
||||||
</n-icon>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<style scoped>
|
|
||||||
.leftnavDisplay,
|
|
||||||
.leftnavNone {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.leftnavDisplay {
|
|
||||||
width: 210px;
|
|
||||||
}
|
|
||||||
.leftnavNone {
|
|
||||||
width: 10px;
|
|
||||||
}
|
|
||||||
.svgimg {
|
|
||||||
/* background-color: green; */
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
overflow: overlay;
|
|
||||||
}
|
|
||||||
.svgimg::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.handlehidden {
|
|
||||||
height: 100%;
|
|
||||||
width: 10px;
|
|
||||||
background-color: grey;
|
|
||||||
}
|
|
||||||
.handleicon {
|
|
||||||
top: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.leftImgUl {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.leftImgUl li {
|
|
||||||
width: calc(33.33% - 30px);
|
|
||||||
margin: 0 15px 15px 15px;
|
|
||||||
padding: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: 1px 1px 5px #ddd;
|
|
||||||
cursor: pointer;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.leftImgUl li :hover {
|
|
||||||
box-shadow: 1px 1px 10px #ccc;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
.leftImgUl img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.svg-selected {
|
|
||||||
outline: 1px solid #0cf;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,81 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { reactive, ref } from "vue";
|
|
||||||
import { NForm, NFormItem, NInput, NInputNumber, NColorPicker, NRadioGroup, NSpace, NRadio,NSelect } from "naive-ui";
|
|
||||||
import { ISvgDataLists } from "../Model";
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
set_svg_info: {
|
|
||||||
type: Object as () => ISvgDataLists,
|
|
||||||
default: {}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="rightnav">
|
|
||||||
<div style="margin-left: 2rem;margin-top: 1rem;">
|
|
||||||
<n-form size="small" label-placement="left">
|
|
||||||
<n-form-item label="标识">
|
|
||||||
<span>{{ props.set_svg_info.id }}</span>
|
|
||||||
</n-form-item>
|
|
||||||
<n-form-item label="类型">
|
|
||||||
<span>{{ props.set_svg_info.type }}</span>
|
|
||||||
</n-form-item>
|
|
||||||
<n-form-item label="名称">
|
|
||||||
<n-input placeholder="请输入名称" v-model:value="props.set_svg_info.title" />
|
|
||||||
</n-form-item>
|
|
||||||
<n-form-item label="x轴坐标">
|
|
||||||
<n-input-number v-model:value="props.set_svg_info.svgPositionX" :min="0" />
|
|
||||||
</n-form-item>
|
|
||||||
<n-form-item label="y轴坐标">
|
|
||||||
<n-input-number v-model:value="props.set_svg_info.svgPositionY" :min="0" />
|
|
||||||
</n-form-item>
|
|
||||||
<n-form-item label="大小">
|
|
||||||
<n-input-number v-model:value="props.set_svg_info.size" :min="1" :step="0.1" />
|
|
||||||
</n-form-item>
|
|
||||||
<n-form-item label="旋转">
|
|
||||||
<n-input-number v-model:value="props.set_svg_info.angle" />
|
|
||||||
</n-form-item>
|
|
||||||
<n-form-item v-for="item in props.set_svg_info.extend_attr" :label="item.title">
|
|
||||||
<n-input-number v-if="item.type == 'numberinputbox'" v-model:value="item.val" />
|
|
||||||
<n-color-picker
|
|
||||||
v-else-if="item.type == 'colorinputbox'"
|
|
||||||
:modes="['hex']"
|
|
||||||
v-model:value="item.val"
|
|
||||||
/>
|
|
||||||
<n-input
|
|
||||||
v-else-if="item.type == 'textinputbox'"
|
|
||||||
:placeholder="`请输入${item.title}`"
|
|
||||||
v-model:value="item.val"
|
|
||||||
/>
|
|
||||||
<n-input
|
|
||||||
v-else-if="item.type == 'textareainputbox'"
|
|
||||||
:placeholder="`请输入${item.title}`"
|
|
||||||
type="textarea"
|
|
||||||
v-model:value="item.val"
|
|
||||||
/>
|
|
||||||
<n-radio-group v-model:value="item.val.selectval" v-else-if="item.type == 'radiogroup'">
|
|
||||||
<n-space>
|
|
||||||
<n-radio
|
|
||||||
v-for="ridioitem in item.val.ridiogroup"
|
|
||||||
:key="ridioitem.value"
|
|
||||||
:value="ridioitem.value"
|
|
||||||
>{{ ridioitem.label }}</n-radio>
|
|
||||||
</n-space>
|
|
||||||
</n-radio-group>
|
|
||||||
<n-select v-else-if="item.type == 'select'" v-model:value="item.val.selectval" :options="item.val.selectgroup" />
|
|
||||||
|
|
||||||
</n-form-item>
|
|
||||||
</n-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<style scoped>
|
|
||||||
.rightnav {
|
|
||||||
width: 250px;
|
|
||||||
height: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
.rightnav::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,50 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { reactive, ref, createApp, markRaw,provide } from "vue";
|
|
||||||
import { use } from "echarts/core";
|
|
||||||
import { SVGRenderer } from "echarts/renderers";
|
|
||||||
import { PieChart,BarChart } from "echarts/charts";
|
|
||||||
import {
|
|
||||||
TitleComponent,
|
|
||||||
TooltipComponent,
|
|
||||||
LegendComponent,
|
|
||||||
GridComponent
|
|
||||||
} from "echarts/components";
|
|
||||||
import { THEME_KEY } from "vue-echarts";
|
|
||||||
use([
|
|
||||||
SVGRenderer,
|
|
||||||
PieChart,
|
|
||||||
TitleComponent,
|
|
||||||
TooltipComponent,
|
|
||||||
LegendComponent,
|
|
||||||
GridComponent,
|
|
||||||
BarChart
|
|
||||||
]);
|
|
||||||
provide(THEME_KEY, "default")
|
|
||||||
const props = defineProps({
|
|
||||||
component_type: {
|
|
||||||
type: String as () => any,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
component_template: {
|
|
||||||
type: String as () => any,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
component_props: {
|
|
||||||
type: Array as () => Array<any>,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
component_attr: {
|
|
||||||
type: Object as () => any,
|
|
||||||
default: {}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const component_info = markRaw({
|
|
||||||
template: props.component_template,
|
|
||||||
props: ['prop_data']
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<component :is="component_info" :prop_data="props.component_attr"></component>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
@ -1,555 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { computed, reactive, Ref, ref, watch } from 'vue';
|
|
||||||
import TopToolBar from './TopBar.vue';
|
|
||||||
import LeftToolBar from './LeftToolBar.vue';
|
|
||||||
import RightToolBar from './RightToolBar.vue';
|
|
||||||
import BottomBar from './BottomBar.vue';
|
|
||||||
import { NMessageProvider } from "naive-ui";
|
|
||||||
import { IComponentInfo, ISvgDataLists, ISvgCanvas, ILeftImgLists, IMouseInfo, ISelectSvg } from "../Model";
|
|
||||||
import SvgDynamic from "./SvgDynamic.vue";
|
|
||||||
import "../assets/css/svgAnimation/index.css";
|
|
||||||
import { moveUp, moveDown, moveLeft, moveRight, hotkeyCopy, hotkeyDel, hotkeyPutOnTop, hotkeyPutOnButtom, hotkeyPutOnUp, hotkeyPutOnDown } from "../func/HotkeyFunc";
|
|
||||||
const emit = defineEmits(['saveSvgInfo']);
|
|
||||||
const props = defineProps({
|
|
||||||
//组件的json格式
|
|
||||||
component_infos: {
|
|
||||||
type: Array as () => Array<IComponentInfo>,
|
|
||||||
required: true,
|
|
||||||
default: []
|
|
||||||
},
|
|
||||||
svgCanvas: {
|
|
||||||
type: Object as () => ISvgCanvas,
|
|
||||||
default: { width: 1520, height: 720 }
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const svg_dom_ref = ref<null | HTMLElement>(null);
|
|
||||||
const contextMenuRef = ref<HTMLElement>();
|
|
||||||
const svgLists: ISvgDataLists[] = reactive([]);
|
|
||||||
const topbar_dom_ref = ref(null);
|
|
||||||
//显示右键菜单
|
|
||||||
const display_contextmenu = ref(false);
|
|
||||||
//右键菜单数据
|
|
||||||
const contextmenu_data = reactive([{
|
|
||||||
name: "复制",
|
|
||||||
hotkey: "Ctrl+C",
|
|
||||||
enable: true,
|
|
||||||
fun: function () {
|
|
||||||
if (!this.enable) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
hotkeyCopy(svgLists, select_svg);
|
|
||||||
display_contextmenu.value = false;
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
name: "删除",
|
|
||||||
hotkey: "Delete",
|
|
||||||
enable: false,
|
|
||||||
fun: function () {
|
|
||||||
if (!this.enable) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
hotkeyDel(svgLists, select_svg);
|
|
||||||
display_contextmenu.value = false;
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
name: "置于顶层",
|
|
||||||
hotkey: "Ctrl+→",
|
|
||||||
enable: true,
|
|
||||||
fun: function () {
|
|
||||||
if (!this.enable) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
hotkeyPutOnTop(svgLists, select_svg);
|
|
||||||
display_contextmenu.value = false;
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
name: "置于底层",
|
|
||||||
hotkey: "Ctrl+←",
|
|
||||||
enable: true,
|
|
||||||
fun: function () {
|
|
||||||
if (!this.enable) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
hotkeyPutOnButtom(svgLists, select_svg);
|
|
||||||
display_contextmenu.value = false;
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
name: "置于上一层",
|
|
||||||
hotkey: "Ctrl+↑",
|
|
||||||
enable: true,
|
|
||||||
fun: function () {
|
|
||||||
if (!this.enable) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
hotkeyPutOnUp(svgLists, select_svg);
|
|
||||||
display_contextmenu.value = false;
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
name: "置于下一层",
|
|
||||||
hotkey: "Ctrl+↓",
|
|
||||||
enable: true,
|
|
||||||
fun: function () {
|
|
||||||
if (!this.enable) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
hotkeyPutOnDown(svgLists, select_svg);
|
|
||||||
display_contextmenu.value = false;
|
|
||||||
}
|
|
||||||
}]);
|
|
||||||
const set_svg_info: Ref<ISvgDataLists> = ref({
|
|
||||||
id: '', title: '', svgPositionX: 0, svgPositionY: 0
|
|
||||||
});
|
|
||||||
//选中的svg
|
|
||||||
const select_svg: ISelectSvg = reactive({
|
|
||||||
id: '',
|
|
||||||
index: 0,
|
|
||||||
sPositionX: 0,
|
|
||||||
sPositionY: 0,
|
|
||||||
create_type: ''
|
|
||||||
});
|
|
||||||
//选中的左侧工具栏的svg
|
|
||||||
const select_lefttool: Ref<IComponentInfo> = ref({});
|
|
||||||
//左侧工具栏svg列表
|
|
||||||
const leftimg_lists: Ref<ILeftImgLists> = ref({
|
|
||||||
commonComponentList: [],
|
|
||||||
drawComponentList: [],
|
|
||||||
chartComponentList: []
|
|
||||||
});
|
|
||||||
//选中的左侧工具栏
|
|
||||||
const select_toolbar: Ref<string | undefined> = ref('');
|
|
||||||
//记录鼠标信息
|
|
||||||
const mouseInfo: IMouseInfo = reactive({
|
|
||||||
status: 0,
|
|
||||||
mPositionX: 0,
|
|
||||||
mPositionY: 0
|
|
||||||
});
|
|
||||||
const rightnav_open = ref(false);
|
|
||||||
/**
|
|
||||||
* @description: 从左侧工具栏拖动组件到画布触发的事件
|
|
||||||
* @param {*}
|
|
||||||
* @return {*}
|
|
||||||
*/
|
|
||||||
const dropEvent = (e: DragEvent) => {
|
|
||||||
//当左侧工具栏拖动到此处时在画布上创建该组件
|
|
||||||
if (Object.keys(select_lefttool.value).length < 1) {
|
|
||||||
//未选择任何组件
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
//在鼠标位置创建当前组件
|
|
||||||
const create_svg: ISvgDataLists = {
|
|
||||||
id: `${new Date().getTime()}`,
|
|
||||||
type: select_lefttool.value.type,
|
|
||||||
title: select_lefttool.value.title,
|
|
||||||
svgPositionX: e.offsetX,
|
|
||||||
svgPositionY: e.offsetY,
|
|
||||||
angle: 0,
|
|
||||||
size: 1,
|
|
||||||
extend_attr: JSON.parse(JSON.stringify(select_lefttool.value.extend_attr))
|
|
||||||
}
|
|
||||||
svgLists.push(create_svg);
|
|
||||||
//清空左侧工具选中
|
|
||||||
select_lefttool.value = {};
|
|
||||||
|
|
||||||
}
|
|
||||||
const dragEnterEvent = (e: DragEvent) => {
|
|
||||||
//dragenter和dragover一定要阻止浏览器默认行为 不然不会触发drop
|
|
||||||
rightnav_open.value = false;
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
const dragOverEvent = (e: DragEvent) => {
|
|
||||||
//dragenter和dragover一定要阻止浏览器默认行为 不然不会触发drop
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description: 设置要创建组件的信息
|
|
||||||
* @param {*} createsvg_info 选中的组件信息
|
|
||||||
* @return {*}
|
|
||||||
*/
|
|
||||||
const setCreatSvgInfo = (createsvg_info: IComponentInfo) => {
|
|
||||||
select_lefttool.value = createsvg_info;
|
|
||||||
select_toolbar.value = createsvg_info.type;
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description: 保存绘制组件后的数据和svgdom
|
|
||||||
* @param {*}
|
|
||||||
* @return {*}
|
|
||||||
*/
|
|
||||||
const saveSvgInfo = () => {
|
|
||||||
if (svgLists.length == 0) {
|
|
||||||
(topbar_dom_ref.value as any).saveSvgInfoRes({ code: 2, msg: '请先绘制图像!' });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
(topbar_dom_ref.value as any).saveSvgInfoRes(svgLists.length > 0 ? { code: 1, msg: '保存成功!' } : { code: 0, msg: '保存失败!' });
|
|
||||||
emit('saveSvgInfo', svgLists, svg_dom_ref.value)
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description: 鼠标点击画布上svg触发事件
|
|
||||||
* @param {*}
|
|
||||||
* @return {*}
|
|
||||||
*/
|
|
||||||
const mouseDownEvent = (selectsvg: ISvgDataLists, index: number, e: MouseEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.cancelBubble = true;
|
|
||||||
//清空左侧工具选中
|
|
||||||
select_lefttool.value = {};
|
|
||||||
//鼠标在画布上的组件按下记录选中的组件信息和鼠标位置信息等
|
|
||||||
({ id: select_svg.id, svgPositionX: select_svg.sPositionX, svgPositionY: select_svg.sPositionY } = selectsvg);
|
|
||||||
rightnav_open.value = false;
|
|
||||||
select_svg.index = index;
|
|
||||||
select_svg.create_type = "draggable"
|
|
||||||
mouseInfo.status = 1;
|
|
||||||
mouseInfo.mPositionX = e.clientX;
|
|
||||||
mouseInfo.mPositionY = e.clientY;
|
|
||||||
}
|
|
||||||
const mouseMoveEvent = (e: MouseEvent) => {
|
|
||||||
//如果鼠标不是按下状态或者没有选择组件
|
|
||||||
if (mouseInfo.status != 1 || !select_svg.id) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const { clientX, clientY } = e;
|
|
||||||
if (select_svg.create_type == "draggable") {
|
|
||||||
let new_select_svg = { ...select_svg };
|
|
||||||
new_select_svg.sPositionX += clientX - mouseInfo.mPositionX;
|
|
||||||
new_select_svg.sPositionY += clientY - mouseInfo.mPositionY;
|
|
||||||
//更新视图
|
|
||||||
({ sPositionX: svgLists[select_svg.index].svgPositionX, sPositionY: svgLists[select_svg.index].svgPositionY } = new_select_svg);
|
|
||||||
}
|
|
||||||
else if (select_svg.create_type == "draw") {
|
|
||||||
//拓展属性里未配置的属性不进行赋值
|
|
||||||
if (svgLists[select_svg.index].extend_attr?.startpoint_x?.val != null) {
|
|
||||||
svgLists[select_svg.index].extend_attr.startpoint_x.val = 0;
|
|
||||||
}
|
|
||||||
if (svgLists[select_svg.index].extend_attr?.startpoint_y?.val != null) {
|
|
||||||
svgLists[select_svg.index].extend_attr.startpoint_y.val = 0;
|
|
||||||
}
|
|
||||||
if (svgLists[select_svg.index].extend_attr?.endpoint_x?.val != null) {
|
|
||||||
svgLists[select_svg.index].extend_attr.endpoint_x.val = clientX - mouseInfo.mPositionX;
|
|
||||||
}
|
|
||||||
if (svgLists[select_svg.index].extend_attr?.endpoint_y?.val != null) {
|
|
||||||
svgLists[select_svg.index].extend_attr.endpoint_y.val = clientY - mouseInfo.mPositionY;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
const mouseUpEvent = (e: MouseEvent) => {
|
|
||||||
//如果鼠标不是按下状态或者没有选择组件
|
|
||||||
if (mouseInfo.status != 1 || !select_svg.id) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
mouseInfo.status = 0;
|
|
||||||
rightnav_open.value = true;
|
|
||||||
set_svg_info.value = svgLists[select_svg.index];
|
|
||||||
//清空左侧工具选中
|
|
||||||
select_lefttool.value = {};
|
|
||||||
select_toolbar.value = '';
|
|
||||||
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description: 鼠标点击画布
|
|
||||||
* @param {*}
|
|
||||||
* @return {*}
|
|
||||||
*/
|
|
||||||
const mouseDownCanvasEvent = (e: MouseEvent) => {
|
|
||||||
//判断当前是否有选中的工具栏
|
|
||||||
if (Object.keys(select_lefttool.value).length < 1) {
|
|
||||||
rightnav_open.value = false;
|
|
||||||
select_svg.id = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
//在当前位置创建要绘制的组件
|
|
||||||
const create_svg: ISvgDataLists = {
|
|
||||||
id: `${new Date().getTime()}`,
|
|
||||||
type: select_lefttool.value.type,
|
|
||||||
title: select_lefttool.value.title,
|
|
||||||
svgPositionX: e.offsetX,
|
|
||||||
svgPositionY: e.offsetY,
|
|
||||||
angle: 0,
|
|
||||||
size: 1,
|
|
||||||
extend_attr: JSON.parse(JSON.stringify(select_lefttool.value.extend_attr))//这个响应式对象我治不了了 所以只能写两次转换
|
|
||||||
}
|
|
||||||
svgLists.push(create_svg);
|
|
||||||
//设置全局选中的组件信息
|
|
||||||
({ id: select_svg.id, svgPositionX: select_svg.sPositionX, svgPositionY: select_svg.sPositionY } = create_svg);
|
|
||||||
rightnav_open.value = false;
|
|
||||||
select_svg.index = svgLists.length - 1;
|
|
||||||
select_svg.create_type = "draw"
|
|
||||||
mouseInfo.status = 1;
|
|
||||||
mouseInfo.mPositionX = e.clientX;
|
|
||||||
mouseInfo.mPositionY = e.clientY;
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description: 鼠标右键
|
|
||||||
* @param {*}
|
|
||||||
* @return {*}
|
|
||||||
*/
|
|
||||||
const contextmenuEvent = (e: MouseEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
display_contextmenu.value = true;
|
|
||||||
(contextMenuRef.value as any).style.left = e.pageX + 'px';
|
|
||||||
(contextMenuRef.value as any).style.top = e.pageY + 'px';
|
|
||||||
contextmenu_data.map(m => m.enable = true);
|
|
||||||
//判断当前选中组件的index
|
|
||||||
if (svgLists.length === 1) {
|
|
||||||
//禁用下移
|
|
||||||
contextmenu_data[3].enable = false;
|
|
||||||
contextmenu_data[5].enable = false;
|
|
||||||
//禁用上移
|
|
||||||
contextmenu_data[2].enable = false;
|
|
||||||
contextmenu_data[4].enable = false;
|
|
||||||
}
|
|
||||||
else if (select_svg.index === 0) {
|
|
||||||
//禁用下移
|
|
||||||
contextmenu_data[3].enable = false;
|
|
||||||
contextmenu_data[5].enable = false;
|
|
||||||
|
|
||||||
}
|
|
||||||
else if (select_svg.index === svgLists.length - 1) {
|
|
||||||
//禁用上移
|
|
||||||
contextmenu_data[2].enable = false;
|
|
||||||
contextmenu_data[4].enable = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description: 点击页面其他位置隐藏右键菜单
|
|
||||||
* @param {*}
|
|
||||||
* @return {*}
|
|
||||||
*/
|
|
||||||
const documentClickEvent = (e: MouseEvent) => {
|
|
||||||
if (e.button !== 2) {
|
|
||||||
display_contextmenu.value = false;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
watch(() => [...props.component_infos], (newval, oldval) => {
|
|
||||||
leftimg_lists.value = {
|
|
||||||
commonComponentList: newval.filter(f => f.panel_class == 'common'),
|
|
||||||
drawComponentList: newval.filter(f => f.panel_class == 'draw'),
|
|
||||||
chartComponentList: newval.filter(f => f.panel_class == 'chart')
|
|
||||||
};
|
|
||||||
});
|
|
||||||
//监听键盘
|
|
||||||
document.onkeydown = function (e) {
|
|
||||||
//如果没选中组件
|
|
||||||
if (!select_svg.id) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!e.ctrlKey && e.key == 'ArrowUp') {
|
|
||||||
e.preventDefault();
|
|
||||||
moveUp(svgLists, select_svg);
|
|
||||||
} else if (!e.ctrlKey && e.key == 'ArrowDown') {
|
|
||||||
e.preventDefault();
|
|
||||||
moveDown(svgLists, select_svg);
|
|
||||||
} else if (!e.ctrlKey && e.key == 'ArrowLeft') {
|
|
||||||
e.preventDefault();
|
|
||||||
moveLeft(svgLists, select_svg);
|
|
||||||
} else if (!e.ctrlKey && e.key == 'ArrowRight') {
|
|
||||||
e.preventDefault();
|
|
||||||
moveRight(svgLists, select_svg);
|
|
||||||
}
|
|
||||||
//ctrl c
|
|
||||||
else if (e.ctrlKey && e.key.toLowerCase() == 'c') {
|
|
||||||
e.preventDefault();
|
|
||||||
hotkeyCopy(svgLists, select_svg);
|
|
||||||
}
|
|
||||||
//deleted
|
|
||||||
else if (e.key == 'Delete') {
|
|
||||||
e.preventDefault();
|
|
||||||
hotkeyDel(svgLists, select_svg);
|
|
||||||
rightnav_open.value = false;
|
|
||||||
}
|
|
||||||
//上移一层
|
|
||||||
else if (e.ctrlKey && e.key == 'ArrowUp') {
|
|
||||||
e.preventDefault();
|
|
||||||
hotkeyPutOnUp(svgLists, select_svg);
|
|
||||||
}
|
|
||||||
//下移一层
|
|
||||||
else if (e.ctrlKey && e.key == 'ArrowDown') {
|
|
||||||
e.preventDefault();
|
|
||||||
hotkeyPutOnDown(svgLists, select_svg);
|
|
||||||
}
|
|
||||||
//置于底层
|
|
||||||
else if (e.ctrlKey && e.key == 'ArrowLeft') {
|
|
||||||
e.preventDefault();
|
|
||||||
hotkeyPutOnButtom(svgLists, select_svg);
|
|
||||||
}
|
|
||||||
//置于顶层
|
|
||||||
else if (e.ctrlKey && e.key == 'ArrowRight') {
|
|
||||||
e.preventDefault();
|
|
||||||
hotkeyPutOnTop(svgLists, select_svg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const setSvgLists = (new_val: ISvgDataLists[]) => {
|
|
||||||
svgLists.length = 0;
|
|
||||||
svgLists.push(...new_val);
|
|
||||||
emit('saveSvgInfo', svgLists, svg_dom_ref.value)
|
|
||||||
}
|
|
||||||
defineExpose({
|
|
||||||
setSvgLists
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="navtop">
|
|
||||||
<n-message-provider>
|
|
||||||
<top-tool-bar @saveSvgInfo="saveSvgInfo" ref="topbar_dom_ref"></top-tool-bar>
|
|
||||||
</n-message-provider>
|
|
||||||
</div>
|
|
||||||
<div class="ancestors" @mousedown="documentClickEvent">
|
|
||||||
<div class="navleft">
|
|
||||||
<n-message-provider>
|
|
||||||
<left-tool-bar
|
|
||||||
:left_imglists="leftimg_lists"
|
|
||||||
:select_toolbar="select_toolbar"
|
|
||||||
@setCreatSvgInfo="setCreatSvgInfo"
|
|
||||||
></left-tool-bar>
|
|
||||||
</n-message-provider>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="warp"
|
|
||||||
@drop="dropEvent"
|
|
||||||
@dragenter="dragEnterEvent"
|
|
||||||
@dragover="dragOverEvent"
|
|
||||||
@mousemove="mouseMoveEvent"
|
|
||||||
@mouseup="mouseUpEvent"
|
|
||||||
@mousedown="mouseDownCanvasEvent"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
style="background-color:#000000;"
|
|
||||||
:width="svgCanvas.width"
|
|
||||||
:height="svgCanvas.height"
|
|
||||||
:viewBox="`0 0 ${svgCanvas.width} ${svgCanvas.height}`"
|
|
||||||
ref="svg_dom_ref"
|
|
||||||
>
|
|
||||||
<defs />
|
|
||||||
<filter x="0" y="0" width="1" height="1" id="solid">
|
|
||||||
<feFlood flood-color="rgb(255,255,255)" />
|
|
||||||
<feComposite in="SourceGraphic" />
|
|
||||||
</filter>
|
|
||||||
<g
|
|
||||||
style="cursor:pointer"
|
|
||||||
:class="item.id == select_svg.id ? 'svg-selected' : ''"
|
|
||||||
v-for="(item,index) in svgLists"
|
|
||||||
:key="item.id"
|
|
||||||
:id="item.id"
|
|
||||||
:transform="'translate(' + (item.svgPositionX) + ',' + (item.svgPositionY) + ')' + 'rotate(' + item.angle + ')' + 'scale(' + item.size + ')'"
|
|
||||||
@mousedown="mouseDownEvent(item, index, $event)"
|
|
||||||
@contextmenu.stop="contextmenuEvent"
|
|
||||||
>
|
|
||||||
<svg-dynamic
|
|
||||||
:component_type="item.type"
|
|
||||||
:component_template="props.component_infos.filter(f => f.type == item.type)[0].template"
|
|
||||||
:component_props="props.component_infos.filter(f => f.type == item.type)[0].props"
|
|
||||||
:component_attr="item"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div class="navright" v-show="rightnav_open">
|
|
||||||
<right-tool-bar :set_svg_info="set_svg_info"></right-tool-bar>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="navbuttom">
|
|
||||||
<bottom-bar></bottom-bar>
|
|
||||||
</div>
|
|
||||||
<!-- 右键菜单 -->
|
|
||||||
<ul ref="contextMenuRef" class="contextMenu" v-show="display_contextmenu">
|
|
||||||
<li v-for="(item,index) in contextmenu_data" :key="index" @click="item.fun()">
|
|
||||||
<p :class="item.enable ? '' : 'disabled'">
|
|
||||||
{{ item.name }}
|
|
||||||
<span class="shortcut">{{ item.hotkey }}</span>
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.contextMenu {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 99999;
|
|
||||||
background: #ffffff;
|
|
||||||
padding: 5px 0;
|
|
||||||
margin: 0px;
|
|
||||||
display: block;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contextMenu li {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contextMenu .shortcut {
|
|
||||||
width: 115px;
|
|
||||||
text-align: right;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contextMenu p {
|
|
||||||
text-decoration: none;
|
|
||||||
display: block;
|
|
||||||
padding: 0px 15px 1px 20px;
|
|
||||||
margin: 0;
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contextMenu p:hover {
|
|
||||||
background-color: #0cf;
|
|
||||||
color: #ffffff;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contextMenu .disabled {
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
.contextMenu .disabled:hover {
|
|
||||||
color: #999;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.contextMenu li.separator {
|
|
||||||
border-top: solid 1px #e3e3e3;
|
|
||||||
padding-top: 5px;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
.ancestors {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.ancestors .navleft {
|
|
||||||
width: auto;
|
|
||||||
height: 100%;
|
|
||||||
/* border-left: solid 1px rgb(239, 239, 245); */
|
|
||||||
}
|
|
||||||
.ancestors .warp {
|
|
||||||
overflow: auto;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.ancestors .navright {
|
|
||||||
width: auto;
|
|
||||||
height: 100%;
|
|
||||||
/*background-color: aqua;*/
|
|
||||||
}
|
|
||||||
.navtop {
|
|
||||||
width: 100%;
|
|
||||||
height: 60px;
|
|
||||||
border-bottom: solid 1px rgb(239, 239, 245);
|
|
||||||
}
|
|
||||||
.navbuttom {
|
|
||||||
width: 100%;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
.svg-selected {
|
|
||||||
outline: 1px solid #0cf;
|
|
||||||
}
|
|
||||||
.warp::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
<template>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
style="background-color:#000000;"
|
|
||||||
width="100%"
|
|
||||||
height="100%"
|
|
||||||
:viewBox="`0 0 ${props.svgCanvas.width} ${props.svgCanvas.height}`"
|
|
||||||
>
|
|
||||||
<g
|
|
||||||
v-for="(item,index) in props.svg_data"
|
|
||||||
:key="item.id"
|
|
||||||
:id="item.id"
|
|
||||||
:transform="'translate(' + (item.svgPositionX) + ',' + (item.svgPositionY) + ')' + 'rotate(' + item.angle + ')' + 'scale(' + item.size + ')'"
|
|
||||||
>
|
|
||||||
<svg-dynamic
|
|
||||||
:component_type="item.type"
|
|
||||||
:component_template="props.component_infos.filter(f => f.type == item.type)[0].template"
|
|
||||||
:component_props="props.component_infos.filter(f => f.type == item.type)[0].props"
|
|
||||||
:component_attr="item"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import SvgDynamic from "./SvgDynamic.vue";
|
|
||||||
import { ISvgDataLists, ISvgCanvas, IComponentInfo } from "../Model";
|
|
||||||
import "../assets/css/svgAnimation/index.css";
|
|
||||||
const props = defineProps({
|
|
||||||
//组件的json格式
|
|
||||||
component_infos: {
|
|
||||||
type: Array as () => Array<IComponentInfo>,
|
|
||||||
required: true,
|
|
||||||
default: []
|
|
||||||
},
|
|
||||||
//要渲染的数据
|
|
||||||
svg_data: {
|
|
||||||
type: Array as () => Array<ISvgDataLists>,
|
|
||||||
required: true,
|
|
||||||
default: []
|
|
||||||
},
|
|
||||||
svgCanvas: {
|
|
||||||
type: Object as () => ISvgCanvas,
|
|
||||||
default: { width: 1520, height: 720 }
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,68 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="padding: 10px;display: flex;">
|
|
||||||
<img title="基于vue3+ts+svg的web组件编辑器" class="logoimg" src="../assets/logo.png" />
|
|
||||||
<span class="logotext">vue-webtopo-svgeditor</span>
|
|
||||||
<div style="display: flex;width: 100%;flex-direction: row-reverse;">
|
|
||||||
<a href="https://www.cnblogs.com/Hero-/p/14784744.html" target="_blank" class="a-link">
|
|
||||||
<n-button text>帮助</n-button>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/yaolunmao/vue-webtopo-svgeditor" target="_blank" class="a-link">
|
|
||||||
<n-button text>Github</n-button>
|
|
||||||
</a>
|
|
||||||
<n-popover trigger="hover">
|
|
||||||
<template #trigger>
|
|
||||||
<n-button text class="button-class">v3.0</n-button>
|
|
||||||
</template>
|
|
||||||
<div>这个点了没什么用 不过会变色</div>
|
|
||||||
<div>说实话 这个版本号就是瞎写的 一点都不严谨</div>
|
|
||||||
</n-popover>
|
|
||||||
<n-button type="primary" class="button-class" @click="() => { emit('saveSvgInfo') }">保存</n-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { NButton, useMessage, NPopover } from "naive-ui";
|
|
||||||
const message = useMessage();
|
|
||||||
const emit = defineEmits(['saveSvgInfo']);
|
|
||||||
defineExpose({
|
|
||||||
/**
|
|
||||||
* @description: 保存svg结果 父组件调用用
|
|
||||||
* @param {*}type 0失败 1成功 2警告
|
|
||||||
* @return {*}
|
|
||||||
*/
|
|
||||||
saveSvgInfoRes(type: any) {
|
|
||||||
if (type?.code == 0) {
|
|
||||||
message.error(type?.msg);
|
|
||||||
}
|
|
||||||
else if (type?.code == 1) {
|
|
||||||
message.success(type?.msg);
|
|
||||||
}
|
|
||||||
else if (type?.code == 2) {
|
|
||||||
message.warning(type?.msg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.logoimg {
|
|
||||||
height: 2rem;
|
|
||||||
min-width: 2rem;
|
|
||||||
margin-right: 0.1rem;
|
|
||||||
margin-top: 0.2rem;
|
|
||||||
}
|
|
||||||
.logotext {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #2c3e50;
|
|
||||||
margin-top: 0.7rem;
|
|
||||||
width: 30%;
|
|
||||||
}
|
|
||||||
.a-link {
|
|
||||||
text-decoration: none;
|
|
||||||
margin-right: 1.5rem;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
.button-class {
|
|
||||||
margin-right: 1.5rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<svg aria-hidden="true">
|
||||||
|
<use :xlink:href="symbolId" v-bind="props.props" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue';
|
||||||
|
const props = defineProps({
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const symbolId = computed(() => `#svg-${props.name}`);
|
||||||
|
</script>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<!-- eslint-disable vue/html-indent -->
|
||||||
|
<template>
|
||||||
|
<div class="flex justify-center items-center pt-2">
|
||||||
|
<div> Copyright (c) 2022</div>
|
||||||
|
<a class="mx-2 hover:text-blue-400" href="https://github.com/yaolunmao" target="_blank"
|
||||||
|
>咬轮猫</a
|
||||||
|
></div
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup></script>
|
||||||
@ -0,0 +1,874 @@
|
|||||||
|
<!-- eslint-disable vue/html-indent -->
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="canvas"
|
||||||
|
tabindex="0"
|
||||||
|
ref="canvasRef"
|
||||||
|
@drop="dropEvent"
|
||||||
|
@dragenter="dragEnterEvent"
|
||||||
|
@dragover="dragOverEvent"
|
||||||
|
@mousedown="onCanvasMouseDown"
|
||||||
|
@mousemove="onCanvasMouseMove"
|
||||||
|
@mouseup="onCanvasMouseUp"
|
||||||
|
@contextmenu="onCanvasContextMenuEvent"
|
||||||
|
@keydown="onHandleKeyDown"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
:style="{ backgroundColor: configStore.svg.background_color }"
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<pattern id="pattern_grid" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10">
|
||||||
|
<rect width="1" height="1" rx="1" ry="1" fill="#aaaaaa" />
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect v-if="configStore.svg.grid" width="100%" height="100%" fill="url(#pattern_grid)" />
|
||||||
|
<g
|
||||||
|
:transform="`translate(${
|
||||||
|
configStore.svg.position_center.x + svgEditLayoutStore.center_offset.x
|
||||||
|
},${
|
||||||
|
configStore.svg.position_center.y + svgEditLayoutStore.center_offset.y
|
||||||
|
})rotate(${0})scale(${configStore.svg.scale})`"
|
||||||
|
>
|
||||||
|
<g
|
||||||
|
v-for="(item, index) in globalStore.done_json"
|
||||||
|
:key="item.id"
|
||||||
|
:transform="`translate(${item.x},${item.y})rotate(0)scale(1)`"
|
||||||
|
v-show="item.display"
|
||||||
|
>
|
||||||
|
<g
|
||||||
|
:transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
|
||||||
|
item.actual_bound.y + item.actual_bound.height / 2
|
||||||
|
})rotate(${item.rotate}) scale(1) translate(${-(
|
||||||
|
item.actual_bound.x +
|
||||||
|
item.actual_bound.width / 2
|
||||||
|
)},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
|
||||||
|
@mousedown="onSvgMouseDown(item, index, $event)"
|
||||||
|
@mouseenter="onSvgMouseEnter(item, index, $event)"
|
||||||
|
@mouseleave="onSvgMouseLeave(item, index, $event)"
|
||||||
|
@contextmenu="onSvgContextMenuEvent(item, index, $event)"
|
||||||
|
>
|
||||||
|
<connection-line
|
||||||
|
v-if="item.type === EDoneJsonType.ConnectionLine"
|
||||||
|
:item-info="item"
|
||||||
|
:point-visiable="
|
||||||
|
visiable_info.connection_line && visiable_info.select_item.info?.id == item.id
|
||||||
|
"
|
||||||
|
></connection-line>
|
||||||
|
<use
|
||||||
|
v-else-if="item.type === EDoneJsonType.File"
|
||||||
|
:xlink:href="`#svg-${item.name}`"
|
||||||
|
v-bind="prosToVBind(item)"
|
||||||
|
width="100"
|
||||||
|
height="100"
|
||||||
|
:id="item.id"
|
||||||
|
:transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
|
||||||
|
item.actual_bound.y + item.actual_bound.height / 2
|
||||||
|
}) scale(${item.scale_x},${item.scale_y}) translate(${-(
|
||||||
|
item.actual_bound.x +
|
||||||
|
item.actual_bound.width / 2
|
||||||
|
)},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
|
||||||
|
></use>
|
||||||
|
<component
|
||||||
|
v-else-if="item.type === EDoneJsonType.CustomSvg"
|
||||||
|
:is="item.tag"
|
||||||
|
v-bind="prosToVBind(item)"
|
||||||
|
width="100"
|
||||||
|
height="100"
|
||||||
|
:id="item.id"
|
||||||
|
:transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
|
||||||
|
item.actual_bound.y + item.actual_bound.height / 2
|
||||||
|
}) scale(${item.scale_x},${item.scale_y}) translate(${-(
|
||||||
|
item.actual_bound.x +
|
||||||
|
item.actual_bound.width / 2
|
||||||
|
)},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
|
||||||
|
></component>
|
||||||
|
<foreignObject
|
||||||
|
v-else-if="item.type === EDoneJsonType.Vue"
|
||||||
|
v-bind="getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)"
|
||||||
|
:id="`foreign-object${item.id}`"
|
||||||
|
>
|
||||||
|
<component
|
||||||
|
:is="item.tag"
|
||||||
|
v-bind="prosToVBind(item)"
|
||||||
|
:id="item.id"
|
||||||
|
:transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
|
||||||
|
item.actual_bound.y + item.actual_bound.height / 2
|
||||||
|
}) scale(${item.scale_x},${item.scale_y}) translate(${-(
|
||||||
|
item.actual_bound.x +
|
||||||
|
item.actual_bound.width / 2
|
||||||
|
)},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
|
||||||
|
>{{ item.tag_slot }}</component
|
||||||
|
>
|
||||||
|
</foreignObject>
|
||||||
|
|
||||||
|
<line
|
||||||
|
v-else-if="item.type === EDoneJsonType.StraightLine"
|
||||||
|
:id="item.id"
|
||||||
|
:x1="item.props.start_x.val"
|
||||||
|
:y1="item.props.start_y.val"
|
||||||
|
:x2="item.props.end_x.val"
|
||||||
|
:y2="item.props.end_y.val"
|
||||||
|
fill="#FF0000"
|
||||||
|
stroke="#FF0000"
|
||||||
|
stroke-width="2"
|
||||||
|
></line>
|
||||||
|
<rect
|
||||||
|
v-if="item.config.actual_rect"
|
||||||
|
:id="`rect${item.id}`"
|
||||||
|
fill="black"
|
||||||
|
fill-opacity="0"
|
||||||
|
v-bind="getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)"
|
||||||
|
style="stroke: none; stroke-width: 2; stroke-miterlimit: 10"
|
||||||
|
:class="`${
|
||||||
|
globalStore.intention == EGlobalStoreIntention.None ||
|
||||||
|
globalStore.intention == EGlobalStoreIntention.Select
|
||||||
|
? 'svg-item-none'
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
${
|
||||||
|
globalStore.intention == EGlobalStoreIntention.Move &&
|
||||||
|
globalStore.handle_svg_info?.info.id == item.id
|
||||||
|
? 'svg-item-move'
|
||||||
|
: ''
|
||||||
|
} ${
|
||||||
|
globalStore.intention == EGlobalStoreIntention.Select &&
|
||||||
|
globalStore.handle_svg_info?.info.id == item.id
|
||||||
|
? 'svg-item-select'
|
||||||
|
: ''
|
||||||
|
}`"
|
||||||
|
></rect>
|
||||||
|
<handle-panel
|
||||||
|
v-if="
|
||||||
|
globalStore.handle_svg_info?.info.id === item.id &&
|
||||||
|
visiable_info.handle_panel &&
|
||||||
|
item.config.can_zoom
|
||||||
|
"
|
||||||
|
:item-info="item"
|
||||||
|
></handle-panel>
|
||||||
|
<connection-panel
|
||||||
|
v-if="
|
||||||
|
visiable_info.select_item.info?.id == item.id &&
|
||||||
|
visiable_info.connection_panel &&
|
||||||
|
item.config.have_anchor &&
|
||||||
|
(globalStore.intention === EGlobalStoreIntention.Select
|
||||||
|
? item.id !== globalStore.handle_svg_info?.info.id
|
||||||
|
? true
|
||||||
|
: false
|
||||||
|
: true)
|
||||||
|
"
|
||||||
|
:item-info="item"
|
||||||
|
></connection-panel>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<!-- 右键菜单 -->
|
||||||
|
<ul ref="contextMenuRef" class="contextMenu" v-show="contextMenuStore.display">
|
||||||
|
<li
|
||||||
|
v-for="(item, key) in contextMenuStore.info"
|
||||||
|
:key="item.title"
|
||||||
|
@click="contextMenuStore.onContextMenuClick(key)"
|
||||||
|
>
|
||||||
|
<p :class="item.enable ? '' : 'disabled'">
|
||||||
|
{{ item.title }}
|
||||||
|
<span class="shortcut">{{ item.hot_key }}</span>
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue';
|
||||||
|
import { useConfigStore } from '@/store/config';
|
||||||
|
import { useGlobalStore } from '@/store/global';
|
||||||
|
import {
|
||||||
|
EGlobalStoreIntention,
|
||||||
|
EMouseInfoState,
|
||||||
|
EScaleInfoType,
|
||||||
|
IDoneJson
|
||||||
|
} from '@/store/global/types';
|
||||||
|
import { useSvgEditLayoutStore } from '@/store/svgedit-layout';
|
||||||
|
import {
|
||||||
|
getCenterPoint,
|
||||||
|
randomString,
|
||||||
|
getSvgNowPosition,
|
||||||
|
setSvgActualInfo,
|
||||||
|
prosToVBind,
|
||||||
|
objectDeepClone
|
||||||
|
} from '@/utils';
|
||||||
|
import {
|
||||||
|
calculateBottom,
|
||||||
|
calculateLeft,
|
||||||
|
calculateLeftBottom,
|
||||||
|
calculateLeftTop,
|
||||||
|
calculateRight,
|
||||||
|
calculateRightBottom,
|
||||||
|
calculateRightTop,
|
||||||
|
calculateTop
|
||||||
|
} from '@/utils/scale-core';
|
||||||
|
import HandlePanel from '@/components/webtopo-svg-edit/components/handle-panel/index.vue';
|
||||||
|
import ConnectionPanel from '@/components/webtopo-svg-edit/components/connection-panel/index.vue';
|
||||||
|
import { EDoneJsonType, IConfigItem } from '@/config-center/types';
|
||||||
|
import ConnectionLine from '@/components/webtopo-svg-edit/components/connection-line/index.vue';
|
||||||
|
import { IVisiableInfo } from './types';
|
||||||
|
import { ComponentImport } from '@/config-center';
|
||||||
|
import { useContextMenuStore, useEditPrivateStore } from '@/store/system';
|
||||||
|
import { EContextMenuInfoType } from '@/store/system/types';
|
||||||
|
import { useHistoryRecord } from '@/hooks';
|
||||||
|
// import HandlePanel from '../handle-panel/index.vue';
|
||||||
|
//注册所有组件
|
||||||
|
const instance = getCurrentInstance();
|
||||||
|
Object.keys(ComponentImport).forEach((key) => {
|
||||||
|
if (!Object.keys(instance?.appContext?.components as any).includes(key)) {
|
||||||
|
instance?.appContext.app.component(key, ComponentImport[key]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const globalStore = useGlobalStore();
|
||||||
|
const configStore = useConfigStore();
|
||||||
|
const svgEditLayoutStore = useSvgEditLayoutStore();
|
||||||
|
const editPrivateStore = useEditPrivateStore();
|
||||||
|
const contextMenuStore = useContextMenuStore();
|
||||||
|
const contextMenuRef = ref<HTMLElement>();
|
||||||
|
const canvasRef = ref<HTMLElement>();
|
||||||
|
const cursor_style = computed(() =>
|
||||||
|
globalStore.intention == EGlobalStoreIntention.MoveCanvas
|
||||||
|
? 'grab'
|
||||||
|
: globalStore.intention == EGlobalStoreIntention.Rotate
|
||||||
|
? "url('/src/assets/icons/rotate.svg') 12 12, auto"
|
||||||
|
: 'default'
|
||||||
|
);
|
||||||
|
const visiable_info: IVisiableInfo = reactive({
|
||||||
|
handle_panel: computed(
|
||||||
|
() =>
|
||||||
|
globalStore.intention === EGlobalStoreIntention.Select ||
|
||||||
|
globalStore.intention === EGlobalStoreIntention.Zoom ||
|
||||||
|
globalStore.intention === EGlobalStoreIntention.Rotate
|
||||||
|
),
|
||||||
|
connection_panel: false,
|
||||||
|
connection_line: false,
|
||||||
|
select_item: {
|
||||||
|
info: null,
|
||||||
|
index: -1
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const dropEvent = (e: DragEvent) => {
|
||||||
|
if (globalStore.intention == EGlobalStoreIntention.None) {
|
||||||
|
return;
|
||||||
|
} else if (globalStore.intention == EGlobalStoreIntention.Create) {
|
||||||
|
if (!globalStore.create_svg_info) {
|
||||||
|
console.error('要创建的数据获取失败');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const done_item_json: IDoneJson = {
|
||||||
|
id: globalStore.create_svg_info.name + randomString(),
|
||||||
|
x: e.clientX - svgEditLayoutStore.center_offset.x,
|
||||||
|
y: e.clientY - svgEditLayoutStore.center_offset.y,
|
||||||
|
client: {
|
||||||
|
x: e.clientX - svgEditLayoutStore.center_offset.x,
|
||||||
|
y: e.clientY - svgEditLayoutStore.center_offset.y
|
||||||
|
},
|
||||||
|
scale_x: 1,
|
||||||
|
scale_y: 1,
|
||||||
|
rotate: 0,
|
||||||
|
actual_bound: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
width: 0,
|
||||||
|
height: 0
|
||||||
|
},
|
||||||
|
point_coordinate: {
|
||||||
|
tl: {
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
},
|
||||||
|
tc: {
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
},
|
||||||
|
tr: {
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
},
|
||||||
|
l: {
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
},
|
||||||
|
r: {
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
},
|
||||||
|
bl: {
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
},
|
||||||
|
bc: {
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
},
|
||||||
|
br: {
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
...objectDeepClone<IConfigItem>(globalStore.create_svg_info)
|
||||||
|
};
|
||||||
|
globalStore.setHandleSvgInfo(done_item_json, globalStore.done_json.length);
|
||||||
|
globalStore.setDoneJson(done_item_json);
|
||||||
|
globalStore.intention = EGlobalStoreIntention.None;
|
||||||
|
}
|
||||||
|
canvasRef.value?.focus();
|
||||||
|
};
|
||||||
|
const dragEnterEvent = (e: DragEvent) => {
|
||||||
|
//dragenter和dragover一定要阻止浏览器默认行为 不然不会触发drop
|
||||||
|
e.preventDefault();
|
||||||
|
};
|
||||||
|
const dragOverEvent = (e: DragEvent) => {
|
||||||
|
//dragenter和dragover一定要阻止浏览器默认行为 不然不会触发drop
|
||||||
|
e.preventDefault();
|
||||||
|
};
|
||||||
|
const onSvgMouseDown = (select_item: IDoneJson, index: number, e: MouseEvent) => {
|
||||||
|
canvasRef.value?.focus();
|
||||||
|
if (globalStore.intention === EGlobalStoreIntention.Connection) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
//鼠标在画布上的组件按下记录选中的组件信息和鼠标位置信息等
|
||||||
|
globalStore.intention = EGlobalStoreIntention.Select;
|
||||||
|
globalStore.setHandleSvgInfo(select_item, index);
|
||||||
|
globalStore.setMouseInfo({
|
||||||
|
state: EMouseInfoState.Down,
|
||||||
|
position_x: e.clientX,
|
||||||
|
position_y: e.clientY,
|
||||||
|
now_position_x: select_item.x,
|
||||||
|
now_position_y: select_item.y,
|
||||||
|
new_position_x: select_item.x,
|
||||||
|
new_position_y: select_item.y
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const onSvgMouseEnter = (select_item: IDoneJson, index: number, e: MouseEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
visiable_info.connection_panel = true;
|
||||||
|
visiable_info.connection_line = true;
|
||||||
|
if (
|
||||||
|
(globalStore.intention === EGlobalStoreIntention.Connection ||
|
||||||
|
globalStore.intention === EGlobalStoreIntention.SetConnectionLineNode) &&
|
||||||
|
select_item.type === EDoneJsonType.ConnectionLine
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
visiable_info.select_item.info = select_item;
|
||||||
|
visiable_info.select_item.index = index;
|
||||||
|
};
|
||||||
|
const onSvgMouseLeave = (select_item: IDoneJson, index: number, e: MouseEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
if (
|
||||||
|
(globalStore.intention === EGlobalStoreIntention.Connection ||
|
||||||
|
globalStore.intention === EGlobalStoreIntention.SetConnectionLineNode) &&
|
||||||
|
select_item.type === EDoneJsonType.ConnectionLine
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
visiable_info.connection_panel = false;
|
||||||
|
visiable_info.connection_line = false;
|
||||||
|
visiable_info.select_item.info = null;
|
||||||
|
visiable_info.select_item.index = -1;
|
||||||
|
};
|
||||||
|
const onCanvasMouseMove = (e: MouseEvent) => {
|
||||||
|
//如果鼠标不是按下状态 连线除外
|
||||||
|
if (
|
||||||
|
globalStore.mouse_info.state != EMouseInfoState.Down &&
|
||||||
|
globalStore.intention !== EGlobalStoreIntention.Connection
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const { clientX, clientY } = e;
|
||||||
|
globalStore.mouse_info.new_position_x =
|
||||||
|
globalStore.mouse_info.now_position_x + clientX - globalStore.mouse_info.position_x;
|
||||||
|
globalStore.mouse_info.new_position_y =
|
||||||
|
globalStore.mouse_info.now_position_y + clientY - globalStore.mouse_info.position_y;
|
||||||
|
if (
|
||||||
|
globalStore.handle_svg_info?.info &&
|
||||||
|
(globalStore.intention == EGlobalStoreIntention.Select ||
|
||||||
|
globalStore.intention == EGlobalStoreIntention.Move)
|
||||||
|
) {
|
||||||
|
//有选中组件 移动组件
|
||||||
|
globalStore.handle_svg_info.info.x = globalStore.mouse_info.new_position_x;
|
||||||
|
globalStore.handle_svg_info.info.y = globalStore.mouse_info.new_position_y;
|
||||||
|
globalStore.handle_svg_info.info.client = {
|
||||||
|
x: globalStore.mouse_info.new_position_x,
|
||||||
|
y: globalStore.mouse_info.new_position_y
|
||||||
|
};
|
||||||
|
globalStore.intention = EGlobalStoreIntention.Move;
|
||||||
|
} else if (globalStore.intention == EGlobalStoreIntention.MoveCanvas) {
|
||||||
|
//移动画布
|
||||||
|
svgEditLayoutStore.center_offset.x = globalStore.mouse_info.new_position_x;
|
||||||
|
svgEditLayoutStore.center_offset.y = globalStore.mouse_info.new_position_y;
|
||||||
|
} else if (globalStore.intention === EGlobalStoreIntention.Zoom) {
|
||||||
|
if (!globalStore.handle_svg_info) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
//当前鼠标坐标
|
||||||
|
const curPositon = {
|
||||||
|
x: e.clientX - svgEditLayoutStore.center_offset.x,
|
||||||
|
y: e.clientY - svgEditLayoutStore.center_offset.y
|
||||||
|
};
|
||||||
|
let new_length = {
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
is_old_width: false,
|
||||||
|
is_old_height: false
|
||||||
|
};
|
||||||
|
if (globalStore.scale_info.type === EScaleInfoType.TopLeft) {
|
||||||
|
new_length = calculateLeftTop(
|
||||||
|
curPositon,
|
||||||
|
globalStore.scale_info.symmetric_point,
|
||||||
|
globalStore.handle_svg_info.info.rotate
|
||||||
|
);
|
||||||
|
} else if (globalStore.scale_info.type === EScaleInfoType.TopRight) {
|
||||||
|
new_length = calculateRightTop(
|
||||||
|
curPositon,
|
||||||
|
globalStore.scale_info.symmetric_point,
|
||||||
|
globalStore.handle_svg_info.info.rotate
|
||||||
|
);
|
||||||
|
} else if (globalStore.scale_info.type === EScaleInfoType.BottomRight) {
|
||||||
|
new_length = calculateRightBottom(
|
||||||
|
curPositon,
|
||||||
|
globalStore.scale_info.symmetric_point,
|
||||||
|
globalStore.handle_svg_info.info.rotate
|
||||||
|
);
|
||||||
|
} else if (globalStore.scale_info.type === EScaleInfoType.BottomLeft) {
|
||||||
|
new_length = calculateLeftBottom(
|
||||||
|
curPositon,
|
||||||
|
globalStore.scale_info.symmetric_point,
|
||||||
|
globalStore.handle_svg_info.info.rotate
|
||||||
|
);
|
||||||
|
} else if (globalStore.scale_info.type === EScaleInfoType.TopCenter) {
|
||||||
|
new_length = calculateTop(
|
||||||
|
curPositon,
|
||||||
|
globalStore.scale_info.symmetric_point,
|
||||||
|
globalStore.handle_svg_info.info.rotate,
|
||||||
|
globalStore.handle_svg_info.info.client
|
||||||
|
);
|
||||||
|
} else if (globalStore.scale_info.type === EScaleInfoType.Right) {
|
||||||
|
new_length = calculateRight(
|
||||||
|
curPositon,
|
||||||
|
globalStore.scale_info.symmetric_point,
|
||||||
|
globalStore.handle_svg_info.info.rotate,
|
||||||
|
globalStore.handle_svg_info.info.client
|
||||||
|
);
|
||||||
|
} else if (globalStore.scale_info.type === EScaleInfoType.BottomCenter) {
|
||||||
|
new_length = calculateBottom(
|
||||||
|
curPositon,
|
||||||
|
globalStore.scale_info.symmetric_point,
|
||||||
|
globalStore.handle_svg_info.info.rotate,
|
||||||
|
globalStore.handle_svg_info.info.client
|
||||||
|
);
|
||||||
|
} else if (globalStore.scale_info.type === EScaleInfoType.Left) {
|
||||||
|
new_length = calculateLeft(
|
||||||
|
curPositon,
|
||||||
|
globalStore.scale_info.symmetric_point,
|
||||||
|
globalStore.handle_svg_info.info.rotate,
|
||||||
|
globalStore.handle_svg_info.info.client
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
//缩放
|
||||||
|
// const move_length_x =
|
||||||
|
// globalStore.scale_info.type === EScaleInfoType.TopLeft ||
|
||||||
|
// globalStore.scale_info.type === EScaleInfoType.Left ||
|
||||||
|
// globalStore.scale_info.type === EScaleInfoType.BottomLeft
|
||||||
|
// ? -(newTopLeftPoint.x - globalStore.mouse_info.now_position_x)
|
||||||
|
// : globalStore.scale_info.type === EScaleInfoType.TopRight ||
|
||||||
|
// globalStore.scale_info.type === EScaleInfoType.Right ||
|
||||||
|
// globalStore.scale_info.type === EScaleInfoType.BottomRight
|
||||||
|
// ? globalStore.mouse_info.now_position_x - newTopLeftPoint.x
|
||||||
|
// : 0;
|
||||||
|
// const move_length_y =
|
||||||
|
// globalStore.scale_info.type === EScaleInfoType.TopLeft ||
|
||||||
|
// globalStore.scale_info.type === EScaleInfoType.TopCenter ||
|
||||||
|
// globalStore.scale_info.type === EScaleInfoType.TopRight
|
||||||
|
// ? newTopLeftPoint.y - globalStore.mouse_info.now_position_y
|
||||||
|
// : globalStore.scale_info.type === EScaleInfoType.BottomLeft ||
|
||||||
|
// globalStore.scale_info.type === EScaleInfoType.BottomCenter ||
|
||||||
|
// globalStore.scale_info.type === EScaleInfoType.BottomRight
|
||||||
|
// ? globalStore.mouse_info.now_position_y - newTopLeftPoint.y
|
||||||
|
// : 0;
|
||||||
|
//算出缩放倍数
|
||||||
|
if (globalStore.handle_svg_info && new_length.width > 0 && new_length.height > 0) {
|
||||||
|
const scale_x = !new_length.is_old_width
|
||||||
|
? new_length.width / globalStore.handle_svg_info.info.actual_bound.width
|
||||||
|
: 1;
|
||||||
|
const scale_y = !new_length.is_old_height
|
||||||
|
? new_length.height / globalStore.handle_svg_info.info.actual_bound.height
|
||||||
|
: 1;
|
||||||
|
const newCenterPoint = getCenterPoint(curPositon, globalStore.scale_info.symmetric_point);
|
||||||
|
if (
|
||||||
|
scale_x > 0 &&
|
||||||
|
globalStore.scale_info.type !== EScaleInfoType.TopCenter &&
|
||||||
|
globalStore.scale_info.type !== EScaleInfoType.BottomCenter
|
||||||
|
) {
|
||||||
|
globalStore.handle_svg_info.info.scale_x = scale_x;
|
||||||
|
globalStore.handle_svg_info.info.x = getSvgNowPosition(
|
||||||
|
globalStore.handle_svg_info.info.client.x,
|
||||||
|
newCenterPoint.x,
|
||||||
|
globalStore.scale_info.scale_item_info.x
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
scale_y > 0 &&
|
||||||
|
globalStore.scale_info.type !== EScaleInfoType.Left &&
|
||||||
|
globalStore.scale_info.type !== EScaleInfoType.Right
|
||||||
|
) {
|
||||||
|
globalStore.handle_svg_info.info.scale_y = scale_y;
|
||||||
|
globalStore.handle_svg_info.info.y = getSvgNowPosition(
|
||||||
|
globalStore.handle_svg_info.info.client.y,
|
||||||
|
newCenterPoint.y,
|
||||||
|
globalStore.scale_info.scale_item_info.y
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (globalStore.intention === EGlobalStoreIntention.Rotate) {
|
||||||
|
if (!globalStore.handle_svg_info) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const rotateDegreeBefore =
|
||||||
|
Math.atan2(
|
||||||
|
globalStore.mouse_info.position_y - globalStore.handle_svg_info.info.client.y,
|
||||||
|
globalStore.mouse_info.position_x - globalStore.handle_svg_info.info.client.x
|
||||||
|
) /
|
||||||
|
(Math.PI / 180);
|
||||||
|
const rotateDegreeAfter =
|
||||||
|
Math.atan2(
|
||||||
|
clientY - svgEditLayoutStore.center_offset.y - globalStore.handle_svg_info.info.client.y,
|
||||||
|
clientX - svgEditLayoutStore.center_offset.x - globalStore.handle_svg_info.info.client.x
|
||||||
|
) /
|
||||||
|
(Math.PI / 180);
|
||||||
|
globalStore.handle_svg_info.info.rotate =
|
||||||
|
globalStore.rotate_info.angle + rotateDegreeAfter - rotateDegreeBefore;
|
||||||
|
} else if (
|
||||||
|
globalStore.intention === EGlobalStoreIntention.Connection &&
|
||||||
|
globalStore.handle_svg_info
|
||||||
|
) {
|
||||||
|
globalStore.handle_svg_info.info.props.point_position.val[
|
||||||
|
globalStore.handle_svg_info?.info.props.point_position.val.length - 1
|
||||||
|
] = {
|
||||||
|
x: getSvgNowPosition(
|
||||||
|
globalStore.mouse_info.position_x,
|
||||||
|
clientX,
|
||||||
|
globalStore.handle_svg_info?.info.props.point_position.val[0].x
|
||||||
|
),
|
||||||
|
y: getSvgNowPosition(
|
||||||
|
globalStore.mouse_info.position_y,
|
||||||
|
clientY,
|
||||||
|
globalStore.handle_svg_info?.info.props.point_position.val[0].y
|
||||||
|
)
|
||||||
|
};
|
||||||
|
// console.log('连线', start_x, start_y, end_x, end_y, clientX, clientY);
|
||||||
|
} else if (
|
||||||
|
globalStore.intention === EGlobalStoreIntention.SetConnectionLineNode &&
|
||||||
|
globalStore.handle_svg_info
|
||||||
|
) {
|
||||||
|
globalStore.handle_svg_info.info.props.point_position.val[
|
||||||
|
globalStore.connection_line_node_info.point_index
|
||||||
|
] = {
|
||||||
|
x: getSvgNowPosition(
|
||||||
|
globalStore.mouse_info.position_x,
|
||||||
|
clientX,
|
||||||
|
globalStore.connection_line_node_info.init_pos.x
|
||||||
|
),
|
||||||
|
y: getSvgNowPosition(
|
||||||
|
globalStore.mouse_info.position_y,
|
||||||
|
clientY,
|
||||||
|
globalStore.connection_line_node_info.init_pos.y
|
||||||
|
)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const onCanvasMouseUp = () => {
|
||||||
|
//如果鼠标不是按下状态
|
||||||
|
if (globalStore.mouse_info.state != EMouseInfoState.Down) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (globalStore.handle_svg_info?.info && globalStore.intention == EGlobalStoreIntention.Move) {
|
||||||
|
globalStore.done_json[globalStore.handle_svg_info.index].x =
|
||||||
|
globalStore.mouse_info.new_position_x;
|
||||||
|
globalStore.done_json[globalStore.handle_svg_info.index].y =
|
||||||
|
globalStore.mouse_info.new_position_y;
|
||||||
|
// globalStore.setDoneJson(globalStore.done_json);
|
||||||
|
setSvgActualInfo(globalStore.done_json[globalStore.handle_svg_info.index]);
|
||||||
|
globalStore.intention = EGlobalStoreIntention.None;
|
||||||
|
//记录历史记录
|
||||||
|
globalStore.setDoneJson(globalStore.done_json);
|
||||||
|
// globalStore.setHandleSvgInfo(undefined, 0);
|
||||||
|
} else if (
|
||||||
|
globalStore.handle_svg_info?.info &&
|
||||||
|
globalStore.intention == EGlobalStoreIntention.Zoom
|
||||||
|
) {
|
||||||
|
//缩放完成后重置中点 新版本中点就是组件坐标
|
||||||
|
// const newCenterPoint = getCenterPoint(
|
||||||
|
// { x: e.clientX, y: e.clientY },
|
||||||
|
// globalStore.scale_info.symmetric_point
|
||||||
|
// );
|
||||||
|
globalStore.handle_svg_info.info.client = {
|
||||||
|
x: globalStore.handle_svg_info.info.x,
|
||||||
|
y: globalStore.handle_svg_info.info.y
|
||||||
|
};
|
||||||
|
globalStore.intention = EGlobalStoreIntention.None;
|
||||||
|
setSvgActualInfo(globalStore.done_json[globalStore.handle_svg_info.index]);
|
||||||
|
//记录历史记录
|
||||||
|
globalStore.setDoneJson(globalStore.done_json);
|
||||||
|
} else if (
|
||||||
|
globalStore.intention === EGlobalStoreIntention.Rotate &&
|
||||||
|
globalStore.handle_svg_info?.info
|
||||||
|
) {
|
||||||
|
setSvgActualInfo(globalStore.done_json[globalStore.handle_svg_info.index]);
|
||||||
|
//记录历史记录
|
||||||
|
globalStore.setDoneJson(globalStore.done_json);
|
||||||
|
} else if (globalStore.intention === EGlobalStoreIntention.Connection) {
|
||||||
|
return;
|
||||||
|
} else if (globalStore.intention != EGlobalStoreIntention.Select) {
|
||||||
|
globalStore.intention = EGlobalStoreIntention.None;
|
||||||
|
}
|
||||||
|
globalStore.setMouseInfo({
|
||||||
|
state: EMouseInfoState.Up,
|
||||||
|
position_x: 0,
|
||||||
|
position_y: 0,
|
||||||
|
now_position_x: 0,
|
||||||
|
now_position_y: 0,
|
||||||
|
new_position_x: 0,
|
||||||
|
new_position_y: 0
|
||||||
|
});
|
||||||
|
contextMenuStore.display = false;
|
||||||
|
};
|
||||||
|
const onCanvasMouseDown = (e: MouseEvent) => {
|
||||||
|
const { clientX, clientY } = e;
|
||||||
|
if (globalStore.intention === EGlobalStoreIntention.Connection && globalStore.handle_svg_info) {
|
||||||
|
if (e.button === 0) {
|
||||||
|
//鼠标左键创建新线段
|
||||||
|
globalStore.handle_svg_info.info.props.point_position.val.push({
|
||||||
|
x: getSvgNowPosition(
|
||||||
|
globalStore.mouse_info.position_x,
|
||||||
|
clientX,
|
||||||
|
globalStore.handle_svg_info?.info.props.point_position.val[0].x
|
||||||
|
),
|
||||||
|
y: getSvgNowPosition(
|
||||||
|
globalStore.mouse_info.position_y,
|
||||||
|
clientY,
|
||||||
|
globalStore.handle_svg_info?.info.props.point_position.val[0].y
|
||||||
|
)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (e.button === 2) {
|
||||||
|
//鼠标右键结束线段绘制
|
||||||
|
globalStore.intention = EGlobalStoreIntention.None;
|
||||||
|
setSvgActualInfo(globalStore.done_json[globalStore.handle_svg_info.index]);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
//点击画布 未选中组件 拖动画布
|
||||||
|
globalStore.intention = EGlobalStoreIntention.MoveCanvas;
|
||||||
|
globalStore.setMouseInfo({
|
||||||
|
state: EMouseInfoState.Down,
|
||||||
|
position_x: clientX,
|
||||||
|
position_y: clientY,
|
||||||
|
now_position_x: svgEditLayoutStore.center_offset.x,
|
||||||
|
now_position_y: svgEditLayoutStore.center_offset.y,
|
||||||
|
new_position_x: svgEditLayoutStore.center_offset.x,
|
||||||
|
new_position_y: svgEditLayoutStore.center_offset.y
|
||||||
|
});
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* 鼠标右键事件
|
||||||
|
* @param select_component
|
||||||
|
* @param e
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
const onCanvasContextMenuEvent = (e: MouseEvent) => {
|
||||||
|
e.preventDefault(); //禁用浏览器右键
|
||||||
|
};
|
||||||
|
const onSvgContextMenuEvent = (select_item: IDoneJson, index: number, e: MouseEvent) => {
|
||||||
|
if (globalStore.intention === EGlobalStoreIntention.Connection) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (contextMenuRef.value) {
|
||||||
|
globalStore.intention = EGlobalStoreIntention.ContextMenu;
|
||||||
|
globalStore.setHandleSvgInfo(select_item, index);
|
||||||
|
contextMenuRef.value.style.left = e.pageX + 'px';
|
||||||
|
contextMenuRef.value.style.top = e.pageY + 'px';
|
||||||
|
contextMenuStore.info.MoveUpOneLevel.enable =
|
||||||
|
contextMenuStore.info.MoveUpTopLevel.enable =
|
||||||
|
contextMenuStore.info.MoveDownOneLevel.enable =
|
||||||
|
contextMenuStore.info.MoveDownTopLevel.enable =
|
||||||
|
true;
|
||||||
|
if (index === globalStore.done_json.length - 1) {
|
||||||
|
contextMenuStore.info.MoveUpOneLevel.enable = contextMenuStore.info.MoveUpTopLevel.enable =
|
||||||
|
false;
|
||||||
|
}
|
||||||
|
if (index === 0) {
|
||||||
|
contextMenuStore.info.MoveDownOneLevel.enable =
|
||||||
|
contextMenuStore.info.MoveDownTopLevel.enable = false;
|
||||||
|
}
|
||||||
|
contextMenuStore.display = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const getActualBoundScale = (
|
||||||
|
actual_bound: {
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
},
|
||||||
|
scale_x: number,
|
||||||
|
scale_y: number
|
||||||
|
) => {
|
||||||
|
return {
|
||||||
|
x: actual_bound.x - (actual_bound.width / 2) * scale_x + actual_bound.width / 2,
|
||||||
|
y: actual_bound.y - (actual_bound.height / 2) * scale_y + actual_bound.height / 2,
|
||||||
|
width: actual_bound.width * scale_x,
|
||||||
|
height: actual_bound.height * scale_y
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const onHandleKeyDown = (e: KeyboardEvent) => {
|
||||||
|
console.log(e, 733);
|
||||||
|
e.preventDefault();
|
||||||
|
if (globalStore.handle_svg_info && !e.ctrlKey && e.key == 'ArrowUp') {
|
||||||
|
globalStore.done_json[globalStore.handle_svg_info.index].y -= 1;
|
||||||
|
useHistoryRecord(globalStore.done_json);
|
||||||
|
} else if (globalStore.handle_svg_info && !e.ctrlKey && e.key == 'ArrowDown') {
|
||||||
|
globalStore.handle_svg_info.info.y += 1;
|
||||||
|
useHistoryRecord(globalStore.done_json);
|
||||||
|
} else if (globalStore.handle_svg_info && !e.ctrlKey && e.key == 'ArrowLeft') {
|
||||||
|
globalStore.handle_svg_info.info.x -= 1;
|
||||||
|
useHistoryRecord(globalStore.done_json);
|
||||||
|
} else if (globalStore.handle_svg_info && !e.ctrlKey && e.key == 'ArrowRight') {
|
||||||
|
globalStore.handle_svg_info.info.x += 1;
|
||||||
|
useHistoryRecord(globalStore.done_json);
|
||||||
|
}
|
||||||
|
//ctrl c
|
||||||
|
else if (e.ctrlKey && e.key.toLowerCase() == 'c') {
|
||||||
|
contextMenuStore.onContextMenuClick(EContextMenuInfoType.Copy);
|
||||||
|
}
|
||||||
|
//deleted
|
||||||
|
else if (!e.ctrlKey && e.key == 'Delete') {
|
||||||
|
contextMenuStore.onContextMenuClick(EContextMenuInfoType.Delete);
|
||||||
|
}
|
||||||
|
//上移一层
|
||||||
|
else if (e.ctrlKey && e.key == 'ArrowUp') {
|
||||||
|
contextMenuStore.onContextMenuClick(EContextMenuInfoType.MoveUpOneLevel);
|
||||||
|
}
|
||||||
|
//下移一层
|
||||||
|
else if (e.ctrlKey && e.key == 'ArrowDown') {
|
||||||
|
contextMenuStore.onContextMenuClick(EContextMenuInfoType.MoveDownOneLevel);
|
||||||
|
}
|
||||||
|
//置于底层
|
||||||
|
else if (e.ctrlKey && e.key == 'ArrowLeft') {
|
||||||
|
contextMenuStore.onContextMenuClick(EContextMenuInfoType.MoveDownTopLevel);
|
||||||
|
}
|
||||||
|
//置于顶层
|
||||||
|
else if (e.ctrlKey && e.key == 'ArrowRight') {
|
||||||
|
contextMenuStore.onContextMenuClick(EContextMenuInfoType.MoveUpTopLevel);
|
||||||
|
}
|
||||||
|
//ctrl+shift+z
|
||||||
|
else if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() == 'z') {
|
||||||
|
editPrivateStore.topRedoBtnClick();
|
||||||
|
}
|
||||||
|
//ctrl+z
|
||||||
|
else if (e.ctrlKey && e.key.toLowerCase() == 'z') {
|
||||||
|
editPrivateStore.topUndoBtnClick();
|
||||||
|
}
|
||||||
|
//ctrl+delete
|
||||||
|
else if (e.ctrlKey && e.key.toLowerCase() == 'delete') {
|
||||||
|
globalStore.done_json.length <= 0 || globalStore.setDoneJson([]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
canvasRef.value?.focus();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.canvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
cursor: v-bind('cursor_style');
|
||||||
|
&:focus-visible {
|
||||||
|
outline: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-item-none {
|
||||||
|
cursor: move;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
outline: 1px solid #0cf;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-item-move {
|
||||||
|
cursor: move;
|
||||||
|
outline: 1px dashed rgb(23, 222, 30);
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-item-select {
|
||||||
|
cursor: move;
|
||||||
|
outline: 1px solid rgb(23, 222, 30);
|
||||||
|
}
|
||||||
|
.contextMenu {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 99999;
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 5px 0;
|
||||||
|
margin: 0px;
|
||||||
|
display: block;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shortcut {
|
||||||
|
width: 115px;
|
||||||
|
text-align: right;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
padding: 0px 15px 1px 20px;
|
||||||
|
margin: 0;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
p:hover {
|
||||||
|
background-color: #0cf;
|
||||||
|
color: #ffffff;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled:hover {
|
||||||
|
color: #999;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
li.separator {
|
||||||
|
border-top: solid 1px #e3e3e3;
|
||||||
|
padding-top: 5px;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
import { IDoneJson } from '@/store/global/types';
|
||||||
|
|
||||||
|
export interface IVisiableInfo {
|
||||||
|
handle_panel: boolean;
|
||||||
|
connection_panel: boolean;
|
||||||
|
connection_line: boolean;
|
||||||
|
select_item: {
|
||||||
|
info: null | IDoneJson;
|
||||||
|
index: number;
|
||||||
|
};
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue