mirror of
https://github.com/Doodle3D/doodle3d-client.git
synced 2024-06-26 13:11:21 +02:00
6e32a36e12
Drawing on the draw canvas is going OK but the preview is not drawing well now. Giving up for now.
111 lines
3.8 KiB
JavaScript
111 lines
3.8 KiB
JavaScript
var drawAreaContainerMinHeight = 300;
|
|
var drawAreaContainerMaxHeight = 450;
|
|
function doOnResize() {
|
|
// console.log("doOnResize() >> " + new Date().getTime());
|
|
// $(".container").css("height", window.innerHeight);
|
|
|
|
$drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height")) * 0.45);
|
|
|
|
canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth;
|
|
canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
|
|
|
|
preview.width = 150;
|
|
preview.height = $drawAreaContainer.height();
|
|
// preview.width = parseInt($preview.css("width"), 10);
|
|
// preview.height = parseInt($preview.css("height"), 10);
|
|
|
|
canvasWidth = canvas.width;
|
|
canvasHeight = canvas.height;
|
|
|
|
drawCanvasTopLeftCoords[0] = drawCanvas.offset().left;
|
|
drawCanvasTopLeftCoords[1] = drawCanvas.offset().top;
|
|
// drawCanvasTopLeftCoords[0] = drawCanvas[0].offsetParent.offsetLeft;
|
|
// drawCanvasTopLeftCoords[1] = drawCanvas[0].offsetParent.offsetTop;
|
|
|
|
redrawDoodle();
|
|
redrawPreview();
|
|
|
|
return;
|
|
|
|
// doClientAndOrientationStuff() // <-- is this necessary in this method?
|
|
|
|
// console.log("f:doOnResize() >> $('#canvascontainer').innerHeight: " + window.innerHeight);
|
|
if (window.innerHeight < 768) {
|
|
// $('#drawAreaContainer').innerHeight(window.innerHeight - $("#drawAreaContainer").offset().top - 70);
|
|
var newVal = window.innerHeight - $("#drawAreaContainer").offset().top - 100; // what's the 70 ??
|
|
newVal = Math.max(newVal, drawAreaContainerMinHeight);
|
|
newVal = Math.min(newVal, drawAreaContainerMaxHeight);
|
|
|
|
$('#drawAreaContainer').innerHeight(newVal);
|
|
|
|
// canvas drawing area
|
|
$canvas.css("height", newVal);
|
|
canvas.height = newVal;
|
|
canvasWidth = canvas.width;
|
|
canvasHeight = canvas.height;
|
|
|
|
// preview area
|
|
$preview.css("height", newVal);
|
|
preview.height = newVal;
|
|
layerOffsetY = preview.height - 1.75 * layerCY;
|
|
yStep = preview.height / 150;
|
|
|
|
redrawDoodle();
|
|
redrawPreview();
|
|
}
|
|
}
|
|
|
|
function initLayouting() {
|
|
console.log("f:initLayouting()");
|
|
|
|
// first set the css width/height and actual width/height of the drawing area
|
|
<!--div drawAreaContainer 650,450-->
|
|
<!--canvas mycanvas 500, 450-->
|
|
<!--canvas preview 150, 450-->
|
|
|
|
// $doodleCanvas = $("#mycanvas");
|
|
// doodleCanvas = $("#mycanvas")[0];
|
|
// doodleCanvasContext = doodleCanvas.getContext('2d');
|
|
|
|
$drawAreaContainer = $("#drawAreaContainer");
|
|
$drawAreaContainer.css("margin", 0);
|
|
$drawAreaContainer.css("marginLeft", -parseInt($drawAreaContainer.css("width"))/2);
|
|
$drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height")) * 0.45);
|
|
|
|
canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth;
|
|
canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
|
|
|
|
preview.width = 150;
|
|
preview.height = $drawAreaContainer.height();
|
|
|
|
canvasWidth = canvas.width;
|
|
canvasHeight = canvas.height;
|
|
|
|
// window.innerHeight
|
|
console.log("window.innerHeight: " + window.innerHeight);
|
|
console.log("window.innerWidth: " + window.innerWidth);
|
|
console.log("$('#drawAreaContainer').innerHeight(): " + $("#drawAreaContainer").innerHeight());
|
|
console.log("$('#drawAreaContainer').offset().top: " + $("#drawAreaContainer").offset().top);
|
|
|
|
|
|
/* 2013-07-26 not doing this resizing stuff now, it's not working well yet
|
|
if (window.innerHeight < 768) {
|
|
$('#drawAreaContainer').innerHeight(window.innerHeight - $("#drawAreaContainer").offset().top - 70);
|
|
}
|
|
//*/
|
|
|
|
// timeout because it SEEMS to be beneficial for initting the layout
|
|
// 2013-09-18 seems beneficial since when?
|
|
setTimeout(_startOrientationAndChangeEventListening, 1000);
|
|
}
|
|
|
|
function _startOrientationAndChangeEventListening() {
|
|
// Initial execution if needed
|
|
|
|
$(window).on('resize', doOnResize);
|
|
|
|
// is it necessary to call these? Aren't they called by the above eventhandlers?
|
|
// doClientAndOrientationStuff();
|
|
doOnResize();
|
|
}
|