mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-25 08:34:13 +02:00
Code Releases Activity

wip

Browse Source
This commit is contained in:
syuilo
2026-04-22 16:02:24 +09:00
parent 2d36ccf1b2
commit 61fd35bc97
2 changed files with 111 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/frontend/src/pages/room.vue
View File

@@ -93,7 +93,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="controller.isReady.value" class="_buttons" :class="$style.controls"> <div v-if="controller.isReady.value" class="_buttons" :class="$style.controls">
<!--<MkButton v-for="action in actions" :key="action.key" @click="action.fn">{{ action.label }}{{ hotkeyToLabel(action.hotkey) }}</MkButton>--> <!--<MkButton v-for="action in actions" :key="action.key" @click="action.fn">{{ action.label }}{{ hotkeyToLabel(action.hotkey) }}</MkButton>-->
<MkButton @click="toggleLight">Toggle Light</MkButton> <MkButton @click="toggleLight">Toggle Light</MkButton>
<MkButton v-if="controller.isEditMode.value" primary @click="save">Save</MkButton>
<MkButton v-if="controller.isEditMode.value" @click="exitEditMode">Exit edit mode</MkButton> <MkButton v-if="controller.isEditMode.value" @click="exitEditMode">Exit edit mode</MkButton>
<MkButton v-if="!controller.isEditMode.value" @click="enterEditMode">Edit mode</MkButton> <MkButton v-if="!controller.isEditMode.value" @click="enterEditMode">Edit mode</MkButton>
<MkButton v-if="controller.isEditMode.value" @click="addObject">addObject</MkButton> <MkButton v-if="controller.isEditMode.value" @click="addObject">addObject</MkButton>
@@ -101,6 +100,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton @click="expor">Export</MkButton> <MkButton @click="expor">Export</MkButton>
<MkButton @click="impor">Import</MkButton> <MkButton @click="impor">Import</MkButton>
</div> </div>
<div v-if="isChanged" class="_buttons">
保存していない変更があります
<MkButton danger @click="revert">戻す</MkButton>
<MkButton primary @click="save">保存</MkButton>
</div>
</template> </template>
</div> </div>
</template> </template>
@@ -118,6 +122,7 @@ import MkSwitch from '@/components/MkSwitch.vue';
import MkRange from '@/components/MkRange.vue'; import MkRange from '@/components/MkRange.vue';
import { RoomController } from '@/world/room/controller.js'; import { RoomController } from '@/world/room/controller.js';
import { cm } from '@/world/utility.js'; import { cm } from '@/world/utility.js';
import { deepClone } from '@/utility/clone.js';
const canvas = useTemplateRef('canvas'); const canvas = useTemplateRef('canvas');
@@ -134,6 +139,7 @@ function resize() {
const isZenMode = ref(false); const isZenMode = ref(false);
const isRoomSettingsOpen = ref(false); const isRoomSettingsOpen = ref(false);
const isChanged = ref(false);
const data = localStorage.getItem('roomData') != null ? { ...JSON.parse(localStorage.getItem('roomData')!), ...{ const data = localStorage.getItem('roomData') != null ? { ...JSON.parse(localStorage.getItem('roomData')!), ...{
heya: { heya: {
@@ -204,6 +210,8 @@ const data = localStorage.getItem('roomData') != null ? { ...JSON.parse(localSto
console.log(data); console.log(data);
let latestData = deepClone(data);
const controller = new RoomController(data); const controller = new RoomController(data);
onMounted(async () => { onMounted(async () => {
@@ -213,6 +221,10 @@ onMounted(async () => {
window.addEventListener('resize', resize); window.addEventListener('resize', resize);
watch(controller.roomState, () => {
isChanged.value = true;
});
//watch(controller.selected, (v) => { //watch(controller.selected, (v) => {
// if (v == null) { // if (v == null) {
// interacions.value = []; // interacions.value = [];
@@ -332,7 +344,14 @@ function getRgb(hex: string | number): [number, number, number] | null {
} }
function save() { function save() {
localStorage.setItem('roomData', JSON.stringify(controller.roomState.value)); latestData = deepClone(controller.roomState.value);
localStorage.setItem('roomData', JSON.stringify(latestData));
isChanged.value = false;
}
async function revert() {
await controller.reset(latestData);
isChanged.value = false;
} }
function expor() { function expor() {

149
packages/frontend/src/world/room/controller.ts
View File

@@ -17,6 +17,7 @@ export class RoomController {
private worker: Worker | null = null; private worker: Worker | null = null;
private engine: RoomEngine | null = null; private engine: RoomEngine | null = null;
private canvas: HTMLCanvasElement | null = null; private canvas: HTMLCanvasElement | null = null;
private isCanvasDragging = false;
public isReady = ref(false); public isReady = ref(false);
public isSitting = ref(false); public isSitting = ref(false);
public isEditMode = ref(false); public isEditMode = ref(false);
@@ -32,6 +33,14 @@ export class RoomController {
constructor(roomState: RoomState) { constructor(roomState: RoomState) {
this.roomState = shallowRef(roomState); this.roomState = shallowRef(roomState);
this.onCanvasKeydown = this.onCanvasKeydown.bind(this);
this.onCanvasKeyup = this.onCanvasKeyup.bind(this);
this.onCanvasWheel = this.onCanvasWheel.bind(this);
this.onCanvasPointerdown = this.onCanvasPointerdown.bind(this);
this.onCanvasPointermove = this.onCanvasPointermove.bind(this);
this.onCanvasPointerup = this.onCanvasPointerup.bind(this);
this.onCanvasClick = this.onCanvasClick.bind(this);
} }
public async init(canvas: HTMLCanvasElement, workerMode = false) { public async init(canvas: HTMLCanvasElement, workerMode = false) {
@@ -82,73 +91,87 @@ export class RoomController {
}); });
} }
this.canvas.addEventListener('keydown', (ev) => { this.canvas.addEventListener('keydown', this.onCanvasKeydown);
if (this.worker != null) { this.canvas.addEventListener('keyup', this.onCanvasKeyup);
this.worker.postMessage({ type: 'dom:keydown', ev: { code: ev.code, shiftKey: ev.shiftKey } }); this.canvas.addEventListener('wheel', this.onCanvasWheel);
} else if (this.engine != null) { this.canvas.addEventListener('pointerdown', this.onCanvasPointerdown);
this.engine.domEvents.emit('keydown', { code: ev.code, shiftKey: ev.shiftKey }); this.canvas.addEventListener('pointermove', this.onCanvasPointermove);
} this.canvas.addEventListener('pointerup', this.onCanvasPointerup);
ev.preventDefault(); this.canvas.addEventListener('click', this.onCanvasClick);
ev.stopPropagation(); }
return false;
});
this.canvas.addEventListener('keyup', (ev) => { private onCanvasKeydown(ev: KeyboardEvent) {
if (this.worker != null) { if (this.worker != null) {
this.worker.postMessage({ type: 'dom:keyup', ev: { code: ev.code, shiftKey: ev.shiftKey } }); this.worker.postMessage({ type: 'dom:keydown', ev: { code: ev.code, shiftKey: ev.shiftKey } });
} else if (this.engine != null) { } else if (this.engine != null) {
this.engine.domEvents.emit('keyup', { code: ev.code, shiftKey: ev.shiftKey }); this.engine.domEvents.emit('keydown', { code: ev.code, shiftKey: ev.shiftKey });
} }
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
return false; return false;
}); }
this.canvas.addEventListener('pointerdown', (ev) => { private onCanvasKeyup(ev: KeyboardEvent) {
// todo if (this.worker != null) {
}); this.worker.postMessage({ type: 'dom:keyup', ev: { code: ev.code, shiftKey: ev.shiftKey } });
} else if (this.engine != null) {
this.engine.domEvents.emit('keyup', { code: ev.code, shiftKey: ev.shiftKey });
}
ev.preventDefault();
ev.stopPropagation();
return false;
}
this.canvas.addEventListener('wheel', (ev) => { private onCanvasWheel(ev: WheelEvent) {
if (this.worker != null) { if (this.worker != null) {
this.worker.postMessage({ type: 'dom:wheel', ev: { deltaY: ev.deltaY } }); this.worker.postMessage({ type: 'dom:wheel', ev: { deltaY: ev.deltaY } });
} else if (this.engine != null) { } else if (this.engine != null) {
this.engine.domEvents.emit('wheel', { deltaY: ev.deltaY }); this.engine.domEvents.emit('wheel', { deltaY: ev.deltaY });
} }
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
return false; return false;
}); }
let isDragging = false; private onCanvasPointerdown(ev: PointerEvent) {
this.canvas.setPointerCapture(ev.pointerId);
}
this.canvas.addEventListener('pointerdown', (ev) => { private onCanvasPointermove(ev: PointerEvent) {
this.canvas.setPointerCapture(ev.pointerId); if (this.canvas.hasPointerCapture(ev.pointerId)) {
}); this.isCanvasDragging = true;
}
}
this.canvas.addEventListener('pointermove', (ev) => { private onCanvasPointerup(ev: PointerEvent) {
if (this.canvas.hasPointerCapture(ev.pointerId)) { window.setTimeout(() => {
isDragging = true; this.isCanvasDragging = false;
} this.canvas.releasePointerCapture(ev.pointerId);
}); }, 0);
}
this.canvas.addEventListener('pointerup', (ev) => { private onCanvasClick(ev: MouseEvent) {
window.setTimeout(() => { if (this.isCanvasDragging) return;
isDragging = false; if (this.worker != null) {
this.canvas.releasePointerCapture(ev.pointerId); this.worker.postMessage({ type: 'dom:click', ev: { offsetX: ev.offsetX, offsetY: ev.offsetY } });
}, 0); } else if (this.engine != null) {
}); this.engine.domEvents.emit('click', { offsetX: ev.offsetX, offsetY: ev.offsetY });
}
ev.preventDefault();
ev.stopPropagation();
return false;
}
this.canvas.addEventListener('click', (ev) => { public async reset(roomState: RoomState, canvas?: HTMLCanvasElement, workerMode = false) {
if (isDragging) return; this.destroy();
if (this.worker != null) { this.roomState.value = roomState;
this.worker.postMessage({ type: 'dom:click', ev: { offsetX: ev.offsetX, offsetY: ev.offsetY } }); this.isReady.value = false;
} else if (this.engine != null) { this.isSitting.value = false;
this.engine.domEvents.emit('click', { offsetX: ev.offsetX, offsetY: ev.offsetY }); this.isEditMode.value = false;
} this.grabbing.value = null;
ev.preventDefault(); this.selected.value = null;
ev.stopPropagation(); this.initializeProgress.value = 0;
return false; await this.init(canvas ?? this.canvas!, workerMode);
});
} }
public enterEditMode() { public enterEditMode() {
@@ -259,6 +282,14 @@ export class RoomController {
} }
public destroy() { public destroy() {
this.canvas?.removeEventListener('keydown', this.onCanvasKeydown);
this.canvas?.removeEventListener('keyup', this.onCanvasKeyup);
this.canvas?.removeEventListener('wheel', this.onCanvasWheel);
this.canvas?.removeEventListener('pointerdown', this.onCanvasPointerdown);
this.canvas?.removeEventListener('pointermove', this.onCanvasPointermove);
this.canvas?.removeEventListener('pointerup', this.onCanvasPointerup);
this.canvas?.removeEventListener('click', this.onCanvasClick);
if (this.worker != null) { if (this.worker != null) {
this.worker.terminate(); this.worker.terminate();
this.worker = null; this.worker = null;