diff --git a/400-SOURCECODE/AIAHTML5.Web/AIAHTML5.Web.csproj b/400-SOURCECODE/AIAHTML5.Web/AIAHTML5.Web.csproj index 7c79898..f727454 100644 --- a/400-SOURCECODE/AIAHTML5.Web/AIAHTML5.Web.csproj +++ b/400-SOURCECODE/AIAHTML5.Web/AIAHTML5.Web.csproj @@ -43074,6 +43074,7 @@ + diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js index fb59941..5414d30 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js +++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js @@ -5341,6 +5341,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.$on('annotationToolEvent', function (event, data) { $("#canvas").css("display", "block"); + $("#canvasPaint").css("display", "block"); + $scope.doClick(); }); $scope.mousePs; @@ -5396,7 +5398,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $rootScope.resetPin = 0; $rootScope.resetPinArc = 0; $rootScope.ObjectIndex = 0; + $rootScope.Object1Index = 0; + $rootScope.resetText = 0; + var arrayRect = {}; + $scope.OnPaintCanvasMouseUp = function (event) { @@ -5411,467 +5417,678 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo var canvasElement = document.getElementById("canvas"); var ctx = canvasElement.getContext("2d"); - - switch ($rootScope.shapeType) { + if ($rootScope.shapeType == "FreeStylePaint") { + var canvasPaint_zIndex = $('#canvasPaint').css("z-index"); + var canvas_zIndex = $('#canvas').css("z-index"); + if (canvas_zIndex > canvasPaint_zIndex) { + canvasPaint_zIndex = parseInt(canvas_zIndex) + 1; - case "cursor": - ctx.clearRect(0, 0, 2277, 3248); - ctx.beginPath(); + } + else { + canvasPaint_zIndex = parseInt(canvasPaint_zIndex) + 1; + } + $('#canvasPaint').css("z-index", canvasPaint_zIndex); + $('#canvasPaint').sketch({ defaultColor: "#000", defaultSize: 1 }); + } + else { + switch ($rootScope.shapeType) { - break; + case "cursor": + ctx.clearRect(0, 0, 2277, 3248); + ctx.beginPath(); - case "Line": - - $rootScope.resetLine = $rootScope.ObjectIndex++; - $('#canvas').addLayer({ - name: 'Line_' + $rootScope.resetLine, - layer: true, - type: 'line', - draggable: true, - strokeStyle: 'black', - strokeWidth: 2, - rounded: true, - x1: $scope.offsetX1, y1: $scope.offsetY1, - x2: $scope.x, y2: $scope.y, - - click: function (layer) { - $rootScope.canvasLayerNameCollection = []; - $rootScope.canvasLayerNameCollection.push(layer.name); - $('#canvas').setLayer(layer.name, { - handle: { - type: 'arc', - fillStyle: '#fff', - strokeStyle: '#c33', - strokeWidth: 2, - radius: 3 - } - }).drawLayers(); - + break; - }, - mouseout: function (layer) { - $rootScope.canvasLayerNameCollection = []; - $('#canvas').setLayer(layer.name, { - handle: { - type: 'arc', - fillStyle: '#fff', - strokeStyle: '#c33', - strokeWidth: 0, - radius: 0 - } + case "Line": + + $rootScope.resetLine = $rootScope.ObjectIndex++; + $('#canvas').addLayer({ + name: 'Line_' + $rootScope.resetLine, + layer: true, + type: 'line', + draggable: true, + strokeStyle: 'black', + strokeWidth: 2, + rounded: true, + x1: $scope.offsetX1, y1: $scope.offsetY1, + x2: $scope.x, y2: $scope.y, + + click: function (layer) { + $rootScope.canvasLayerNameCollection = []; + $rootScope.canvasLayerNameCollection.push(layer.name); + $('#canvas').setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + radius: 3 + } + }).drawLayers(); + + + }, + mouseout: function (layer) { + $rootScope.canvasLayerNameCollection = []; + $('#canvas').setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 0, + radius: 0 + } - }).drawLayers(); + }).drawLayers(); - }, - mouseover: function (layer) { + }, + mouseover: function (layer) { - $('#canvas').setLayer(layer.name, { - handle: { - type: 'arc', - fillStyle: '#fff', - strokeStyle: '#c33', - strokeWidth: 2, - radius: 3 - } - }).drawLayers(); + $('#canvas').setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + radius: 3 + } + }).drawLayers(); - } + } - }).drawLayers(); - $('.btnCursor').trigger('click'); - $(".btn-annotation").removeClass("activebtncolor"); - $('.btnCursor').addClass('activebtncolor'); - break; - - case "Rectangle": - $rootScope.resetRect = $rootScope.ObjectIndex++; - - $('#canvas').addLayer({ - layer: true, - name: 'Rect_' + $rootScope.resetRect, - fillStyle: '#fff', - type: 'rectangle', - draggable: true, - strokeStyle: 'black', - strokeWidth: 2, - x: $scope.offsetX1, y: $scope.offsetY1, - width: $scope.x - $scope.offsetX1, - height: $scope.y - $scope.offsetY1, - - resizeFromCenter: false, - - - click: function (layer) { - $rootScope.canvasLayerNameCollection = []; - $rootScope.canvasLayerNameCollection.push(layer.name); - $('#canvas').setLayer(layer.name, { - handle: { - type: 'rectangle', - fillStyle: '#fff', - strokeStyle: '#c33', - strokeWidth: 2, - width: 5, height: 5, - cornerRadius: 3 - } - }).drawLayers(); + }).drawLayers(); + $('.btnCursor').trigger('click'); + $(".btn-annotation").removeClass("activebtncolor"); + $('.btnCursor').addClass('activebtncolor'); + break; - }, - mouseout: function (layer) { - $rootScope.canvasLayerNameCollection = []; - $('#canvas').setLayer(layer.name, { - handle: { - type: 'rectangle', - fillStyle: 'pink', - strokeStyle: 'yellow', - strokeWidth: 0, - width: 0, height: 0, - cornerRadius: 0 - } + case "Rectangle": + $rootScope.resetRect = $rootScope.ObjectIndex++; + + $('#canvas').addLayer({ + layer: true, + name: 'Rect_' + $rootScope.resetRect, + fillStyle: '#fff', + type: 'rectangle', + draggable: true, + strokeStyle: 'black', + strokeWidth: 2, + x: $scope.offsetX1, y: $scope.offsetY1, + width: $scope.x - $scope.offsetX1, + height: $scope.y - $scope.offsetY1, + + resizeFromCenter: false, + + + click: function (layer) { + $rootScope.canvasLayerNameCollection = []; + $rootScope.canvasLayerNameCollection.push(layer.name); + $('#canvas').setLayer(layer.name, { + handle: { + type: 'rectangle', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + width: 5, height: 5, + cornerRadius: 3 + } + }).drawLayers(); + + }, + mouseout: function (layer) { + $rootScope.canvasLayerNameCollection = []; + $('#canvas').setLayer(layer.name, { + handle: { + type: 'rectangle', + fillStyle: 'pink', + strokeStyle: 'yellow', + strokeWidth: 0, + width: 0, height: 0, + cornerRadius: 0 + } - }).drawLayers(); + }).drawLayers(); - }, - mouseover: function (layer) { + }, + mouseover: function (layer) { - $('#canvas').setLayer(layer.name, { - handle: { - type: 'rectangle', - fillStyle: '#fff', - strokeStyle: '#c33', - strokeWidth: 2, - width: 5, height: 5, - cornerRadius: 3 - } - }).drawLayers(); + $('#canvas').setLayer(layer.name, { + handle: { + type: 'rectangle', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + width: 5, height: 5, + cornerRadius: 3 + } + }).drawLayers(); - } - }).drawLayers(); + } + }).drawLayers(); - $('.btnCursor').trigger('click'); - $(".btn-annotation").removeClass("activebtncolor"); - $('.btnCursor').addClass('activebtncolor'); + $('.btnCursor').trigger('click'); + $(".btn-annotation").removeClass("activebtncolor"); + $('.btnCursor').addClass('activebtncolor'); - break; + break; - case "Circle": + case "Circle": + + $rootScope.resetCircle = $rootScope.ObjectIndex++; + $('#canvas').addLayer({ + layer: true, + name: 'Circle_' + $rootScope.resetCircle, + type: 'ellipse', + draggable: true, + strokeStyle: '#000', + strokeWidth: 2, + fillStyle: '#FFF', + x: $scope.offsetX1, y: $scope.offsetY1, + width: ($scope.x - $scope.offsetX1) * 2, height: ($scope.y - $scope.offsetY1) * 2, + // Place a handle at each side and each corner + handlePlacement: 'both', + + + + click: function (layer) { + $rootScope.canvasLayerNameCollection = []; + $rootScope.canvasLayerNameCollection.push(layer.name); + $('#canvas').setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + radius: 3 + } + }).drawLayers(); + + }, + mouseout: function (layer) { + $rootScope.canvasLayerNameCollection = []; + $('#canvas').setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 0, + // width: 0, height: 0, + radius: 0 + } - $rootScope.resetCircle = $rootScope.ObjectIndex++; - $('#canvas').addLayer({ - layer: true, - name: 'Circle_' + $rootScope.resetCircle, - type: 'ellipse', - draggable: true, - strokeStyle: '#000', - strokeWidth: 2, - fillStyle: '#FFF', - x: $scope.offsetX1, y: $scope.offsetY1, - width: ($scope.x - $scope.offsetX1) * 2, height: ($scope.y - $scope.offsetY1) * 2, - // Place a handle at each side and each corner - handlePlacement: 'both', + }).drawLayers(); + }, + mouseover: function (layer) { - click: function (layer) { - $rootScope.canvasLayerNameCollection = []; - $rootScope.canvasLayerNameCollection.push(layer.name); - $('#canvas').setLayer(layer.name, { - handle: { - type: 'arc', - fillStyle: '#fff', - strokeStyle: '#c33', - strokeWidth: 2, - radius: 3 - } - }).drawLayers(); - - }, - mouseout: function (layer) { - $rootScope.canvasLayerNameCollection = []; - $('#canvas').setLayer(layer.name, { - handle: { - type: 'arc', - fillStyle: '#fff', - strokeStyle: '#c33', - strokeWidth: 0, - // width: 0, height: 0, - radius: 0 - } + $('#canvas').setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + // width: 5, height: 5, + radius: 3 + } + }).drawLayers(); - }).drawLayers(); + } + }).drawLayers(); + $('.btnCursor').trigger('click'); + $(".btn-annotation").removeClass("activebtncolor"); + $('.btnCursor').addClass('activebtncolor'); + break; + case "Arrow": + $rootScope.resetArrow = $rootScope.ObjectIndex++; + + $('#canvas').drawLine({ + layer: true, + name: 'Arrow_' + $rootScope.resetArrow, + draggable: true, + strokeStyle: '#000', + strokeWidth: 2, + rounded: true, + startArrow: true, + arrowRadius: 7, + arrowAngle: 90, + x1: $scope.offsetX1, y1: $scope.offsetY1, + x2: $scope.x, y2: $scope.y, + + click: function (layer) { + $rootScope.canvasLayerNameCollection = []; + $rootScope.canvasLayerNameCollection.push(layer.name); + $('#canvas').setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + // width: 5, height: 5, + radius: 3 + } + }).drawLayers(); + // $("#canvas").removeLayer(layer.name).drawLayers(); + + }, + mouseout: function (layer) { + $rootScope.canvasLayerNameCollection = []; + $('#canvas').setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 0, + // width: 0, height: 0, + radius: 0 + } - }, - mouseover: function (layer) { + }).drawLayers(); + }, + mouseover: function (layer) { - $('#canvas').setLayer(layer.name, { - handle: { - type: 'arc', - fillStyle: '#fff', - strokeStyle: '#c33', - strokeWidth: 2, - // width: 5, height: 5, - radius: 3 - } - }).drawLayers(); - } - }).drawLayers(); - $('.btnCursor').trigger('click'); - $(".btn-annotation").removeClass("activebtncolor"); - $('.btnCursor').addClass('activebtncolor'); - break; - case "Arrow": - $rootScope.resetArrow = $rootScope.ObjectIndex++; - - $('#canvas').drawLine({ - layer: true, - name: 'Arrow_' + $rootScope.resetArrow, - draggable: true, - strokeStyle: '#000', - strokeWidth: 2, - rounded: true, - startArrow: true, - arrowRadius: 7, - arrowAngle: 90, - x1: $scope.offsetX1, y1: $scope.offsetY1, - x2: $scope.x, y2: $scope.y, - - click: function (layer) { - $rootScope.canvasLayerNameCollection = []; - $rootScope.canvasLayerNameCollection.push(layer.name); - $('#canvas').setLayer(layer.name, { - handle: { - type: 'arc', - fillStyle: '#fff', - strokeStyle: '#c33', - strokeWidth: 2, - // width: 5, height: 5, - radius: 3 - } - }).drawLayers(); - // $("#canvas").removeLayer(layer.name).drawLayers(); + $('#canvas').setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + // width: 5, height: 5, + radius: 3 + } + }).drawLayers(); - }, - mouseout: function (layer) { - $rootScope.canvasLayerNameCollection = []; - $('#canvas').setLayer(layer.name, { - handle: { - type: 'arc', - fillStyle: '#fff', - strokeStyle: '#c33', - strokeWidth: 0, - // width: 0, height: 0, - radius: 0 - } + } - }).drawLayers(); + }); + $('.btnCursor').trigger('click'); + $(".btn-annotation").removeClass("activebtncolor"); + $('.btnCursor').addClass('activebtncolor'); - }, - mouseover: function (layer) { + // $scope.resetRect += 1; + break; + case "Pin": + + $rootScope.resetPin = $rootScope.ObjectIndex++; + $rootScope.resetPinArc = $rootScope.Object1Index++; + var radial = $('canvas').createGradient({ + x1: 50, y1: 50, + x2: 50, y2: 50, + r1: 10, r2: 30, + c1: 'rgba(100, 50, 0,0)', + c2: 'grey' + }); + $('#canvas').drawLine({ + draggable: true, + layer: true, + name: "Pin_" + $rootScope.resetPin, + groups: ["Pin_" + $rootScope.resetPin], + dragGroups: ["Pin_" + $rootScope.resetPin], + strokeStyle: 'black', + strokeWidth: 2, + x1: $scope.offsetX1, y1: $scope.offsetY1, + x2: $scope.x, y2: $scope.y, + + click: function (layer) { + // debugger; + $rootScope.shapeTypePin = "Pin"; + $rootScope.canvasLayerNameCollection = []; + var pinLine_layer = layer.name; + var pinLine_layer_split = pinLine_layer.split("_"); + var pinArcName = "ArcPin_"; + var pinResult = pinArcName.concat(pinLine_layer_split[1]); + alert(pinResult); + // d = "ArcPin_" + pinLine_layer_split[1]; + + $rootScope.canvasLayerNameCollection.push({pinName: layer.name ,ArcName: pinResult}); + + $('#canvas').setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + // width: 5, height: 5, + radius: 3 + } + }).drawLayers(); - $('#canvas').setLayer(layer.name, { - handle: { - type: 'arc', - fillStyle: '#fff', - strokeStyle: '#c33', - strokeWidth: 2, - // width: 5, height: 5, - radius: 3 - } - }).drawLayers(); + }, + mouseout: function (layer) { + // $rootScope.resetPinArc = ""; + // ax = ""; + + $rootScope.canvasLayerNameCollection = []; + $('#canvas').setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 0, + // width: 0, height: 0, + radius: 0 + } - } + }).drawLayers(); - }); - $('.btnCursor').trigger('click'); - $(".btn-annotation").removeClass("activebtncolor"); - $('.btnCursor').addClass('activebtncolor'); - - // $scope.resetRect += 1; - break; - case "Pin": - - $rootScope.resetPin = $rootScope.ObjectIndex++; - $rootScope.resetPinArc = $rootScope.ObjectIndex++; - var radial = $('canvas').createGradient({ - x1: 50, y1: 50, - x2: 50, y2: 50, - r1: 10, r2: 30, - c1: 'rgba(100, 50, 0,0)', - c2: 'grey' - }); - $('#canvas').drawLine({ - draggable: true, - layer: true, - name: "Pin_" + $rootScope.resetPin, - groups: ['shapes'], - dragGroups: ['shapes'], - strokeStyle: 'black', - strokeWidth: 2, - x1: $scope.offsetX1, y1: $scope.offsetY1, - x2: $scope.x, y2: $scope.y, - //handle: { - // type: 'arc', - // fillStyle: '#fff', - // strokeStyle: '#c33', - // strokeWidth: 2, - // radius: 3 - //}, - click: function (layer) { - $rootScope.shapeType == "Pin"; - alert($rootScope.shapeType); - //alert(layer.groups); - // $rootScope.canvasLayerNameCollection_pin = []; - $rootScope.canvasLayerNameCollection = []; - // $rootScope.canvasLayerNameCollection_pin.push({ a: layer.name, b: $rootScope.pinVAl }); - // alert($rootScope.resetPinArc); - // alert(layer.name); - $rootScope.canvasLayerNameCollection.push({ a: layer.name }, { b: $rootScope.resetPinArc }); - // alert($rootScope.canvasLayerNameCollection[0].a); - // alert($rootScope.canvasLayerNameCollection[0].b); - // alert($rootScope.canvasLayerNameCollection.b); - $('#canvas').setLayer(layer.name, { - handle: { - type: 'arc', - fillStyle: '#fff', - strokeStyle: '#c33', - strokeWidth: 2, - // width: 5, height: 5, - radius: 3 - } - }).drawLayers(); - // $("#canvas").removeLayer(layer.name).drawLayers(); + }, + mouseover: function (layer) { - }, - mouseout: function (layer) { - $rootScope.canvasLayerNameCollection = []; - $('#canvas').setLayer(layer.name, { - handle: { - type: 'arc', - fillStyle: '#fff', - strokeStyle: '#c33', - strokeWidth: 0, - // width: 0, height: 0, - radius: 0 - } - }).drawLayers(); + $('#canvas').setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + // width: 5, height: 5, + radius: 3 + } + }).drawLayers(); - }, - mouseover: function (layer) { + } + }).drawArc({ + draggable: true, + name: "ArcPin_" + $rootScope.resetPinArc, + // name: "Pin_" + $rootScope.resetPin, + layer: true, + groups: ["Pin_" + $rootScope.resetPin], + dragGroups: ["Pin_" + $rootScope.resetPin], + strokeStyle: 'grey', + strokeWidth: 2, + fillStyle: radial, + x: $scope.offsetX1, y: $scope.offsetY1, + radius: 5, + //handle: { + // type: 'arc', + // fillStyle: '#fff', + // strokeStyle: '#c33', + // strokeWidth: 2, + // radius: 3 + //}, + add: function (layer) { + + $rootScope.resetPinArc = layer.name; + // $scope.arr = []; + + + }, + + }).drawLayers(); + $('.btnCursor').trigger('click'); + $(".btn-annotation").removeClass("activebtncolor"); + $('.btnCursor').addClass('activebtncolor'); + break; + case "TextArea": + + // Draw text + $rootScope.resetTextRect = $rootScope.ObjectIndex++; + $rootScope.resetText = $rootScope.ObjectIndex++; + $('#canvas').drawText({ + layer: true, + draggable: true, + name: 'TextArea_' + $rootScope.resetText, + groups: ['TextArea_' + $rootScope.resetText], + dragGroups: ['TextArea_' + $rootScope.resetText], + fillStyle: '#36c', + strokeWidth: 0, + x: $scope.offsetX1, y: $scope.offsetY1, + fontSize: '14pt', + align: "left", + fontFamily: 'Verdana, sans-serif', + text: '' - $('#canvas').setLayer(layer.name, { - handle: { - type: 'arc', - fillStyle: '#fff', - strokeStyle: '#c33', - strokeWidth: 2, - // width: 5, height: 5, - radius: 3 - } - }).drawLayers(); - } - }).drawArc({ - draggable: true, - name: "ArcPin_" + $rootScope.resetPin, - layer: true, - groups: ['shapes'], - dragGroups: ['shapes'], - strokeStyle: 'grey', - strokeWidth: 2, - fillStyle: radial, - x: $scope.offsetX1, y: $scope.offsetY1, - radius: 5, - //handle: { - // type: 'arc', - // fillStyle: '#fff', - // strokeStyle: '#c33', - // strokeWidth: 2, - // radius: 3 - //}, - add: function (layer) { - $rootScope.resetPinArc = layer.name; - // alert($rootScope.resetPinArc); - }, - //click: function (layer) { - - // alert(layer.name); - // // $rootScope.canvasLayerNameCollection_pin = []; - // // $rootScope.canvasLayerNameCollection.push(layer.name); - // // $rootScope.pinVAl = layer.name; - // $rootScope.canvasLayerNameCollection = []; - - // $rootScope.canvasLayerNameCollection.push(layer.name); - // $('#canvas').setLayer(layer.name, { - // handle: { - // type: 'arc', - // fillStyle: '#fff', - // strokeStyle: '#c33', - // strokeWidth: 2, - // // width: 5, height: 5, - // radius: 3 - // } - // }).drawLayers(); - // // $("#canvas").removeLayer(layer.name).drawLayers(); - - //}, - }).drawLayers(); - $('.btnCursor').trigger('click'); - $(".btn-annotation").removeClass("activebtncolor"); - $('.btnCursor').addClass('activebtncolor'); - break; - case "TextArea": - - break; - //case "brush": - // // if ($rootScope.shapeType == "brush") { - // // alert("xxx"); - // ctx.lineTo(event.pageX - ($("#canvas").offset().left), event.pageY - ($("#canvas").offset().top)); - // ctx.stroke(); - - // // } - // break; - case "DrawPolygon": - //alert("test"); - - //ctx.beginPath(); - ctx.lineTo(event.pageX - ($("#canvas").offset().left), event.pageY - ($("#canvas").offset().top)); - ctx.stroke(); - $('.btnCursor').trigger('click'); - //$('.btnCursor').attr("background-color", "#1B92D0"); - $('.btnCursor').addClass('activebtncolor'); - //ctx.closePath(); - // alert("test"); - break; - //case "Clear": - // ctx.clearCanvas(); - // alert("sdfs"); - // break; + }) + // Draw rect as wide as the text + .drawRect({ + layer: true, + name: "TextRect_" + $rootScope.resetTextRect, + dragGroups: ['shapes'], + strokeStyle: 'black', + strokeWidth: 2, + x: $scope.offsetX1, y: $scope.offsetY1, + width: $scope.x - $scope.offsetX1, + height: $scope.y - $scope.offsetY1, + click: function (layer) { + + $rootScope.canvasLayerNameCollection = []; + $rootScope.canvasLayerNameCollection.push(layer.name); + $('#canvas').setLayer(layer.name, { + handle: { + type: 'rectangle', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + width: 5, height: 5, + cornerRadius: 3 + } + }).drawLayers(); + + }, + mouseout: function (layer) { + $rootScope.canvasLayerNameCollection = []; + $('#canvas').setLayer(layer.name, { + handle: { + type: 'rectangle', + fillStyle: 'pink', + strokeStyle: 'yellow', + strokeWidth: 0, + width: 0, height: 0, + cornerRadius: 0 + } + + }).drawLayers(); + + }, + mouseover: function (layer) { + $('#canvas').setLayer(layer.name, { + handle: { + type: 'rectangle', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + width: 5, height: 5, + cornerRadius: 3 + } + }).drawLayers(); + + } + }); + + + $("#annotationTextModal").modal("toggle"); + $('.btnCursor').trigger('click'); + $(".btn-annotation").removeClass("activebtncolor"); + $('.btnCursor').addClass('activebtncolor'); + break; + + case "DrawPolygon": + + break; + + } } + } + + //-- TextArea functionality of Annotation toolbar + + $rootScope.fontSizes; + $rootScope.fontWeight; + $rootScope.fontStyle; + $rootScope.textAlignmt; + $rootScope.fontColor; + $rootScope.underlineText; + $rootScope.textArea; + $rootScope.fontFamily; + $rootScope.saveText = function () { + + $rootScope.fontSizes = $("#text_area").css("font-size"); + $rootScope.fontWeight = $("#text_area").css("font-weight"); + $rootScope.fontStyle = $("#text_area").css("font-style"); + $rootScope.textAlignmt = $("#text_area").css("text-align"); + $rootScope.fontColor = $("#text_area").css("color"); + $rootScope.fontFamily = $("#text_area").css("font-family"); + $rootScope.underlineText = $("#text_area").css("text-decoration"); + $rootScope.textArea = $("#text_area").val(); + $("#canvas").removeLayer('TextArea_' + $rootScope.resetText).drawLayers(); + $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers(); + + $('#canvas').drawText({ + layer: true, + draggable: true, + name:'TextArea_'+ $rootScope.resetText, + groups: ['TextArea_' + $rootScope.resetText], + dragGroups: ['TextArea_' + $rootScope.resetText], + fillStyle: $rootScope.fontColor, + fontStyle: $rootScope.fontStyle, + fontSize: $rootScope.fontSizes, + fontFamily: $rootScope.fontFamily, + align: $rootScope.textAlignmt, + strokeWidth: 0, + text: $rootScope.textArea, + x: $scope.offsetX1, y: $scope.offsetY1, + maxWidth: $scope.x - $scope.offsetX1, + maxHeight: $scope.y - $scope.offsetY1, + + click: function (layer) { + + + + }, + change: function (layer, props) { + + } + + }) + // Draw rect as wide as the text + .drawRect({ + name: 'TextArea1_' + $rootScope.resetText, + layer: true, + draggable: true, + groups: ['TextArea_' + $rootScope.resetText], + dragGroups: ['TextArea_' + $rootScope.resetText], + strokeStyle: 'black', + strokeWidth: 2, + x: $scope.offsetX1, y: $scope.offsetY1, + width: $scope.x - $scope.offsetX1, + height: $scope.y - $scope.offsetY1, + + click: function (layer) { + $rootScope.shapeTypeText = "textAreaRect"; + + var layerNameSplit = layer.name; + + var splitedName = layerNameSplit.split("_"); + + var textValName = "TextArea_"; + + var concatinateResult = textValName.concat(splitedName[1]); + + $rootScope.canvasLayerNameCollection = []; + $rootScope.canvasLayerNameCollection.push({ textareaRectangle: layer.name, textareaString: concatinateResult }); + + + + $('#canvas').setLayer(layer.name, { + handle: { + type: 'rectangle', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + width: 5, height: 5, + cornerRadius: 3 + } + }).drawLayers(); + + }, + mouseout: function (layer) { + + $rootScope.canvasLayerNameCollection = []; + $('#canvas').setLayer(layer.name, { + handle: { + type: 'rectangle', + fillStyle: 'pink', + strokeStyle: 'yellow', + strokeWidth: 0, + width: 0, height: 0, + cornerRadius: 0 + } + + }).drawLayers(); + + }, + mouseover: function (layer) { + + $('#canvas').setLayer(layer.name, { + handle: { + type: 'rectangle', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + width: 5, height: 5, + cornerRadius: 3 + } + }).drawLayers(); + } + }); + $("#text_area").val(''); + + $("#text_area").css({" font-family":"'Verdana, sans-serif'","font-size":"14px","font-weight":"normal","font-style":"normal","color":"#000","text-align":"left","text-decoration":"none"}); + } - $(document).keydown(function (event) { + function OnPaintCanvasMouseMove(event) { + + + } + + $rootScope.FreeStylePaint = function (e) { + // debugger; + + $rootScope.shapeType = "FreeStylePaint"; + canvas.addEventListener('mouseup', $scope.OnPaintCanvasMouseUp, false); + + } + + $(document).keydown(function (event) { + + if (event.which == 46) { + debugger; + if ($rootScope.shapeTypePin == "Pin") { + - if ($rootScope.shapeType == "Pin") { - alert($rootScope.canvasLayerNameCollection[0].a); - alert($rootScope.canvasLayerNameCollection[1].b); - $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].a).drawLayers(); - $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[1].b).drawLayers(); + $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].pinName).drawLayers(); + $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].ArcName).drawLayers(); + $rootScope.shapeTypePin = ""; + + } + else if ($rootScope.shapeTypeText == "textAreaRect") { + + + + $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].textareaRectangle).drawLayers(); + $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].textareaString).drawLayers(); + $rootScope.shapeTypeText = ""; + } else { + + // alert($rootScope.canvasLayerNameCollection); $("#canvas").removeLayer($rootScope.canvasLayerNameCollection).drawLayers(); } @@ -5880,10 +6097,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo }); - function OnPaintCanvasMouseMove(event) { - - } //----End----- diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js index 5148144..e70a80a 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js +++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js @@ -129,24 +129,29 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", //----Annotation Toolbar: Jcanvas----- $rootScope.DrawLine = function (e) { + $rootScope.switchCanvas(); $rootScope.shapeType = "Line"; - $("#" + e.currentTarget.id).addClass("activebtncolor"); + $('.btnCursor').removeClass('activebtncolor'); - // $(".btn-annotation").removeClass("activebtncolor"); + $(".btn-annotation").removeClass("activebtncolor"); + $(".btn-annotation-line").addClass("activebtncolor"); } $rootScope.DrawPin = function (e) { + $rootScope.switchCanvas(); $rootScope.shapeType = "Pin"; + $('.btnCursor').removeClass('activebtncolor'); $(".btn-annotation").removeClass("activebtncolor"); - $("#" + e.currentTarget.id).addClass("activebtncolor"); + $(".btn-annotation-pin").addClass("activebtncolor"); } $rootScope.Cursor = function () { + $rootScope.switchCanvas(); $rootScope.shapeType = "cursor"; $(".btn-annotation").removeClass("activebtncolor"); @@ -155,35 +160,40 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", } $rootScope.DrawRectangle = function (e) { + $rootScope.switchCanvas(); $rootScope.shapeType = "Rectangle"; $('.btnCursor').removeClass('activebtncolor'); $(".btn-annotation").removeClass("activebtncolor"); - $("#" + e.currentTarget.id).addClass("activebtncolor"); + $(".btn-annotation-rectangle").addClass("activebtncolor"); } $rootScope.paintBrush = function () { + $rootScope.switchCanvas(); $rootScope.shapeType = "brush"; - //$('.btnCursor').removeClass('activebtncolor'); - //$(".btn-annotation").removeClass("activebtncolor"); - //$("#" + e.currentTarget.id).addClass("activebtncolor"); + } $rootScope.DrawCircle = function (e) { + $rootScope.switchCanvas(); $rootScope.shapeType = "Circle"; $('.btnCursor').removeClass('activebtncolor'); $(".btn-annotation").removeClass("activebtncolor"); - $("#" + e.currentTarget.id).addClass("activebtncolor"); + $(".btn-annotation-circle").addClass("activebtncolor"); } $rootScope.DrawArrow = function (e) { + $rootScope.switchCanvas(); $rootScope.shapeType = "Arrow"; $('.btnCursor').removeClass('activebtncolor'); $(".btn-annotation").removeClass("activebtncolor"); - $("#" + e.currentTarget.id).addClass("activebtncolor"); + $(".btn-annotation-arrow").addClass("activebtncolor"); } $rootScope.DrawText = function () { - - // $("#myModal").modal("toggle"); - $rootScope.shapeType = "TextArea"; + $rootScope.switchCanvas(); + + $rootScope.shapeType = "TextArea"; + $('.btnCursor').removeClass('activebtncolor'); + $(".btn-annotation").removeClass("activebtncolor"); + $(".btn-annotation-Text").addClass("activebtncolor"); //$('.btnCursor').removeClass('activebtncolor'); //$(".btn-annotation").removeClass("activebtncolor"); //$("#" + e.currentTarget.id).addClass("activebtncolor"); @@ -191,9 +201,24 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", $rootScope.DrawPolygon = function () { $rootScope.shapeType = "DrawPolygon"; - //$('.btnCursor').removeClass('activebtncolor'); - //$(".btn-annotation").removeClass("activebtncolor"); - //$("#" + e.currentTarget.id).addClass("activebtncolor"); + + } + + + $rootScope.OpacityModal = function () { + + + } + $rootScope.switchCanvas = function () { + var x = $('#canvasPaint').css("z-index"); + + var y = $('#canvas').css("z-index"); + if (x > y) { + y = parseInt(x) + 1; + } else { + y = parseInt(y) + 1; + } + $('#canvas').css("z-index", y); } //----End------------- diff --git a/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html b/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html index b875c40..5c9d783 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html +++ b/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html @@ -107,6 +107,15 @@ left: 0; right: 0; } + + .canvas-annotationStyle1 { + display: none; + background-color: transparent; + z-index: 12000; + position: absolute; + left: 0; + right: 0; + }
@@ -234,6 +243,7 @@
+
diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html index b8b552a..a4455e1 100644 --- a/400-SOURCECODE/AIAHTML5.Web/index.html +++ b/400-SOURCECODE/AIAHTML5.Web/index.html @@ -34,6 +34,7 @@ +