padding: 0;
box-sizing: border-box;
}
-img {
+img,
+.division {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
height: 51px;
}
#linkeditor #linkeditor-main #linkeditor-editor {
+ position: relative;
height: calc( 100% - 51px);
width: 100%;
}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers {
+ color: #333;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-corner {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ border: 1px solid #aaa;
+ border-width: 0 1px 1px 0;
+ width: 16px;
+ height: 16px;
+ z-index: 1;
+ background-color: #ddd;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler {
+ overflow: hidden;
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler .division {
+ pointer-events: none;
+ position: absolute;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler .division .value {
+ position: absolute;
+ font-size: 12px;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers .ruler .division .subdivision {
+ position: absolute;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-x {
+ height: 16px;
+ width: 100%;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-x .division,
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-x .subdivision {
+ width: 0px;
+ border-left: 1px solid #333;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-x .division {
+ height: 16px;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-x .division .value {
+ bottom: 0px;
+ left: 3px;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-x .subdivision {
+ bottom: 0;
+ height: 2px;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-x .subdivision.middle {
+ height: 5px;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-y {
+ width: 16px;
+ height: 100%;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-y .division,
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-y .subdivision {
+ height: 0px;
+ border-bottom: 1px solid #333;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-y .division {
+ width: 16px;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-y .division .value {
+ text-align: center;
+ max-width: 16px;
+ word-wrap: break-word;
+ white-space: normal;
+ line-height: 10px;
+ letter-spacing: 30px;
+ top: 3px;
+ left: 3px;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-y .division .subdivision {
+ right: 0;
+ width: 2px;
+}
+#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-rulers #linkeditor-ruler-y .division .subdivision.middle {
+ width: 5px;
+}
#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-zoom {
width: 100%;
height: 100%;
#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-canvas {
background-color: #505050;
position: relative;
+ z-index: 1;
top: 16px;
left: 16px;
height: calc( 100% - 16px);
-{"version":3,"sources":["linkeditor.less"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;;AAIJ;EACI,yBAAA;EACA,wBAAA;EACA,sBAAA;EACA,oBAAA;EACA,iBAAA;EACA,eAAA;;AAGJ;AAAM;AAAa;EACf,YAAA;EACA,WAAA;EACA,gBAAA;;AAGJ;EACI,mBAAA;EACA,YAAA;;AAFJ,WAII;AAJJ,WAIW;EACH,qBAAA;EACA,YAAA;EACA,mBAAA;EACA,gBAAA;;AARR,WAWI;EACI,WAAA;EACA,yBAAA;;AAbR,WAgBI;EACI,yBAAA;;AAjBR,WAgBI,iBAGI;EACI,yBAAA;EACA,cAAA;EACA,YAAA;;AAtBZ,WAgBI,iBASI;EACI,0BAAA;EACA,WAAA;;AA3BZ,WAgBI,iBASI,mBAII;EACI,WAAA;EACA,YAAA;EACA,qBAAA;;AAhChB,WAgBI,iBASI,mBAUI;EACI,yBAAA;EACA,kBAAA;EACA,SAAA;EACA,UAAA;EACA,0BAAA;EACA,8BAAA;EACA,yBAAA;EACA,6BAAA;EACA,cAAA;;AAEA,WA9BZ,iBASI,mBAUI,mBAWK;EACG,UAAA;EACA,WAAA;;AAIJ,WApCZ,iBASI,mBAUI,mBAiBK;EACG,uBAAA;;AAEA,WAvChB,iBASI,mBAUI,mBAiBK,yBAGI;EACG,sBAAA;;AAIR,WA5CZ,iBASI,mBAUI,mBAyBK;EACG,sBAAA;EACA,sBAAA;EACA,mBAAA;;AAGJ,WAlDZ,iBASI,mBAUI,mBA+BK;EACG,YAAA;;AAGJ,WAtDZ,iBASI,mBAUI,mBAmCK;EACG,gBAAA;;AAvEpB,WAgBI,iBASI,mBAUI,mBAwCI;EACI,qBAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;;AA/EpB,WAgBI,iBASI,mBAUI,mBAwCI,sBAMI;EACI,kBAAA;EACA,QAAA;EACA,SAAA;EACA,0CAAA;;AArFxB,WAgBI,iBASI,mBAUI,mBAwCI,sBAMI,iBAMI;EACI,cAAA;EACA,WAAA;EACA,YAAA;;AAIA,OAAQ,YA9EhC,iBASI,mBAUI,mBAwCI,sBAMI,iBAYK;EAEO,aAAA","file":"linkeditor.css"}
\ No newline at end of file
+{"version":3,"sources":["linkeditor.less"],"names":[],"mappings":"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","file":"linkeditor.css"}
\ No newline at end of file
var ph = FLUIDBOOK_DATA.settings.height;
var fw = pw * (single ? 1 : 2);
var fh = ph;
+ var fs = 1;
var zoom = 1;
var zoomdragging = false;
+ var dividers = [1, 2, 5, 10, 20, 50, 100, 200, 500, 1000];
function init() {
$(window).on('hashchange', function () {
resetZoomDrag();
}
});
+
+ $("#linkeditor-canvas").on('scroll', function () {
+ updateRulers();
+ });
$("#linkeditor-canvas").on('mousedown', function (e) {
if ($(this).hasClass('grab') && zoom > 1) {
zoomdragging = {
} else {
setZoom(zoom - 0.25);
}
-
return false;
});
$("#linkeditor-canvas").scrollTo({
top: zoomdragging.scrollY - deltaY, left: zoomdragging.scrollX - deltaX
});
+ updateRulers();
}
function moveZoom(e) {
var lx = (e.originalEvent.pageX - rect.x) / rect.width;
var ly = (e.originalEvent.pageY - rect.y) / rect.height;
$("#linkeditor-canvas").scrollTo({left: pct(lx), top: pct(ly)});
+ updateRulers();
}
function pct(v) {
zoom = z;
$("#linkeditor-canvas").attr('data-z', zoom);
$("#linkeditor-zoom").css({transform: 'scale(' + zoom + ')'});
+ updateRulers();
return true;
}
function resize() {
resizeCanvas();
+ updateRulers();
+ }
+
+ function updateRulers() {
+ $("#linkeditor-ruler-y,#linkeditor-ruler-x").html('');
+ // Measure of visible fluidbook px at current zoom
+ var crect = $("#linkeditor-canvas").get(0).getBoundingClientRect();
+ var factor = fs / zoom;
+ var visible_w = crect.width * factor;
+ var visible_h = crect.height * factor;
+ // Find the best divider to have around 10 main divisions
+ var divider = 0;
+ for (var i in dividers) {
+ divider = dividers[i];
+ var v = visible_h / divider;
+ if (v <= 10) {
+ break;
+ }
+ }
+
+ var rect = $("#linkeditor-fluidbook").get(0).getBoundingClientRect();
+ var divisionSize = divider * fs * zoom;
+ // Draw vertical ruler
+ var margin = 100;
+ var nbDivisions = Math.floor(visible_h / divider);
+ var y0 = 16 + rect.y - crect.y;
+
+ var yruler = '';
+ for (var y = -margin; y <= nbDivisions + (margin * 2) + 1; y++) {
+ // Draw subdivision
+ var v = divider * y;
+ var ystart = y0 + (y * divisionSize);
+ if (ystart + divisionSize < 0 || ystart > crect.height) {
+ continue;
+ }
+ yruler += '<div class="division" style="top:' + ystart + 'px;"><div class="value">' + Math.abs(v) + '</div>';
+ for (var i = 1; i <= 9; i++) {
+ yruler += '<div class="subdivision ' + (i === 5 ? ' middle' : '') + '" style="top:' + ((i * divisionSize) / 10) + 'px;"></div>';
+ }
+ yruler += '</div>';
+ }
+ $("#linkeditor-ruler-y").html(yruler);
+
+ // Draw horizontal ruler
+ nbDivisions = Math.floor(visible_w / divider);
+ var x0 = 16 + rect.x - crect.x;
+ var xruler = '';
+
+ for (var x = -margin; x <= nbDivisions + (margin * 2) + 1; x++) {
+ // Draw subdivision
+ var v = divider * x;
+ var xstart = x0 + (x * divisionSize);
+ if (xstart + divisionSize < 0 || xstart > crect.width) {
+ continue;
+ }
+ xruler += '<div class="division" style="left:' + xstart + 'px;"><div class="value">' + Math.abs(v) + '</div>';
+ for (var i = 1; i <= 9; i++) {
+ var cls = '';
+ if (i === 5) {
+ cls += ' middle';
+ }
+ xruler += '<div class="subdivision ' + cls + '" style="left:' + ((i * divisionSize) / 10) + 'px;"></div>';
+ }
+ xruler += '</div>';
+ }
+ $("#linkeditor-ruler-x").html(xruler);
}
function resizeCanvas() {
var ch = $('#linkeditor-canvas').outerHeight();
var aw = cw - 20;
var ah = ch - 20;
- var s = Math.min(aw / fw, ah / fh);
- var left = (cw - fw * s) / 2;
- var top = (ch - fh * s) / 2;
- $("#linkeditor-fluidbook").css({left: left, top: top, transform: 'scale(' + s + ')'});
+ fs = Math.min(aw / fw, ah / fh);
+ var left = (cw - fw * fs) / 2;
+ var top = (ch - fh * fs) / 2;
+ $("#linkeditor-fluidbook").css({left: left, top: top, transform: 'scale(' + fs + ')'});
}
init();
projects / fluidbook-toolbox.git / commitdiff