mirror of
https://github.com/konvajs/konva.git
synced 2025-11-18 09:07:30 +08:00
stage now listens for dimension changes, and updates the DOM dimensions if the widthChange or heightChange event is triggered
This commit is contained in:
Eric Rowell
51
dist/kinetic-core.js
vendored
51
dist/kinetic-core.js
vendored
@@ -1499,9 +1499,6 @@ Kinetic.Stage = function(config) {
|
||||
throttle: 80
|
||||
});
|
||||
|
||||
this.nodeType = 'Stage';
|
||||
this.lastEventTime = 0;
|
||||
|
||||
/*
|
||||
* if container is a string, assume it's an id for
|
||||
* a DOM element
|
||||
@@ -1514,14 +1511,8 @@ Kinetic.Stage = function(config) {
|
||||
Kinetic.Container.apply(this, []);
|
||||
Kinetic.Node.apply(this, [config]);
|
||||
|
||||
this.content = document.createElement('div');
|
||||
this.dblClickWindow = 400;
|
||||
|
||||
this._setStageDefaultProperties();
|
||||
|
||||
// set stage id
|
||||
this._id = Kinetic.GlobalObject.idCounter++;
|
||||
|
||||
this._buildDOM();
|
||||
this._listen();
|
||||
this._prepareDrag();
|
||||
@@ -1577,12 +1568,6 @@ Kinetic.Stage.prototype = {
|
||||
// set stage dimensions
|
||||
var size = Kinetic.GlobalObject._getSize(arguments);
|
||||
this.setAttrs(size);
|
||||
|
||||
// convert to integers
|
||||
this.attrs.width = Math.round(this.attrs.width);
|
||||
this.attrs.height = Math.round(this.attrs.height);
|
||||
|
||||
this._resizeDOM();
|
||||
},
|
||||
/**
|
||||
* return stage size
|
||||
@@ -2102,24 +2087,23 @@ else if(!isDragging && this.touchMove) {
|
||||
var go = Kinetic.GlobalObject;
|
||||
var that = this;
|
||||
|
||||
// desktop events
|
||||
/*
|
||||
* desktop events
|
||||
*/
|
||||
this.content.addEventListener('mousedown', function(evt) {
|
||||
that.mouseDown = true;
|
||||
that.mouseUp = false;
|
||||
that.mouseMove = false;
|
||||
that._handleStageEvent(evt);
|
||||
/*
|
||||
* init stage drag and drop
|
||||
*/
|
||||
|
||||
//init stage drag and drop
|
||||
if(that.attrs.draggable) {
|
||||
that._initDrag();
|
||||
}
|
||||
}, false);
|
||||
|
||||
this.content.addEventListener('mousemove', function(evt) {
|
||||
/*
|
||||
* throttle mousemove
|
||||
*/
|
||||
//throttle mousemove
|
||||
var throttle = that.attrs.throttle;
|
||||
var date = new Date();
|
||||
var time = date.getTime();
|
||||
@@ -2153,7 +2137,9 @@ else if(!isDragging && this.touchMove) {
|
||||
}
|
||||
that.mousePos = undefined;
|
||||
}, false);
|
||||
// mobile events
|
||||
/*
|
||||
* mobile events
|
||||
*/
|
||||
this.content.addEventListener('touchstart', function(evt) {
|
||||
evt.preventDefault();
|
||||
that.touchStart = true;
|
||||
@@ -2169,9 +2155,7 @@ else if(!isDragging && this.touchMove) {
|
||||
}, false);
|
||||
|
||||
this.content.addEventListener('touchmove', function(evt) {
|
||||
/*
|
||||
* throttle touchmove
|
||||
*/
|
||||
//throttle touchmove
|
||||
var throttle = that.attrs.throttle;
|
||||
var date = new Date();
|
||||
var time = date.getTime();
|
||||
@@ -2192,6 +2176,16 @@ else if(!isDragging && this.touchMove) {
|
||||
that._handleStageEvent(evt);
|
||||
that.tapStart = false;
|
||||
}, false);
|
||||
/*
|
||||
* change events
|
||||
*/
|
||||
this.on('widthChange.kinetic_reserved', function() {
|
||||
this._resizeDOM();
|
||||
});
|
||||
|
||||
this.on('heightChange.kinetic_reserved', function() {
|
||||
this._resizeDOM();
|
||||
});
|
||||
},
|
||||
/**
|
||||
* set mouse positon for desktop apps
|
||||
@@ -2356,6 +2350,7 @@ else if(!isDragging && this.touchMove) {
|
||||
*/
|
||||
_buildDOM: function() {
|
||||
// content
|
||||
this.content = document.createElement('div');
|
||||
this.content.style.position = 'relative';
|
||||
this.content.style.display = 'inline-block';
|
||||
this.content.className = 'kineticjs-content';
|
||||
@@ -2389,6 +2384,7 @@ else if(!isDragging && this.touchMove) {
|
||||
this.content.appendChild(this.pathLayer.canvas);
|
||||
|
||||
this.setSize(this.attrs.width, this.attrs.height);
|
||||
this._resizeDOM();
|
||||
},
|
||||
_addId: function(node) {
|
||||
if(node.attrs.id !== undefined) {
|
||||
@@ -2441,6 +2437,9 @@ else if(!isDragging && this.touchMove) {
|
||||
* set defaults
|
||||
*/
|
||||
_setStageDefaultProperties: function() {
|
||||
this.nodeType = 'Stage';
|
||||
this.lastEventTime = 0;
|
||||
this.dblClickWindow = 400;
|
||||
this.targetShape = undefined;
|
||||
this.targetFound = false;
|
||||
this.mouseoverShape = undefined;
|
||||
|
||||
4
dist/kinetic-core.min.js
vendored
4
dist/kinetic-core.min.js
vendored
File diff suppressed because one or more lines are too long
51
src/Stage.js
51
src/Stage.js
@@ -18,9 +18,6 @@ Kinetic.Stage = function(config) {
|
||||
throttle: 80
|
||||
});
|
||||
|
||||
this.nodeType = 'Stage';
|
||||
this.lastEventTime = 0;
|
||||
|
||||
/*
|
||||
* if container is a string, assume it's an id for
|
||||
* a DOM element
|
||||
@@ -33,14 +30,8 @@ Kinetic.Stage = function(config) {
|
||||
Kinetic.Container.apply(this, []);
|
||||
Kinetic.Node.apply(this, [config]);
|
||||
|
||||
this.content = document.createElement('div');
|
||||
this.dblClickWindow = 400;
|
||||
|
||||
this._setStageDefaultProperties();
|
||||
|
||||
// set stage id
|
||||
this._id = Kinetic.GlobalObject.idCounter++;
|
||||
|
||||
this._buildDOM();
|
||||
this._listen();
|
||||
this._prepareDrag();
|
||||
@@ -96,12 +87,6 @@ Kinetic.Stage.prototype = {
|
||||
// set stage dimensions
|
||||
var size = Kinetic.GlobalObject._getSize(arguments);
|
||||
this.setAttrs(size);
|
||||
|
||||
// convert to integers
|
||||
this.attrs.width = Math.round(this.attrs.width);
|
||||
this.attrs.height = Math.round(this.attrs.height);
|
||||
|
||||
this._resizeDOM();
|
||||
},
|
||||
/**
|
||||
* return stage size
|
||||
@@ -621,24 +606,23 @@ else if(!isDragging && this.touchMove) {
|
||||
var go = Kinetic.GlobalObject;
|
||||
var that = this;
|
||||
|
||||
// desktop events
|
||||
/*
|
||||
* desktop events
|
||||
*/
|
||||
this.content.addEventListener('mousedown', function(evt) {
|
||||
that.mouseDown = true;
|
||||
that.mouseUp = false;
|
||||
that.mouseMove = false;
|
||||
that._handleStageEvent(evt);
|
||||
/*
|
||||
* init stage drag and drop
|
||||
*/
|
||||
|
||||
//init stage drag and drop
|
||||
if(that.attrs.draggable) {
|
||||
that._initDrag();
|
||||
}
|
||||
}, false);
|
||||
|
||||
this.content.addEventListener('mousemove', function(evt) {
|
||||
/*
|
||||
* throttle mousemove
|
||||
*/
|
||||
//throttle mousemove
|
||||
var throttle = that.attrs.throttle;
|
||||
var date = new Date();
|
||||
var time = date.getTime();
|
||||
@@ -672,7 +656,9 @@ else if(!isDragging && this.touchMove) {
|
||||
}
|
||||
that.mousePos = undefined;
|
||||
}, false);
|
||||
// mobile events
|
||||
/*
|
||||
* mobile events
|
||||
*/
|
||||
this.content.addEventListener('touchstart', function(evt) {
|
||||
evt.preventDefault();
|
||||
that.touchStart = true;
|
||||
@@ -688,9 +674,7 @@ else if(!isDragging && this.touchMove) {
|
||||
}, false);
|
||||
|
||||
this.content.addEventListener('touchmove', function(evt) {
|
||||
/*
|
||||
* throttle touchmove
|
||||
*/
|
||||
//throttle touchmove
|
||||
var throttle = that.attrs.throttle;
|
||||
var date = new Date();
|
||||
var time = date.getTime();
|
||||
@@ -711,6 +695,16 @@ else if(!isDragging && this.touchMove) {
|
||||
that._handleStageEvent(evt);
|
||||
that.tapStart = false;
|
||||
}, false);
|
||||
/*
|
||||
* change events
|
||||
*/
|
||||
this.on('widthChange.kinetic_reserved', function() {
|
||||
this._resizeDOM();
|
||||
});
|
||||
|
||||
this.on('heightChange.kinetic_reserved', function() {
|
||||
this._resizeDOM();
|
||||
});
|
||||
},
|
||||
/**
|
||||
* set mouse positon for desktop apps
|
||||
@@ -875,6 +869,7 @@ else if(!isDragging && this.touchMove) {
|
||||
*/
|
||||
_buildDOM: function() {
|
||||
// content
|
||||
this.content = document.createElement('div');
|
||||
this.content.style.position = 'relative';
|
||||
this.content.style.display = 'inline-block';
|
||||
this.content.className = 'kineticjs-content';
|
||||
@@ -908,6 +903,7 @@ else if(!isDragging && this.touchMove) {
|
||||
this.content.appendChild(this.pathLayer.canvas);
|
||||
|
||||
this.setSize(this.attrs.width, this.attrs.height);
|
||||
this._resizeDOM();
|
||||
},
|
||||
_addId: function(node) {
|
||||
if(node.attrs.id !== undefined) {
|
||||
@@ -960,6 +956,9 @@ else if(!isDragging && this.touchMove) {
|
||||
* set defaults
|
||||
*/
|
||||
_setStageDefaultProperties: function() {
|
||||
this.nodeType = 'Stage';
|
||||
this.lastEventTime = 0;
|
||||
this.dblClickWindow = 400;
|
||||
this.targetShape = undefined;
|
||||
this.targetFound = false;
|
||||
this.mouseoverShape = undefined;
|
||||
|
||||
@@ -59,10 +59,6 @@ Test.prototype.tests = {
|
||||
stage.setSize([1, 1, 10, 11]);
|
||||
test(stage.getSize().width === 10 && stage.getSize().height === 11, 'stage size should be 10 x 11');
|
||||
|
||||
// test integer conversion
|
||||
stage.setSize(300.2, 200.2);
|
||||
test(stage.getSize().width === 300 && stage.getSize().height === 200, 'stage size should be 300 x 200');
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user