整理demo+UI
This commit is contained in:
chengsir
463
demo/resources/scripts/axure/move.js
Normal file
463
demo/resources/scripts/axure/move.js
Normal file
@@ -0,0 +1,463 @@
|
||||
$axure.internal(function($ax) {
|
||||
var _move = {};
|
||||
$ax.move = _move;
|
||||
|
||||
var widgetMoveInfo = {};
|
||||
//register and return move info, also create container for rootlayer if needed
|
||||
$ax.move.PrepareForMove = function (id, x, y, to, options, jobj, rootLayer, skipContainerForRootLayer) {
|
||||
var fixedInfo = jobj ? {} : $ax.dynamicPanelManager.getFixedInfo(id);
|
||||
|
||||
var widget = $jobj(id);
|
||||
var query = $ax('#' + id);
|
||||
var isLayer = $ax.getTypeFromElementId(id) == $ax.constants.LAYER_TYPE;
|
||||
if(!rootLayer) {
|
||||
rootLayer = _move.getRootLayer(id);
|
||||
if (rootLayer && !skipContainerForRootLayer) {
|
||||
$ax.visibility.pushContainer(rootLayer, false);
|
||||
if (isLayer) widget = $ax.visibility.applyWidgetContainer(id, true);
|
||||
}
|
||||
}
|
||||
if (!jobj) jobj = widget;
|
||||
|
||||
var horzProp = 'left';
|
||||
var vertProp = 'top';
|
||||
var offsetLocation = to ? query.offsetLocation() : undefined;
|
||||
var horzX = to ? x - offsetLocation.x : x;
|
||||
var vertY = to ? y - offsetLocation.y : y;
|
||||
//var horzX = to ? x - query.locRelativeIgnoreLayer(false) : x;
|
||||
//var vertY = to ? y - query.locRelativeIgnoreLayer(true) : y;
|
||||
|
||||
if (fixedInfo.horizontal == 'right') {
|
||||
horzProp = 'right';
|
||||
horzX = to ? $(window).width() - x - $ax.getNumFromPx(jobj.css('right')) - query.width() : -x;
|
||||
var leftChanges = -horzX;
|
||||
} else if(fixedInfo.horizontal == 'center') {
|
||||
horzProp = 'margin-left';
|
||||
if (to) horzX = x - $(window).width() / 2;
|
||||
}
|
||||
|
||||
if (fixedInfo.vertical == 'bottom') {
|
||||
vertProp = 'bottom';
|
||||
vertY = to ? $(window).height() - y - $ax.getNumFromPx(jobj.css('bottom')) - query.height() : -y;
|
||||
var topChanges = -vertY;
|
||||
} else if (fixedInfo.vertical == 'middle') {
|
||||
vertProp = 'margin-top';
|
||||
if (to) vertY = y - $(window).height() / 2;
|
||||
}
|
||||
|
||||
//todo currently this always save the info, which is not needed for compound vector children and maybe some other cases
|
||||
//let's optimize it later, only register if registerid is valid..
|
||||
widgetMoveInfo[id] = {
|
||||
x: leftChanges === undefined ? horzX : leftChanges,
|
||||
y: topChanges === undefined ? vertY : topChanges,
|
||||
options: options
|
||||
};
|
||||
|
||||
return {
|
||||
horzX: horzX,
|
||||
vertY: vertY,
|
||||
horzProp: horzProp,
|
||||
vertProp: vertProp,
|
||||
rootLayer: rootLayer,
|
||||
jobj: jobj
|
||||
};
|
||||
};
|
||||
$ax.move.GetWidgetMoveInfo = function() {
|
||||
return $.extend({}, widgetMoveInfo);
|
||||
};
|
||||
|
||||
_move.getRootLayer = function (id) {
|
||||
var isLayer = $ax.getTypeFromElementId(id) == $ax.constants.LAYER_TYPE;
|
||||
var rootLayer = isLayer ? id : '';
|
||||
|
||||
var parentIds = $ax('#' + id).getParents(true, '*')[0];
|
||||
for(var i = 0; i < parentIds.length; i++) {
|
||||
var parentId = parentIds[i];
|
||||
// Keep climbing up layers until you hit a non-layer. At that point you have your root layer
|
||||
if($ax.public.fn.IsLayer($ax.getTypeFromElementId(parentId))) rootLayer = parentId;
|
||||
else break;
|
||||
}
|
||||
|
||||
return rootLayer;
|
||||
};
|
||||
|
||||
$ax.move.MoveWidget = function (id, x, y, options, to, animationCompleteCallback, shouldFire, jobj, skipOnMoveEvent) {
|
||||
var moveInfo = $ax.move.PrepareForMove(id, x, y, to, options, jobj);
|
||||
$ax.drag.LogMovedWidgetForDrag(id, options.dragInfo);
|
||||
|
||||
var object = $obj(id);
|
||||
if(object && $ax.public.fn.IsLayer(object.type)) {
|
||||
var childrenIds = $ax.public.fn.getLayerChildrenDeep(id, true);
|
||||
//don't push container when register moveinfo for child
|
||||
if(!skipOnMoveEvent) {
|
||||
for(var i = 0; i < childrenIds.length; i++) $ax.move.PrepareForMove(childrenIds[i], x, y, to, options, null, moveInfo.rootLayer, true);
|
||||
}
|
||||
}
|
||||
|
||||
//if(!moveInfo) moveInfo = _getMoveInfo(id, x, y, to, options, jobj);
|
||||
|
||||
jobj = moveInfo.jobj;
|
||||
|
||||
_moveElement(id, options, animationCompleteCallback, shouldFire, jobj, moveInfo);
|
||||
|
||||
if(skipOnMoveEvent) return;
|
||||
$ax.event.raiseSyntheticEvent(id, "onMove");
|
||||
if(childrenIds) {
|
||||
for(var i = 0; i < childrenIds.length; i++) $ax.event.raiseSyntheticEvent(childrenIds[i], 'onMove');
|
||||
}
|
||||
};
|
||||
|
||||
var _moveElement = function (id, options, animationCompleteCallback, shouldFire, jobj, moveInfo){
|
||||
var cssStyles = {};
|
||||
|
||||
if(!$ax.dynamicPanelManager.isPercentWidthPanel($obj(id))) cssStyles[moveInfo.horzProp] = '+=' + moveInfo.horzX;
|
||||
cssStyles[moveInfo.vertProp] = '+=' + moveInfo.vertY;
|
||||
|
||||
$ax.visibility.moveMovedLocation(id, moveInfo.horzX, moveInfo.vertY);
|
||||
|
||||
// I don't think root layer is necessary anymore after changes to layer container structure.
|
||||
// Wait to try removing it until more stable.
|
||||
var rootLayer = moveInfo.rootLayer;
|
||||
|
||||
var query = $addAll(jobj, id);
|
||||
var completeCount = query.length;
|
||||
var completeAnimation = function() {
|
||||
completeCount--;
|
||||
if(completeCount == 0 && rootLayer) $ax.visibility.popContainer(rootLayer, false);
|
||||
if(animationCompleteCallback) animationCompleteCallback();
|
||||
if(shouldFire) $ax.action.fireAnimationFromQueue(id, $ax.action.queueTypes.move);
|
||||
};
|
||||
if(options.easing==='none') {
|
||||
query.animate(cssStyles, { duration: 0, queue: false });
|
||||
|
||||
if(rootLayer) $ax.visibility.popContainer(rootLayer, false);
|
||||
if(animationCompleteCallback) animationCompleteCallback();
|
||||
//if this widget is inside a layer, we should just remove the layer from the queue
|
||||
if(shouldFire) $ax.action.fireAnimationFromQueue(id, $ax.action.queueTypes.move);
|
||||
} else if (options.trajectory === 'straight' || moveInfo.horzX === 0 || moveInfo.vertY === 0) {
|
||||
query.animate(cssStyles, {
|
||||
duration: options.duration, easing: options.easing, queue: false, complete: completeAnimation});
|
||||
} else {
|
||||
var initialHorzProp = $ax.getNumFromPx(query.css(moveInfo.horzProp));
|
||||
var initialVertProp = $ax.getNumFromPx(query.css(moveInfo.vertProp));
|
||||
var state = { parameter: 0 };
|
||||
var ellipseArcFunctionY = function(param) {
|
||||
return {
|
||||
x: initialHorzProp + (1.0 - Math.cos(param * Math.PI * 0.5)) * moveInfo.horzX,
|
||||
y: initialVertProp + Math.sin(param * Math.PI * 0.5) * moveInfo.vertY
|
||||
};
|
||||
};
|
||||
var ellipseArcFunctionX = function (param) {
|
||||
return {
|
||||
x: initialHorzProp + Math.sin(param * Math.PI * 0.5) * moveInfo.horzX,
|
||||
y: initialVertProp + (1.0 - Math.cos(param * Math.PI * 0.5)) * moveInfo.vertY
|
||||
};
|
||||
};
|
||||
var ellipseArcFunction = (moveInfo.horzX > 0) ^ (moveInfo.vertY > 0) ^ options.trajectory === 'arcClockwise'
|
||||
? ellipseArcFunctionX : ellipseArcFunctionY;
|
||||
var inverseFunction = $ax.public.fn.inversePathLengthFunction(ellipseArcFunction);
|
||||
$(state).animate({ parameter: 1.0 }, {
|
||||
duration: options.duration, easing: options.easing, queue: false,
|
||||
step: function (now) {
|
||||
var newPos = ellipseArcFunction(inverseFunction(now));
|
||||
var changeFields = {};
|
||||
changeFields[moveInfo.horzProp] = newPos.x;
|
||||
changeFields[moveInfo.vertProp] = newPos.y;
|
||||
query.css(changeFields);
|
||||
},
|
||||
complete: completeAnimation});
|
||||
}
|
||||
|
||||
// //moveinfo is used for moving 'with this'
|
||||
// var moveInfo = new Object();
|
||||
// moveInfo.x = horzX;
|
||||
// moveInfo.y = vertY;
|
||||
// moveInfo.options = options;
|
||||
// widgetMoveInfo[id] = moveInfo;
|
||||
|
||||
|
||||
};
|
||||
|
||||
_move.nopMove = function(id, options) {
|
||||
var moveInfo = new Object();
|
||||
moveInfo.x = 0;
|
||||
moveInfo.y = 0;
|
||||
moveInfo.options = {};
|
||||
moveInfo.options.easing = 'none';
|
||||
moveInfo.options.duration = 0;
|
||||
widgetMoveInfo[id] = moveInfo;
|
||||
|
||||
// Layer move using container now.
|
||||
var obj = $obj(id);
|
||||
if($ax.public.fn.IsLayer(obj.type)) if(options.onComplete) options.onComplete();
|
||||
|
||||
$ax.event.raiseSyntheticEvent(id, "onMove");
|
||||
};
|
||||
|
||||
//rotationDegree: total degree to rotate
|
||||
//centerPoint: the center of the circular path
|
||||
|
||||
|
||||
var _noRotateOnlyMove = function (id, moveDelta, rotatableMove, fireAnimationQueue, easing, duration, completionCallback) {
|
||||
moveDelta.x += rotatableMove.x;
|
||||
moveDelta.y += rotatableMove.y;
|
||||
if (moveDelta.x == 0 && moveDelta.y == 0) {
|
||||
if(fireAnimationQueue) {
|
||||
$ax.action.fireAnimationFromQueue(id, $ax.action.queueTypes.rotate);
|
||||
$ax.action.fireAnimationFromQueue(id, $ax.action.queueTypes.move);
|
||||
}
|
||||
if (completionCallback) completionCallback();
|
||||
} else {
|
||||
$jobj(id).animate({ top: '+=' + moveDelta.y, left: '+=' + moveDelta.x }, {
|
||||
duration: duration,
|
||||
easing: easing,
|
||||
queue: false,
|
||||
complete: function () {
|
||||
if(fireAnimationQueue) {
|
||||
$ax.action.fireAnimationFromQueue(id, $ax.action.queueTypes.move);
|
||||
$ax.action.fireAnimationFromQueue(id, $ax.action.queueTypes.rotate);
|
||||
}
|
||||
if (completionCallback) completionCallback();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
_move.circularMove = function (id, degreeDelta, centerPoint, moveDelta, rotatableMove, resizeOffset, options, fireAnimationQueue, completionCallback, willDoRotation) {
|
||||
var elem = $jobj(id);
|
||||
if(!willDoRotation) elem = $addAll(elem, id);
|
||||
|
||||
var moveInfo = $ax.move.PrepareForMove(id, moveDelta.x, moveDelta.y, false, options);
|
||||
// If not rotating, still need to check moveDelta and may need to handle that.
|
||||
if (degreeDelta === 0) {
|
||||
_noRotateOnlyMove(id, moveDelta, rotatableMove, fireAnimationQueue, options.easing, options.duration, completionCallback);
|
||||
return;
|
||||
}
|
||||
|
||||
var stepFunc = function(newDegree) {
|
||||
var deg = newDegree - rotation.degree;
|
||||
var widgetCenter = $ax('#' + id).offsetBoundingRect().centerPoint;
|
||||
//var widgetCenter = $ax.public.fn.getWidgetBoundingRect(id).centerPoint;
|
||||
//console.log("widget center of " + id + " x " + widgetCenter.x + " y " + widgetCenter.y);
|
||||
var widgetNewCenter = $axure.fn.getPointAfterRotate(deg, widgetCenter, centerPoint);
|
||||
|
||||
// Start by getting the move not related to rotation, and make sure to update center point to move with it.
|
||||
var ratio = deg / degreeDelta;
|
||||
|
||||
var xdelta = (moveDelta.x + rotatableMove.x) * ratio;
|
||||
var ydelta = (moveDelta.y + rotatableMove.y) * ratio;
|
||||
if(resizeOffset) {
|
||||
var resizeShift = {};
|
||||
resizeShift.x = resizeOffset.x * ratio;
|
||||
resizeShift.y = resizeOffset.y * ratio;
|
||||
$axure.fn.getPointAfterRotate(rotation.degree, resizeShift, { x: 0, y: 0 });
|
||||
xdelta += resizeShift.x;
|
||||
ydelta += resizeShift.y;
|
||||
}
|
||||
centerPoint.x += xdelta;
|
||||
centerPoint.y += ydelta;
|
||||
|
||||
// Now for the move that is rotatable, it must be rotated
|
||||
rotatableMove = $axure.fn.getPointAfterRotate(deg, rotatableMove, { x: 0, y: 0 });
|
||||
|
||||
// Now add in circular move to the mix.
|
||||
xdelta += widgetNewCenter.x - widgetCenter.x;
|
||||
ydelta += widgetNewCenter.y - widgetCenter.y;
|
||||
|
||||
$ax.visibility.moveMovedLocation(id, xdelta, ydelta);
|
||||
|
||||
if(xdelta < 0) elem.css('left', '-=' + -xdelta);
|
||||
else if(xdelta > 0) elem.css('left', '+=' + xdelta);
|
||||
|
||||
if(ydelta < 0) elem.css('top', '-=' + -ydelta);
|
||||
else if(ydelta > 0) elem.css('top', '+=' + ydelta);
|
||||
};
|
||||
|
||||
var onComplete = function() {
|
||||
if(fireAnimationQueue) $ax.action.fireAnimationFromQueue(id, $ax.action.queueTypes.move);
|
||||
if(completionCallback) completionCallback();
|
||||
if(moveInfo.rootLayer) $ax.visibility.popContainer(moveInfo.rootLayer, false);
|
||||
var isPercentWidthPanel = $ax.dynamicPanelManager.isPercentWidthPanel($obj(id));
|
||||
if(isPercentWidthPanel) {
|
||||
$ax.dynamicPanelManager.updatePanelPercentWidth(id);
|
||||
$ax.dynamicPanelManager.updatePanelContentPercentWidth(id);
|
||||
}
|
||||
if(elem.css('position') == 'fixed') {
|
||||
if(!isPercentWidthPanel) elem.css('left', '');
|
||||
elem.css('top', '');
|
||||
}
|
||||
};
|
||||
|
||||
var rotation = { degree: 0 };
|
||||
|
||||
if(!options.easing || options.easing === 'none' || options.duration <= 0) {
|
||||
stepFunc(degreeDelta);
|
||||
onComplete();
|
||||
} else {
|
||||
$(rotation).animate({ degree: degreeDelta }, {
|
||||
duration: options.duration,
|
||||
easing: options.easing,
|
||||
queue: false,
|
||||
step: stepFunc,
|
||||
complete: onComplete
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//rotate a widget by degree, center is 50% 50%
|
||||
_move.rotate = function (id, degree, easing, duration, to, shouldFire, completionCallback) {
|
||||
var currentDegree = _move.getRotationDegree(id);
|
||||
if(to) degree = degree - currentDegree;
|
||||
|
||||
if(degree === 0) {
|
||||
if (shouldFire) $ax.action.fireAnimationFromQueue(id, $ax.action.queueTypes.rotate);
|
||||
return;
|
||||
}
|
||||
|
||||
var query = $jobj(id);
|
||||
var stepFunc = function(now) {
|
||||
var degreeDelta = now - rotation.degree;
|
||||
var newDegree = currentDegree + degreeDelta;
|
||||
query.css($ax.public.fn.setTransformHowever("rotate(" + newDegree + "deg)"));
|
||||
currentDegree = newDegree;
|
||||
};
|
||||
|
||||
var onComplete = function() {
|
||||
if(shouldFire) {
|
||||
$ax.action.fireAnimationFromQueue($ax.public.fn.compoundIdFromComponent(id), $ax.action.queueTypes.rotate);
|
||||
}
|
||||
if(completionCallback) completionCallback();
|
||||
|
||||
$ax.annotation.adjustIconLocation(id);
|
||||
};
|
||||
|
||||
var rotation = { degree: 0 };
|
||||
|
||||
$ax.visibility.setRotatedAngle(id, currentDegree + degree);
|
||||
|
||||
//if no animation, setting duration to 1, to prevent RangeError in rotation loops without animation
|
||||
if(!easing || easing === 'none' || duration <= 0) {
|
||||
stepFunc(degree);
|
||||
onComplete();
|
||||
} else {
|
||||
$(rotation).animate({ degree: degree }, {
|
||||
duration: duration,
|
||||
easing: easing,
|
||||
queue: false,
|
||||
step: stepFunc,
|
||||
complete: onComplete
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
_move.compoundRotateAround = function (id, degreeDelta, centerPoint, moveDelta, rotatableMove, resizeOffset, easing, duration, fireAnimationQueue, completionCallback) {
|
||||
if (degreeDelta === 0) {
|
||||
_noRotateOnlyMove($ax.public.fn.compoundIdFromComponent(id), moveDelta, rotatableMove, fireAnimationQueue, easing, duration, completionCallback, $ax.action.queueTypes.rotate);
|
||||
return;
|
||||
}
|
||||
var elem = $jobj(id);
|
||||
var rotation = { degree: 0 };
|
||||
|
||||
if (!easing || easing === 'none' || duration <= 0) {
|
||||
duration = 1;
|
||||
easing = 'linear'; //it doesn't matter anymore here...
|
||||
}
|
||||
|
||||
var originalWidth = $ax.getNumFromPx(elem.css('width'));
|
||||
var originalHeight = $ax.getNumFromPx(elem.css('height'));
|
||||
var originalLeft = $ax.getNumFromPx(elem.css('left'));
|
||||
var originalTop = $ax.getNumFromPx(elem.css('top'));
|
||||
|
||||
$(rotation).animate({ degree: degreeDelta }, {
|
||||
duration: duration,
|
||||
easing: easing,
|
||||
queue: false,
|
||||
step: function (newDegree) {
|
||||
var transform = $ax.public.fn.transformFromElement(elem[0]);
|
||||
var originalCenter = { x: originalLeft + 0.5 * originalWidth, y: originalTop + 0.5 * originalHeight};
|
||||
var componentCenter = { x: originalCenter.x + transform[4], y: originalCenter.y + transform[5] };
|
||||
var deg = newDegree - rotation.degree;
|
||||
var ratio = deg / degreeDelta;
|
||||
var xdelta = (moveDelta.x + rotatableMove.x) * ratio;
|
||||
var ydelta = (moveDelta.y + rotatableMove.y) * ratio;
|
||||
if (resizeOffset) {
|
||||
var resizeShift = {};
|
||||
resizeShift.x = resizeOffset.x * ratio;
|
||||
resizeShift.y = resizeOffset.y * ratio;
|
||||
$axure.fn.getPointAfterRotate(rotation.degree, resizeShift, { x: 0, y: 0 });
|
||||
xdelta += resizeShift.x;
|
||||
ydelta += resizeShift.y;
|
||||
}
|
||||
|
||||
var rotationMatrix = $ax.public.fn.rotationMatrix(deg);
|
||||
var compositionTransform = $ax.public.fn.matrixMultiplyMatrix(rotationMatrix,
|
||||
{ m11: transform[0], m21: transform[1], m12: transform[2], m22: transform[3] });
|
||||
|
||||
//console.log("widget center of " + id + " x " + widgetCenter.x + " y " + widgetCenter.y);
|
||||
var widgetNewCenter = $axure.fn.getPointAfterRotate(deg, componentCenter, centerPoint);
|
||||
var newMatrix = $ax.public.fn.matrixString(compositionTransform.m11, compositionTransform.m21, compositionTransform.m12, compositionTransform.m22,
|
||||
widgetNewCenter.x - originalCenter.x + xdelta, widgetNewCenter.y - originalCenter.y + ydelta);
|
||||
elem.css($ax.public.fn.setTransformHowever(newMatrix));
|
||||
},
|
||||
complete: function () {
|
||||
if (fireAnimationQueue) {
|
||||
$ax.action.fireAnimationFromQueue(elem.parent()[0].id, $ax.action.queueTypes.rotate);
|
||||
}
|
||||
|
||||
if(completionCallback) completionCallback();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
_move.getRotationDegreeFromElement = function(element) {
|
||||
if(element == null) return NaN;
|
||||
|
||||
var transformString = element.style['transform'] ||
|
||||
element.style['-o-transform'] ||
|
||||
element.style['-ms-transform'] ||
|
||||
element.style['-moz-transform'] ||
|
||||
element.style['-webkit-transform'];
|
||||
|
||||
if(transformString) {
|
||||
var rotateRegex = /rotate\(([-?0-9]+)deg\)/;
|
||||
var degreeMatch = rotateRegex.exec(transformString);
|
||||
if(degreeMatch && degreeMatch[1]) return parseFloat(degreeMatch[1]);
|
||||
}
|
||||
|
||||
if(window.getComputedStyle) {
|
||||
var st = window.getComputedStyle(element, null);
|
||||
} else {
|
||||
console.log('rotation is not supported for ie 8 and below in this version of axure rp');
|
||||
return 0;
|
||||
}
|
||||
|
||||
var tr = st.getPropertyValue("transform") ||
|
||||
st.getPropertyValue("-o-transform") ||
|
||||
st.getPropertyValue("-ms-transform") ||
|
||||
st.getPropertyValue("-moz-transform") ||
|
||||
st.getPropertyValue("-webkit-transform");
|
||||
|
||||
if(!tr || tr === 'none') return 0;
|
||||
var values = tr.split('(')[1];
|
||||
values = values.split(')')[0],
|
||||
values = values.split(',');
|
||||
|
||||
var a = values[0];
|
||||
var b = values[1];
|
||||
|
||||
var radians = Math.atan2(b, a);
|
||||
if(radians < 0) {
|
||||
radians += (2 * Math.PI);
|
||||
}
|
||||
|
||||
return radians * (180 / Math.PI);
|
||||
};
|
||||
|
||||
_move.getRotationDegree = function(elementId) {
|
||||
if($ax.public.fn.IsLayer($obj(elementId).type)) {
|
||||
return $jobj(elementId).data('layerDegree');
|
||||
}
|
||||
return _move.getRotationDegreeFromElement(document.getElementById(elementId));
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user