新增时间圆盘。

ShadowEditor.Web/lang/zh-CN.js

@@ -616,4 +616,5 @@ L_BUTTON = '按钮';
 L_LABEL = '标签';
 L_HORIZONTAL_LINE = '水平线';
 L_VERTICAL_LINE = '竖直线';
-L_DATE_WEEK = '日期';
+L_DATE_WEEK = '日期';
+L_TIME_DISK = '时间圆盘';

ShadowEditor.Web/src/editor/menubar/TwoDMenu.js

@@ -7,6 +7,7 @@ import BarChart from '../../visual/component/BarChart';
 import TimeLabel from '../../visual/component/TimeLabel';
 import VerticalLine from '../../visual/component/VerticalLine';
 import DateWeekLabel from '../../visual/component/DateWeekLabel';
+import TimeDisk from '../../visual/component/TimeDisk';
 
 /**
  * 二维菜单
@@ -73,6 +74,11 @@ TwoDMenu.prototype.render = function () {
                 cls: 'option',
                 html: L_DATE_WEEK,
                 onClick: this.addDateWeek.bind(this),
+            }, {
+                xtype: 'div',
+                cls: 'option',
+                html: L_TIME_DISK,
+                onClick: this.addTimeDisk.bind(this),
             }]
         }]
     });
@@ -160,4 +166,14 @@ TwoDMenu.prototype.addDateWeek = function () {
     visual.render(svg);
 };
 
+// ------------------------- 时间圆盘 -----------------------------------------------
+
+TwoDMenu.prototype.addTimeDisk = function () {
+    var visual = this.app.editor.visual;
+    var svg = this.app.editor.svg;
+
+    visual.add(new TimeDisk());
+    visual.render(svg);
+};
+
 export default TwoDMenu;

ShadowEditor.Web/src/language/Language.js

@@ -615,4 +615,5 @@ Object.assign(window, {
     L_HORIZONTAL_LINE: 'Horizontal Line',
     L_VERTICAL_LINE: 'Vertical Line',
     L_DATE_WEEK: 'Date',
+    L_TIME_DISK: 'Time Disk',
 });

ShadowEditor.Web/src/visual/Visualization.js

@@ -7,6 +7,7 @@ import BarChart from './component/BarChart';
 import TimeLabel from './component/TimeLabel';
 import VerticalLine from './component/VerticalLine';
 import DateWeekLabel from './component/DateWeekLabel';
+import TimeDisk from './component/TimeDisk';
 
 const ComponentTypes = {
     Button,
@@ -16,6 +17,7 @@ const ComponentTypes = {
     BarChart,
     TimeLabel,
     DateWeekLabel,
+    TimeDisk,
 };
 
 /**

ShadowEditor.Web/src/visual/component/TimeDisk.js

@@ -0,0 +1,151 @@
+import BaseComponent from '../BaseComponent';
+
+/**
+ * 时间圆盘
+ * @author tengge / https://github.com/tengge1
+ */
+function TimeDisk() {
+    BaseComponent.call(this);
+    this.type = 'TimeDisk';
+
+    this.width = 136;
+    this.height = 136;
+    this.title = 'Time';
+    this.transform = null;
+}
+
+TimeDisk.prototype = Object.create(BaseComponent.prototype);
+TimeDisk.prototype.constructor = TimeDisk;
+
+TimeDisk.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})`);
+};
+
+TimeDisk.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('TimeDisk', true)
+        .style('pointer-events', 'all');
+
+    g.append('circle')
+        .attr('data-id', this.id)
+        .attr('cx', 0)
+        .attr('cy', 0)
+        .attr('r', 68)
+        .attr('fill', 'rgba(0,0,0,0.5)');
+
+    g.append('circle')
+        .attr('data-id', this.id)
+        .attr('cx', 0)
+        .attr('cy', 0)
+        .attr('r', 48)
+        .attr('stroke', '#517496')
+        .attr('stroke-width', 2)
+        .attr('fill', 'none');
+
+    g.append('circle')
+        .attr('data-id', this.id)
+        .attr('cx', 48)
+        .attr('cy', 0)
+        .attr('r', 14)
+        .attr('fill', '#376899');
+
+    g.append('circle')
+        .attr('data-id', this.id)
+        .attr('cx', 48)
+        .attr('cy', 0)
+        .attr('r', 14)
+        .attr('stroke', '#3399ff')
+        .attr('stroke-width', 2)
+        .attr('fill', 'none');
+
+    g.append('image')
+        .attr('data-id', this.id)
+        .attr('x', 0)
+        .attr('y', -48)
+        .attr('transform', 'translate(-12,-12)')
+        .attr('href', 'assets/svg/sunrise.svg');
+
+    g.append('image')
+        .attr('data-id', this.id)
+        .attr('x', 48)
+        .attr('y', 0)
+        .attr('transform', 'translate(-12,-12)')
+        .attr('href', 'assets/svg/sun.svg');
+
+    g.append('image')
+        .attr('data-id', this.id)
+        .attr('x', 0)
+        .attr('y', 48)
+        .attr('transform', 'translate(-12,-12)')
+        .attr('href', 'assets/svg/sunset.svg');
+
+    g.append('image')
+        .attr('data-id', this.id)
+        .attr('x', -48)
+        .attr('y', 0)
+        .attr('transform', 'translate(-12,-12)')
+        .attr('href', 'assets/svg/moon.svg');
+
+    g.append('text')
+        .attr('data-id', this.id)
+        .text(this.title)
+        .attr('x', 0)
+        .attr('y', 0)
+        .attr('dy', 10)
+        .attr('font-size', 20)
+        .attr('text-anchor', 'middle')
+        .attr('fill', '#fff');
+
+    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;
+};
+
+TimeDisk.prototype.toJSON = function () {
+    var transform;
+    if (this.transform) {
+        transform = this.transform
+            .replace('translate(', '')
+            .replace(')', '');
+    }
+
+    return {
+        id: this.id,
+        type: this.type,
+        title: this.title,
+        transform,
+    };
+};
+
+TimeDisk.prototype.fromJSON = function (json) {
+    this.id = json.id;
+    this.type = json.type;
+    this.title = json.title;
+    this.transform = json.transform || null;
+};
+
+TimeDisk.prototype.clear = function () {
+    this.title = 'Time';
+    this.transform = null;
+
+    delete this.dom;
+};
+
+export default TimeDisk;