Built-in direction pad for better control

bp-studio · Jan 8, 2021 · f0da801 · f0da801
1 parent 79fbfa5
commit f0da801
Show file tree

Hide file tree

Showing 25 changed files with 238 additions and 38 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -39,6 +39,8 @@
 		"gops",
 		"gtag",
 		"kamiya",
+		"mixins",
+		"notranslate",
 		"osme",
 		"overlappings",
 		"partitioner",
@@ -48,6 +50,9 @@
 		"tsai",
 		"tsun"
 	],
+	"cSpell.ignoreRegExpList": [
+		"/[A-Z]+(?![a-z])/g"
+	],
 	"cSpell.ignorePaths": [
 		"**/package*.json",
 		".vscode",

diff --git a/.vscode/gvpd.js → .vscode/vue.js b/.vscode/gvpd.js → .vscode/vue.js
@@ -27,7 +27,7 @@ function transform(file, encoding, callback) {
 	file.contents = Buffer.from(result, encoding);
 	return callback(null, file);
 }
-function gvpd() {
+function vue() {
 	return through.obj(transform);
 }
-module.exports = gvpd;
+module.exports = vue;
diff --git a/dist/assets/bps/fonts/bps.svg b/dist/assets/bps/fonts/bps.svg
diff --git a/dist/assets/bps/fonts/bps.ttf b/dist/assets/bps/fonts/bps.ttf
diff --git a/dist/assets/bps/fonts/bps.woff b/dist/assets/bps/fonts/bps.woff
diff --git a/dist/assets/bps/style.css b/dist/assets/bps/style.css
@@ -1,9 +1,9 @@
 @font-face {
   font-family: 'bps';
   src:
-    url('fonts/bps.ttf?ap74dj') format('truetype'),
-    url('fonts/bps.woff?ap74dj') format('woff'),
-    url('fonts/bps.svg?ap74dj#bps') format('svg');
+    url('fonts/bps.ttf?sgm37n') format('truetype'),
+    url('fonts/bps.woff?sgm37n') format('woff'),
+    url('fonts/bps.svg?sgm37n#bps') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -24,6 +24,84 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.bp-arrow-down-left:before {
+  content: "\e903";
+}
+.bp-down-left:before {
+  content: "\e903";
+}
+.bp-arrow-bottom-left:before {
+  content: "\e903";
+}
+.bp-arrow-down-right:before {
+  content: "\e904";
+}
+.bp-down-right:before {
+  content: "\e904";
+}
+.bp-arrow-bottom-right:before {
+  content: "\e904";
+}
+.bp-arrow-up-left:before {
+  content: "\e905";
+}
+.bp-up-left:before {
+  content: "\e905";
+}
+.bp-arrow-top-left:before {
+  content: "\e905";
+}
+.bp-arrow-up-right:before {
+  content: "\e906";
+}
+.bp-up-right:before {
+  content: "\e906";
+}
+.bp-arrow-top-right:before {
+  content: "\e906";
+}
+.bp-arrow-right:before {
+  content: "\e907";
+}
+.bp-right:before {
+  content: "\e907";
+}
+.bp-next:before {
+  content: "\e907";
+}
+.bp-arrow-left:before {
+  content: "\e908";
+}
+.bp-left:before {
+  content: "\e908";
+}
+.bp-previous:before {
+  content: "\e908";
+}
+.bp-arrow-down:before {
+  content: "\e909";
+}
+.bp-down:before {
+  content: "\e909";
+}
+.bp-download:before {
+  content: "\e909";
+}
+.bp-bottom:before {
+  content: "\e909";
+}
+.bp-arrow-up:before {
+  content: "\e90a";
+}
+.bp-up:before {
+  content: "\e90a";
+}
+.bp-upload:before {
+  content: "\e90a";
+}
+.bp-top:before {
+  content: "\e90a";
+}
 .bp-info:before {
   content: "\e902";
 }

diff --git a/dist/bpstudio.js b/dist/bpstudio.js
diff --git a/dist/bpstudio.js.map b/dist/bpstudio.js.map
diff --git a/dist/donate.htm b/dist/donate.htm
@@ -20,7 +20,7 @@
 
 	<script src="lib/vue.runtime.min.js"></script>
 	<script src="lib/vue-i18n.js"></script>
-	<script src="locale.js?70b8a220"></script>
+	<script src="locale.js?77d604d5"></script>
 </head>
 
 <body class="p-4 h-100">

diff --git a/dist/index.htm b/dist/index.htm
@@ -8,7 +8,7 @@
 	<meta name="description" content="Super-complex origami design made easy!">
 	<meta name="apple-mobile-web-app-title" content="Box Pleating Studio" />
 	<meta name="google" content="notranslate">
-	<meta name="version" content="0.1.10">
+	<meta name="version" content="0.2.0">
 
 	<!-- Global site tag (gtag.js) - Google Analytics -->
 	<script async src="https://www.googletagmanager.com/gtag/js?id=G-GG1TEZGBCQ"></script>
@@ -19,7 +19,7 @@
 			page_title: document.title,
 			page_path: "/",
 			app_name: document.title,
-			app_version: "562"
+			app_version: "601"
 		};
 		gtag('js', new Date());
 		gtag('config', 'G-GG1TEZGBCQ', app_config);
@@ -56,10 +56,7 @@
 				if(err || wErr) {
 					display('divWorkspace', 'none');
 					display(err ? 'resource' : 'requirement', 'block', err || wErr);
-					if(wErr) {
-						gtag('set', 'user_properties', { user_agent: navigator.userAgent });
-						gtag('event', 'unsupported');
-					}
+					if(wErr) gtag('event', 'unsupported', { error: wErr });
 				}
 				if(errorOB) errorOB.disconnect();
 			};
@@ -94,15 +91,15 @@
 	<script src="lib/vue-i18n.js" defer></script>
 	<script src="lib/marked.min.js" defer></script>
 
-	<link rel="stylesheet" href="assets/bps/style.css">
-	<link rel="stylesheet" href="main.css?7876594a">
+	<link rel="stylesheet" href="assets/bps/style.css?5f0317e5">
+	<link rel="stylesheet" href="main.css?f4620864">
 	<link rel="stylesheet" href="bpstudio.css?1079229d">
 
-	<script src="log/log.js?b135ab49" defer></script>
+	<script src="log/log.js?eb117691" defer></script>
 	<script src="shrewd.min.js?97d129ed" defer></script>
-	<script src="bpstudio.js?17880d0c" defer></script>
-	<script src="locale.js?70b8a220" defer></script>
-	<script src="main.js?8538f70a" defer></script>
+	<script src="bpstudio.js?8db58618" defer></script>
+	<script src="locale.js?77d604d5" defer></script>
+	<script src="main.js?c42c613d" defer></script>
 </head>
 
 <body>

diff --git a/dist/locale.js b/dist/locale.js
diff --git a/dist/log/20210108.md b/dist/log/20210108.md
@@ -0,0 +1,5 @@
+
+## Version 0.2.0
+
+New feature:
+- Touch device users can now use the built-in direction pad for better control.
diff --git a/dist/log/log.js b/dist/log/log.js
@@ -1 +1 @@
-let logs=[20201224,20201229]
+let logs=[20201224,20201229,20210108]
diff --git a/dist/main.css b/dist/main.css
@@ -390,3 +390,36 @@ button>.notify {
 .sortable-fallback {
 	border: none;
 }
+
+/*********************************************
+ * D-Pad
+ *********************************************/
+
+#divDPad {
+	height: 7.5rem;
+	width: 7.5rem;
+	position: absolute;
+	bottom: 1rem;
+	left: 1rem;
+	border-radius: 3.75rem;
+	background-color: var(--primary);
+	opacity: 0;
+	pointer-events: none;
+	transition-property: opacity;
+	transition-duration: 0.2s;
+	z-index: 100;
+}
+
+#divDPad.show {
+	pointer-events: all;
+	opacity: 0.8;
+}
+
+#divDPad i {
+	padding: 0.25rem;
+	height: 2.5rem;
+	width: 2.5rem;
+	font-size: 2rem;
+	color: white;
+	position: absolute;
+}
diff --git a/dist/main.js b/dist/main.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -10,7 +10,7 @@ let ftp = require('vinyl-ftp');
 let log = require('fancy-log');
 
 let log2 = require('./.vscode/log');
-let gvpd = require('./.vscode/gvpd');
+let vue = require('./.vscode/vue');
 let crc = require('./.vscode/crc');
 let i18n = require('./.vscode/i18n');
 
@@ -83,13 +83,13 @@ gulp.task('buildApp', () =>
 		'src/app/components/**/*.vue',
 		'src/app/footer.js'
 	])
-		.pipe(gvpd())
+		.pipe(vue())
 		.pipe(concat('main.js'))
 		.pipe(wrap("if(!err&&!wErr) { <%= contents %> }",))
 		.pipe(terser(terserOption))
 		.pipe(crc())
 		.pipe(gulp.dest('dist/')),
-	gulp.src('dist/main.css')
+	gulp.src(['dist/main.css', 'dist/assets/bps/style.css'])
 		.pipe(crc())
 );
 
@@ -115,7 +115,7 @@ gulp.task('buildDonate', () =>
 		'src/donate/main.vue',
 		'src/donate/main.js',
 	])
-		.pipe(gvpd())
+		.pipe(vue())
 		.pipe(concat('donate.js'))
 		.pipe(terser())
 		.pipe(crc('dist/donate.htm'))
@@ -139,7 +139,7 @@ const ftpFactory = (folder, g) => function() {
 
 gulp.task('uploadPub', ftpFactory('bp', ['dist/.htaccess']));
 
-gulp.task('deployDev', ftpFactory('bp-dev'));
+gulp.task('deployDev', ftpFactory('bp-dev', ['!dist/manifest.json']));
 
 gulp.task('deployPub', gulp.series(
 	'buildCorePub',

diff --git a/src/app/components/app.vue b/src/app/components/app.vue
@@ -10,6 +10,7 @@
 		<welcome v-if="!design"></welcome>
 		<div id="divShade" :class="{'show':showPanel}" @mousedown="showPanel=false" @touchstart="showPanel=false"></div>
 		<panel :show="showPanel"></panel>
+		<dpad></dpad>
 		<share ref="share"></share>
 		<about ref="about"></about>
 		<version ref="ver"></version>

diff --git a/src/app/components/core.vue b/src/app/components/core.vue
@@ -45,6 +45,9 @@
 		public designs: number[] = [];
 		public tabHistory: number[] = [];
 		public autoSave: boolean = true;
+		public showDPad: boolean = true;
+
+		public isTouch: boolean;
 
 		// 用來區分在瀏覽器裡面多重開啟頁籤的不同實體；理論上不可能同時打開，所以用時間戳記就夠了
 		private id: string = new Date().getTime().toString();
@@ -56,6 +59,10 @@
 
 		@Watch('i18n.locale') watchLocale() { this.onLocaleChanged(); }
 
+		created() {
+			this.isTouch = matchMedia("(hover: none), (pointer: coarse)").matches;
+		}
+
 		mounted() {
 			this.loadSettings();
 			bp.onDeprecate = (title: string) => {
@@ -90,6 +97,7 @@
 			let settings = JSON.parse(localStorage.getItem("settings"));
 			if(settings) {
 				this.autoSave = settings.autoSave;
+				if(settings.showDPad !== undefined) this.showDPad = settings.showDPad;
 				let d = bp.$display.settings;
 				for(let key in d) d[key] = settings[key];
 			}
@@ -133,6 +141,7 @@
 			else localStorage.removeItem("session");
 			localStorage.setItem("settings", JSON.stringify({
 				autoSave: this.autoSave,
+				showDPad: this.showDPad,
 				includeHiddenElement,
 				showGrid, showHinge, showRidge,
 				showAxialParallel, showLabel, showDot

diff --git a/src/app/components/dpad.vue b/src/app/components/dpad.vue
@@ -0,0 +1,26 @@
+<template>
+	<div id="divDPad" v-bind:class="{'show':show}">
+		<keybutton class="bp-up" style="top:0rem;left:2.5rem;" v-on:key="key('up')"></keybutton>
+		<keybutton class="bp-left" style="top:2.5rem;left:0rem;" v-on:key="key('left')"></keybutton>
+		<keybutton class="bp-right" style="top:2.5rem;left:5rem;" v-on:key="key('right')"></keybutton>
+		<keybutton class="bp-down" style="top:5rem;left:2.5rem;" v-on:key="key('down')"></keybutton>
+	</div>
+</template>
+
+<script lang="ts">
+	import { Vue, Component } from 'vue-property-decorator';
+	import { bp } from './import/BPStudio';
+	import { core } from './core.vue';
+
+	declare const gtag: any;
+
+	@Component
+	export default class DPad extends Vue {
+		private get show() {
+			return core.isTouch && core.showDPad && bp.system.selections.length > 0;
+		}
+		private key(key: string) {
+			bp.system.key(key);
+		}
+	}
+</script>
diff --git a/src/app/components/gadget/keybutton.vue b/src/app/components/gadget/keybutton.vue
@@ -0,0 +1,19 @@
+<template>
+	<i v-on:touchstart="down(750)" v-on:touchend="up"></i>
+</template>
+
+<script lang="ts">
+	import { Vue, Component } from 'vue-property-decorator';
+
+	@Component
+	export default class KeyButton extends Vue {
+		private to: any;
+		private down(repeat: number) {
+			this.$emit('key');
+			this.to = setTimeout(() => this.down(150), repeat);
+		}
+		private up() {
+			clearTimeout(this.to);
+		}
+	}
+</script>