From dde21b1aa31ddb2dcc04da06ce75e0fdb37bbf67 Mon Sep 17 00:00:00 2001 From: tengge1 <930372551@qq.com> Date: Thu, 2 May 2019 14:46:18 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=97=B6=E9=97=B4=E5=9C=86?= =?UTF-8?q?=E7=9B=98=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 | 16 ++ ShadowEditor.Web/src/language/Language.js | 1 + ShadowEditor.Web/src/visual/Visualization.js | 2 + .../src/visual/component/TimeDisk.js | 151 ++++++++++++++++++ 5 files changed, 172 insertions(+), 1 deletion(-) create mode 100644 ShadowEditor.Web/src/visual/component/TimeDisk.js diff --git a/ShadowEditor.Web/lang/zh-CN.js b/ShadowEditor.Web/lang/zh-CN.js index 5ed0de46..f5fa4cde 100644 --- a/ShadowEditor.Web/lang/zh-CN.js +++ b/ShadowEditor.Web/lang/zh-CN.js @@ -616,4 +616,5 @@ L_BUTTON = '按钮'; L_LABEL = '标签'; L_HORIZONTAL_LINE = '水平线'; L_VERTICAL_LINE = '竖直线'; -L_DATE_WEEK = '日期'; \ No newline at end of file +L_DATE_WEEK = '日期'; +L_TIME_DISK = '时间圆盘'; \ 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 d2e82fc0..58bde81b 100644 --- a/ShadowEditor.Web/src/editor/menubar/TwoDMenu.js +++ b/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; \ No newline at end of file diff --git a/ShadowEditor.Web/src/language/Language.js b/ShadowEditor.Web/src/language/Language.js index 574aa290..d2cc4e08 100644 --- a/ShadowEditor.Web/src/language/Language.js +++ b/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', }); \ No newline at end of file diff --git a/ShadowEditor.Web/src/visual/Visualization.js b/ShadowEditor.Web/src/visual/Visualization.js index 1ae77ef2..0e78d61f 100644 --- a/ShadowEditor.Web/src/visual/Visualization.js +++ b/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, }; /** diff --git a/ShadowEditor.Web/src/visual/component/TimeDisk.js b/ShadowEditor.Web/src/visual/component/TimeDisk.js new file mode 100644 index 00000000..97b0cff8 --- /dev/null +++ b/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; \ No newline at end of file