【SDU Chart Team - Editor】文本组件设计及其数据流程

文本流程

描述将文本HTML嵌入到SVG的过程

前端

编辑器组件与SVG的数据流

文本组件

<g>
	<foreignObject  width="100%" height="100%" style="overflow: visible;pointer-events:none">
		<div
             xmlns="http://www.w3.org/1999/xhtml"
             style="width: 1px; height: 1px; padding-top: ${y}; margin-left: ${x};"
             >
            <div style="display: inline-block;pointer-events:all">
                ${HTML}
            </div>
        </div>
	</foreignObject>
</g>

• foriegnObejct

  宽高设置为百分之百，覆盖整个SVG；

  pointer-events设置为none，防止覆盖到其他组件的事件

• 第一层div

  设置xmlns，便于MathML根据命名空间获取到样式；

  在样式中将大小设置为最小，同时指定padding-top，margin-left决定其在画布中的y和x坐标，其作用是指定文本在画布中的坐标位置

  • 由于其父组件覆盖整个SVG，故上述属性指定的坐标与SVG中子元素的x、y坐标含义相同，但是前者包含单位：px

• 第二层div

  display属性使其大小适应子组件；

  pointer-events属性确保其事件可访问；

  可被触发事件的元素，建议将必需的事件注册到本标签

• ${HTML}

  需要显示的文本HTML

组件移动

修改第二层div的样式，从而实现修改文本组件在画布中的位置

• x: style.margin-left
• y: style.padding-top

由于文本的可访问元素为<div>，无法直接拖动移动

• 向文本组件添加事件：点击时生成包括自身的矩形框<rect>

  通过拖动矩形矢量图获取到移动距离，从而修改文本组件的位置

获取文本HTML到编辑器

ComponentWritable.get_content接口获取到组件内文本的HTML，调用编辑器setTitleContent接口将HTML设置到编辑器

• get_content获取到组件中<foreignObject>标签的innerHTML

• 同时需要记录组件id

  需要额外维护editingComponentID变量，在每次获取文本HTML到编辑器时修改

设置编辑器内容到SVG

监听编辑器onTitleChange事件，每次修改后将新的文本HTML设置到SVG

调用编辑器getTitleContent接口获取到编辑器内文本的HTML，调用组件ComponentWritable.set_content标签设置其文本内容

• 根据维护的组件id（editingConponentID）获取到被修改的文本矢量图元素

• set_content设置组件中<foreignObject>标签中第二层<div>的innerHTML

接口

创建文本组件时

• 向第二层div注册移动、修改内容等函数

getTextBox(event)

• 矩形框应为单例模式。获取文本组件的矩形框，便于实现拖动

setTextPos(text,newX,newY)

• 修改文本组件内第一层<div>的样式，从而实现位置的修改