feat(web-demo): Rewrite the frontend into Vue

package.json

@@ -13,16 +13,17 @@
     "@parcel/packager-ts": "catalog:",
     "@parcel/transformer-sass": "catalog:",
     "@parcel/transformer-typescript-types": "catalog:",
-    "typescript": "catalog:",
-    "tsimp": "catalog:",
+    "@parcel/transformer-vue": "catalog:",
     "@types/eslint": "catalog:",
     "@typescript-eslint/eslint-plugin": "catalog:",
     "@typescript-eslint/parser": "catalog:",
     "eslint": "catalog:",
     "eslint-config-love": "catalog:",
     "eslint-plugin-n": "catalog:",
     "eslint-plugin-promise": "catalog:",
-    "eslint-plugin-tsdoc": "catalog:"
+    "eslint-plugin-tsdoc": "catalog:",
+    "tsimp": "catalog:",
+    "typescript": "catalog:"
   },
   "packageManager": "pnpm@9.15.1"
 }

packages/pixelmanipulator-web-demo/eslint.config.mjs

@@ -0,0 +1,2 @@
+import config from '../../eslint.config.mjs'
+export default config

packages/pixelmanipulator-web-demo/package.json

@@ -1,27 +1,26 @@
 {
   "name": "pixelmanipulator-web-demo",
-  "version": "0.0.0",
+  "version": "1.40.0-alpha.1",
   "private": true,
   "scripts": {
     "build": "parcel build",
     "lint": "eslint . --ignore-pattern build",
-    "watch": "parcel --target demo --dist-dir ../pixelmanipulator/docs"
+    "watch": "parcel"
   },
   "demo": "../pixelmanipulator/docs/pixelmanipulator.html",
   "targets": {
     "demo": {
-      "source": "src/pixelmanipulator.html",
+      "source": "./src/pixelmanipulator.html",
       "publicUrl": ".",
       "context": "browser"
     }
   },
-  "dependencies": {},
   "devDependencies": {
-    "pixelmanipulator": "workspace:*",
     "@fortawesome/fontawesome-free": "catalog:",
     "@parcel/packager-ts": "catalog:",
     "@parcel/transformer-sass": "catalog:",
     "@parcel/transformer-typescript-types": "catalog:",
+    "@parcel/transformer-vue": "catalog:",
     "@popperjs/core": "catalog:",
     "@typescript-eslint/eslint-plugin": "catalog:",
     "@typescript-eslint/parser": "catalog:",
@@ -31,9 +30,12 @@
     "eslint-plugin-n": "catalog:",
     "eslint-plugin-promise": "catalog:",
     "eslint-plugin-tsdoc": "catalog:",
+    "fps-control": "catalog:",
     "parcel": "catalog:",
+    "pinia": "catalog:",
+    "pixelmanipulator": "workspace:*",
     "typescript": "catalog:",
-    "fps-control": "catalog:"
+    "vue": "catalog:"
   },
   "packageManager": "pnpm@9.15.1"
 }

packages/pixelmanipulator-web-demo/src/components/AppElements.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import FillGroup from './fillgroup/FillGroup.vue'
+
+interface Fill {
+	selected: string
+	percent: number
+}
+const props = defineProps<{
+	elements: string[]
+	normalFill: Fill
+	ctrlFill: Fill
+	altFill: Fill
+}>()
+const emit = defineEmits<{
+	(e: 'click', element: string, percent: number): void
+}>()
+
+function doClick(element: string, percent: number): void {
+	emit('click', element, percent)
+}
+</script>
+<template>
+	<div>
+		Click:
+		<FillGroup
+			@click="doClick"
+			:elements
+			v-model:selected="normalFill.selected"
+			v-model:percent="normalFill.percent"
+		/>
+	</div>
+	<div>
+		<kbd>Ctrl</kbd> + click:
+		<FillGroup
+			@click="doClick"
+			:elements
+			v-model:selected="ctrlFill.selected"
+			v-model:percent="ctrlFill.percent"
+		/>
+	</div>
+	<div>
+		<kbd>Alt</kbd> + click:
+		<FillGroup
+			@click="doClick"
+			:elements
+			v-model:selected="altFill.selected"
+			v-model:percent="altFill.percent"
+		/>
+	</div>
+</template>

packages/pixelmanipulator-web-demo/src/components/ElmSelect.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+const props = defineProps<{
+	elements: string[]
+}>()
+const selected = defineModel<string>()
+</script>
+<template>
+	<select class="form-select" v-model="selected">
+		<option v-for="name in elements" :key="name">
+			{{ name }}
+		</option>
+	</select>
+</template>

packages/pixelmanipulator-web-demo/src/components/SideAccordion.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import 'bootstrap/js/dist/collapse' // For #sideAccordion
+
+import AppSettings from './settings/AppSettings.vue'
+import ElementCustomize from './customize/ElementCustomize.vue'
+import AppElements from './AppElements.vue'
+
+const props = defineProps([
+	// TODO: move state into better place
+	'useSideAccordionStore',
+	// TODO: move state into better place
+	'useElementsStore',
+	// TODO: convert to emit
+	'changeFps',
+	// TODO: convert to emit
+	'changeTargeter',
+	// TODO: convert to emit
+	'changePixelCounterT',
+	// TODO: convert to emit
+	'changeColor',
+	// TODO: convert to emit
+	'changeName',
+	// TODO: convert to emit
+	'clickFill',
+])
+
+const sideAccordionStore = props.useSideAccordionStore()
+const elementStore = props.useElementsStore()
+
+const { fills, customize, settings } = storeToRefs(sideAccordionStore)
+const { elements } = storeToRefs(elementStore)
+
+watch(
+	()=> settings.value.shTargeter,
+	c=> props.changeTargeter(c)
+)
+watch(
+	()=> settings.value.pixelCounterT,
+	c => props.changePixelCounterT(c)
+)
+</script>
+<template>
+	<div class="accordion" id="sideAccordion">
+		<section class="accordion-item" aria-labelledby="elements-header">
+			<h2 id="elements-header" class="accordion-header">
+				<button
+					class="accordion-button"
+					type="button"
+					data-bs-toggle="collapse"
+					data-bs-target="#elements"
+					aria-expanded="true"
+					aria-controls="elements"
+				>
+					<i class="fa-solid fa-mouse" aria-hidden="true"></i>
+					&nbsp;
+					Elements
+				</button>
+			</h2>
+			<div id="elements" class="accordion-collapse collapse show" aria-labelledby="elements-header" data-bs-parent="#sideAccordion">
+				<div class="accordion-body">
+					<AppElements
+						:elements
+						:normalFill="fills.normalFill"
+						:ctrlFill="fills.ctrlFill"
+						:altFill="fills.altFill"
+						@click="clickFill"
+					/>
+				</div>
+			</div>
+		</section>
+		<section class="accordion-item" aria-labelledby="customize-header">
+			<h2 class="accordion-header" id="customize-header">
+				<button
+					class="accordion-button collapsed"
+					type="button"
+					data-bs-toggle="collapse"
+					data-bs-target="#customize"
+					aria-expanded="false"
+					aria-controls="customize"
+				>
+					<i class="fa-solid fa-edit" aria-hidden="true"></i>
+					&nbsp;
+					Customize
+				</button>
+			</h2>
+			<div id="customize" class="accordion-collapse collapse" aria-labelledby="customize-header" data-bs-parent="#sideAccordion">
+				<div class="accordion-body">
+					<ElementCustomize
+						:elements
+						@changeColor="changeColor"
+						@changeName="changeName"
+						v-model="customize.selected"
+						:elm="customize.elm"
+					/>
+				</div>
+			</div>
+		</section>
+		<section class="accordion-item" aria-labelledby="settings-header">
+			<h2 class="accordion-header" id="settings-header">
+				<button
+					class="accordion-button collapsed"
+					type="button"
+					data-bs-toggle="collapse"
+					data-bs-target="#settings"
+					aria-expanded="false"
+					aria-controls="customize"
+				>
+					<i class="fa-solid fa-gears" aria-hidden="true"></i>
+					&nbsp;
+					Settings
+				</button>
+			</h2>
+			<div id="settings" class="accordion-collapse collapse" aria-labeledby="accordion-header" data-bs-parent="#sideAccordion">
+				<div class="accordion-body">
+					<AppSettings
+						v-model:unlimitedFps="settings.unlimitedFps"
+						v-model:size="settings.size"
+						v-model:zoomSize="settings.zoomSize"
+						v-model:shTargeter="settings.shTargeter"
+						v-model:shFocusBox="settings.shFocusBox"
+						v-model:pixelCounterT="settings.pixelCounterT"
+						@changeFps="changeFps"
+					/>
+				</div>
+			</div>
+		</section>
+	</div>
+</template>

packages/pixelmanipulator-web-demo/src/components/TargeterStats.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const props = defineProps(['useTargeterLocStore'])
+const targeterLoc = props.useTargeterLocStore()
+</script>
+<template>
+	Targeter:
+	<ul class="list-group">
+		<li class="list-group-item">
+			x: <span class="badge bg-secondary">{{targeterLoc.x}}</span>
+		</li>
+		<li class="list-group-item">
+			y: <span class="badge bg-secondary">{{targeterLoc.y}}</span>
+		</li>
+	</ul>
+</template>

packages/pixelmanipulator-web-demo/src/components/customize/CustomColorAlpha.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const alpha = defineModel<string>()
+</script>
+<template>
+	<label>
+		Alpha (Opacity) {{ alpha }}
+		<input
+			type="range"
+			class="form-range"
+			min="0"
+			max="255"
+			step="1"
+			v-model="alpha" >
+	</label>
+</template>

packages/pixelmanipulator-web-demo/src/components/customize/CustomizeColor.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const color = defineModel<string>()
+</script>
+<template>
+	<label>
+		<i class="fa-solid fa-eyedropper" aria-hidden="true"></i>
+		Element Color
+		<input
+			type="color"
+			class="form-control form-control-color"
+			v-model="color" >
+	</label>
+</template>

packages/pixelmanipulator-web-demo/src/components/customize/CustomizeName.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const name = defineModel<string>()
+</script>
+<template>
+	<label>
+		<i class="fa-solid fa-tag" aria-hidden="true"></i>
+		Change Name:
+		<input type="text" class="form-control" v-model="name">
+	</label>
+</template>

packages/pixelmanipulator-web-demo/src/components/customize/ElementCustomize.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { watch, computed, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+
+import { type ElementData } from 'pixelmanipulator'
+
+import ElmSelect from '../ElmSelect.vue'
+import CustomizeColor from './CustomizeColor.vue'
+import CustomColorAlpha from './CustomColorAlpha.vue'
+import CustomizeName from './CustomizeName.vue'
+
+const props = defineProps<{
+	elements: string[]
+	elm: ElementData
+}>()
+const selected = defineModel<string>()
+interface ChangeColor {
+	selected: string
+	renderAs: [number, number, number, number]
+}
+const emit = defineEmits<{
+	(e: 'changeColor', data: ChangeColor): void,
+	(e: 'changeName', data: { selected: string, name: string}): void,
+}>()
+
+/// Change the color
+const color = ref('')
+const alpha = ref("0")
+/// Name of element
+const name = ref("")
+const elm = computed(()=> props.elm)
+const renderAs = computed<void|[number, number, number, number]>(()=>{
+  const matches = /#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i.exec(color.value)
+  if (matches == null) return
+  // The 0th is just the whole string
+  const RED_IDX = 1
+  const GREEN_IDX = 2
+  const BLUE_IDX = 3
+  const HEX_VALUES_PER_DIGIT = 16
+  return [
+    parseInt(matches[RED_IDX], HEX_VALUES_PER_DIGIT),
+    parseInt(matches[GREEN_IDX], HEX_VALUES_PER_DIGIT),
+    parseInt(matches[BLUE_IDX], HEX_VALUES_PER_DIGIT),
+    parseInt(alpha.value)
+  ]
+})
+
+watch(elm, elm=>{
+  if (elm == null) return
+  const { renderAs, name: n } = elm
+  const DEFAULT_DOT = 255
+  const START_OF_COLOR = 0
+  const ALPHA_INDEX = 3
+  const HEX_VALUES_PER_DIGIT = 16
+  const DIGITS_PER_DOT = 2
+  color.value = `#${renderAs.slice(START_OF_COLOR, ALPHA_INDEX).map(dot =>
+	dot.toString(HEX_VALUES_PER_DIGIT).padStart(DIGITS_PER_DOT, '0')
+  ).join('')}`
+  alpha.value = (renderAs[ALPHA_INDEX] ?? DEFAULT_DOT).toString()
+  name.value = n
+})
+watch(renderAs, renderAs=> renderAs && emit('changeColor', {
+	selected: selected.value,
+	renderAs
+}))
+watch(name, name=>emit('changeName', { name, selected: selected.value }))
+</script>
+<template>
+	<ElmSelect v-model="selected" :elements />
+	<CustomizeColor v-model="color" />
+	<CustomColorAlpha v-model="alpha" />
+	<CustomizeName v-model="name" />
+</template>