From ae89a2ce0c705d1c98e459b2c81088af5f768700 Mon Sep 17 00:00:00 2001 From: Sinan Yasar Date: Thu, 27 Jul 2017 19:30:27 -0700 Subject: [PATCH 1/4] view: minor perf improvements --- lib/core/view.coffee | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/lib/core/view.coffee b/lib/core/view.coffee index e9d862dc..0fbc94de 100644 --- a/lib/core/view.coffee +++ b/lib/core/view.coffee @@ -171,6 +171,7 @@ module.exports = class KDView extends KDObject for klass in "kdview #{cssClass}".split ' ' when klass.length el.classList.add klass + @element = el @domElement = $ el if @lazy @@ -212,7 +213,7 @@ module.exports = class KDView extends KDObject getDomElement:-> @domElement - getElement:-> @getDomElement()[0] + getElement:-> @element getTagName:-> @options.tagName || 'div' @@ -322,12 +323,16 @@ module.exports = class KDView extends KDObject @getElement().classList.contains cssClass getBounds: -> + $el = @domElement + rect = @element.getBoundingClientRect() - x : @getX() - y : @getY() - w : @getWidth() - h : @getHeight() - n : @constructor.name + return { + x : rect.left + y : rect.top + w : $el.outerWidth no + h : $el.outerHeight no + n : @constructor.name + } setRandomBG:->@getDomElement().css "background-color", KD.utils.getRandomRGB() @@ -346,7 +351,7 @@ module.exports = class KDView extends KDObject positionOptions.position = "absolute" @$().css positionOptions - getWidth:-> @$().outerWidth no + getWidth:-> @getDomElement().outerWidth no setWidth:(w, unit = "px")-> @getElement().style.width = "#{w}#{unit}" From 4b05497edac2e98d510f7009adb5ea1eccdc3169 Mon Sep 17 00:00:00 2001 From: Sinan Yasar Date: Thu, 27 Jul 2017 19:31:22 -0700 Subject: [PATCH 2/4] view: drag: fix dragging for scaled views --- lib/core/view.coffee | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/lib/core/view.coffee b/lib/core/view.coffee index 0fbc94de..86a8b73c 100644 --- a/lib/core/view.coffee +++ b/lib/core/view.coffee @@ -334,6 +334,9 @@ module.exports = class KDView extends KDObject n : @constructor.name } + getScale: -> + return @element.getBoundingClientRect().width / @element.offsetWidth + setRandomBG:->@getDomElement().css "background-color", KD.utils.getRandomRGB() hide:(duration)-> @@ -713,6 +716,9 @@ module.exports = class KDView extends KDObject dragState = @dragState + if (ps = @parent.getScale()) isnt 1 + @dragState.parentScale = ps + if options.containment dragState.containment = {} @@ -762,7 +768,7 @@ module.exports = class KDView extends KDObject drag:(event, delta)-> - {directionX, directionY, axis, containment} = @dragState + {directionX, directionY, axis, containment, parentScale} = @dragState {x, y} = delta dragPos = @dragState.position @@ -774,6 +780,10 @@ module.exports = class KDView extends KDObject dragCurDir = dragDir.current {axis} = @getOptions().draggable + if parentScale + x = x * 1 / parentScale + y = y * 1 / parentScale + draggedDistance = if axis if axis is "x" then Math.abs x else Math.abs y else Math.max Math.abs(x), Math.abs(y) From b7c06de961ed23aff115925f4d87d2a81830ab5a Mon Sep 17 00:00:00 2001 From: Sinan Yasar Date: Thu, 27 Jul 2017 19:40:18 -0700 Subject: [PATCH 3/4] examples: drag example added --- examples/drag.html | 42 ++++++++++++++++++++++++++++++++ examples/drag.js | 18 ++++++++++++++ {example => examples}/index.html | 2 +- {example => examples}/index.js | 0 4 files changed, 61 insertions(+), 1 deletion(-) create mode 100644 examples/drag.html create mode 100644 examples/drag.js rename {example => examples}/index.html (98%) rename {example => examples}/index.js (100%) diff --git a/examples/drag.html b/examples/drag.html new file mode 100644 index 00000000..2fe95ff9 --- /dev/null +++ b/examples/drag.html @@ -0,0 +1,42 @@ + + + + + Document + + + + + + + + diff --git a/examples/drag.js b/examples/drag.js new file mode 100644 index 00000000..eaa9add7 --- /dev/null +++ b/examples/drag.js @@ -0,0 +1,18 @@ +var kd = require('../lib/index') + +var main = new kd.View({ cssClass: 'lobilo' }) +main.appendToDomBody() + +var header = new kd.CustomHTMLView({ + partial: 'Drag scaled items', + tagName: 'h1', +}) +var foo = new kd.View({ cssClass: 'foo', draggable: true }) +var bar = new kd.View({ cssClass: 'bar', draggable: { containment: true } }) +var baz = new kd.View({ cssClass: 'baz', draggable: { containment: true } }) + +bar.addSubView(baz) +foo.addSubView(bar) + +main.addSubView(header) +main.addSubView(foo) diff --git a/example/index.html b/examples/index.html similarity index 98% rename from example/index.html rename to examples/index.html index aca32744..2d58189b 100644 --- a/example/index.html +++ b/examples/index.html @@ -6,7 +6,7 @@ - + diff --git a/example/index.js b/examples/index.js similarity index 100% rename from example/index.js rename to examples/index.js From 19e54b8fc012126a266407995f9751addc3675db Mon Sep 17 00:00:00 2001 From: Gokmen Goksel Date: Thu, 27 Jul 2017 22:29:25 -0700 Subject: [PATCH 4/4] view: getElement: fix getter for custom setDomElement calls since there are views which uses custom setDomElement methods without calling super on kd.View we need to set @element on the getter dynamically. --- lib/core/view.coffee | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/core/view.coffee b/lib/core/view.coffee index 86a8b73c..9414b78d 100644 --- a/lib/core/view.coffee +++ b/lib/core/view.coffee @@ -171,7 +171,6 @@ module.exports = class KDView extends KDObject for klass in "kdview #{cssClass}".split ' ' when klass.length el.classList.add klass - @element = el @domElement = $ el if @lazy @@ -213,7 +212,7 @@ module.exports = class KDView extends KDObject getDomElement:-> @domElement - getElement:-> @element + getElement:-> @element ? @element = @domElement[0] getTagName:-> @options.tagName || 'div' @@ -324,7 +323,7 @@ module.exports = class KDView extends KDObject getBounds: -> $el = @domElement - rect = @element.getBoundingClientRect() + rect = @getElement().getBoundingClientRect() return { x : rect.left @@ -335,7 +334,8 @@ module.exports = class KDView extends KDObject } getScale: -> - return @element.getBoundingClientRect().width / @element.offsetWidth + el = @getElement() + return el.getBoundingClientRect().width / el.offsetWidth setRandomBG:->@getDomElement().css "background-color", KD.utils.getRandomRGB()