From f225d9aa58b611a9e28426aa4e131409c500fd18 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Sun, 11 May 2025 20:51:05 +0800 Subject: [PATCH] fix: fix resource update process for image, svg and html Element --- package.json | 2 +- packages/core/src/index.ts | 37 ++++++++++++++++++--------- packages/idraw/src/methods/element.ts | 2 +- packages/renderer/src/draw/html.ts | 4 +-- packages/renderer/src/draw/svg.ts | 4 +-- packages/renderer/src/loader.ts | 37 ++++++++++++++++++++++++++- 6 files changed, 67 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index e92769a..055268a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "private": false, - "version": "0.4.0-beta.42", + "version": "0.4.0-beta.43", "workspaces": [ "packages/*" ], diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index dcafe41..356a4b8 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -114,11 +114,17 @@ export class Core { this.#board.resetMiddlewareConfig(middleware, config); } - setData(data: Data) { + #resetData(data: Data) { validateElements(data?.elements || []); this.#board.setData(data); } + setData(data: Data) { + const loader = this.#board.getRenderer().getLoader(); + loader.reset(); + this.#resetData(data); + } + getData(): Data | null { return this.#board.getData(); } @@ -220,9 +226,10 @@ export class Core { const before = toFlattenElement(beforeElem); const updatedElement = updateElementInListByPosition(position, element, data.elements, { strict: true }) as Element; const after = toFlattenElement(updatedElement); - this.setData(data); + const loader = this.#board.getRenderer().getLoader(); + loader.resetElementAsset(element); + this.#resetData(data); this.refresh(); - const modifyRecord: ModifyRecord<'updateElement'> = { type: 'updateElement', time: Date.now(), @@ -246,7 +253,9 @@ export class Core { beforeElement: beforeElem }); updateElementInListByPosition(position, restElement, data.elements) as Element; - this.setData(data); + const loader = this.#board.getRenderer().getLoader(); + loader.resetElementAsset({ ...element, type: beforeElem.type }); + this.#resetData(data); this.refresh(); return modifyRecord; } @@ -292,7 +301,7 @@ export class Core { } }; - this.setData(data); + this.#resetData(data); this.refresh(); return modifyRecord; } @@ -317,7 +326,7 @@ export class Core { time: Date.now(), content: { method: 'addElement', uuid: element.uuid, position, element: deepClone(element) } }; - this.setData(data); + this.#resetData(data); this.refresh(); return modifyRecord; } @@ -331,8 +340,12 @@ export class Core { time: Date.now(), content: { method: 'deleteElement', uuid, position, element: element ? deepClone(element) : null } }; + if (element) { + const loader = this.#board.getRenderer().getLoader(); + loader.resetElementAsset(element); + } deleteElementInList(uuid, data.elements); - this.setData(data); + this.#resetData(data); this.refresh(); return modifyRecord; } @@ -348,7 +361,7 @@ export class Core { }; const { elements: list } = moveElementPosition(data.elements, { from, to }); data.elements = list; - this.setData(data); + this.#resetData(data); this.refresh(); return modifyRecord; } @@ -369,7 +382,7 @@ export class Core { if (data.layout) { modifyRecord.content.before = toFlattenLayout(data.layout); delete data['layout']; - this.setData(data); + this.#resetData(data); this.refresh(); return modifyRecord; } else { @@ -399,7 +412,7 @@ export class Core { modifyRecord.content.after = after; mergeLayout(data.layout as DataLayout, layout) as DataLayout; - this.setData(data); + this.#resetData(data); this.refresh(); return modifyRecord; } @@ -420,7 +433,7 @@ export class Core { if (data.global) { modifyRecord.content.before = toFlattenGlobal(data.global); delete data['global']; - this.setData(data); + this.#resetData(data); this.refresh(); return modifyRecord; } else { @@ -445,7 +458,7 @@ export class Core { modifyRecord.content.after = after; mergeGlobal(data.global as DataGlobal, global) as DataGlobal; - this.setData(data); + this.#resetData(data); this.refresh(); return modifyRecord; } diff --git a/packages/idraw/src/methods/element.ts b/packages/idraw/src/methods/element.ts index 1b1e1a4..c06bcc0 100644 --- a/packages/idraw/src/methods/element.ts +++ b/packages/idraw/src/methods/element.ts @@ -50,7 +50,7 @@ export function modifyElement( if (!data) { return; } - core.trigger(coreEventKeys.CHANGE, { data, type: 'updateElement', modifyRecord }); + core.trigger(coreEventKeys.CHANGE, { data, type: 'modifyElement', modifyRecord }); } export function addElement( diff --git a/packages/renderer/src/draw/html.ts b/packages/renderer/src/draw/html.ts index 304f642..1bd9195 100644 --- a/packages/renderer/src/draw/html.ts +++ b/packages/renderer/src/draw/html.ts @@ -4,8 +4,8 @@ import { getOpacity } from './box'; export function drawHTML(ctx: ViewContext2D, elem: Element<'html'>, opts: RendererDrawElementOptions) { const content = opts.loader.getContent(elem); - const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts; - const { x, y, w, h, angle } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem; + const { viewScaleInfo, parentOpacity } = opts; + const { x, y, w, h, angle } = calcViewElementSize(elem, { viewScaleInfo }) || elem; rotateElement(ctx, { x, y, w, h, angle }, () => { if (!content && !opts.loader.isDestroyed()) { opts.loader.load(elem as Element<'html'>, opts.elementAssets || {}); diff --git a/packages/renderer/src/draw/svg.ts b/packages/renderer/src/draw/svg.ts index 374ae01..31bbf0c 100644 --- a/packages/renderer/src/draw/svg.ts +++ b/packages/renderer/src/draw/svg.ts @@ -4,8 +4,8 @@ import { getOpacity } from './box'; export function drawSVG(ctx: ViewContext2D, elem: Element<'svg'>, opts: RendererDrawElementOptions) { const content = opts.loader.getContent(elem); - const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts; - const { x, y, w, h, angle } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem; + const { viewScaleInfo, parentOpacity } = opts; + const { x, y, w, h, angle } = calcViewElementSize(elem, { viewScaleInfo }) || elem; rotateElement(ctx, { x, y, w, h, angle }, () => { if (!content && !opts.loader.isDestroyed()) { opts.loader.load(elem as Element<'svg'>, opts.elementAssets || {}); diff --git a/packages/renderer/src/loader.ts b/packages/renderer/src/loader.ts index a29c2a2..fae8469 100644 --- a/packages/renderer/src/loader.ts +++ b/packages/renderer/src/loader.ts @@ -7,7 +7,8 @@ import type { LoadItemMap, LoadElementType, Element, - ElementAssets + ElementAssets, + RecursivePartial } from '@idraw/types'; import { loadImage, loadHTML, loadSVG, EventEmitter, createAssetId, isAssetId, createUUID } from '@idraw/util'; @@ -75,6 +76,40 @@ export class Loader extends EventEmitter implements RendererLoad return this.#hasDestroyed; } + reset() { + if (this.#hasDestroyed === true) { + return; + } + this.#currentLoadItemMap = {}; + this.#storageLoadItemMap = {}; + } + + resetElementAsset(element: Element | RecursivePartial) { + if (supportElementTypes.includes((element as Element).type)) { + let assetId: string | null = null; + let resource: string | null = null; + if (element.type === 'image' && typeof (element as Element<'image'>).detail.src === 'string') { + resource = (element as Element<'image'>).detail.src; + } else if (element.type === 'svg' && typeof (element as Element<'svg'>).detail.svg === 'string') { + resource = (element as Element<'svg'>).detail.svg; + } else if (element.type === 'html' && typeof (element as Element<'html'>).detail.html === 'string') { + resource = (element as Element<'html'>).detail.html; + } + if (typeof resource === 'string') { + this.load(element as Element, {}); + if (isAssetId(resource)) { + assetId = resource; + } else if (element.uuid) { + assetId = createAssetId(resource, element.uuid); + } + } + if (assetId && isAssetId(assetId)) { + delete this.#storageLoadItemMap[assetId]; + delete this.#currentLoadItemMap[assetId]; + } + } + } + destroy() { this.#hasDestroyed = true; this.clear();