diff --git a/src/canvas/view/FrameView.js b/src/canvas/view/FrameView.js index e3a7be5d7..79731c54f 100644 --- a/src/canvas/view/FrameView.js +++ b/src/canvas/view/FrameView.js @@ -47,9 +47,33 @@ export default Backbone.View.extend({ * Update `` content of the frame */ updateHead() { + const { model } = this; const headEl = this.getHead(); - empty(headEl); - appendVNodes(headEl, this.model.getHead()); + const toRemove = []; + const toAdd = []; + const current = model.get('head'); + const prev = model.previous('head'); + const attrStr = (attr = {}) => + Object.keys(attr) + .sort() + .map(i => `[${i}="${attr[i]}"]`) + .join(''); + const find = (items, stack, res) => { + items.forEach(item => { + const { tag, attributes } = item; + const has = stack.some( + s => s.tag === tag && attrStr(s.attributes) === attrStr(attributes) + ); + !has && res.push(item); + }); + }; + find(current, prev, toAdd); + find(prev, current, toRemove); + toRemove.forEach(stl => { + const el = headEl.querySelector(`${stl.tag}${attrStr(stl.attributes)}`); + el && el.parentNode.removeChild(el); + }); + appendVNodes(headEl, toAdd); }, getEl() {