You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
732 lines
26 KiB
HTML
732 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>JSDoc: Source: rulez.js</title>
|
|
|
|
<script src="scripts/prettify/prettify.js"> </script>
|
|
<script src="scripts/prettify/lang-css.js"> </script>
|
|
<!--[if lt IE 9]>
|
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
|
|
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="main">
|
|
|
|
<h1 class="page-title">Source: rulez.js</h1>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section>
|
|
<article>
|
|
<pre class="prettyprint source linenums"><code>/* jshint latedef:nofunc */
|
|
/* jshint unused:false*/
|
|
/**
|
|
*
|
|
* @param config
|
|
* @constructor
|
|
*/
|
|
(function (global, factory) {
|
|
if (typeof module === 'object' && typeof module.exports === 'object') {
|
|
// For CommonJS and CommonJS-like environments where a proper `window`
|
|
// is present, execute the factory and get Rulez.
|
|
// For environments that do not have a `window` with a `document`
|
|
// (such as Node.js), expose a factory as module.exports.
|
|
// This accentuates the need for the creation of a real `window`.
|
|
// e.g. var Rulez = require('rulez.js')(window);
|
|
module.exports = global.document ?
|
|
factory(global, true) :
|
|
function (w) {
|
|
if (!w.document) {
|
|
throw new Error('rulez.js requires a window with a document');
|
|
}
|
|
return factory(w);
|
|
};
|
|
} else {
|
|
factory(global);
|
|
}
|
|
// Pass this if window is not defined yet
|
|
}(typeof window !== 'undefined' ? window : this, function (window, noGlobal) {
|
|
var Rulez = function (config) {
|
|
'use strict';
|
|
var svgNS = 'http://www.w3.org/2000/svg';
|
|
var defaultConfig = {
|
|
width: null,
|
|
height: null,
|
|
element: null,
|
|
layout: 'horizontal',
|
|
alignment: 'top',
|
|
units: '', //'em', 'ex', 'px', 'pt', 'pc', 'cm', 'mm', 'in' and ''(user units) : http://www.w3.org/TR/SVG/coords.html#Units
|
|
divisionDefaults: {
|
|
strokeWidth: 1,
|
|
type: 'rect',
|
|
className: 'rulez-rect',
|
|
renderer: null
|
|
},
|
|
textDefaults: {
|
|
rotation: 0,
|
|
offset: 25,
|
|
className: 'rulez-text',
|
|
/**
|
|
* Wherever to show or not to show units alongside text
|
|
*/
|
|
showUnits: false,
|
|
centerText: true,
|
|
renderer: null
|
|
},
|
|
guideDefaults: {
|
|
strokeWidth: 1,
|
|
getSize: function() {
|
|
return 5000;
|
|
}
|
|
},
|
|
divisions: [
|
|
{
|
|
pixelGap: 5,
|
|
lineLength: 5
|
|
},
|
|
{
|
|
pixelGap: 25,
|
|
lineLength: 10
|
|
},
|
|
{
|
|
pixelGap: 50,
|
|
lineLength: 15
|
|
},
|
|
{
|
|
pixelGap: 100,
|
|
lineLength: 20
|
|
}
|
|
],
|
|
texts: [
|
|
{
|
|
pixelGap: 100
|
|
}
|
|
],
|
|
guides: [],
|
|
guideSnapInterval: 10
|
|
};
|
|
var getDefaultConfigCopy = function () {
|
|
var copy = JSON.parse(JSON.stringify(defaultConfig));
|
|
copy.guideDefaults.getSize = defaultConfig.guideDefaults.getSize;
|
|
return copy;
|
|
};
|
|
|
|
/**
|
|
* result config
|
|
*/
|
|
var c = mergeConfigs(getDefaultConfigCopy(), config);
|
|
if (!c.guideDefaults.className) {
|
|
if (isVertical()) {
|
|
c.guideDefaults.className = 'rulez-guide-vert';
|
|
} else {
|
|
c.guideDefaults.className = 'rulez-guide-horiz';
|
|
}
|
|
}
|
|
c = mergeConfigs(c, c);
|
|
/**
|
|
* amount of additional(redundant) divisions on left and right (top, bottom) side of ruler
|
|
*/
|
|
var additionalDivisionsAmount = 2;
|
|
/**
|
|
* main group (g svg element) that contains all divisions and texts
|
|
* @type {SVGGElement}
|
|
*/
|
|
var g = createGroup();
|
|
/**
|
|
* Array of arrays of all texts
|
|
* @type {Array.<Array.<SVGTextElement >>}
|
|
*/
|
|
var texts = [];
|
|
/**
|
|
* Array of all guides
|
|
* @type {Array.<SVGTextElement>}
|
|
*/
|
|
var guides = [];
|
|
/**
|
|
* Current position of ruler
|
|
* @type {number}
|
|
*/
|
|
var currentPosition = 0;
|
|
/**
|
|
* Start position of drawing ruler
|
|
* @type {number}
|
|
*/
|
|
var startPosition;
|
|
/**
|
|
* End position of drawing ruler
|
|
* @type {number}
|
|
*/
|
|
var endPosition;
|
|
/**
|
|
* Scale of ruler
|
|
* @type {number}
|
|
*/
|
|
var scale = 1;
|
|
|
|
var size;
|
|
var maxDistance = 0;
|
|
var unitConversionRate;
|
|
|
|
/**
|
|
* Renders ruler inside svg element
|
|
*/
|
|
this.render = function () {
|
|
c.width || (c.width = c.element.getBoundingClientRect().width);
|
|
c.height || (c.height = c.element.getBoundingClientRect().height);
|
|
c.element.appendChild(g = createGroup());
|
|
size = isVertical() ? c.height : c.width;
|
|
unitConversionRate = getUnitConversionRate();
|
|
calculateStartEndPosition();
|
|
generateDivisionsAndTexts(startPosition, endPosition);
|
|
generateGuides();
|
|
this.scrollTo(0, false);
|
|
|
|
|
|
c.element.addEventListener('dblclick', function (e) {
|
|
var position = isVertical() ? e.offsetY : e.offsetX;
|
|
position = (currentPosition + position) * scale;
|
|
|
|
var guideConfig = Object.assign({
|
|
position: position
|
|
}, c.guideDefaults);
|
|
c.guides.push(guideConfig);
|
|
createGuideFromConfig(guideConfig);
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Scrolls ruler to specified position.
|
|
* @param {number} pos left(or top for vertical rulers) position to scroll to.
|
|
* @param {boolean} useUnits if true pos will be multiplied by unit conversion rate;
|
|
*/
|
|
this.scrollTo = function (pos, useUnits) {
|
|
currentPosition = pos;
|
|
if (useUnits) {
|
|
currentPosition *= unitConversionRate;
|
|
}
|
|
|
|
if (isVertical()) {
|
|
g.setAttribute('transform', 'translate(0,' + (-currentPosition % (maxDistance * unitConversionRate)) + ')');
|
|
} else {
|
|
g.setAttribute('transform', 'translate(' + (-currentPosition % (maxDistance * unitConversionRate)) + ',0)');
|
|
}
|
|
var pixelCurrentPosition = currentPosition / unitConversionRate;
|
|
for (var i = 0; i < c.texts.length; i++) {
|
|
var textConfig = c.texts[i];
|
|
var textElements = texts[i];
|
|
var amountPerMaxDistance = maxDistance / textConfig.pixelGap;
|
|
var offset = pixelCurrentPosition % maxDistance;
|
|
var startTextPos = pixelCurrentPosition - offset;
|
|
for (var j = 0; j < textElements.length; j++) {
|
|
var textElement = textElements[j];
|
|
var text = Math.floor((startTextPos + (j - additionalDivisionsAmount * amountPerMaxDistance) * textConfig.pixelGap) * scale);
|
|
if (textConfig.showUnits) {
|
|
text = addUnits(text);
|
|
}
|
|
textElement.textContent = text;
|
|
if (textConfig.renderer) {
|
|
textConfig.renderer(textElement);
|
|
}
|
|
}
|
|
}
|
|
for (i = 0; i < guides.length; i++) {
|
|
moveGuide(guides[i], c.guides[i]);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Scales the ruler's text values by specific value.
|
|
* @param {number} scaleValue
|
|
*/
|
|
this.setScale = function (scaleValue) {
|
|
scale = scaleValue;
|
|
this.scrollTo(currentPosition, false);
|
|
};
|
|
|
|
/**
|
|
* Updates size with current clientWidth(height) in case it's bigger than previous one.
|
|
* Only appends more divisions and texts if necessary.
|
|
*/
|
|
this.resize = function () {
|
|
var oldSize = size;
|
|
var newSize = isVertical() ? c.element.clientHeight : c.element.clientWidth;
|
|
if (oldSize !== newSize) {
|
|
if (oldSize > newSize) {
|
|
//todo remove redundant divisions?
|
|
} else {
|
|
size = newSize;
|
|
var oldEndPosition = endPosition;
|
|
calculateStartEndPosition();
|
|
generateDivisionsAndTexts(oldEndPosition, endPosition);
|
|
this.scrollTo(currentPosition, false);
|
|
}
|
|
}
|
|
|
|
//FIXME guide resize
|
|
};
|
|
|
|
this.getGuideConfigs = function () {
|
|
return JSON.parse(JSON.stringify(c.guides));
|
|
};
|
|
|
|
/**
|
|
* Callback that is called after saving of ruler as image is done
|
|
* @callback saveFinishCallback
|
|
* @param {string} base64 png image string
|
|
*/
|
|
/**
|
|
* Saves ruler as image.
|
|
* @param {saveFinishCallback} saveFinishCallback
|
|
*/
|
|
this.saveAsImage = function (saveFinishCallback) {
|
|
var svgClone = deepCloneWithCopyingStyle(c.element);
|
|
//http://stackoverflow.com/questions/23514921/problems-calling-drawimage-with-svg-on-a-canvas-context-object-in-firefox
|
|
svgClone.setAttribute('width', c.width);
|
|
svgClone.setAttribute('height', c.height);
|
|
//
|
|
var canvas = window.document.createElement('canvas');
|
|
canvas.setAttribute('width', c.width);
|
|
canvas.setAttribute('height', c.height);
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
var URL = window.URL || window.webkitURL;
|
|
|
|
var img = new Image();
|
|
img.style.position = 'absolute';
|
|
img.style.top = '-100000px';
|
|
img.style.left = '-100000px';
|
|
img.style.zIndex = -100000;
|
|
img.setAttribute('width', c.width);
|
|
img.setAttribute('height', c.height);
|
|
|
|
var svg = new Blob([svgClone.outerHTML], {type: 'image/svg+xml;charset=utf-8'});
|
|
var url = URL.createObjectURL(svg);
|
|
|
|
img.onload = function () {
|
|
setTimeout(function () { //workaround for not working width and height.
|
|
ctx.drawImage(img, 0, 0);
|
|
URL.revokeObjectURL(url);
|
|
window.document.body.removeChild(img);
|
|
saveFinishCallback(canvas.toDataURL());
|
|
}, 1000);
|
|
};
|
|
|
|
window.document.body.appendChild(img);
|
|
img.src = url;
|
|
};
|
|
|
|
/**
|
|
* @returns {number} how much pixels are in used unit.
|
|
*/
|
|
this.getUnitConversionRate = function () {
|
|
return getUnitConversionRate();
|
|
};
|
|
|
|
function deepCloneWithCopyingStyle(node) {
|
|
var clone = node.cloneNode(false);
|
|
var i;
|
|
if (node instanceof Element) {
|
|
var computedStyle = window.getComputedStyle(node);
|
|
if (computedStyle) {
|
|
for (i = 0; i < computedStyle.length; i++) {
|
|
var property = computedStyle[i];
|
|
clone.style.setProperty(property, computedStyle.getPropertyValue(property), '');
|
|
}
|
|
}
|
|
}
|
|
for (i = 0; i < node.childNodes.length; i++) {
|
|
clone.appendChild(deepCloneWithCopyingStyle(node.childNodes[i]));
|
|
}
|
|
|
|
return clone;
|
|
}
|
|
|
|
function calculateStartEndPosition() {
|
|
if (!maxDistance) {
|
|
c.divisions.forEach(function (entry) {
|
|
if (entry.pixelGap > maxDistance) {
|
|
maxDistance = entry.pixelGap;
|
|
}
|
|
});
|
|
}
|
|
endPosition = size - (size % maxDistance) + maxDistance * additionalDivisionsAmount;
|
|
startPosition = -maxDistance * additionalDivisionsAmount;
|
|
}
|
|
|
|
function generateDivisionsAndTexts(startPosition, endPosition) {
|
|
c.divisions.forEach(function (division) {
|
|
generateDivisions(startPosition, endPosition, division);
|
|
});
|
|
var i = 0;
|
|
c.texts.forEach(function (textConfig) {
|
|
var textsArray = generateTexts(startPosition, endPosition, textConfig);
|
|
if (texts[i]) {
|
|
texts[i] = texts[i].concat(textsArray);
|
|
} else {
|
|
texts.push(textsArray);
|
|
}
|
|
i++;
|
|
});
|
|
}
|
|
|
|
function generateDivisions(startPosition, endPosition, elementConfig) {
|
|
for (var i = startPosition; i < endPosition; i += elementConfig.pixelGap) {
|
|
var line = createLine(i, elementConfig);
|
|
g.appendChild(line);
|
|
if (elementConfig.renderer) {
|
|
elementConfig.renderer(line);
|
|
}
|
|
}
|
|
}
|
|
|
|
function generateGuides() {
|
|
c.guides.forEach(function (guideConfig) {
|
|
createGuideFromConfig(guideConfig);
|
|
});
|
|
}
|
|
|
|
function createGuideFromConfig(guideConfig) {
|
|
var guide = generateGuide(guideConfig);
|
|
guides.push(guide);
|
|
|
|
makeMovable(guide, guideConfig);
|
|
|
|
g.appendChild(guide);
|
|
if (guideConfig.renderer) {
|
|
guideConfig.renderer(guide);
|
|
}
|
|
}
|
|
|
|
function moveGuide(guide, guideConfig) {
|
|
var offset = (-currentPosition) % (maxDistance * unitConversionRate);
|
|
var position = guideConfig.position / scale - currentPosition - offset ;
|
|
guide.setAttribute('transform', isVertical() ? 'translate(0,' + position + ')' : 'translate(' + position + ',0)');
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param {SVGElement} guide
|
|
*/
|
|
function makeMovable(guide, guideConfig) {
|
|
var startPos;
|
|
var startGuidePos = guideConfig.position;
|
|
var isVerticalRuler = isVertical();
|
|
var posPropName = isVerticalRuler ? 'pageY' : 'pageX';
|
|
var globalClassName = isVerticalRuler ? 'rulez-guide-vert-global' : 'rulez-guide-horiz-global';
|
|
var positionPrefix = isVerticalRuler ? 'Y : ' : 'X : ';
|
|
var leftPositionMargin = isVerticalRuler ? 10 : 0;
|
|
var topPositionMargin = isVerticalRuler ? 0 : 10;
|
|
var positionElement = document.createElement('span');
|
|
positionElement.classList.add('rulez-position-element');
|
|
|
|
var movePositionElement = function(e) {
|
|
positionElement.innerText = positionPrefix + guideConfig.position;
|
|
positionElement.style.left = e.pageX + leftPositionMargin + 'px';
|
|
positionElement.style.top = e.pageY + topPositionMargin + 'px';
|
|
};
|
|
|
|
var mouseMoveListener = function (e) {
|
|
e.preventDefault();
|
|
var pos = e[posPropName];
|
|
var diff = startPos - pos;
|
|
guideConfig.position = startGuidePos - (diff * scale);
|
|
if (e.shiftKey) {
|
|
// snap to the grid
|
|
var halfSnap = c.guideSnapInterval / 2;
|
|
var mod = guideConfig.position % c.guideSnapInterval;
|
|
var absMod = Math.abs(mod);
|
|
var diffSnap = mod;
|
|
if (absMod > halfSnap) {
|
|
diffSnap = Math.sign(mod) * (c.guideSnapInterval - absMod);
|
|
guideConfig.position = Math.round(guideConfig.position + diffSnap);
|
|
} else {
|
|
guideConfig.position = Math.round(guideConfig.position - diffSnap);
|
|
}
|
|
} else {
|
|
guideConfig.position = Math.round(guideConfig.position);
|
|
}
|
|
movePositionElement(e);
|
|
moveGuide(guide, guideConfig);
|
|
};
|
|
var mouseUpListener = function (e) {
|
|
document.body.classList.remove(globalClassName);
|
|
document.body.removeChild(positionElement);
|
|
document.removeEventListener('mousemove', mouseMoveListener);
|
|
document.removeEventListener('mouseup', mouseUpListener);
|
|
};
|
|
guide.addEventListener('mousedown', function (e) {
|
|
e.stopPropagation();
|
|
document.body.classList.add(globalClassName);
|
|
startPos = e[posPropName];
|
|
startGuidePos = guideConfig.position;
|
|
movePositionElement(e);
|
|
document.body.appendChild(positionElement);
|
|
document.addEventListener('mouseup', mouseUpListener);
|
|
document.addEventListener('mousemove', mouseMoveListener);
|
|
}, true);
|
|
guide.addEventListener('dblclick', function () {
|
|
removeGuide(guide, guideConfig);
|
|
});
|
|
}
|
|
|
|
function removeGuide(guide, guideConfig) {
|
|
guides = guides.filter(function (g) {
|
|
return g !== guide;
|
|
});
|
|
c.guides = c.guides.filter(function (gConfig) {
|
|
return gConfig !== guideConfig;
|
|
});
|
|
guide.parentNode.removeChild(guide);
|
|
}
|
|
|
|
function generateGuide(guideConfig) {
|
|
return _createGuideRect(guideConfig);
|
|
}
|
|
|
|
function generateTexts(startPosition, endPosition, elementConfig) {
|
|
var texts = [];
|
|
for (var i = startPosition; i < endPosition; i += elementConfig.pixelGap) {
|
|
var text = createText(i, elementConfig);
|
|
g.appendChild(text);
|
|
if (elementConfig.renderer) {
|
|
elementConfig.renderer(text);
|
|
}
|
|
texts.push(text);
|
|
}
|
|
return texts;
|
|
}
|
|
|
|
function createLine(pos, elementConfig) {
|
|
switch (elementConfig.type) {
|
|
case 'line':
|
|
return _createLine(pos, elementConfig);
|
|
case 'rect':
|
|
return _createRect(pos, elementConfig);
|
|
default :
|
|
return _createRect(pos, elementConfig);
|
|
}
|
|
}
|
|
|
|
function _createGuideRect(guideConfig) {
|
|
var guide = _createRectGeneral(0, guideConfig.className, guideConfig.getSize(guideConfig), guideConfig.strokeWidth, 0);
|
|
moveGuide(guide, guideConfig);
|
|
return guide;
|
|
}
|
|
|
|
function _createLine(pos, elementConfig) {
|
|
return _createLineGeneral(pos, elementConfig.className, elementConfig.lineLength, elementConfig.strokeWidth);
|
|
}
|
|
|
|
function _createRect(pos, elementConfig) {
|
|
return _createRectGeneral(pos, elementConfig.className, elementConfig.lineLength, elementConfig.strokeWidth);
|
|
}
|
|
|
|
function _createLineGeneral(pos, className, lineLength, strokeWidth) {
|
|
var line = window.document.createElementNS(svgNS, 'line');
|
|
var defaultAlignment = isDefaultAlignment();
|
|
var x1, x2, y1, y2;
|
|
if (isVertical()) {
|
|
x1 = 'y1';
|
|
x2 = 'y2';
|
|
y1 = 'x1';
|
|
y2 = 'x2';
|
|
} else {
|
|
x1 = 'x1';
|
|
x2 = 'x2';
|
|
y1 = 'y1';
|
|
y2 = 'y2';
|
|
}
|
|
|
|
line.setAttribute('class', className);
|
|
line.setAttribute(x1, addUnits(pos));
|
|
line.setAttribute(x2, addUnits(pos));
|
|
line.setAttribute(y1, addUnits(defaultAlignment ? '0' : getAlignmentOffset() - lineLength));
|
|
line.setAttribute(y2, addUnits(defaultAlignment ? lineLength : getAlignmentOffset()));
|
|
line.setAttribute('stroke-width', addUnits(strokeWidth));
|
|
return line;
|
|
}
|
|
|
|
function _createRectGeneral(pos, className, lineLength, strokeWidth, alignment) {
|
|
var line = window.document.createElementNS(svgNS, 'rect');
|
|
var defaultAlignment = isDefaultAlignment();
|
|
var x, y, height, width;
|
|
if (isVertical()) {
|
|
x = 'y';
|
|
y = 'x';
|
|
height = 'width';
|
|
width = 'height';
|
|
} else {
|
|
x = 'x';
|
|
y = 'y';
|
|
height = 'height';
|
|
width = 'width';
|
|
}
|
|
|
|
var alignmentValue = (typeof alignment !== 'undefined') ? alignment : (defaultAlignment ? '0' : getAlignmentOffset() - lineLength);
|
|
|
|
line.setAttribute('class', className);
|
|
line.setAttribute(x, addUnits(pos));
|
|
line.setAttribute(y, addUnits(alignmentValue));
|
|
line.setAttribute(height, addUnits(lineLength));
|
|
line.setAttribute(width, addUnits(strokeWidth));
|
|
return line;
|
|
}
|
|
|
|
function createText(pos, elementConfig) {
|
|
var textSvg = window.document.createElementNS(svgNS, 'text');
|
|
var yPos = getTextPosY(elementConfig);
|
|
var x, y;
|
|
textSvg.setAttribute('class', elementConfig.className);
|
|
if (isVertical()) {
|
|
x = 'y';
|
|
y = 'x';
|
|
} else {
|
|
x = 'x';
|
|
y = 'y';
|
|
}
|
|
textSvg.origPos = pos;
|
|
textSvg.origPosAttribute = x;
|
|
textSvg.setAttribute(x, addUnits(pos));
|
|
textSvg.setAttribute(y, addUnits(yPos));
|
|
rotateText(textSvg, elementConfig);
|
|
textSvg.textContent = elementConfig.showUnits ? addUnits(pos) : pos;
|
|
if (elementConfig.centerText) {
|
|
textSvg.setAttribute('text-anchor', 'middle');
|
|
}
|
|
return textSvg;
|
|
}
|
|
|
|
function createGroup() {
|
|
return window.document.createElementNS(svgNS, 'g');
|
|
}
|
|
|
|
function isVertical() {
|
|
return c.layout === 'vertical';
|
|
}
|
|
|
|
function isDefaultAlignment() {
|
|
return !(c.alignment === 'bottom' || c.alignment === 'right');
|
|
}
|
|
|
|
function getAlignmentOffset() {
|
|
return isVertical() ? c.width : c.height;
|
|
}
|
|
|
|
function mergeConfigs(def, cus, notOverrideDef) {
|
|
if (!cus) {
|
|
return def;
|
|
}
|
|
|
|
for (var param in cus) {
|
|
if (cus.hasOwnProperty(param)) {
|
|
switch (param) {
|
|
case 'divisionDefaults':
|
|
case 'textDefaults':
|
|
case 'guideDefaults':
|
|
mergeConfigs(def[param], cus[param]);
|
|
break;
|
|
default :
|
|
if (!(notOverrideDef && def[param])) {
|
|
def[param] = cus[param];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (def.divisions) {
|
|
def.divisions.forEach(function (entry) {
|
|
mergeConfigs(entry, def.divisionDefaults, entry);
|
|
if (!entry.className) {
|
|
entry.className = entry.type === 'line' ? 'rulez-line' : 'rulez-rect';
|
|
}
|
|
});
|
|
}
|
|
if (def.texts) {
|
|
def.texts.forEach(function (entry) {
|
|
mergeConfigs(entry, def.textDefaults, entry);
|
|
});
|
|
}
|
|
if (def.guides) {
|
|
def.guides.forEach(function (entry) {
|
|
mergeConfigs(entry, def.guideDefaults, entry);
|
|
});
|
|
}
|
|
|
|
return def;
|
|
}
|
|
|
|
function addUnits(value) {
|
|
return value + c.units;
|
|
}
|
|
|
|
function getUnitConversionRate() {
|
|
if (c.units === '' || c.units === 'px') {
|
|
return 1;
|
|
}
|
|
var dummyEl = window.document.createElement('div');
|
|
dummyEl.style.position = 'absolute';
|
|
dummyEl.style.top = '-100000px';
|
|
dummyEl.style.left = '-100000px';
|
|
dummyEl.style.zIndex = -100000;
|
|
dummyEl.style.width = dummyEl.style.height = addUnits(1);
|
|
window.document.body.appendChild(dummyEl);
|
|
var width = (window.getComputedStyle(dummyEl).width).replace('px', '');
|
|
window.document.body.removeChild(dummyEl);
|
|
return width;
|
|
}
|
|
|
|
function rotateText(textElement, elementConfig) {
|
|
var rotate;
|
|
var pos = textElement.origPos;
|
|
var yPos = getTextPosY(elementConfig);
|
|
if (isVertical()) {
|
|
rotate = 'rotate(' + elementConfig.rotation + ' ' + (yPos * unitConversionRate) + ' ' + (pos * unitConversionRate) + ')';
|
|
} else {
|
|
rotate = 'rotate(' + elementConfig.rotation + ' ' + (pos * unitConversionRate) + ' ' + (yPos * unitConversionRate) + ')';
|
|
}
|
|
textElement.setAttribute('transform', rotate);
|
|
}
|
|
|
|
function getTextPosY(elementConfig) {
|
|
var defaultAlignment = isDefaultAlignment();
|
|
return defaultAlignment ? elementConfig.offset : getAlignmentOffset() - elementConfig.offset;
|
|
}
|
|
};
|
|
if (!noGlobal) {
|
|
window.Rulez = Rulez;
|
|
}
|
|
return Rulez;
|
|
}));
|
|
|
|
|
|
</code></pre>
|
|
</article>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<nav>
|
|
<h2><a href="index.html">Home</a></h2><h3><a href="global.html">Global</a></h3>
|
|
</nav>
|
|
|
|
<br class="clear">
|
|
|
|
<footer>
|
|
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.3</a> on Wed Sep 18 2019 11:16:29 GMT-0400 (EDT)
|
|
</footer>
|
|
|
|
<script> prettyPrint(); </script>
|
|
<script src="scripts/linenumber.js"> </script>
|
|
</body>
|
|
</html>
|