mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-21 10:27:44 +08:00
Demo：支持单独设置每条关联线的样式
This commit is contained in:
街角小林
parent
9a36cd4478
commit
be229a0c04
194
README.md
194
README.md
@ -93,13 +93,11 @@ const mindMap = new MindMap({
|
||||
});
|
||||
```
|
||||
|
||||
即可得到一个思维导图。
|
||||
|
||||
想要实现更多功能？可以查看[开发文档](https://wanglin2.github.io/mind-map-docs/)。
|
||||
即可得到一个思维导图。想要实现更多功能？可以查看[开发文档](https://wanglin2.github.io/mind-map-docs/)。
|
||||
|
||||
# License
|
||||
|
||||
[MIT](./LICENSE)。保留`mind-map`版权声明的情况下可随意商用。如不想保留可联系作者。
|
||||
[MIT](./LICENSE)。保留`mind-map`版权声明的情况下可随意商用，如不想保留可联系作者。
|
||||
|
||||
# 微信交流群
|
||||
|
||||
@ -117,19 +115,119 @@ const mindMap = new MindMap({
|
||||
|
||||
# 请作者喝杯咖啡
|
||||
|
||||
开源不易，如果本项目有帮助到你的话，可以考虑请作者喝杯咖啡~
|
||||
开源不易，如果本项目有帮助到你的话，可以考虑请作者喝杯咖啡~你的赞助对项目的可持续发展非常重要，是作者持续维护的最大动力。
|
||||
|
||||
> 推荐使用支付宝，微信获取不到头像。转账请备注【思维导图】。
|
||||
>
|
||||
> 也可以通过购买付费插件来支持我们：[付费插件](https://wanglin2.github.io/mind-map-docs/plugins/about.html)。
|
||||
>
|
||||
> 为什么需要你的赞助：simple-mind-map 的目标是成为开源中最好的思维导图，为开发者提供一个快速实现思维导图产品的js库，为用户提供一个免费好用的思维导图软件，为了这个目标，作者已经持续开发维护了3年多，耗费了非常多的精力，随着时间的推移，simple-mind-map 已经取得了一定的成绩，相比最初，无论是功能，还是体验都已经有了翻天覆地的改变，但是收益方面却可以忽略不计，因为 simple-mind-map 是采用 MIT 许可的开源项目，永久免费，保留版权下可随意商用，这也意味着很难直接通过项目获取收益，为爱发电的激情总会慢慢消退，所以你的赞助对项目的可持续发展非常重要，是作者持续维护的最大动力。
|
||||
> 赞助等级：最强王者（￥500+）、星耀赞助（￥300+）、钻石赞助（￥150+）、黄金赞助（￥50+）、青铜赞助
|
||||
|
||||
<p>
|
||||
<img src="./web/src/assets/img/alipay.jpg" style="width: 300px" />
|
||||
<img src="./web/src/assets/img/wechat.jpg" style="width: 300px" />
|
||||
</p>
|
||||
|
||||
## 钻石赞助
|
||||
|
||||
<p>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/黄智彪@一米一栗科技.png" style="width: 50px;height: 50px;" />
|
||||
<span>黄智彪@一米一栗科技</span>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
## 黄金赞助
|
||||
|
||||
<p>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/小土渣的宇宙.jpeg" style="width: 50px;height: 50px;" />
|
||||
<span>小土渣的宇宙</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/Chris.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>Chris</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/仓鼠.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>仓鼠</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/风格.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>风格</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
|
||||
<span>LiuJL</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/Kyle.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>Kyle</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/秀树因馨雨.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>秀树因馨雨</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
|
||||
<span>黄泳</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/ccccs.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>ccccs</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/炫.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>炫</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
|
||||
<span>晏江</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/梁辉.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>梁辉</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/千帆.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>千帆</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/布林.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>布林</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/达仁科技.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>达仁科技</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/沐风牧草.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>沐风牧草</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/俊奇.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>俊奇</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/庆国.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>庆国</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
|
||||
<span>Matt</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/雨馨.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>雨馨</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/峰.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>峰</span>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
## 青铜赞助
|
||||
|
||||
<p>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/Think.jpg" style="width: 50px;height: 50px;" />
|
||||
@ -139,10 +237,6 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/志斌.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>志斌</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/小土渣的宇宙.jpeg" style="width: 50px;height: 50px;" />
|
||||
<span>小土渣的宇宙</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/qp.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>qp</span>
|
||||
@ -159,22 +253,10 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/suka.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>suka</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/Chris.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>Chris</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/水车.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>水车</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/仓鼠.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>仓鼠</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/千帆.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>千帆</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/才镇.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>才镇</span>
|
||||
@ -191,10 +273,6 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
|
||||
<span>Luke</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/布林.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>布林</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/南风.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>南风</span>
|
||||
@ -211,10 +289,6 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/敏.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>敏</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/沐风牧草.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>沐风牧草</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/有希.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>有希</span>
|
||||
@ -223,10 +297,6 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/樊笼.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>樊笼</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/达仁科技.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>达仁科技</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/小逗比.png" style="width: 50px;height: 50px;" />
|
||||
<span>小逗比</span>
|
||||
@ -303,10 +373,6 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/旭东.png" style="width: 50px;height: 50px;" />
|
||||
<span>旭东</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/俊奇.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>俊奇</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/橘半.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>橘半</span>
|
||||
@ -319,10 +385,6 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/皇登攀.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>皇登攀</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/风格.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>风格</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
|
||||
<span>SR</span>
|
||||
@ -331,10 +393,6 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/逆水行舟.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>逆水行舟</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
|
||||
<span>LiuJL</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/L.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>L</span>
|
||||
@ -359,10 +417,6 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
|
||||
<span>铁</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/庆国.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>庆国</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/Alex.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>Alex</span>
|
||||
@ -379,18 +433,10 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/最多5个字.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>最多5个字</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/雨馨.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>雨馨</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/ZX.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>ZX</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/峰.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>峰</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
|
||||
<span>协成</span>
|
||||
@ -403,18 +449,10 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/好名字.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>好名字</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/Kyle.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>Kyle</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/lsytyrt.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>lsytyrt</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/秀树因馨雨.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>秀树因馨雨</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/buddy.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>buddy</span>
|
||||
@ -435,14 +473,6 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/晴空.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>晴空</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
|
||||
<span>黄泳</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/ccccs.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>ccccs</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/。.png" style="width: 50px;height: 50px;" />
|
||||
<span>。</span>
|
||||
@ -455,10 +485,6 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/张文建.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>张文建</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/炫.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>炫</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/Lawliet.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>Lawliet</span>
|
||||
@ -467,10 +493,6 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/一叶孤舟.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>一叶孤舟</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
|
||||
<span>晏江</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
|
||||
<span>Eric</span>
|
||||
@ -483,10 +505,6 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
|
||||
<span>中文网字计划-江夏尧</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/梁辉.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>梁辉</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/海云.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>海云</span>
|
||||
@ -499,10 +517,6 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/h.r.w.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>h.r.w</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
|
||||
<span>Matt</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/时光匆匆.png" style="width: 50px;height: 50px;" />
|
||||
<span>时光匆匆</span>
|
||||
|
||||
BIN
web/src/assets/avatar/黄智彪@一米一栗科技.png
Normal file
BIN
web/src/assets/avatar/黄智彪@一米一栗科技.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
420
web/src/pages/Edit/components/AssociativeLineStyle.vue
Normal file
420
web/src/pages/Edit/components/AssociativeLineStyle.vue
Normal file
@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<Sidebar ref="sidebar" :title="'关联线样式'">
|
||||
<div class="sidebarContent" :class="{ isDark: isDark }">
|
||||
<div class="title noTop">{{ $t('baseStyle.associativeLine') }}</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">{{ $t('baseStyle.associativeLineColor') }}</span>
|
||||
<span
|
||||
class="block"
|
||||
v-popover:popover4
|
||||
:style="{ backgroundColor: style.associativeLineColor }"
|
||||
></span>
|
||||
<el-popover ref="popover4" placement="bottom" trigger="click">
|
||||
<Color
|
||||
:color="style.associativeLineColor"
|
||||
@change="
|
||||
color => {
|
||||
update('associativeLineColor', color)
|
||||
}
|
||||
"
|
||||
></Color>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="rowItem">
|
||||
<span class="name">{{ $t('baseStyle.associativeLineWidth') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
v-model="style.associativeLineWidth"
|
||||
placeholder=""
|
||||
@change="
|
||||
value => {
|
||||
update('associativeLineWidth', value)
|
||||
}
|
||||
"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in lineWidthList"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
>
|
||||
<span
|
||||
v-if="item > 0"
|
||||
class="borderLine"
|
||||
:class="{ isDark: isDark }"
|
||||
:style="{ height: item + 'px' }"
|
||||
></span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">{{
|
||||
$t('baseStyle.associativeLineActiveColor')
|
||||
}}</span>
|
||||
<span
|
||||
class="block"
|
||||
v-popover:popover5
|
||||
:style="{ backgroundColor: style.associativeLineActiveColor }"
|
||||
></span>
|
||||
<el-popover ref="popover5" placement="bottom" trigger="click">
|
||||
<Color
|
||||
:color="style.associativeLineActiveColor"
|
||||
@change="
|
||||
color => {
|
||||
update('associativeLineActiveColor', color)
|
||||
}
|
||||
"
|
||||
></Color>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="rowItem">
|
||||
<span class="name">{{
|
||||
$t('baseStyle.associativeLineActiveWidth')
|
||||
}}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
v-model="style.associativeLineActiveWidth"
|
||||
placeholder=""
|
||||
@change="
|
||||
value => {
|
||||
update('associativeLineActiveWidth', value)
|
||||
}
|
||||
"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in lineWidthList"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
>
|
||||
<span
|
||||
v-if="item > 0"
|
||||
class="borderLine"
|
||||
:class="{ isDark: isDark }"
|
||||
:style="{ height: item + 'px' }"
|
||||
></span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">{{ $t('style.style') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
v-model="style.associativeLineDasharray"
|
||||
placeholder=""
|
||||
@change="
|
||||
value => {
|
||||
update('associativeLineDasharray', value)
|
||||
}
|
||||
"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in borderDasharrayList"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
>
|
||||
<svg width="120" height="34">
|
||||
<line
|
||||
x1="10"
|
||||
y1="17"
|
||||
x2="110"
|
||||
y2="17"
|
||||
stroke-width="2"
|
||||
:stroke="
|
||||
style.associativeLineDasharray === item.value
|
||||
? '#409eff'
|
||||
: isDark
|
||||
? '#fff'
|
||||
: '#000'
|
||||
"
|
||||
:stroke-dasharray="item.value"
|
||||
></line>
|
||||
</svg>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 关联线文字 -->
|
||||
<div class="title noTop">{{ $t('baseStyle.associativeLineText') }}</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">{{ $t('baseStyle.fontFamily') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="style.associativeLineTextFontFamily"
|
||||
placeholder=""
|
||||
@change="update('associativeLineTextFontFamily', $event)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in fontFamilyList"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
:style="{ fontFamily: item.value }"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">{{ $t('baseStyle.color') }}</span>
|
||||
<span
|
||||
class="block"
|
||||
v-popover:popover6
|
||||
:style="{ backgroundColor: style.associativeLineTextColor }"
|
||||
></span>
|
||||
<el-popover ref="popover6" placement="bottom" trigger="click">
|
||||
<Color
|
||||
:color="style.associativeLineTextColor"
|
||||
@change="
|
||||
color => {
|
||||
update('associativeLineTextColor', color)
|
||||
}
|
||||
"
|
||||
></Color>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="rowItem">
|
||||
<span class="name">{{ $t('baseStyle.fontSize') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
v-model="style.associativeLineTextFontSize"
|
||||
placeholder=""
|
||||
@change="update('associativeLineTextFontSize', $event)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in fontSizeList"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
:style="{ fontSize: item + 'px' }"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Sidebar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Sidebar from './Sidebar'
|
||||
import Color from './Color'
|
||||
import {
|
||||
lineWidthList,
|
||||
lineStyleList,
|
||||
backgroundRepeatList,
|
||||
backgroundPositionList,
|
||||
backgroundSizeList,
|
||||
fontFamilyList,
|
||||
fontSizeList,
|
||||
rootLineKeepSameInCurveList,
|
||||
lineStyleMap,
|
||||
borderDasharrayList
|
||||
} from '@/config'
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
import {
|
||||
supportLineStyleLayoutsMap,
|
||||
supportLineRadiusLayouts,
|
||||
supportNodeUseLineStyleLayouts,
|
||||
supportRootLineKeepSameInCurveLayouts,
|
||||
rainbowLinesOptions
|
||||
} from '@/config/constant'
|
||||
|
||||
const defaultStyle = {
|
||||
associativeLineColor: '',
|
||||
associativeLineWidth: 0,
|
||||
associativeLineActiveWidth: 0,
|
||||
associativeLineDasharray: '',
|
||||
associativeLineActiveColor: '',
|
||||
associativeLineTextFontSize: 0,
|
||||
associativeLineTextColor: '',
|
||||
associativeLineTextFontFamily: ''
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'BaseStyle',
|
||||
components: {
|
||||
Sidebar,
|
||||
Color
|
||||
},
|
||||
props: {
|
||||
mindMap: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lineWidthList,
|
||||
fontSizeList,
|
||||
activeLineNode: null,
|
||||
activeLineToNode: null,
|
||||
style: {
|
||||
...defaultStyle
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
activeSidebar: state => state.activeSidebar,
|
||||
isDark: state => state.localConfig.isDark
|
||||
}),
|
||||
|
||||
fontFamilyList() {
|
||||
return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh
|
||||
},
|
||||
|
||||
borderDasharrayList() {
|
||||
return borderDasharrayList[this.$i18n.locale] || borderDasharrayList.zh
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeSidebar(val) {
|
||||
if (val === 'associativeLineStyle') {
|
||||
this.$refs.sidebar.show = true
|
||||
} else {
|
||||
this.$refs.sidebar.show = false
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.mindMap.on('associative_line_click', this.onAssociativeLineClick)
|
||||
this.mindMap.on(
|
||||
'associative_line_deactivate',
|
||||
this.associativeLineDeactivate
|
||||
)
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['setActiveSidebar']),
|
||||
|
||||
onAssociativeLineClick(a, b, node, toNode) {
|
||||
this.activeLineNode = node
|
||||
this.activeLineToNode = toNode
|
||||
const styleConfig = this.mindMap.associativeLine.getStyleConfig(
|
||||
node,
|
||||
toNode
|
||||
)
|
||||
Object.keys(this.style).forEach(item => {
|
||||
this.style[item] = styleConfig[item]
|
||||
})
|
||||
this.setActiveSidebar('associativeLineStyle')
|
||||
},
|
||||
|
||||
associativeLineDeactivate() {
|
||||
this.setActiveSidebar('')
|
||||
this.activeLineNode = null
|
||||
this.activeLineToNode = null
|
||||
this.style = {
|
||||
...defaultStyle
|
||||
}
|
||||
},
|
||||
|
||||
update(prop, value) {
|
||||
this.style[prop] = value
|
||||
const associativeLineStyle =
|
||||
this.activeLineNode.getData('associativeLineStyle') || {}
|
||||
const toNodeUid = this.activeLineToNode.getData('uid')
|
||||
const lineStyle = associativeLineStyle[toNodeUid] || {}
|
||||
this.activeLineNode.setData({
|
||||
associativeLineStyle: {
|
||||
...associativeLineStyle,
|
||||
[toNodeUid]: {
|
||||
...lineStyle,
|
||||
...this.style
|
||||
}
|
||||
}
|
||||
})
|
||||
this.mindMap.associativeLine.updateActiveLineStyle()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sidebarContent {
|
||||
padding: 20px;
|
||||
padding-top: 10px;
|
||||
|
||||
&.isDark {
|
||||
.title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.row {
|
||||
.rowItem {
|
||||
.name {
|
||||
color: hsla(0, 0%, 100%, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: rgba(26, 26, 26, 0.9);
|
||||
margin-bottom: 10px;
|
||||
margin-top: 20px;
|
||||
|
||||
&.noTop {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.rowItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.name {
|
||||
font-size: 12px;
|
||||
margin-right: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.borderLine {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
|
||||
&.isDark {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.el-select-dropdown__item.selected {
|
||||
.borderLine {
|
||||
background-color: #409eff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -17,6 +17,7 @@
|
||||
<OutlineSidebar :mindMap="mindMap"></OutlineSidebar>
|
||||
<Style v-if="!isZenMode"></Style>
|
||||
<BaseStyle :data="mindMapData" :mindMap="mindMap"></BaseStyle>
|
||||
<AssociativeLineStyle v-if="mindMap" :mindMap="mindMap"></AssociativeLineStyle>
|
||||
<Theme v-if="mindMap" :data="mindMapData" :mindMap="mindMap"></Theme>
|
||||
<Structure :mindMap="mindMap"></Structure>
|
||||
<ShortcutKey></ShortcutKey>
|
||||
@ -122,6 +123,7 @@ import NodeAttachment from './NodeAttachment.vue'
|
||||
import NodeOuterFrame from './NodeOuterFrame.vue'
|
||||
import NodeTagStyle from './NodeTagStyle.vue'
|
||||
import Setting from './Setting.vue'
|
||||
import AssociativeLineStyle from './AssociativeLineStyle.vue';
|
||||
|
||||
// 注册插件
|
||||
MindMap.usePlugin(MiniMap)
|
||||
@ -174,7 +176,8 @@ export default {
|
||||
NodeAttachment,
|
||||
NodeOuterFrame,
|
||||
NodeTagStyle,
|
||||
Setting
|
||||
Setting,
|
||||
AssociativeLineStyle
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user