Compare commits
4 Commits
57020eb9ca
...
be5667057e
| Author | SHA1 | Date | |
|---|---|---|---|
| be5667057e | |||
| 0c99073376 | |||
| 081dd1327a | |||
| f7a4a80a23 |
@ -45,9 +45,9 @@
|
|||||||
group="designer"
|
group="designer"
|
||||||
ghost-class="ghost"
|
ghost-class="ghost"
|
||||||
class="canvas"
|
class="canvas"
|
||||||
@start="onPreviewStart"
|
|
||||||
@update="onPreviewUpdate"
|
@update="onPreviewUpdate"
|
||||||
@stop="onPreviewStop"
|
@stop="onPreviewStop"
|
||||||
|
@add="onPreViewAdd"
|
||||||
>
|
>
|
||||||
<DynamicComponent v-for="component in store.previewScheme" :key="component.id" :componentData="component">
|
<DynamicComponent v-for="component in store.previewScheme" :key="component.id" :componentData="component">
|
||||||
{{ component.id }}
|
{{ component.id }}
|
||||||
@ -156,16 +156,20 @@ function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'tex
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const onEnd = (event: DraggableEvent) => {
|
const onPreViewAdd = (event: DraggableEvent) => {
|
||||||
console.log("onEnd", event);
|
console.log("onPreViewAdd", event);
|
||||||
store.updateNowScheme(event.clonedData);
|
store.updateNowScheme(event.clonedData);
|
||||||
};
|
};
|
||||||
|
const onEnd = (event: DraggableEvent) => {
|
||||||
|
// console.log("onEnd", event);
|
||||||
|
// store.updateNowScheme(event.clonedData);
|
||||||
|
};
|
||||||
|
|
||||||
const onStart = (event) => {
|
const onStart = (event) => {
|
||||||
// console.log("onStart", event);
|
// console.log("onStart", event);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onPreviewStart = (event) => {
|
const onPreviewStart = (event:DraggableEvent) => {
|
||||||
// console.log("onPreviewStart", event);
|
// console.log("onPreviewStart", event);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -173,7 +177,7 @@ const onPreviewUpdate = (event) => {
|
|||||||
// console.log("onPreviewUpdate", event);
|
// console.log("onPreviewUpdate", event);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onPreviewStop = (event) => {
|
const onPreviewStop = (event:DraggableEvent) => {
|
||||||
// console.log(event);
|
// console.log(event);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,24 +1,11 @@
|
|||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
import { IPageComponent } from '@/type/IPageComponent';
|
import { IPageComponent } from '@/type/IPageComponent';
|
||||||
import { sha256 } from 'js-sha256';
|
import { sha256 } from 'js-sha256';
|
||||||
|
import { popFromStack, pushToStack, topFromStack } from '@/utils/LRU.ts';
|
||||||
|
|
||||||
// 缓存对象
|
// 缓存对象
|
||||||
const idToObjectCache = new Map<string, IPageComponent>();
|
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) {
|
function findObjectById(obj: any, targetId: string) {
|
||||||
if (Array.isArray(obj)) {
|
if (Array.isArray(obj)) {
|
||||||
for (let i = 0; i < obj.length; i++) {
|
for (let i = 0; i < obj.length; i++) {
|
||||||
@ -93,18 +80,17 @@ export const useSchemeStore = defineStore('scheme', {
|
|||||||
},
|
},
|
||||||
|
|
||||||
updateNowScheme(updates: Partial<IPageComponent>) {
|
updateNowScheme(updates: Partial<IPageComponent>) {
|
||||||
|
debugger;
|
||||||
this.nowComponentsData = updates;
|
this.nowComponentsData = updates;
|
||||||
pushToStack(this.selectedComponentStack, this.nowComponentsData.id);
|
pushToStack(this.selectedComponentStack, this.nowComponentsData.id);
|
||||||
|
|
||||||
console.log("更新nowComponentsData", this.nowComponentsData);
|
console.log("更新nowComponentsData", this.nowComponentsData);
|
||||||
|
|
||||||
console.log("更新selectedComponentStack",this.selectedComponentStack);
|
|
||||||
|
|
||||||
return this.nowComponentsData;
|
return this.nowComponentsData;
|
||||||
},
|
},
|
||||||
deleteScheme(id: string) {
|
deleteScheme(id: string) {
|
||||||
console.log("删除前,组件id",id)
|
debugger;
|
||||||
console.log("删除前,栈",this.selectedComponentStack)
|
console.log("删除前,组件id", id);
|
||||||
const currentStateHash = this.currentHash;
|
const currentStateHash = this.currentHash;
|
||||||
const objToDelete = findObjectById(this.previewScheme, id);
|
const objToDelete = findObjectById(this.previewScheme, id);
|
||||||
if (objToDelete) {
|
if (objToDelete) {
|
||||||
@ -113,18 +99,11 @@ export const useSchemeStore = defineStore('scheme', {
|
|||||||
idToObjectCache.delete(id); // 从缓存中删除
|
idToObjectCache.delete(id); // 从缓存中删除
|
||||||
// 清理 history 中的引用
|
// 清理 history 中的引用
|
||||||
this.cleanupReferences(id);
|
this.cleanupReferences(id);
|
||||||
|
|
||||||
}
|
}
|
||||||
this.saveNewState(currentStateHash);
|
this.saveNewState(currentStateHash);
|
||||||
popFromStack(this.selectedComponentStack);
|
popFromStack(this.selectedComponentStack);
|
||||||
console.log("scheme",this.previewScheme);
|
const preComponentId = topFromStack(this.selectedComponentStack);
|
||||||
const preComponentId=topFromStack(this.selectedComponentStack)
|
this.nowComponentsData = this.getSchemeObj(preComponentId || '');
|
||||||
console.log("删除后,栈",this.selectedComponentStack)
|
|
||||||
console.log("删除后,前一个组件id",preComponentId)
|
|
||||||
const preObj=this.getSchemeObj(preComponentId)
|
|
||||||
console.log("删除后,前一个组件",preObj)
|
|
||||||
|
|
||||||
this.nowComponentsData = preObj;
|
|
||||||
},
|
},
|
||||||
cleanupReferences(id: string) {
|
cleanupReferences(id: string) {
|
||||||
// 清理 nowComponentsData
|
// 清理 nowComponentsData
|
||||||
@ -150,7 +129,7 @@ export const useSchemeStore = defineStore('scheme', {
|
|||||||
const prevState = this.history[this.currentIndex % HISTORY_LENGTH];
|
const prevState = this.history[this.currentIndex % HISTORY_LENGTH];
|
||||||
if (prevState) {
|
if (prevState) {
|
||||||
this.previewScheme = 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));
|
this.currentHash = sha256(JSON.stringify(this.previewScheme));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -161,7 +140,7 @@ export const useSchemeStore = defineStore('scheme', {
|
|||||||
const nextState = this.history[this.currentIndex % HISTORY_LENGTH];
|
const nextState = this.history[this.currentIndex % HISTORY_LENGTH];
|
||||||
if (nextState) {
|
if (nextState) {
|
||||||
this.previewScheme = 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));
|
this.currentHash = sha256(JSON.stringify(this.previewScheme));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
15
src/utils/LRU.ts
Normal file
15
src/utils/LRU.ts
Normal 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() 方法访问最后一个元素
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user