mapper.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. /**
  2. * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* bender-tags: treecontroller */
  6. 'use strict';
  7. import Mapper from '/ckeditor5/core/treecontroller/mapper.js';
  8. import ModelElement from '/ckeditor5/core/treemodel/element.js';
  9. import ModelRootElement from '/ckeditor5/core/treemodel/rootelement.js';
  10. import ModelText from '/ckeditor5/core/treemodel/text.js';
  11. import ModelPosition from '/ckeditor5/core/treemodel/position.js';
  12. import ViewElement from '/ckeditor5/core/treeview/element.js';
  13. import ViewText from '/ckeditor5/core/treeview/text.js';
  14. import ViewPosition from '/ckeditor5/core/treeview/position.js';
  15. describe( 'Mapper', () => {
  16. let modelDiv, modelP, modelImg;
  17. let viewDiv, viewP, viewB, viewI, viewU, viewSup, viewImg;
  18. let viewTextB, viewTextO, viewTextM, viewTextX, viewTextY, viewTextZZ, viewTextFOO, viewTextBAR;
  19. let mapper;
  20. before( () => {
  21. // Tree Model:
  22. //
  23. // <div> ---> modelDiv
  24. // ├─ x
  25. // ├─ <p> ---> modelP
  26. // │ ├─ y
  27. // │ ├─ f {b,i}
  28. // │ ├─ o {b,i}
  29. // │ ├─ o {b,i}
  30. // │ ├─ b
  31. // │ ├─ a
  32. // │ ├─ r
  33. // │ ├─ <img> ---> modelImg
  34. // │ ├─ b {u}
  35. // │ ├─ o {u,sup}
  36. // │ └─ m {u}
  37. // ├─ z
  38. // └─ z
  39. //
  40. // Tree View:
  41. //
  42. // <div> ---> viewDiv
  43. // ├─ x ---> viewTextX
  44. // ├─ <p> ---> viewP
  45. // │ ├─ y ---> viewTextY
  46. // │ ├─ <b> ---> viewB
  47. // │ │ └─ <i> ---> viewI
  48. // │ │ └─ foo ---> viewTextFOO
  49. // │ ├─ bar ---> viewTextBAR
  50. // │ ├─ <img> ---> viewImg
  51. // │ └─ <u> ---> viewU
  52. // │ ├─ b ---> viewTextB
  53. // │ ├─ <sup> ---> viewSup
  54. // │ │ └─ o ---> viewTextO
  55. // │ └─ m ---> viewTextM
  56. // └─ zz ---> viewTextZZ
  57. modelImg = new ModelElement( 'img' );
  58. modelP = new ModelElement( 'p', {}, [
  59. 'y',
  60. new ModelText( 'foo', { b: true, i: true } ),
  61. 'bar',
  62. modelImg,
  63. new ModelText( 'b', { u: true } ),
  64. new ModelText( 'o', { u: true, sup: true } ),
  65. new ModelText( 'm', { u: true } )
  66. ] );
  67. modelDiv = new ModelRootElement();
  68. modelDiv.appendChildren( [
  69. 'x',
  70. modelP,
  71. 'zz'
  72. ] );
  73. viewTextB = new ViewText( 'b' );
  74. viewTextO = new ViewText( 'o' );
  75. viewTextM = new ViewText( 'm' );
  76. viewTextX = new ViewText( 'x' );
  77. viewTextY = new ViewText( 'y' );
  78. viewTextZZ = new ViewText( 'zz' );
  79. viewTextFOO = new ViewText( 'foo' );
  80. viewTextBAR = new ViewText( 'bar' );
  81. viewImg = new ViewElement( 'img' );
  82. viewSup = new ViewElement( 'sup', {}, [ viewTextO ] );
  83. viewU = new ViewElement( 'u', {}, [ viewTextB, viewSup, viewTextM ] );
  84. viewI = new ViewElement( 'i', {}, [ viewTextFOO ] );
  85. viewB = new ViewElement( 'b', {}, [ viewI ] );
  86. viewP = new ViewElement( 'p', {}, [ viewTextY, viewB, viewTextBAR, viewImg, viewU ] );
  87. viewDiv = new ViewElement( 'div', {}, [ viewTextX, viewP, viewTextZZ ] );
  88. mapper = new Mapper();
  89. mapper.bindElements( modelP, viewP );
  90. mapper.bindElements( modelDiv, viewDiv );
  91. mapper.bindElements( modelImg, viewImg );
  92. } );
  93. describe( 'toModelElement', () => {
  94. it( 'should return corresponding model element', () => {
  95. expect( mapper.toModelElement( viewP ) ).to.equal( modelP );
  96. expect( mapper.toModelElement( viewDiv ) ).to.equal( modelDiv );
  97. expect( mapper.toModelElement( viewImg ) ).to.equal( modelImg );
  98. } );
  99. } );
  100. describe( 'toViewElement', () => {
  101. it( 'should return corresponding view element', () => {
  102. expect( mapper.toViewElement( modelP ) ).to.equal( viewP );
  103. expect( mapper.toViewElement( modelDiv ) ).to.equal( viewDiv );
  104. expect( mapper.toViewElement( modelImg ) ).to.equal( viewImg );
  105. } );
  106. } );
  107. describe( 'toModelPosition', () => {
  108. function createToModelTest( viewElement, viewOffset, modelElement, modelOffset ) {
  109. const viewPosition = new ViewPosition( viewElement, viewOffset );
  110. const modelPosition = mapper.toModelPosition( viewPosition );
  111. expect( modelPosition.parent ).to.equal( modelElement );
  112. expect( modelPosition.offset ).to.equal( modelOffset );
  113. }
  114. it( 'should transform viewDiv 0', () => createToModelTest( viewDiv, 0, modelDiv, 0 ) );
  115. it( 'should transform viewDiv 1', () => createToModelTest( viewDiv, 1, modelDiv, 1 ) );
  116. it( 'should transform viewDiv 2', () => createToModelTest( viewDiv, 2, modelDiv, 2 ) );
  117. it( 'should transform viewDiv 3', () => createToModelTest( viewDiv, 3, modelDiv, 4 ) );
  118. it( 'should transform viewTextX 0', () => createToModelTest( viewTextX, 0, modelDiv, 0 ) );
  119. it( 'should transform viewTextX 1', () => createToModelTest( viewTextX, 1, modelDiv, 1 ) );
  120. it( 'should transform viewP 0', () => createToModelTest( viewP, 0, modelP, 0 ) );
  121. it( 'should transform viewP 1', () => createToModelTest( viewP, 1, modelP, 1 ) );
  122. it( 'should transform viewP 2', () => createToModelTest( viewP, 2, modelP, 4 ) );
  123. it( 'should transform viewP 3', () => createToModelTest( viewP, 3, modelP, 7 ) );
  124. it( 'should transform viewP 4', () => createToModelTest( viewP, 4, modelP, 8 ) );
  125. it( 'should transform viewP 5', () => createToModelTest( viewP, 5, modelP, 11 ) );
  126. it( 'should transform viewTextY 0', () => createToModelTest( viewTextY, 0, modelP, 0 ) );
  127. it( 'should transform viewTextY 1', () => createToModelTest( viewTextY, 1, modelP, 1 ) );
  128. it( 'should transform viewB 0', () => createToModelTest( viewB, 0, modelP, 1 ) );
  129. it( 'should transform viewB 1', () => createToModelTest( viewB, 1, modelP, 4 ) );
  130. it( 'should transform viewI 0', () => createToModelTest( viewI, 0, modelP, 1 ) );
  131. it( 'should transform viewI 1', () => createToModelTest( viewI, 1, modelP, 4 ) );
  132. it( 'should transform viewTextFOO 0', () => createToModelTest( viewTextFOO, 0, modelP, 1 ) );
  133. it( 'should transform viewTextFOO 1', () => createToModelTest( viewTextFOO, 1, modelP, 2 ) );
  134. it( 'should transform viewTextFOO 2', () => createToModelTest( viewTextFOO, 2, modelP, 3 ) );
  135. it( 'should transform viewTextFOO 3', () => createToModelTest( viewTextFOO, 3, modelP, 4 ) );
  136. it( 'should transform viewTextBAR 0', () => createToModelTest( viewTextBAR, 0, modelP, 4 ) );
  137. it( 'should transform viewTextBAR 1', () => createToModelTest( viewTextBAR, 1, modelP, 5 ) );
  138. it( 'should transform viewTextBAR 2', () => createToModelTest( viewTextBAR, 2, modelP, 6 ) );
  139. it( 'should transform viewTextBAR 3', () => createToModelTest( viewTextBAR, 3, modelP, 7 ) );
  140. it( 'should transform viewU 0', () => createToModelTest( viewU, 0, modelP, 8 ) );
  141. it( 'should transform viewU 1', () => createToModelTest( viewU, 1, modelP, 9 ) );
  142. it( 'should transform viewU 2', () => createToModelTest( viewU, 2, modelP, 10 ) );
  143. it( 'should transform viewU 3', () => createToModelTest( viewU, 3, modelP, 11 ) );
  144. it( 'should transform viewTextB 0', () => createToModelTest( viewTextB, 0, modelP, 8 ) );
  145. it( 'should transform viewTextB 1', () => createToModelTest( viewTextB, 1, modelP, 9 ) );
  146. it( 'should transform viewSup 0', () => createToModelTest( viewSup, 0, modelP, 9 ) );
  147. it( 'should transform viewSup 1', () => createToModelTest( viewSup, 1, modelP, 10 ) );
  148. it( 'should transform viewTextO 0', () => createToModelTest( viewTextO, 0, modelP, 9 ) );
  149. it( 'should transform viewTextO 1', () => createToModelTest( viewTextO, 1, modelP, 10 ) );
  150. it( 'should transform viewTextM 0', () => createToModelTest( viewTextM, 0, modelP, 10 ) );
  151. it( 'should transform viewTextM 1', () => createToModelTest( viewTextM, 1, modelP, 11 ) );
  152. it( 'should transform viewTextZZ 0', () => createToModelTest( viewTextZZ, 0, modelDiv, 2 ) );
  153. it( 'should transform viewTextZZ 1', () => createToModelTest( viewTextZZ, 1, modelDiv, 3 ) );
  154. it( 'should transform viewTextZZ 2', () => createToModelTest( viewTextZZ, 2, modelDiv, 4 ) );
  155. } );
  156. describe( 'toViewPosition', () => {
  157. function createToViewTest( modelElement, modelOffset, viewElement, viewOffset ) {
  158. const modelPosition = ModelPosition.createFromParentAndOffset( modelElement, modelOffset );
  159. const viewPosition = mapper.toViewPosition( modelPosition );
  160. expect( viewPosition.parent ).to.equal( viewElement );
  161. expect( viewPosition.offset ).to.equal( viewOffset );
  162. }
  163. it( 'should transform modelDiv 0', () => createToViewTest( modelDiv, 0, viewDiv, 0 ) );
  164. it( 'should transform modelDiv 1', () => createToViewTest( modelDiv, 1, viewDiv, 1 ) );
  165. it( 'should transform modelDiv 2', () => createToViewTest( modelDiv, 2, viewDiv, 2 ) );
  166. it( 'should transform modelDiv 3', () => createToViewTest( modelDiv, 3, viewTextZZ, 1 ) );
  167. it( 'should transform modelDiv 4', () => createToViewTest( modelDiv, 4, viewDiv, 3 ) );
  168. it( 'should transform modelP 0', () => createToViewTest( modelP, 0, viewP, 0 ) );
  169. it( 'should transform modelP 1', () => createToViewTest( modelP, 1, viewP, 1 ) );
  170. it( 'should transform modelP 2', () => createToViewTest( modelP, 2, viewTextFOO, 1 ) );
  171. it( 'should transform modelP 3', () => createToViewTest( modelP, 3, viewTextFOO, 2 ) );
  172. it( 'should transform modelP 4', () => createToViewTest( modelP, 4, viewP, 2 ) );
  173. it( 'should transform modelP 5', () => createToViewTest( modelP, 5, viewTextBAR, 1 ) );
  174. it( 'should transform modelP 6', () => createToViewTest( modelP, 6, viewTextBAR, 2 ) );
  175. it( 'should transform modelP 7', () => createToViewTest( modelP, 7, viewP, 3 ) );
  176. it( 'should transform modelP 8', () => createToViewTest( modelP, 8, viewP, 4 ) );
  177. it( 'should transform modelP 9', () => createToViewTest( modelP, 9, viewU, 1 ) );
  178. it( 'should transform modelP 10', () => createToViewTest( modelP, 10, viewU, 2 ) );
  179. it( 'should transform modelP 11', () => createToViewTest( modelP, 11, viewP, 5 ) );
  180. } );
  181. } );
  182. describe( 'Mapper for widget', () => {
  183. let modelDiv, modelWidget, modelImg, modelCaption;
  184. let viewDiv, viewWidget, viewMask, viewWrapper, viewImg, viewCaption;
  185. let viewTextX, viewTextFOO, viewTextZZ, viewTextLABEL;
  186. let mapper;
  187. before( () => {
  188. // Tree Model:
  189. //
  190. // <div> ---> modelDiv
  191. // ├─ x
  192. // ├─ <widget> ---> modelWidget
  193. // │ ├─ <img> ---> modelImg
  194. // │ └─ <caption> ---> modelCaption
  195. // │ ├─ f
  196. // │ ├─ o
  197. // │ └─ o
  198. // ├─ z
  199. // └─ z
  200. //
  201. // Tree View:
  202. //
  203. // <div> ---> viewDiv
  204. // ├─ x ---> viewTextX
  205. // ├─ <widget> ---> viewWidget
  206. // │ ├─ <mask> ---> viewMask
  207. // │ │ └─ label ---> viewTextLABEL
  208. // │ └─ <wrapper> ---> viewWrapper
  209. // │ ├─ <img> ---> viewImg
  210. // │ └─ <caption> ---> viewCaption
  211. // │ └─ foo ---> viewTextFOO
  212. // └─ zz ---> viewTextZZ
  213. modelImg = new ModelElement( 'img' );
  214. modelCaption = new ModelElement( 'caption', {}, 'foo' );
  215. modelWidget = new ModelElement( 'widget', {}, [ modelImg, modelCaption ] );
  216. modelDiv = new ModelRootElement();
  217. modelDiv.appendChildren( [ 'x', modelWidget, 'zz' ] );
  218. viewTextX = new ViewText( 'y' );
  219. viewTextZZ = new ViewText( 'zz' );
  220. viewTextFOO = new ViewText( 'foo' );
  221. viewTextLABEL = new ViewText( 'label' );
  222. viewImg = new ViewElement( 'img' );
  223. viewMask = new ViewElement( 'mask', {}, [ viewTextLABEL ] );
  224. viewCaption = new ViewElement( 'caption', {}, [ viewTextFOO ] );
  225. viewWrapper = new ViewElement( 'wrapper', {}, [ viewImg, viewCaption ] );
  226. viewWidget = new ViewElement( 'widget', [ viewMask, viewWrapper ] );
  227. viewDiv = new ViewElement( 'div', {}, [ viewTextX, viewWidget, viewTextZZ ] );
  228. mapper = new Mapper();
  229. mapper.bindElements( modelDiv, viewDiv );
  230. mapper.bindElements( modelWidget, viewWidget );
  231. mapper.bindElements( modelImg, viewImg );
  232. mapper.bindElements( modelCaption, viewCaption );
  233. } );
  234. describe( 'toModelElement', () => {
  235. it( 'should return corresponding model element', () => {
  236. expect( mapper.toModelElement( viewDiv ) ).to.equal( modelDiv );
  237. expect( mapper.toModelElement( viewWidget ) ).to.equal( modelWidget );
  238. expect( mapper.toModelElement( viewImg ) ).to.equal( modelImg );
  239. expect( mapper.toModelElement( viewCaption ) ).to.equal( modelCaption );
  240. } );
  241. } );
  242. describe( 'toViewElement', () => {
  243. it( 'should return corresponding view element', () => {
  244. expect( mapper.toViewElement( modelDiv ) ).to.equal( viewDiv );
  245. expect( mapper.toViewElement( modelWidget ) ).to.equal( viewWidget );
  246. expect( mapper.toViewElement( modelImg ) ).to.equal( viewImg );
  247. expect( mapper.toViewElement( modelCaption ) ).to.equal( viewCaption );
  248. } );
  249. } );
  250. describe( 'toModelPosition', () => {
  251. function createToModelTest( viewElement, viewOffset, modelElement, modelOffset ) {
  252. const viewPosition = new ViewPosition( viewElement, viewOffset );
  253. const modelPosition = mapper.toModelPosition( viewPosition );
  254. expect( modelPosition.parent ).to.equal( modelElement );
  255. expect( modelPosition.offset ).to.equal( modelOffset );
  256. }
  257. it( 'should transform viewDiv 0', () => createToModelTest( viewDiv, 0, modelDiv, 0 ) );
  258. it( 'should transform viewDiv 1', () => createToModelTest( viewDiv, 1, modelDiv, 1 ) );
  259. it( 'should transform viewDiv 2', () => createToModelTest( viewDiv, 2, modelDiv, 2 ) );
  260. it( 'should transform viewDiv 3', () => createToModelTest( viewDiv, 3, modelDiv, 4 ) );
  261. it( 'should transform viewTextX 0', () => createToModelTest( viewTextX, 0, modelDiv, 0 ) );
  262. it( 'should transform viewTextX 1', () => createToModelTest( viewTextX, 1, modelDiv, 1 ) );
  263. it( 'should transform viewTextZZ 0', () => createToModelTest( viewTextZZ, 0, modelDiv, 2 ) );
  264. it( 'should transform viewTextZZ 1', () => createToModelTest( viewTextZZ, 1, modelDiv, 3 ) );
  265. it( 'should transform viewTextZZ 2', () => createToModelTest( viewTextZZ, 2, modelDiv, 4 ) );
  266. it( 'should transform viewImg 0', () => createToModelTest( viewImg, 0, modelImg, 0 ) );
  267. it( 'should transform viewCaption 0', () => createToModelTest( viewCaption, 0, modelCaption, 0 ) );
  268. it( 'should transform viewCaption 1', () => createToModelTest( viewCaption, 1, modelCaption, 3 ) );
  269. it( 'should transform viewTextFOO 0', () => createToModelTest( viewTextFOO, 0, modelCaption, 0 ) );
  270. it( 'should transform viewTextFOO 1', () => createToModelTest( viewTextFOO, 1, modelCaption, 1 ) );
  271. it( 'should transform viewTextFOO 2', () => createToModelTest( viewTextFOO, 2, modelCaption, 2 ) );
  272. it( 'should transform viewTextFOO 3', () => createToModelTest( viewTextFOO, 3, modelCaption, 3 ) );
  273. } );
  274. describe( 'toViewPosition', () => {
  275. function createToViewTest( modelElement, modelOffset, viewElement, viewOffset ) {
  276. const modelPosition = ModelPosition.createFromParentAndOffset( modelElement, modelOffset );
  277. const viewPosition = mapper.toViewPosition( modelPosition );
  278. expect( viewPosition.parent ).to.equal( viewElement );
  279. expect( viewPosition.offset ).to.equal( viewOffset );
  280. }
  281. it( 'should transform modelDiv 0', () => createToViewTest( modelDiv, 0, viewDiv, 0 ) );
  282. it( 'should transform modelDiv 1', () => createToViewTest( modelDiv, 1, viewDiv, 1 ) );
  283. it( 'should transform modelDiv 2', () => createToViewTest( modelDiv, 2, viewDiv, 2 ) );
  284. it( 'should transform modelDiv 3', () => createToViewTest( modelDiv, 3, viewTextZZ, 1 ) );
  285. it( 'should transform modelDiv 4', () => createToViewTest( modelDiv, 4, viewDiv, 3 ) );
  286. it( 'should transform modelImg 0', () => createToViewTest( modelImg, 0, viewImg, 0 ) );
  287. it( 'should transform modelCaption 0', () => createToViewTest( modelCaption, 0, viewCaption, 0 ) );
  288. it( 'should transform modelCaption 1', () => createToViewTest( modelCaption, 1, viewTextFOO, 1 ) );
  289. it( 'should transform modelCaption 2', () => createToViewTest( modelCaption, 2, viewTextFOO, 2 ) );
  290. it( 'should transform modelCaption 3', () => createToViewTest( modelCaption, 3, viewCaption, 1 ) );
  291. } );
  292. } );