Compare commits

...

4 Commits

3 changed files with 39 additions and 41 deletions

View File

@ -45,9 +45,9 @@
group="designer"
ghost-class="ghost"
class="canvas"
@start="onPreviewStart"
@update="onPreviewUpdate"
@stop="onPreviewStop"
@add="onPreViewAdd"
>
<DynamicComponent v-for="component in store.previewScheme" :key="component.id" :componentData="component">
{{ component.id }}
@ -156,16 +156,20 @@ function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'tex
};
}
const onEnd = (event: DraggableEvent) => {
console.log("onEnd", event);
const onPreViewAdd = (event: DraggableEvent) => {
console.log("onPreViewAdd", event);
store.updateNowScheme(event.clonedData);
};
const onEnd = (event: DraggableEvent) => {
// console.log("onEnd", event);
// store.updateNowScheme(event.clonedData);
};
const onStart = (event) => {
// console.log("onStart", event);
};
const onPreviewStart = (event) => {
const onPreviewStart = (event:DraggableEvent) => {
// console.log("onPreviewStart", event);
};
@ -173,7 +177,7 @@ const onPreviewUpdate = (event) => {
// console.log("onPreviewUpdate", event);
};
const onPreviewStop = (event) => {
const onPreviewStop = (event:DraggableEvent) => {
// console.log(event);
};

View File

@ -1,30 +1,17 @@
import {defineStore} from 'pinia';
import {IPageComponent} from '@/type/IPageComponent';
import {sha256} from 'js-sha256';
import { defineStore } from 'pinia';
import { IPageComponent } from '@/type/IPageComponent';
import { sha256 } from 'js-sha256';
import { popFromStack, pushToStack, topFromStack } from '@/utils/LRU.ts';
// 缓存对象
const idToObjectCache = new Map<string, IPageComponent>();
// 栈维护函数
function pushToStack(stack: string[], id: string): void {
if (!stack.includes(id)) {
stack.push(id);
}
}
function popFromStack(stack: string[]): string | undefined {
return stack.pop();
}
function topFromStack(stack: string[]): string | undefined {
return stack.at(-1); // 使用 .at() 方法访问最后一个元素
}
function findObjectById(obj: any, targetId: string) {
if (Array.isArray(obj)) {
for (let i = 0; i < obj.length; i++) {
const item = obj[i];
if (item.id === targetId) {
return {item, index: i, parent: obj};
return { item, index: i, parent: obj };
}
const found = findObjectById(item, targetId);
if (found) return found;
@ -93,38 +80,30 @@ export const useSchemeStore = defineStore('scheme', {
},
updateNowScheme(updates: Partial<IPageComponent>) {
debugger;
this.nowComponentsData = updates;
pushToStack(this.selectedComponentStack, this.nowComponentsData.id);
console.log("更新nowComponentsData",this.nowComponentsData);
console.log("更新selectedComponentStack",this.selectedComponentStack);
console.log("更新nowComponentsData", this.nowComponentsData);
return this.nowComponentsData;
},
deleteScheme(id: string) {
console.log("删除前,组件id",id)
console.log("删除前,",this.selectedComponentStack)
debugger;
console.log("删除前,组件id", id);
const currentStateHash = this.currentHash;
const objToDelete = findObjectById(this.previewScheme, id);
if (objToDelete) {
const {item, index, parent} = objToDelete;
const { item, index, parent } = objToDelete;
parent.splice(index, 1);
idToObjectCache.delete(id); // 从缓存中删除
// 清理 history 中的引用
this.cleanupReferences(id);
}
this.saveNewState(currentStateHash);
popFromStack(this.selectedComponentStack);
console.log("scheme",this.previewScheme);
const preComponentId=topFromStack(this.selectedComponentStack)
console.log("删除后,栈",this.selectedComponentStack)
console.log("删除后,前一个组件id",preComponentId)
const preObj=this.getSchemeObj(preComponentId)
console.log("删除后,前一个组件",preObj)
this.nowComponentsData = preObj;
const preComponentId = topFromStack(this.selectedComponentStack);
this.nowComponentsData = this.getSchemeObj(preComponentId || '');
},
cleanupReferences(id: string) {
// 清理 nowComponentsData
@ -138,7 +117,7 @@ export const useSchemeStore = defineStore('scheme', {
if (historyState) {
const obj = findObjectById(historyState, id);
if (obj) {
const {parent, index} = obj;
const { parent, index } = obj;
parent.splice(index, 1);
}
}
@ -150,7 +129,7 @@ export const useSchemeStore = defineStore('scheme', {
const prevState = this.history[this.currentIndex % HISTORY_LENGTH];
if (prevState) {
this.previewScheme = prevState;
this.nowComponentsData = this.previewScheme[0] || {} as IPageComponent;
this.nowComponentsData = this.getSchemeObj(topFromStack(this.selectedComponentStack) || '');
this.currentHash = sha256(JSON.stringify(this.previewScheme));
}
}
@ -161,7 +140,7 @@ export const useSchemeStore = defineStore('scheme', {
const nextState = this.history[this.currentIndex % HISTORY_LENGTH];
if (nextState) {
this.previewScheme = nextState;
this.nowComponentsData = this.previewScheme[0] || {} as IPageComponent;
this.nowComponentsData = this.getSchemeObj(topFromStack(this.selectedComponentStack) || '');
this.currentHash = sha256(JSON.stringify(this.previewScheme));
}
}

15
src/utils/LRU.ts Normal file
View File

@ -0,0 +1,15 @@
export function pushToStack(stack: string[], id: string): void {
if (stack.includes(id)) {
// 如果已经存在于栈中,先移除再插入到栈顶
stack.splice(stack.indexOf(id), 1);
}
stack.push(id);
}
export function popFromStack(stack: string[]): string | undefined {
return stack.pop();
}
export function topFromStack(stack: string[]): string | undefined {
return stack.at(-1); // 使用 .at() 方法访问最后一个元素
}