优化:富文本编辑时默认不再全选;使用节点填充色作为编辑时的背景色

This commit is contained in:
wanglin2 2023-03-23 09:39:00 +08:00
parent e337da088b
commit cabe286ebb
12 changed files with 51 additions and 5 deletions

View File

@ -1,11 +1,11 @@
{ {
"name": "simple-mind-map", "name": "simple-mind-map",
"version": "0.4.5", "version": "0.4.6",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"version": "0.4.5", "version": "0.4.6",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@svgdotjs/svg.js": "^3.0.16", "@svgdotjs/svg.js": "^3.0.16",

View File

@ -1,6 +1,6 @@
{ {
"name": "simple-mind-map", "name": "simple-mind-map",
"version": "0.4.6", "version": "0.4.7",
"description": "一个简单的web在线思维导图", "description": "一个简单的web在线思维导图",
"authors": [ "authors": [
{ {

View File

@ -97,13 +97,16 @@ class RichText {
this.mindMap.renderer.textEdit.registerTmpShortcut() this.mindMap.renderer.textEdit.registerTmpShortcut()
if (!this.textEditNode) { if (!this.textEditNode) {
this.textEditNode = document.createElement('div') this.textEditNode = document.createElement('div')
this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);outline: none; word-break: break-all;` this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;box-shadow: 0 0 20px rgba(0,0,0,.5);outline: none; word-break: break-all;`
document.body.appendChild(this.textEditNode) document.body.appendChild(this.textEditNode)
} }
// 原始宽高 // 原始宽高
let g = node._textData.node let g = node._textData.node
let originWidth = g.attr('data-width') let originWidth = g.attr('data-width')
let originHeight = g.attr('data-height') let originHeight = g.attr('data-height')
// 使用节点的填充色,否则如果节点颜色是白色的话编辑时看不见
let bgColor = node.style.merge('fillColor')
this.textEditNode.style.backgroundColor = bgColor === 'transparent' ? '#fff' : bgColor
this.textEditNode.style.minWidth = originWidth + 'px' this.textEditNode.style.minWidth = originWidth + 'px'
this.textEditNode.style.minHeight = originHeight + 'px' this.textEditNode.style.minHeight = originHeight + 'px'
this.textEditNode.style.left = this.textEditNode.style.left =
@ -126,7 +129,7 @@ class RichText {
this.initQuillEditor() this.initQuillEditor()
document.querySelector('.ql-editor').style.minHeight = originHeight + 'px' document.querySelector('.ql-editor').style.minHeight = originHeight + 'px'
this.showTextEdit = true this.showTextEdit = true
this.selectAll() this.focus()
if (!node.nodeData.data.richText) { if (!node.nodeData.data.richText) {
// 如果是非富文本的情况,需要手动应用文本样式 // 如果是非富文本的情况,需要手动应用文本样式
this.setTextStyleIfNotRichText(node) this.setTextStyleIfNotRichText(node)
@ -228,6 +231,12 @@ class RichText {
this.quill.setSelection(0, this.quill.getLength()) this.quill.setSelection(0, this.quill.getLength())
} }
// 聚焦
focus() {
let len = this.quill.getLength()
this.quill.setSelection(len, len)
}
// 格式化当前选中的文本 // 格式化当前选中的文本
formatText(config = {}, clear = false) { formatText(config = {}, clear = false) {
if (!this.range && !this.lastRange) return if (!this.range && !this.lastRange) return

View File

@ -1,5 +1,9 @@
# Changelog # Changelog
## 0.4.7
optimization: 1.During rich text editing, when initially focusing, all are no longer selected by default; 2.When editing rich text, use the node fill color as the background color to avoid being invisible when the node color is white.
## 0.4.6 ## 0.4.6
New: 1.Associated lines support adjusting control points. New: 1.Associated lines support adjusting control points.

View File

@ -1,6 +1,8 @@
<template> <template>
<div> <div>
<h1>Changelog</h1> <h1>Changelog</h1>
<h2>0.4.7</h2>
<p>optimization: 1.During rich text editing, when initially focusing, all are no longer selected by default; 2.When editing rich text, use the node fill color as the background color to avoid being invisible when the node color is white.</p>
<h2>0.4.6</h2> <h2>0.4.6</h2>
<p>New: 1.Associated lines support adjusting control points.</p> <p>New: 1.Associated lines support adjusting control points.</p>
<p>optimization: 1.When adding historical data, filter data that has not changed compared to the previous time.</p> <p>optimization: 1.When adding historical data, filter data that has not changed compared to the previous time.</p>

View File

@ -65,6 +65,12 @@ Replace the built-in font size list during rich text editing. The built-in list
Select All. When the node is being edited, you can select all the text in the node through this method. Select All. When the node is being edited, you can select all the text in the node through this method.
### focus()
> v0.4.7+
Focus.
### formatText(config = {}) ### formatText(config = {})
- `config`Object. The key is the style attribute and the value is the style value. The complete configuration is as follows: - `config`Object. The key is the style attribute and the value is the style value. The complete configuration is as follows:

View File

@ -50,6 +50,11 @@ MindMap.usePlugin(RichText, opt?)
<h2>Method</h2> <h2>Method</h2>
<h3>selectAll()</h3> <h3>selectAll()</h3>
<p>Select All. When the node is being edited, you can select all the text in the node through this method.</p> <p>Select All. When the node is being edited, you can select all the text in the node through this method.</p>
<h3>focus()</h3>
<blockquote>
<p>v0.4.7+</p>
</blockquote>
<p>Focus.</p>
<h3>formatText(config = {})</h3> <h3>formatText(config = {})</h3>
<ul> <ul>
<li><code>config</code>Object. The key is the style attribute and the value is the style value. The complete configuration is as follows:</li> <li><code>config</code>Object. The key is the style attribute and the value is the style value. The complete configuration is as follows:</li>

View File

@ -1,5 +1,9 @@
# Changelog # Changelog
## 0.4.7
优化1.富文本编辑时初始聚焦时不再默认全选2.富文本编辑时使用节点填充色作为背景色,避免节点颜色为白色时看不见。
## 0.4.6 ## 0.4.6
新增1.关联线支持调整控制点。 新增1.关联线支持调整控制点。

View File

@ -1,6 +1,8 @@
<template> <template>
<div> <div>
<h1>Changelog</h1> <h1>Changelog</h1>
<h2>0.4.7</h2>
<p>优化1.富文本编辑时初始聚焦时不再默认全选2.富文本编辑时使用节点填充色作为背景色避免节点颜色为白色时看不见</p>
<h2>0.4.6</h2> <h2>0.4.6</h2>
<p>新增1.关联线支持调整控制点</p> <p>新增1.关联线支持调整控制点</p>
<p>优化1.添加历史数据时过滤和上一次相比没有改变的数据</p> <p>优化1.添加历史数据时过滤和上一次相比没有改变的数据</p>

View File

@ -65,6 +65,12 @@ MindMap.usePlugin(RichText, opt?)
选中全部。当节点正在编辑中可以通过该方法选中节点内的所有文本。 选中全部。当节点正在编辑中可以通过该方法选中节点内的所有文本。
### focus()
> v0.4.7+
聚焦。
### formatText(config = {}) ### formatText(config = {})
- `config`:对象,键为样式属性,值为样式值,完整的配置如下: - `config`:对象,键为样式属性,值为样式值,完整的配置如下:

View File

@ -50,6 +50,11 @@ MindMap.usePlugin(RichText, opt?)
<h2>方法</h2> <h2>方法</h2>
<h3>selectAll()</h3> <h3>selectAll()</h3>
<p>选中全部当节点正在编辑中可以通过该方法选中节点内的所有文本</p> <p>选中全部当节点正在编辑中可以通过该方法选中节点内的所有文本</p>
<h3>focus()</h3>
<blockquote>
<p>v0.4.7+</p>
</blockquote>
<p>聚焦</p>
<h3>formatText(config = {})</h3> <h3>formatText(config = {})</h3>
<ul> <ul>
<li><code>config</code>对象键为样式属性值为样式值完整的配置如下</li> <li><code>config</code>对象键为样式属性值为样式值完整的配置如下</li>

View File

@ -46,6 +46,9 @@
<el-radio-button label="pdf" <el-radio-button label="pdf"
>{{ $t('export.pdfFile') }}.pdf</el-radio-button >{{ $t('export.pdfFile') }}.pdf</el-radio-button
> >
<el-radio-button label="md"
>Markdown文件.md</el-radio-button
>
</el-radio-group> </el-radio-group>
<div class="tip">{{ $t('export.tips') }}</div> <div class="tip">{{ $t('export.tips') }}</div>
<div class="tip warning" v-if="openNodeRichText && ['png', 'pdf'].includes(exportType)">{{ $t('export.pngTips') }}</div> <div class="tip warning" v-if="openNodeRichText && ['png', 'pdf'].includes(exportType)">{{ $t('export.pngTips') }}</div>