From d3a0546390109922a22c17220d2bde53de333bc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=93=E3=81=B4=E3=81=AA=E3=81=9F=E3=81=BF=E3=81=BD?=
 <syuilotan@yahoo.co.jp>
Date: Mon, 12 Feb 2018 22:07:28 +0900
Subject: [PATCH] wip

---
 .../components/analog-clock.vue}              | 73 +++++++++++--------
 1 file changed, 43 insertions(+), 30 deletions(-)
 rename src/web/app/desktop/{-tags/analog-clock.tag => views/components/analog-clock.vue} (74%)

diff --git a/src/web/app/desktop/-tags/analog-clock.tag b/src/web/app/desktop/views/components/analog-clock.vue
similarity index 74%
rename from src/web/app/desktop/-tags/analog-clock.tag
rename to src/web/app/desktop/views/components/analog-clock.vue
index 6b2bce3b2..a45bafda6 100644
--- a/src/web/app/desktop/-tags/analog-clock.tag
+++ b/src/web/app/desktop/views/components/analog-clock.vue
@@ -1,36 +1,41 @@
-<mk-analog-clock>
-	<canvas ref="canvas" width="256" height="256"></canvas>
-	<style lang="stylus" scoped>
-		:scope
-			> canvas
-				display block
-				width 256px
-				height 256px
-	</style>
-	<script lang="typescript">
-		const Vec2 = function(x, y) {
-			this.x = x;
-			this.y = y;
+<template>
+<canvas class="mk-analog-clock" ref="canvas" width="256" height="256"></canvas>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { themeColor } from '../../../config';
+
+const Vec2 = function(x, y) {
+	this.x = x;
+	this.y = y;
+};
+
+export default Vue.extend({
+	data() {
+		return {
+			clock: null
 		};
+	},
+	mounted() {
+		this.tick();
+		this.clock = setInterval(this.tick, 1000);
+	},
+	beforeDestroy() {
+		clearInterval(this.clock);
+	},
+	methods: {
+		tick() {
+			const canv = this.$refs.canvas as any;
 
-		this.on('mount', () => {
-			this.draw()
-			this.clock = setInterval(this.draw, 1000);
-		});
-
-		this.on('unmount', () => {
-			clearInterval(this.clock);
-		});
-
-		this.draw = () => {
 			const now = new Date();
 			const s = now.getSeconds();
 			const m = now.getMinutes();
 			const h = now.getHours();
 
-			const ctx = this.$refs.canvas.getContext('2d');
-			const canvW = this.$refs.canvas.width;
-			const canvH = this.$refs.canvas.height;
+			const ctx = canv.getContext('2d');
+			const canvW = canv.width;
+			const canvH = canv.height;
 			ctx.clearRect(0, 0, canvW, canvH);
 
 			{ // 背景
@@ -72,7 +77,7 @@
 				const length = Math.min(canvW, canvH) / 4;
 				const uv = new Vec2(Math.sin(angle), -Math.cos(angle));
 				ctx.beginPath();
-				ctx.strokeStyle = _THEME_COLOR_;
+				ctx.strokeStyle = themeColor;
 				ctx.lineWidth = 2;
 				ctx.moveTo(canvW / 2 - uv.x * length / 5, canvH / 2 - uv.y * length / 5);
 				ctx.lineTo(canvW / 2 + uv.x * length,     canvH / 2 + uv.y * length);
@@ -90,6 +95,14 @@
 				ctx.lineTo(canvW / 2 + uv.x * length,     canvH / 2 + uv.y * length);
 				ctx.stroke();
 			}
-		};
-	</script>
-</mk-analog-clock>
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-analog-clock
+	display block
+	width 256px
+	height 256px
+</style>