From d8fbdaea05edfe445657ced4f5954714f7faec84 Mon Sep 17 00:00:00 2001 From: Wanpan Date: Fri, 5 Jul 2024 18:18:27 +0800 Subject: [PATCH] refactor: optimized code --- package.json | 3 ++ pnpm-lock.yaml | 4 +++ src/joystick.ts | 83 +++++++++++++++++++++++++++++++++++++++++++++++-- src/util.ts | 76 -------------------------------------------- 4 files changed, 87 insertions(+), 79 deletions(-) diff --git a/package.json b/package.json index 0215ec4..d9c35d1 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,9 @@ "prettier --parser=typescript --write" ] }, + "dependencies": { + "@babel/runtime": "^7.24.7" + }, "devDependencies": { "@commitlint/cli": "^17.1.2", "@commitlint/config-conventional": "^17.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d9fce0b..8fd8d4d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,6 +7,10 @@ settings: importers: .: + dependencies: + '@babel/runtime': + specifier: ^7.24.7 + version: 7.24.7 devDependencies: '@commitlint/cli': specifier: ^17.1.2 diff --git a/src/joystick.ts b/src/joystick.ts index ab0f587..c483725 100644 --- a/src/joystick.ts +++ b/src/joystick.ts @@ -1,3 +1,4 @@ +import type * as CSS from 'csstype'; import { CreateConfig, DirectionType, @@ -6,7 +7,7 @@ import { } from './interface'; import { angle, - buildDom, + appleStyle, distance, findCoord, getDirection, @@ -95,7 +96,7 @@ class Joystick { let startDom = zoneNode; if (this.mode === 'static') { - buildDom(this, zoneNode); + this.buildDom(this, zoneNode); startDom = this.currentJoystick.ui as HTMLElement; } @@ -103,6 +104,82 @@ class Joystick { } }; + private buildDom = (instance: Joystick, zone: HTMLElement): void => { + const { mode, currentJoystick, joystickSize, position, color, backImg } = + instance; + + if (mode === 'static') { + zone.style.position = 'relative'; + } + + const ui = document.createElement('div'); + const back = document.createElement('div'); + const front = document.createElement('div'); + currentJoystick.ui = ui; + currentJoystick.back = back; + currentJoystick.front = front; + + ui.setAttribute('class', 'joystick_box'); + back.setAttribute('class', 'back'); + front.setAttribute('class', 'front'); + + const uiStyle: CSS.Properties = { + position: 'absolute', + top: + mode === 'static' + ? position.top + : `${currentJoystick.y - joystickSize / 2}px`, + left: + mode === 'static' + ? position.left + : `${currentJoystick.x - joystickSize / 2}px`, + right: position.right, + bottom: position.bottom, + opacity: mode === 'static' ? '0.5' : '1', + transition: 'opacity 100ms', + }; + const backStyle: CSS.Properties = { + width: `${joystickSize}px`, + height: `${joystickSize}px`, + backgroundColor: color.back !== '' ? color.back : 'red', + borderRadius: '100%', + }; + const frontStyle: CSS.Properties = { + width: `${joystickSize / 2}px`, + height: `${joystickSize / 2}px`, + backgroundColor: color.front !== '' ? color.front : '#fff', + borderRadius: '100%', + position: 'absolute', + top: '0', + left: '0', + margin: `${joystickSize / 4}px 0 0 ${joystickSize / 4}px`, + transform: 'translate(0px, 0px)', + }; + + if (backImg.back !== '') { + delete backStyle['backgroundColor']; + backStyle['backgroundImage'] = `url(${backImg.back})`; + backStyle['backgroundPosition'] = 'center'; + backStyle['backgroundRepeat'] = 'no-repeat'; + backStyle['backgroundSize'] = '100% 100%'; + } + if (backImg.front !== '') { + delete frontStyle['backgroundColor']; + frontStyle['backgroundImage'] = `url(${backImg.front})`; + frontStyle['backgroundPosition'] = 'center'; + frontStyle['backgroundRepeat'] = 'no-repeat'; + frontStyle['backgroundSize'] = '100% 100%'; + } + + appleStyle(ui, uiStyle); + appleStyle(back, backStyle); + appleStyle(front, frontStyle); + + ui.append(back, front); + zone.appendChild(ui); + currentJoystick.build = true; + }; + private initListener = (zoneNode: HTMLElement): void => { const body = document.getElementsByTagName('body')[0]; @@ -125,7 +202,7 @@ class Joystick { } if (this.mode === 'dynamic') { - buildDom(this, zoneNode); + this.buildDom(this, zoneNode); } else { this.currentJoystick.ui!.style.opacity = '1'; } diff --git a/src/util.ts b/src/util.ts index 7e7139c..fa17abf 100644 --- a/src/util.ts +++ b/src/util.ts @@ -1,6 +1,5 @@ import type * as CSS from 'csstype'; import { DirectionType } from './interface'; -import Joystick from './joystick'; interface Position { x: number; @@ -48,78 +47,3 @@ export const appleStyle = ( ): void => { Object.assign(node.style, style); }; -export const buildDom = (instance: Joystick, zone: HTMLElement): void => { - const { mode, currentJoystick, joystickSize, position, color, backImg } = - instance; - - if (mode === 'static') { - zone.style.position = 'relative'; - } - - const ui = document.createElement('div'); - const back = document.createElement('div'); - const front = document.createElement('div'); - currentJoystick.ui = ui; - currentJoystick.back = back; - currentJoystick.front = front; - - ui.setAttribute('class', 'joystick_box'); - back.setAttribute('class', 'back'); - front.setAttribute('class', 'front'); - - const uiStyle: CSS.Properties = { - position: 'absolute', - top: - mode === 'static' - ? position.top - : `${currentJoystick.y - joystickSize / 2}px`, - left: - mode === 'static' - ? position.left - : `${currentJoystick.x - joystickSize / 2}px`, - right: position.right, - bottom: position.bottom, - opacity: mode === 'static' ? '0.5' : '1', - transition: 'opacity 100ms', - }; - const backStyle: CSS.Properties = { - width: `${joystickSize}px`, - height: `${joystickSize}px`, - backgroundColor: color.back !== '' ? color.back : 'red', - borderRadius: '100%', - }; - const frontStyle: CSS.Properties = { - width: `${joystickSize / 2}px`, - height: `${joystickSize / 2}px`, - backgroundColor: color.front !== '' ? color.front : '#fff', - borderRadius: '100%', - position: 'absolute', - top: '0', - left: '0', - margin: `${joystickSize / 4}px 0 0 ${joystickSize / 4}px`, - transform: 'translate(0px, 0px)', - }; - - if (backImg.back !== '') { - delete backStyle['backgroundColor']; - backStyle['backgroundImage'] = `url(${backImg.back})`; - backStyle['backgroundPosition'] = 'center'; - backStyle['backgroundRepeat'] = 'no-repeat'; - backStyle['backgroundSize'] = '100% 100%'; - } - if (backImg.front !== '') { - delete frontStyle['backgroundColor']; - frontStyle['backgroundImage'] = `url(${backImg.front})`; - frontStyle['backgroundPosition'] = 'center'; - frontStyle['backgroundRepeat'] = 'no-repeat'; - frontStyle['backgroundSize'] = '100% 100%'; - } - - appleStyle(ui, uiStyle); - appleStyle(back, backStyle); - appleStyle(front, frontStyle); - - ui.append(back, front); - zone.appendChild(ui); - currentJoystick.build = true; -};