forked from Samsung/TAU-Design-Editor
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix size reset after deselect image issue
[Issue] Samsung#320 [Problem] Image was shrinked down after resize & loss of focus [Solution] Fix the containerExpander in design-editor element (add a distinction if object was resized by user of by the app just for presentational pourposes) Signed-off-by: Hubert Siwkin <h.siwkin@samsung.com>
- Loading branch information
Showing
3 changed files
with
114 additions
and
61 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 39 additions & 0 deletions
39
design-editor/src/pane/utils/design-editor-element-utils.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| /** | ||
| * It expands container to the height of | ||
| * sum of height of its children to make them possible | ||
| * to view and edit in edit mode. | ||
| */ | ||
| export const containerExpander = { | ||
| initialStyle: {}, | ||
| element: null, | ||
| wasExtended: false, | ||
| rollOut: function(element) { | ||
| this._reset(); | ||
|
|
||
| this.element = element; | ||
| this.initialStyle.height = element.style.height; | ||
| this.initialStyle.overflowY = element.style.overflowY; | ||
|
|
||
| const extendedHeight = [...element.children] | ||
| .reduce((acc, value) => acc + parseInt(getComputedStyle(value).height), 0); | ||
|
|
||
| if (extendedHeight > parseInt(this.initialStyle.height)) { | ||
| this.wasExtended = true; | ||
| element.style.height = `${extendedHeight}px`; | ||
| element.style.overflow = 'hidden'; | ||
| } | ||
| }, | ||
| rollBack: function(elementId) { | ||
| if (this.wasExtended && elementId == this.element.getAttribute('data-id')) { | ||
| this.element.style.height = this.initialStyle.height; | ||
| this.element.style.overflowY = this.initialStyle.overflowY; | ||
| } | ||
|
|
||
| this._reset(); | ||
| }, | ||
| _reset: function() { | ||
| this.initialStyle = {}; | ||
| this.elementId = ''; | ||
| this.wasExtended = false; | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import { expect } from 'chai'; | ||
|
|
||
| import { containerExpander } from '@/pane/utils/design-editor-element-utils'; | ||
|
|
||
| describe('design-editor-element-utils', () => { | ||
| describe('containerExpander', () => { | ||
| let container, initialHeight, initialOverflowY; | ||
| const getBox = (size) => { | ||
| const div = document.createElement('div'); | ||
| div.style.height = `${size}px`; | ||
| div.style.width = `${size}px`; | ||
|
|
||
| return div; | ||
| }; | ||
|
|
||
| const hasInitialStyles = () => { | ||
| expect(container.style.height).to.equal(initialHeight); | ||
| expect(container.style.overflowY).to.equal(initialOverflowY); | ||
| }; | ||
|
|
||
| beforeEach(() => { | ||
| const containerId = 'container-1'; | ||
|
|
||
| container = document.createElement('div'); | ||
| container.setAttribute('data-id', containerId); | ||
| container.style.height = '100px'; | ||
|
|
||
| initialHeight = container.style.height; | ||
| initialOverflowY = container.style.overflowY; | ||
| }); | ||
|
|
||
| it('expand container to roll out and roll back when it\' height is smaller than its children height', () => { | ||
| container.appendChild(getBox(100)); | ||
| container.appendChild(getBox(100)); | ||
| container.appendChild(getBox(100)); | ||
|
|
||
| containerExpander.rollOut(container); | ||
| expect(parseInt(container.style.height)).to.be.above(parseInt('100px')); | ||
|
|
||
| containerExpander.rollBack(container.getAttribute('data-id')); | ||
| hasInitialStyles(); | ||
| }); | ||
|
|
||
| it('don\'t change style of element whose height is larger or equal than its children\'s height', () => { | ||
| container.appendChild(getBox(80)); | ||
|
|
||
| containerExpander.rollOut(container); | ||
| hasInitialStyles(); | ||
|
|
||
| containerExpander.rollBack(container.getAttribute('data-id')); | ||
| hasInitialStyles(); | ||
| }); | ||
|
|
||
| it('doesn\'t roll back element that hasn\'t been rolled out', () => { | ||
| containerExpander.rollBack(container.getAttribute('data-id')); | ||
| hasInitialStyles(); | ||
| expect(containerExpander.wasExtended).to.equal(false); | ||
| }); | ||
|
|
||
| it('doesn\'t roll out element that is not a container', () => { | ||
| // TODO | ||
| }); | ||
| }); | ||
| }); |