From 224f142957213b78ab6f744d59bdbd79208591e1 Mon Sep 17 00:00:00 2001 From: tengge1 <930372551@qq.com> Date: Thu, 2 May 2019 10:38:54 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=9E=82=E7=9B=B4=E7=BA=BF?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ShadowEditor.Web/lang/zh-CN.js | 3 +- .../src/editor/menubar/TwoDMenu.js | 32 ++++++ ShadowEditor.Web/src/language/Language.js | 1 + ShadowEditor.Web/src/visual/Visualization.js | 3 + .../src/visual/component/HorizontalLine.js | 7 +- .../src/visual/component/TimeLabel.js | 93 ++++++++++++++++ .../src/visual/component/VerticalLine.js | 100 ++++++++++++++++++ 7 files changed, 236 insertions(+), 3 deletions(-) create mode 100644 ShadowEditor.Web/src/visual/component/TimeLabel.js create mode 100644 ShadowEditor.Web/src/visual/component/VerticalLine.js diff --git a/ShadowEditor.Web/lang/zh-CN.js b/ShadowEditor.Web/lang/zh-CN.js index ce11f004..b8b4e29a 100644 --- a/ShadowEditor.Web/lang/zh-CN.js +++ b/ShadowEditor.Web/lang/zh-CN.js @@ -614,4 +614,5 @@ L_BAR_CHART = '条形图'; L_TWO_D = '二维'; L_BUTTON = '按钮'; L_LABEL = '标签'; -L_HORIZONTAL_LINE = '水平线'; \ No newline at end of file +L_HORIZONTAL_LINE = '水平线'; +L_VERTICAL_LINE = '竖直线'; \ No newline at end of file diff --git a/ShadowEditor.Web/src/editor/menubar/TwoDMenu.js b/ShadowEditor.Web/src/editor/menubar/TwoDMenu.js index bb2719d6..7a1ba6a1 100644 --- a/ShadowEditor.Web/src/editor/menubar/TwoDMenu.js +++ b/ShadowEditor.Web/src/editor/menubar/TwoDMenu.js @@ -4,6 +4,8 @@ import Label from '../../visual/component/Label'; import Panel from '../../visual/component/Panel'; import HorizontalLine from '../../visual/component/HorizontalLine'; import BarChart from '../../visual/component/BarChart'; +import TimeLabel from '../../visual/component/TimeLabel'; +import VerticalLine from '../../visual/component/VerticalLine'; /** * 二维菜单 @@ -55,6 +57,16 @@ TwoDMenu.prototype.render = function () { cls: 'option', html: L_BAR_CHART, onClick: this.addBarChart.bind(this), + }, { + xtype: 'div', + cls: 'option', + html: L_TIME, + onClick: this.addTimeLabel.bind(this), + }, { + xtype: 'div', + cls: 'option', + html: L_VERTICAL_LINE, + onClick: this.addVerticalLine.bind(this), }] }] }); @@ -112,4 +124,24 @@ TwoDMenu.prototype.addBarChart = function () { visual.render(svg); }; +// --------------------------- 时间标签 -------------------------------------- + +TwoDMenu.prototype.addTimeLabel = function () { + var visual = this.app.editor.visual; + var svg = this.app.editor.svg; + + visual.add(new TimeLabel()); + visual.render(svg); +}; + +// --------------------------- 垂直线 ------------------------------------------ + +TwoDMenu.prototype.addVerticalLine = function () { + var visual = this.app.editor.visual; + var svg = this.app.editor.svg; + + visual.add(new VerticalLine()); + visual.render(svg); +}; + export default TwoDMenu; \ No newline at end of file diff --git a/ShadowEditor.Web/src/language/Language.js b/ShadowEditor.Web/src/language/Language.js index 34918b41..3e2af04a 100644 --- a/ShadowEditor.Web/src/language/Language.js +++ b/ShadowEditor.Web/src/language/Language.js @@ -613,4 +613,5 @@ Object.assign(window, { L_BUTTON: 'Button', L_LABEL: 'Label', L_HORIZONTAL_LINE: 'Horizontal Line', + L_VERTICAL_LINE: 'Vertical Line', }); \ No newline at end of file diff --git a/ShadowEditor.Web/src/visual/Visualization.js b/ShadowEditor.Web/src/visual/Visualization.js index d23671ec..bc06a589 100644 --- a/ShadowEditor.Web/src/visual/Visualization.js +++ b/ShadowEditor.Web/src/visual/Visualization.js @@ -4,6 +4,8 @@ import Label from './component/Label'; import Panel from './component/Panel'; import HorizontalLine from './component/HorizontalLine'; import BarChart from './component/BarChart'; +import TimeLabel from './component/TimeLabel'; +import VerticalLine from './component/VerticalLine'; const ComponentTypes = { Button, @@ -11,6 +13,7 @@ const ComponentTypes = { Panel, HorizontalLine, BarChart, + TimeLabel, }; /** diff --git a/ShadowEditor.Web/src/visual/component/HorizontalLine.js b/ShadowEditor.Web/src/visual/component/HorizontalLine.js index c9ba41bb..1628e3fb 100644 --- a/ShadowEditor.Web/src/visual/component/HorizontalLine.js +++ b/ShadowEditor.Web/src/visual/component/HorizontalLine.js @@ -10,6 +10,7 @@ function HorizontalLine() { this.type = 'HorizontalLine'; this.width = 240; + this.height = 0; this.transform = null; } @@ -39,7 +40,7 @@ HorizontalLine.prototype.render = function (parent) { // 可拖拽区域 g.append('path') .attr('data-id', this.id) - .attr('d', 'M-2,-2L242,-2L242,2L-2,2Z') + .attr('d', 'M-4,-4L244,-4L244,4L-4,4Z') .attr('stroke', '0') .attr('fill', 'none'); @@ -54,7 +55,7 @@ HorizontalLine.prototype.render = function (parent) { if (!this.transform) { var left = (parent.clientWidth - this.width) / 2; - var top = parent.clientHeight / 2; + var top = (parent.clientHeight - this.height) / 2; this.transform = `${left},${top}`; } @@ -83,11 +84,13 @@ HorizontalLine.prototype.fromJSON = function (json) { this.id = json.id; this.type = json.type; this.width = json.width; + this.height = json.height; this.transform = json.transform || null; }; HorizontalLine.prototype.clear = function () { this.width = 240; + this.height = 0; this.transform = null; delete this.dom; diff --git a/ShadowEditor.Web/src/visual/component/TimeLabel.js b/ShadowEditor.Web/src/visual/component/TimeLabel.js new file mode 100644 index 00000000..d8adf2ef --- /dev/null +++ b/ShadowEditor.Web/src/visual/component/TimeLabel.js @@ -0,0 +1,93 @@ +import BaseComponent from '../BaseComponent'; + +/** + * 时间标签 + * @author tengge / https://github.com/tengge1 + */ +function TimeLabel() { + BaseComponent.call(this); + this.type = 'TimeLabel'; + this.text = '14:21'; + this.transform = null; +} + +TimeLabel.prototype = Object.create(BaseComponent.prototype); +TimeLabel.prototype.constructor = TimeLabel; + +TimeLabel.prototype.setTranslate = function (dx, dy) { + var xy = this.transform.split(','); + + this.transform = `${parseFloat(xy[0]) + dx},${parseFloat(xy[1]) + dy}`; + + this.dom.attr('transform', `translate(${this.transform})`); +}; + +TimeLabel.prototype.render = function (parent) { + if (d3.select(`#${this.id}`).size() > 0) { + return; + } + + var padding = 2; + + var g = d3.select(parent) + .append('g') + .attr('id', this.id) + .classed('Visual', true) + .classed('TimeLabel', true) + .style('pointer-events', 'all'); + + var text = g.append('text') + .attr('data-id', this.id) + .text(this.text) + .attr('fill', '#fff'); + + var box = text.node().getBBox(); + + var boxWidth = box.width + padding * 2; + var boxHeight = box.height + padding * 2; + + text.attr('x', padding) + .attr('y', padding - box.y); + + if (!this.transform) { + var left = (parent.clientWidth - boxWidth) / 2; + var top = (parent.clientHeight - boxHeight) / 2; + this.transform = `${left},${top}`; + } + + g.attr('transform', `translate(${this.transform})`); + + this.dom = g; +}; + +TimeLabel.prototype.toJSON = function () { + var transform; + if (this.transform) { + transform = this.transform + .replace('translate(', '') + .replace(')', ''); + } + + return { + id: this.id, + type: this.type, + text: this.text, + transform, + }; +}; + +TimeLabel.prototype.fromJSON = function (json) { + this.id = json.id; + this.type = json.type; + this.text = json.text; + this.transform = json.transform || null; +}; + +TimeLabel.prototype.clear = function () { + this.text = '14:21'; + this.transform = null; + + delete this.dom; +}; + +export default TimeLabel; \ No newline at end of file diff --git a/ShadowEditor.Web/src/visual/component/VerticalLine.js b/ShadowEditor.Web/src/visual/component/VerticalLine.js new file mode 100644 index 00000000..90b910e7 --- /dev/null +++ b/ShadowEditor.Web/src/visual/component/VerticalLine.js @@ -0,0 +1,100 @@ +import BaseComponent from '../BaseComponent'; + +/** + * 垂直线 + * @author tengge / https://github.com/tengge1 + */ +function VerticalLine() { + BaseComponent.call(this); + + this.type = 'VerticalLine'; + + this.width = 0; + this.height = 20; + this.transform = null; +} + +VerticalLine.prototype = Object.create(BaseComponent.prototype); +VerticalLine.prototype.constructor = VerticalLine; + +VerticalLine.prototype.setTranslate = function (dx, dy) { + var xy = this.transform.split(','); + + this.transform = `${parseFloat(xy[0]) + dx},${parseFloat(xy[1]) + dy}`; + + this.dom.attr('transform', `translate(${this.transform})`); +}; + +VerticalLine.prototype.render = function (parent) { + if (d3.select(`#${this.id}`).size() > 0) { + return; + } + + var g = d3.select(parent) + .append('g') + .attr('id', this.id) + .classed('Visual', true) + .classed('VerticalLine', true) + .style('pointer-events', 'all'); + + // 可拖拽区域 + g.append('path') + .attr('data-id', this.id) + .attr('d', 'M-4,-4L4,-4L4,24L-4,24Z') + .attr('stroke', '0') + .attr('fill', 'none'); + + g.append('line') + .attr('data-id', this.id) + .attr('x1', 0) + .attr('y1', 0) + .attr('x2', 0) + .attr('y2', 20) + .attr('stroke', '#4d88a7') + .attr('stroke-width', 2); + + if (!this.transform) { + var left = (parent.clientWidth - this.width) / 2; + var top = (parent.clientHeight - this.height) / 2; + this.transform = `${left},${top}`; + } + + g.attr('transform', `translate(${this.transform})`); + + this.dom = g; +}; + +VerticalLine.prototype.toJSON = function () { + var transform; + if (this.transform) { + transform = this.transform + .replace('translate(', '') + .replace(')', ''); + } + + return { + id: this.id, + type: this.type, + width: this.width, + height: this.height, + transform, + }; +}; + +VerticalLine.prototype.fromJSON = function (json) { + this.id = json.id; + this.type = json.type; + this.width = json.width; + this.height = json.height; + this.transform = json.transform || null; +}; + +VerticalLine.prototype.clear = function () { + this.width = 0; + this.height = 20; + this.transform = null; + + delete this.dom; +}; + +export default VerticalLine; \ No newline at end of file