75b0f1483608b52d2dc429a39856e1ebff953146f16fe94170139fd061e893480078beae14675ace038865fa52c9013602e8b4136a5220731881e20223ac41 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. /**
  2. * Virtual DOM patching
  3. * Modified from snabbdom https://github.com/snabbdom/snabbdom/blob/master/src/init.ts
  4. *
  5. * The design has been simplified to focus on the purpose in SVG rendering in SVG.
  6. *
  7. * Licensed under the MIT License
  8. * https://github.com/paldepind/snabbdom/blob/master/LICENSE
  9. */
  10. import { isArray, isObject } from '../core/util';
  11. import { createElement, createVNode, SVGVNode, XMLNS, XML_NAMESPACE, XLINKNS } from './core';
  12. import * as api from './domapi';
  13. const colonChar = 58;
  14. const xChar = 120;
  15. const emptyNode = createVNode('', '');
  16. type NonUndefined<T> = T extends undefined ? never : T;
  17. function isUndef(s: any): boolean {
  18. return s === undefined;
  19. }
  20. function isDef<A>(s: A): s is NonUndefined<A> {
  21. return s !== undefined;
  22. }
  23. function createKeyToOldIdx(
  24. children: SVGVNode[],
  25. beginIdx: number,
  26. endIdx: number
  27. ): KeyToIndexMap {
  28. const map: KeyToIndexMap = {};
  29. for (let i = beginIdx; i <= endIdx; ++i) {
  30. const key = children[i].key;
  31. if (key !== undefined) {
  32. if (process.env.NODE_ENV !== 'production') {
  33. if (map[key] != null) {
  34. console.error(`Duplicate key ${key}`);
  35. }
  36. }
  37. map[key] = i;
  38. }
  39. }
  40. return map;
  41. }
  42. function sameVnode(vnode1: SVGVNode, vnode2: SVGVNode): boolean {
  43. const isSameKey = vnode1.key === vnode2.key;
  44. const isSameTag = vnode1.tag === vnode2.tag;
  45. return isSameTag && isSameKey;
  46. }
  47. type KeyToIndexMap = { [key: string]: number };
  48. function createElm(vnode: SVGVNode): Node {
  49. let i: any;
  50. const children = vnode.children;
  51. const tag = vnode.tag;
  52. // if (tag === '!') {
  53. // if (isUndef(vnode.text)) {
  54. // vnode.text = '';
  55. // }
  56. // vnode.elm = api.createComment(vnode.text!);
  57. // }
  58. // else
  59. if (isDef(tag)) {
  60. const elm = (vnode.elm = createElement(tag));
  61. updateAttrs(emptyNode, vnode);
  62. if (isArray(children)) {
  63. for (i = 0; i < children.length; ++i) {
  64. const ch = children[i];
  65. if (ch != null) {
  66. api.appendChild(elm, createElm(ch));
  67. }
  68. }
  69. }
  70. else if (isDef(vnode.text) && !isObject(vnode.text)) {
  71. api.appendChild(elm, api.createTextNode(vnode.text));
  72. }
  73. }
  74. else {
  75. vnode.elm = api.createTextNode(vnode.text!);
  76. }
  77. return vnode.elm;
  78. }
  79. function addVnodes(
  80. parentElm: Node,
  81. before: Node | null,
  82. vnodes: SVGVNode[],
  83. startIdx: number,
  84. endIdx: number
  85. ) {
  86. for (; startIdx <= endIdx; ++startIdx) {
  87. const ch = vnodes[startIdx];
  88. if (ch != null) {
  89. api.insertBefore(parentElm, createElm(ch), before);
  90. }
  91. }
  92. }
  93. function removeVnodes(parentElm: Node, vnodes: SVGVNode[], startIdx: number, endIdx: number): void {
  94. for (; startIdx <= endIdx; ++startIdx) {
  95. const ch = vnodes[startIdx];
  96. if (ch != null) {
  97. if (isDef(ch.tag)) {
  98. const parent = api.parentNode(ch.elm);
  99. api.removeChild(parent, ch.elm);
  100. }
  101. else {
  102. // Text node
  103. api.removeChild(parentElm, ch.elm!);
  104. }
  105. }
  106. }
  107. }
  108. export function updateAttrs(oldVnode: SVGVNode, vnode: SVGVNode): void {
  109. let key: string;
  110. const elm = vnode.elm as Element;
  111. const oldAttrs = oldVnode && oldVnode.attrs || {};
  112. const attrs = vnode.attrs || {};
  113. if (oldAttrs === attrs) {
  114. return;
  115. }
  116. // update modified attributes, add new attributes
  117. // eslint-disable-next-line
  118. for (key in attrs) {
  119. const cur = attrs[key];
  120. const old = oldAttrs[key];
  121. if (old !== cur) {
  122. if (cur === true) {
  123. elm.setAttribute(key, '');
  124. }
  125. else if (cur === false) {
  126. elm.removeAttribute(key);
  127. }
  128. else {
  129. if (key.charCodeAt(0) !== xChar) {
  130. elm.setAttribute(key, cur as any);
  131. }
  132. // TODO
  133. else if (key === 'xmlns:xlink' || key === 'xmlns') {
  134. elm.setAttributeNS(XMLNS, key, cur as any);
  135. }
  136. else if (key.charCodeAt(3) === colonChar) {
  137. // Assume xml namespace
  138. elm.setAttributeNS(XML_NAMESPACE, key, cur as any);
  139. }
  140. else if (key.charCodeAt(5) === colonChar) {
  141. // Assume xlink namespace
  142. elm.setAttributeNS(XLINKNS, key, cur as any);
  143. }
  144. else {
  145. elm.setAttribute(key, cur as any);
  146. }
  147. }
  148. }
  149. }
  150. // remove removed attributes
  151. // use `in` operator since the previous `for` iteration uses it (.i.e. add even attributes with undefined value)
  152. // the other option is to remove all attributes with value == undefined
  153. for (key in oldAttrs) {
  154. if (!(key in attrs)) {
  155. elm.removeAttribute(key);
  156. }
  157. }
  158. }
  159. function updateChildren(parentElm: Node, oldCh: SVGVNode[], newCh: SVGVNode[]) {
  160. let oldStartIdx = 0;
  161. let newStartIdx = 0;
  162. let oldEndIdx = oldCh.length - 1;
  163. let oldStartVnode = oldCh[0];
  164. let oldEndVnode = oldCh[oldEndIdx];
  165. let newEndIdx = newCh.length - 1;
  166. let newStartVnode = newCh[0];
  167. let newEndVnode = newCh[newEndIdx];
  168. let oldKeyToIdx: KeyToIndexMap | undefined;
  169. let idxInOld: number;
  170. let elmToMove: SVGVNode;
  171. let before: any;
  172. while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
  173. if (oldStartVnode == null) {
  174. oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
  175. }
  176. else if (oldEndVnode == null) {
  177. oldEndVnode = oldCh[--oldEndIdx];
  178. }
  179. else if (newStartVnode == null) {
  180. newStartVnode = newCh[++newStartIdx];
  181. }
  182. else if (newEndVnode == null) {
  183. newEndVnode = newCh[--newEndIdx];
  184. }
  185. else if (sameVnode(oldStartVnode, newStartVnode)) {
  186. patchVnode(oldStartVnode, newStartVnode);
  187. oldStartVnode = oldCh[++oldStartIdx];
  188. newStartVnode = newCh[++newStartIdx];
  189. }
  190. else if (sameVnode(oldEndVnode, newEndVnode)) {
  191. patchVnode(oldEndVnode, newEndVnode);
  192. oldEndVnode = oldCh[--oldEndIdx];
  193. newEndVnode = newCh[--newEndIdx];
  194. }
  195. else if (sameVnode(oldStartVnode, newEndVnode)) {
  196. // Vnode moved right
  197. patchVnode(oldStartVnode, newEndVnode);
  198. api.insertBefore(parentElm, oldStartVnode.elm!, api.nextSibling(oldEndVnode.elm!));
  199. oldStartVnode = oldCh[++oldStartIdx];
  200. newEndVnode = newCh[--newEndIdx];
  201. }
  202. else if (sameVnode(oldEndVnode, newStartVnode)) {
  203. // Vnode moved left
  204. patchVnode(oldEndVnode, newStartVnode);
  205. api.insertBefore(parentElm, oldEndVnode.elm!, oldStartVnode.elm!);
  206. oldEndVnode = oldCh[--oldEndIdx];
  207. newStartVnode = newCh[++newStartIdx];
  208. }
  209. else {
  210. if (isUndef(oldKeyToIdx)) {
  211. oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
  212. }
  213. idxInOld = oldKeyToIdx[newStartVnode.key];
  214. if (isUndef(idxInOld)) {
  215. // New element
  216. api.insertBefore(parentElm, createElm(newStartVnode), oldStartVnode.elm!);
  217. }
  218. else {
  219. elmToMove = oldCh[idxInOld];
  220. if (elmToMove.tag !== newStartVnode.tag) {
  221. api.insertBefore(parentElm, createElm(newStartVnode), oldStartVnode.elm!);
  222. }
  223. else {
  224. patchVnode(elmToMove, newStartVnode);
  225. oldCh[idxInOld] = undefined;
  226. api.insertBefore(parentElm, elmToMove.elm!, oldStartVnode.elm!);
  227. }
  228. }
  229. newStartVnode = newCh[++newStartIdx];
  230. }
  231. }
  232. if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
  233. if (oldStartIdx > oldEndIdx) {
  234. before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm;
  235. addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx);
  236. }
  237. else {
  238. removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
  239. }
  240. }
  241. }
  242. function patchVnode(oldVnode: SVGVNode, vnode: SVGVNode) {
  243. const elm = (vnode.elm = oldVnode.elm)!;
  244. const oldCh = oldVnode.children;
  245. const ch = vnode.children;
  246. if (oldVnode === vnode) {
  247. return;
  248. }
  249. updateAttrs(oldVnode, vnode);
  250. if (isUndef(vnode.text)) {
  251. if (isDef(oldCh) && isDef(ch)) {
  252. if (oldCh !== ch) {
  253. updateChildren(elm, oldCh, ch);
  254. }
  255. }
  256. else if (isDef(ch)) {
  257. if (isDef(oldVnode.text)) {
  258. api.setTextContent(elm, '');
  259. }
  260. addVnodes(elm, null, ch, 0, ch.length - 1);
  261. }
  262. else if (isDef(oldCh)) {
  263. removeVnodes(elm, oldCh, 0, oldCh.length - 1);
  264. }
  265. else if (isDef(oldVnode.text)) {
  266. api.setTextContent(elm, '');
  267. }
  268. }
  269. else if (oldVnode.text !== vnode.text) {
  270. if (isDef(oldCh)) {
  271. removeVnodes(elm, oldCh, 0, oldCh.length - 1);
  272. }
  273. api.setTextContent(elm, vnode.text!);
  274. }
  275. }
  276. export default function patch(oldVnode: SVGVNode, vnode: SVGVNode): SVGVNode {
  277. if (sameVnode(oldVnode, vnode)) {
  278. patchVnode(oldVnode, vnode);
  279. }
  280. else {
  281. const elm = oldVnode.elm!;
  282. const parent = api.parentNode(elm);
  283. createElm(vnode);
  284. if (parent !== null) {
  285. api.insertBefore(parent, vnode.elm!, api.nextSibling(elm));
  286. removeVnodes(parent, [oldVnode], 0, 0);
  287. }
  288. }
  289. return vnode;
  290. }