diff --git a/public/point/1.png b/public/point/1.png deleted file mode 100644 index f24f2f0..0000000 Binary files a/public/point/1.png and /dev/null differ diff --git a/public/point/11-dark.png b/public/point/11-dark.png new file mode 100644 index 0000000..9a57193 Binary files /dev/null and b/public/point/11-dark.png differ diff --git a/public/point/12-dark.png b/public/point/12-dark.png new file mode 100644 index 0000000..dc98fea Binary files /dev/null and b/public/point/12-dark.png differ diff --git a/public/point/13-dark.png b/public/point/13-dark.png new file mode 100644 index 0000000..adf7633 Binary files /dev/null and b/public/point/13-dark.png differ diff --git a/public/point/14-dark.png b/public/point/14-dark.png new file mode 100644 index 0000000..ecccb54 Binary files /dev/null and b/public/point/14-dark.png differ diff --git a/public/point/15-dark.png b/public/point/15-dark.png new file mode 100644 index 0000000..b0fd7ac Binary files /dev/null and b/public/point/15-dark.png differ diff --git a/src/apis/map/constant.ts b/src/apis/map/constant.ts index d8ba68d..c973444 100644 --- a/src/apis/map/constant.ts +++ b/src/apis/map/constant.ts @@ -56,6 +56,7 @@ export const EDITOR_CONFIG: Options = { maxScale: 2.01, scaleOff: 0.01, defaultAnchors: [], + activeGlobalAlpha: 0, fontSize: 14, lineHeight: 1.5, textAlign: 'center', diff --git a/src/apis/map/type.ts b/src/apis/map/type.ts index 28edb7e..bbaa0f9 100644 --- a/src/apis/map/type.ts +++ b/src/apis/map/type.ts @@ -4,6 +4,7 @@ import type { Pen } from '@meta2d/core'; import type { MapAreaType, MapPointType, MapRouteType } from './constant'; export interface MapPen extends Pen { + label?: string; // 展示名称 desc?: string; // 描述 point?: MapPointInfo; // 点位信息 diff --git a/src/assets/themes/editor-dark.json b/src/assets/themes/editor-dark.json new file mode 100644 index 0000000..89ecdbf --- /dev/null +++ b/src/assets/themes/editor-dark.json @@ -0,0 +1,17 @@ +{ + "color": "#BFBFBF", + "background": "#D9D9D9", + "point-s": { + "stroke": "#8C8C8C", + "strokeActive": "#FCC947", + "fill-1": "#14D1A5", + "fill-2": "#69C6F5", + "fill-3": "#E48B1D" + }, + "point-l": { + "stroke": "#595959", + "strokeActive": "#FCC947", + "fill": "#1F1F1F" + }, + "line": "#8C8C8C" +} \ No newline at end of file diff --git a/src/assets/themes/editor-light.json b/src/assets/themes/editor-light.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/src/assets/themes/editor-light.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/src/assets/themes/editor.json b/src/assets/themes/editor.json deleted file mode 100644 index bb7053a..0000000 --- a/src/assets/themes/editor.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "light": { - "background": "", - "color": "#000000" - }, - "dark": { - "background": "", - "color": "#8C8C8C", - "activeColor": "#FCC947", - "textColor": "#BFBFBF" - } -} \ No newline at end of file diff --git a/src/components/robot-list.vue b/src/components/robot-list.vue index fed9789..3db3b5f 100644 --- a/src/components/robot-list.vue +++ b/src/components/robot-list.vue @@ -21,7 +21,7 @@ const mode = ref(Mode.常规); watch(editor.value.mouseClick, (v) => { if (mode.value !== Mode.添加点位) return; if (isEmpty(v)) return; - editor.value.addPoint(v); + editor.value.addPoint(v, 11); }); watch(editor.value.mouseBrush, (v) => { if (![Mode.添加库区, Mode.添加互斥区, Mode.添加非互斥区].includes(mode.value)) return; diff --git a/src/pages/scene-editor.vue b/src/pages/scene-editor.vue index fb9036d..94d9476 100644 --- a/src/pages/scene-editor.vue +++ b/src/pages/scene-editor.vue @@ -28,7 +28,7 @@ onMounted(() => {
- sider + {{ $t('查询') }} diff --git a/src/services/editor.service.ts b/src/services/editor.service.ts index 5da0dbb..06efffe 100644 --- a/src/services/editor.service.ts +++ b/src/services/editor.service.ts @@ -2,8 +2,7 @@ import { EDITOR_CONFIG, MapAreaType, type MapPen, MapPointType } from '@api/map' import sTheme from '@core/theme.service'; import { EditType, LockState, Meta2d } from '@meta2d/core'; import { useObservable } from '@vueuse/rxjs'; -import THEME from 'asset/themes/editor.json'; -import { cloneDeep, pick } from 'lodash-es'; +import { cloneDeep, get, pick } from 'lodash-es'; import { debounceTime, filter, map, Subject, switchMap } from 'rxjs'; import { watch } from 'vue'; @@ -48,16 +47,27 @@ export class EditorService extends Meta2d { //#region 点位 public async addPoint(p: Point, type = MapPointType.普通点): Promise { const pen: MapPen = { + ...p, + ...this.#mapPoint(type), name: 'point', - x: p.x, - y: p.y, - width: 24, - height: 24, + text: 'POINT', point: { type }, }; + const { x, y, width, height } = this.getPenRect(pen); + pen.x = x - width / 2; + pen.y = y - height / 2; await this.addPen(pen, false, true, true); this.pushHistory({ type: EditType.Add, pens: [cloneDeep(pen)] }); } + + #mapPoint(type: MapPointType): Required> { + const theme = this.data().theme; + const width = type < 10 ? 24 : 48; + const height = type < 10 ? 24 : 60; + const lineWidth = type < 10 ? 2 : 3; + const image = type < 10 ? '' : `/point/${type}-${theme}.png`; + return { width, height, lineWidth, image }; + } //#endregion //#region 线路 @@ -114,7 +124,6 @@ export class EditorService extends Meta2d { } #register() { - this.store.theme = THEME; this.registerCanvasDraw({ point: drawPoint, line: drawLine, area: drawArea }); this.registerAnchors({ point: anchorPoint }); } @@ -122,14 +131,40 @@ export class EditorService extends Meta2d { //#region 绘制函数 function drawPoint(ctx: CanvasRenderingContext2D, pen: MapPen): void { + const theme = sTheme.editor; + const active = pen.calculative?.active; const { x = 0, y = 0, width = 0, height = 0 } = pen.calculative?.worldRect ?? {}; const { type } = pen.point ?? {}; + const { label = '' } = pen ?? {}; + ctx.save(); - ctx.lineWidth = 2; - ctx.roundRect(x, y, width, height, 4); - ctx.stroke(); - ctx.fillStyle = '#fff'; - ctx.fillText(String(type), x + width / 2, y + height / 2); + switch (type) { + case MapPointType.普通点: + case MapPointType.等待点: + case MapPointType.避让点: + case MapPointType.临时避让点: + ctx.lineWidth = 2; + break; + case MapPointType.电梯点: + case MapPointType.自动门点: + case MapPointType.充电点: + case MapPointType.停靠点: + case MapPointType.动作点: + ctx.rect(x, y, width, height); + // ctx.fillStyle = get(theme, 'point-l.fill') ?? ''; + // ctx.fill(); + ctx.strokeStyle = get(theme, active ? 'point-l.strokeActive' : 'point-l.stroke') ?? ''; + ctx.stroke(); + break; + + default: + break; + } + ctx.fillStyle = get(theme, 'color') ?? ''; + ctx.font = '14px/20px system-ui'; + ctx.textAlign = 'center'; + ctx.textBaseline = 'middle'; + ctx.fillText(label, x + width / 2, y - 10); ctx.restore(); } function anchorPoint(pen: MapPen): void { diff --git a/src/services/locale.service.ts b/src/services/locale.service.ts index 69dca1f..c67ba17 100644 --- a/src/services/locale.service.ts +++ b/src/services/locale.service.ts @@ -22,8 +22,9 @@ enum Locale { export const LOCALES = Object.freeze<[string, Locale][]>(Object.entries(Locale)); export const i18n = createI18n({ - legacy: true, - silentTranslationWarn: true, + legacy: false, + missingWarn: false, + fallbackWarn: false, locale: Locale.简体中文, messages: chain(Locale) .invert() @@ -58,7 +59,7 @@ class LocaleService { } #load(locale: Locale): void { - i18n.global.locale = locale; + i18n.global.locale.value = locale; switch (locale) { case Locale.English: dayjs.locale('en'); diff --git a/src/services/theme.service.ts b/src/services/theme.service.ts index 2327dbc..6382936 100644 --- a/src/services/theme.service.ts +++ b/src/services/theme.service.ts @@ -1,6 +1,13 @@ import { theme, type TokenType as AntdTheme } from 'ant-design-vue'; +import { chain } from 'lodash-es'; import { ref, watch } from 'vue'; +const THEME_FILES = import.meta.glob('asset/themes/*.json', { eager: true, import: 'default' }); +const THEME_MAP = chain(THEME_FILES) + .mapKeys((_, k) => k.match(/^.*[\\|\\/](.+?)\.[^\\.]+$/)?.[1]) + .mapValues((v) => >v) + .value(); + enum Theme { Light = 'light', Dark = 'dark', @@ -29,6 +36,10 @@ class ThemeService { } } + public get editor(): object { + return THEME_MAP[`editor-${this.#theme.value}`] ?? {}; + } + constructor() { watch(this.#theme, (v) => this.#load(v), { immediate: true }); }