pictcode

define(["canvas_manager", "image_manager", "modal_manager", "sprite_drawer"], function(canvasManager, imageManager, modalManager, spriteDrawer){

  var canvas;

  var canvasContext;

  var inputWorldSize = {width:3000, height:2400};

  var inputAreaSize = spriteDrawer.editorInnerSize;

  var displayAreaSize = spriteDrawer.dislayInnerSize;

  var dpInpRatio = displayAreaSize.width/inputAreaSize.width;

  var inputAreaPosition = {x:0, y:0};

  var pointer;

  var isOnPointer = false;

  var dummyImage;

  var previousPosition;

  var cvInpRatio;

  var distanceRatio = 1.0;

  var isDragging = false;

  //四捨五入した角度と距離

  var settledAngle360 = 0;

  var settledDistance = 0;

  var didSelectVector;

  function openVectorInput(value, dSlctVctr){

    didSelectVector = dSlctVctr;

    $("#modal_coding_vector_input").html("");

    $("#modal_coding_vector_input")[0].style.display = "inline";

    $("#modal_coding_vector_variable")[0].style.display = "none";

    var modalSize = document.documentElement.clientHeight * 0.75;

    $("#modal_coding_vector").css({width:modalSize, height:modalSize, bottom:0, display:"none"});

    pointer = {image:imageManager.images.input_vector_003, size:100, position:{x:0, y:0}, angle:0};

    dummyImage = {image:imageManager.images.input_vector_001, size:150};

    inputAreaPosition = {x:0, y:0};

    var canvasSize = canvasManager.getCanvasSize(modalSize*0.8, modalSize*0.8);

    canvas = canvasManager.initializeCanvas(canvasSize.width, canvasSize.height, touchStart, touchMove, touchEnd);

    canvasContext = canvas.getContext("2d");

    canvas.style.border = "2px solid black";

    cvInpRatio = canvas.width/inputAreaSize.width;

    $("#modal_coding_vector_input")[0].appendChild(canvas);

    pointer.position.x = value.value.x;

    pointer.position.y =value.value.y;

    pointer.angle = Math.atan2(pointer.position.y, pointer.position.x);

    drawCanvas();

    modalManager.showUpModal($("#modal_coding_vector"));

  }

  function drawCanvas(){

    canvasContext.clearRect(0, 0, canvas.width, canvas.height);

    //背景

    var cvPositionFromInit = {x:inputAreaPosition.x*cvInpRatio, y:-inputAreaPosition.y*cvInpRatio};

    // var cvBgDrawInitLeftTop = {x:(-inputWorldSize.width/2+inputAreaSize.width/2)*cvInpRatio, y:(-inputWorldSize.height/2+inputAreaSize.height/2)*cvInpRatio};

    // var cvBgDrawSize = {width:canvas.width/inputAreaSize.width*inputWorldSize.width, height:canvas.height/inputAreaSize.height*inputWorldSize.height};

    // canvasContext.drawImage(imageManager.images.bg_main_001, cvBgDrawInitLeftTop.x-cvPositionFromInit.x, cvBgDrawInitLeftTop.y-cvPositionFromInit.y, cvBgDrawSize.width, cvBgDrawSize.height);

    //グリッド

    var cvGrDrawInitLeftTop = {x:0, y:0};

    var cvGrDrawSize = {width:canvas.width, height:canvas.height};

    canvasContext.globalAlpha = 0.25;

    canvasContext.drawImage(imageManager.images.bg_grid_001, cvGrDrawInitLeftTop.x-cvPositionFromInit.x, cvGrDrawInitLeftTop.y-cvPositionFromInit.y, cvGrDrawSize.width, cvGrDrawSize.height);

    canvasContext.globalAlpha = 1.0;

    //ポインターの座標

    var cvCenter = {x:canvas.width/2, y:canvas.height/2};

    var inpAreaLeftTopPosition = {x:inputAreaPosition.x-inputAreaSize.width/2, y:inputAreaPosition.y+inputAreaSize.height/2};

    var inpPointerLeftTopPosition = {x:pointer.position.x-pointer.size/2, y:pointer.position.y};

    var cvPointerLeftTopPosition = {x:(inpPointerLeftTopPosition.x - inpAreaLeftTopPosition.x)*cvInpRatio, y:(inpAreaLeftTopPosition.y - inpPointerLeftTopPosition.y)*cvInpRatio};

    var cvTapSize = {width:pointer.size*cvInpRatio, height:pointer.size*cvInpRatio};

    var pointerLength = Math.sqrt(pointer.position.x*pointer.position.x + pointer.position.y*pointer.position.y);

    var cvPointerSize = {width:pointer.size*cvInpRatio, height:pointerLength*cvInpRatio};

    var cvPointerCenter = {x:cvPointerLeftTopPosition.x+cvPointerSize.width/2, y:cvPointerLeftTopPosition.y+cvPointerSize.width/2};

    pointer.drawnRect = {x:cvPointerLeftTopPosition.x, y:cvPointerLeftTopPosition.y, width:cvPointerSize.width, height:cvPointerSize.height};

    pointer.tapRect = {x:cvPointerLeftTopPosition.x - cvTapSize.width/2*Math.cos(pointer.angle), y:cvPointerLeftTopPosition.y - cvTapSize.width*(-0.5*Math.sin(pointer.angle) + 0.5), width:cvTapSize.width, height:cvTapSize.height};

    // canvasContext.fillStyle = 'rgb(200,200,200)';

    // canvasContext.fillRect(pointer.tapRect.x, pointer.tapRect.y, pointer.tapRect.width, pointer.tapRect.height);

    //ポインターの回転と描画

    canvasContext.save();

    canvasContext.translate(cvPointerLeftTopPosition.x+cvPointerSize.width/2, cvPointerLeftTopPosition.y);

    canvasContext.rotate( Math.PI/2-pointer.angle);

    canvasContext.translate(-(cvPointerLeftTopPosition.x+cvPointerSize.width/2), -cvPointerLeftTopPosition.y);   

    canvasContext.drawImage(pointer.image, pointer.drawnRect.x, pointer.drawnRect.y, pointer.drawnRect.width, pointer.drawnRect.height);

    canvasContext.restore();

    //ダミー画像の表示

    var cvDmDrawSize = {width:dummyImage.size*cvInpRatio, height:dummyImage.size*cvInpRatio};

    var cvDmDrawInitLeftTop = {x:canvas.width/2-cvDmDrawSize.width/2 - inputAreaPosition.x*cvInpRatio, y:canvas.height/2-cvDmDrawSize.height/2 + inputAreaPosition.y*cvInpRatio};

    canvasContext.drawImage(dummyImage.image, cvDmDrawInitLeftTop.x, cvDmDrawInitLeftTop.y, cvDmDrawSize.width, cvDmDrawSize.height);

    //円の描画

    canvasContext.beginPath();

    canvasContext.arc(cvPointerCenter.x - cvPointerSize.width/2*Math.cos(pointer.angle), cvPointerCenter.y - cvPointerSize.width*(-0.5*Math.sin(pointer.angle) + 0.5), cvPointerSize.width/2, 0, Math.PI*2, false);

    canvasContext.lineWidth = canvas.width*0.005;

    canvasContext.strokeStyle = "red";

    canvasContext.stroke();

    //数値の背景の描画

    var numbgWidth = canvas.width*0.4;

    var numbgHeight = numbgWidth*0.4;

    canvasContext.drawImage(imageManager.images.input_vector_005, canvas.width*0.02, canvas.height*0.78, numbgWidth, numbgHeight);

    canvasContext.drawImage(imageManager.images.input_vector_006, canvas.width*0.55, canvas.height*0.78, numbgWidth, numbgHeight);

    //数値の描画

    var angle360 = pointer.angle / Math.PI *180;

    if (angle360 < 0) {

      angle360 += 360;

    };

    angle360 /= 10;

    angle360 = Math.round(angle360);

    angle360 *= 10;

    if (angle360 == 360) {angle360 = 0;};

    settledAngle360 = angle360;

    angle360 += '°';

    var distance = Math.sqrt(pointer.position.x*pointer.position.x + pointer.position.y*pointer.position.y);

    var dpDistance = distance * dpInpRatio;

    dpDistance /= 5;

    dpDistance = Math.round(dpDistance);

    dpDistance *= 5;

    // dpDistance *= 5; 

    // distance /= 10;

    // distance = Math.round(distance);

    // distance *= 10;

    settledDistance = dpDistance / dpInpRatio;

    var fontSize =  canvas.width*0.070;

    canvasContext.font = "italic bold "+ fontSize + "px " + "sans-serif";

    // canvasContext.fillStyle = "blue";

    canvasContext.fillText(angle360, canvas.width*0.21, canvas.height*0.92);

    canvasContext.fillText(dpDistance, canvas.width*0.73, canvas.height*0.92);

  }

  function touchStart(x, y){

    if (pointer.tapRect.x<x && pointer.tapRect.x+pointer.tapRect.width>x && pointer.tapRect.y<y && pointer.tapRect.y+pointer.tapRect.height>y) {

      console.log("Pointer touched!");

      isOnPointer = true;

      var inpPosition = convertFromCanvasPositionToInputPosition({x:x, y:y});

      distanceRatio = Math.sqrt(inpPosition.x*inpPosition.x + inpPosition.y*inpPosition.y)/Math.sqrt(pointer.position.x*pointer.position.x + pointer.position.y*pointer.position.y);

    }else{

      console.log("UI canvas touched!");

      isOnPointer = false;

    };

    previousPosition = {x:x, y:y};

    isDragging = true;

  }

  function touchMove(x, y){

    if (!isDragging) {return};

    var dx = (x - previousPosition.x)/cvInpRatio/distanceRatio;

    var dy = (y - previousPosition.y)/cvInpRatio/distanceRatio;

    if (isOnPointer) {

      pointer.position.x += dx;

      pointer.position.y -= dy;

      pointer.angle = Math.atan2(pointer.position.y, pointer.position.x);

    }else{

      inputAreaPosition.x -= dx;

      inputAreaPosition.y += dy;

      var leftLimit = -inputWorldSize.width/2 + inputAreaSize.width/2;

      var rightLimit = inputWorldSize.width/2 - inputAreaSize.width/2;

      var topLimit = inputWorldSize.height/2 - inputAreaSize.height/2;

      var bottomLimit = -inputWorldSize.height/2 + inputAreaSize.height/2;

      if (inputAreaPosition.x < leftLimit) {

        inputAreaPosition.x = leftLimit;

      };

      if (inputAreaPosition.x > rightLimit) {

        inputAreaPosition.x = rightLimit;

      };

      if (inputAreaPosition.y > topLimit) {

        inputAreaPosition.y = topLimit;

      };

      if (inputAreaPosition.y < bottomLimit) {

        inputAreaPosition.y = bottomLimit;

      };

      if (x<10 || x>canvas.width-10 || y<10 || y>canvas.height-10) {

        touchEnd(x, y);

      };

    };

    previousPosition = {x:x, y:y};

    drawCanvas();

  }

  function touchEnd(canvasX, canvasY){

    if (isOnPointer) {

      var setteldAngle = settledAngle360/360*Math.PI*2;

      var settledPosition = {x:settledDistance*Math.cos(setteldAngle), y:settledDistance*Math.sin(setteldAngle)};

      pointer.angle = setteldAngle;

      pointer.position = {x:settledPosition.x, y:settledPosition.y}

    };

    isOnPointer = false;

    isDragging = false;

    drawCanvas();

  }

  function convertFromCanvasPositionToInputPosition(cvsPpsition){

    var cvsDistanceFromCenter = {dx:cvsPpsition.x-canvas.width/2, dy:canvas.height/2 - cvsPpsition.y};

    var inpPosition = {x:cvsDistanceFromCenter.dx/cvInpRatio+inputAreaPosition.x, y:cvsDistanceFromCenter.dy/cvInpRatio+inputAreaPosition.y};

    return inpPosition;

  }

  function getPointerPosition(){

    return {x:pointer.position.x, y:pointer.position.y};

  }

  $(document).on("click","#modal_coding_vector_ok", function(event) {

    didSelectVector(getPointerPosition());

    modalManager.closeDownModal($("#modal_coding_vector"));

  });

  $(document).on("click","#modal_coding_vector_cancel", function(event) {

    didSelectVector(null);

    modalManager.closeDownModal($("#modal_coding_vector"));

  });

  return {

    openVectorInput:openVectorInput,

    getPointerPosition:getPointerPosition,

  };

});