新增垂直线。

ShadowEditor.Web/lang/zh-CN.js

@@ -614,4 +614,5 @@ L_BAR_CHART = '条形图';
 L_TWO_D = '二维';
 L_BUTTON = '按钮';
 L_LABEL = '标签';
-L_HORIZONTAL_LINE = '水平线';
+L_HORIZONTAL_LINE = '水平线';
+L_VERTICAL_LINE = '竖直线';

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;

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',
 });

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,
 };
 
 /**

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;

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;

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;