diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/CIController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/CIController.js index 7d0f470..e3c666b 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/CIController.js +++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/CIController.js @@ -429,8 +429,10 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout $("html,body").scrollTop(0); } + $scope.openView = function ($event) { - + + $rootScope.CIAnotationIdentifyModeOff = true; $rootScope.currentBodyViewId = $event.currentTarget.id; if ($event.currentTarget.textContent !== null && typeof ($event.currentTarget.textContent) !== "undefined") { var CITitle = []; @@ -532,7 +534,8 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout theme: 'success', currentController: 'CIController', parentSlug: 'clinical-illustrations', - content: '
' + + content: '
' + + '
' + '
' + '

' + $scope.clickedCISummary + '

' + '
' + @@ -576,8 +579,20 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout $('#CIView').css("width", $(window).outerWidth()); } - - + + $scope.$on('annotationToolEvent', function (event, data) { + + $('#editstylebackgroundcolor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(255,255,255)") + $('#editstylebackgroundcolor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" }); + $('#outlineColor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(0,0,0)") + $('#outlineColor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" }); + + $("#canvas").css("display", "block"); + $("#canvasPaint").css("display", "block"); + + $rootScope.BindCanvasDrawingListners(); + // $rootScope.FreeStylePaint(); + }); }] diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js index 5dcfbb4..7617a02 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js +++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js @@ -2573,7 +2573,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo if ($scope.isTransparencyActivated) { - + //crete temp canavs to store the original data which will be used to chnange the transparency if (document.getElementById('tempCanvas') != null) { $('#tempCanvas').remove(); @@ -2598,46 +2598,48 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo var tCanvas = document.getElementById('transparencyCanvas'); - var tCanvasContext = tCanvas.getContext('2d'); + + var tCanvasContext = tCanvas.getContext('2d'); - var tCanvasHeight = parseInt((tCanvas.style.height).replace('px', '')); + var tCanvasHeight = parseInt((tCanvas.style.height).replace('px', '')); - var tCanvasWidth = parseInt((tCanvas.style.width).replace('px', '')); + var tCanvasWidth = parseInt((tCanvas.style.width).replace('px', '')); - // var tCanvas = document.getElementById('transparencyCanvas'); - if (tCanvas != null) { - clearTransCanvas(); - } - var TransparencyBoxStartX = parseInt((tCanvas.style.left).replace('px', '')); - var TransparencyEndX = parseInt((tCanvas.style.left).replace('px', '')) + parseInt((tCanvas.style.width.replace('px', ''))); - var TransparencyBoxStartY = parseInt((tCanvas.style.top).replace('px', '')); - var TransparencyBoxEndY = parseInt((tCanvas.style.top).replace('px', '')) + parseInt((tCanvas.style.height).replace('px', '')); - var transparencyBoxBottom = parseInt(TransparencyBoxStartY) + parseInt(tCanvasHeight); - var transparencyBoxRight = parseInt(TransparencyBoxStartX) + parseInt(tCanvasWidth); + // var tCanvas = document.getElementById('transparencyCanvas'); + if (tCanvas != null) { + clearTransCanvas(); + } + var TransparencyBoxStartX = parseInt((tCanvas.style.left).replace('px', '')); + var TransparencyEndX = parseInt((tCanvas.style.left).replace('px', '')) + parseInt((tCanvas.style.width.replace('px', ''))); + var TransparencyBoxStartY = parseInt((tCanvas.style.top).replace('px', '')); + var TransparencyBoxEndY = parseInt((tCanvas.style.top).replace('px', '')) + parseInt((tCanvas.style.height).replace('px', '')); + var transparencyBoxBottom = parseInt(TransparencyBoxStartY) + parseInt(tCanvasHeight); + var transparencyBoxRight = parseInt(TransparencyBoxStartX) + parseInt(tCanvasWidth); - var BodyRegionDictionary = $rootScope.BodyRegionCordinatesData; + var BodyRegionDictionary = $rootScope.BodyRegionCordinatesData; - $.each(BodyRegionDictionary, function (index, value) { - //debugger; - // alert(' $.each(BodyRegionDictionary1') + $.each(BodyRegionDictionary, function (index, value) { + //debugger; + // alert(' $.each(BodyRegionDictionary1') - var bodyRegionRight = parseInt(value.X) + parseInt(value.Width); - var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height); + var bodyRegionRight = parseInt(value.X) + parseInt(value.Width); + var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height); - // alert(' $.each(BodyRegionDictionary3. bodyRegionRight: ' + bodyRegionRight + ', bodyRegionBottom: ' + bodyRegionBottom) - if (TransparencyBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && TransparencyBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) { - //var transNumber = parseInt(document.getElementById("txtTransparencyChange").value); - // debugger; - $scope.layerNumber = parseInt(txtlayerNumber.value); + // alert(' $.each(BodyRegionDictionary3. bodyRegionRight: ' + bodyRegionRight + ', bodyRegionBottom: ' + bodyRegionBottom) + if (TransparencyBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && TransparencyBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) { + //var transNumber = parseInt(document.getElementById("txtTransparencyChange").value); + // debugger; + $scope.layerNumber = parseInt(txtlayerNumber.value); - $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, TransparencyBoxStartX, transparencyBoxRight, TransparencyBoxStartY, transparencyBoxBottom, $scope, true, false); - } + $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, TransparencyBoxStartX, transparencyBoxRight, TransparencyBoxStartY, transparencyBoxBottom, $scope, true, false); + } - }) + }) + } else { @@ -6340,11 +6342,15 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo // $scope.currentY; //----Annotation Toolbar: Jcanvas--- - $scope.$on('annotationToolEvent', function (event, data) { + $rootScope.$on('annotationToolEvent', function (event, data) { + $('#editstylebackgroundcolor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(255,255,255)") + $('#editstylebackgroundcolor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" }); + $('#outlineColor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(0,0,0)") + $('#outlineColor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" }); + $("#canvas").css("display", "block"); $("#canvasPaint").css("display", "block"); - - $scope.BindCanvasDrawingListners(); + $rootScope.BindCanvasDrawingListners(); $rootScope.FreeStylePaint(); }); $scope.mousePs; @@ -6355,1118 +6361,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } - $scope.clicked = true; - $scope.offsetX1 = 0; - $scope.offsetY1 = 0; - $scope.x = 0; - $scope.y = 0; - $scope.BindCanvasDrawingListners = function (event) { - - $scope.clicked = true; - // OnPaintCanvasMouseDown(event); - - var annotationCanvas = document.getElementById('canvas'); - if (annotationCanvas != null || annotationCanvas != undefined) { - annotationCanvas.addEventListener('mousedown', $scope.OnPaintCanvasMouseDown, false); - annotationCanvas.addEventListener('mouseup', $scope.OnPaintCanvasMouseUp, false); - } - // alert("doclick"); - }; - - - - - $scope.mousePressed = false; - $scope.lastX; $scope.lastY; - var ctx; - - $scope.OnPaintCanvasMouseDown = function (event) { - - var canvasElement = document.getElementById("canvas"); - var ctx = canvasElement.getContext("2d"); - - // var x = event.clientX; - // var y = event.clientY; - $scope.offsetX1 = 0; - $scope.offsetY1 = 0; - $scope.offsetX1 = event.offsetX; - $scope.offsetY1 = event.offsetY; - - ctx.clearRect(0, 0, 2277, 3248); - $scope.clicked = true; - } - - - $rootScope.resetRect = 0; - $rootScope.resetLine = 0; - $rootScope.resetCircle = 0; - $rootScope.resetArrow = 0; - $rootScope.resetPin = 0; - $rootScope.resetPinArc = 0; - $rootScope.ObjectIndex = 0; - $rootScope.Object1Index = 0; - $rootScope.Object2Index = 0; - $rootScope.resetText = 0; - $rootScope.resetTextSave = 0; - $rootScope.ObjectIndexSave = 0; - - var arrayRect = {}; - - - var storeLine = ''; - $rootScope.canvasLayerNameCollection1 = []; - $scope.OnPaintCanvasMouseUp = function (event) { - - if (!$scope.clicked) { - return; - } - $scope.clicked = false; - $scope.x = 0; - $scope.y = 0; - $scope.x = parseInt(event.clientX - ($("#canvas").offset().left)); - $scope.y = parseInt(event.clientY - ($("#canvas").offset().top)); - - var canvasElement = document.getElementById("canvas"); - var ctx = canvasElement.getContext("2d"); - - var canvasElement1 = document.getElementById("canvasPaint"); - var ctx1 = canvasElement1.getContext("2d"); - - /* 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; - - } - else { - canvasPaint_zIndex = parseInt(canvasPaint_zIndex) + 1; - } - $('#canvasPaint').css("z-index", canvasPaint_zIndex); - $('#canvasPaint').sketch({ defaultColor: "#000", defaultSize: 1 }); - } - else {*/ - switch ($rootScope.shapeType) { - - case "cursor": - // ctx.clearRect(0, 0, 2277, 3248); - ctx.beginPath(); - ctx1.beginPath(); - - - break; - - case "Line": - - $rootScope.resetLine = $rootScope.ObjectIndex++; - $('#canvas').addLayer({ - name: 'Line_' + $rootScope.resetLine, - layer: true, - type: 'line', - draggable: true, - strokeStyle: $rootScope.shapestyleborderColor, - strokeWidth: $rootScope.shapestyleborderWidth, - 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(); - - }, - mouseover: function (layer) { - - - $('#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: $rootScope.shapestyleFillColor, - type: 'rectangle', - draggable: true, - strokeStyle: $rootScope.shapestyleborderColor, - opacity: $rootScope.shapestyleOpacity, - strokeWidth: $rootScope.shapestyleborderWidth, - x: $scope.offsetX1, y: $scope.offsetY1, - width: $scope.x - $scope.offsetX1, - height: $scope.y - $scope.offsetY1, - - resizeFromCenter: false, - - dblclick: function () { - $rootScope.backOpacity(); - - }, - - 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(); - - } - }).drawLayers(); - - - - $('.btnCursor').trigger('click'); - $(".btn-annotation").removeClass("activebtncolor"); - $('.btnCursor').addClass('activebtncolor'); - - break; - - case "Circle": - // alert($rootScope.shapestyleborderWidth); - $rootScope.resetCircle = $rootScope.ObjectIndex++; - $('#canvas').addLayer({ - layer: true, - name: 'Circle_' + $rootScope.resetCircle, - type: 'ellipse', - opacity: $rootScope.shapestyleOpacity, - draggable: true, - strokeStyle: $rootScope.shapestyleborderColor, - strokeWidth: $rootScope.shapestyleborderWidth, - fillStyle: $rootScope.shapestyleFillColor, - 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 - } - - }).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: $rootScope.shapestyleborderColor, - strokeWidth: $rootScope.shapestyleborderWidth, - 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 - } - - }).drawLayers(); - - }, - mouseover: function (layer) { - - - $('#canvas').setLayer(layer.name, { - handle: { - type: 'arc', - fillStyle: '#fff', - strokeStyle: '#c33', - strokeWidth: 2, - // width: 5, height: 5, - radius: 3 - } - }).drawLayers(); - - } - - }); - $('.btnCursor').trigger('click'); - $(".btn-annotation").removeClass("activebtncolor"); - $('.btnCursor').addClass('activebtncolor'); - - // $scope.resetRect += 1; - break; - case "Pin": - - $rootScope.resetPin = $rootScope.Object2Index++; - $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) { - - $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]); - - $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(); - - - }, - 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(); - - }, - mouseover: function (layer) { - - - $('#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.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": - $rootScope.IsTextAlreadySave = false; - $("#text_area").val(''); - // Draw text - $rootScope.resetTextRect = $rootScope.ObjectIndex++; - $rootScope.resetText = $rootScope.ObjectIndex++; - $('#canvas').drawText({ - layer: true, - draggable: true, - // opacity: $rootScope.shapestyleOpacity, - 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: '' - - }) - // Draw rect as wide as the text - .drawRect({ - layer: true, - name: "TextRect_" + $rootScope.resetTextRect, - dragGroups: ['shapes'], - opacity: $rootScope.shapestyleOpacity, - strokeStyle: $rootScope.shapestyleborderColor, - strokeWidth: $rootScope.shapestyleborderWidth, - fillStyle: $rootScope.shapestyleFillColor, - x: $scope.offsetX1, y: $scope.offsetY1, - width: $scope.x - $scope.offsetX1, - height: $scope.y - $scope.offsetY1, - add: function (layer) { - - $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y }); - - }, - 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(); - - }, - dblclick: function (layer) { - - - $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y }); - $("#annotationTextModal").modal("toggle"); - - $("#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" }); - $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" }); - // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation"); - - $("#text-italic").removeClass("ActiveFormattingButtonClass"); - - $("#text-bold").removeClass("ActiveFormattingButtonClass"); - - $("#text-underline").removeClass("ActiveFormattingButtonClass"); - - $("#text-left").removeClass("ActiveFormattingButtonClass"); - - $("#text-right").removeClass("ActiveFormattingButtonClass"); - - $("#text-center").removeClass("ActiveFormattingButtonClass"); - - }, - 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'); - $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" }); - // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation"); - $("#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" }); - - $("#text-italic").removeClass("ActiveFormattingButtonClass"); - - $("#text-bold").removeClass("ActiveFormattingButtonClass"); - - $("#text-underline").removeClass("ActiveFormattingButtonClass"); - - $("#text-left").removeClass("ActiveFormattingButtonClass"); - - $("#text-right").removeClass("ActiveFormattingButtonClass"); - - $("#text-center").removeClass("ActiveFormattingButtonClass"); - - $(".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.TextPropertyArray = []; - $rootScope.modifySavedText = []; - $rootScope.TextRectangleArr = []; - $rootScope.rectDimension = []; - - - // will refactor this code later - - - $rootScope.saveText = function () { - - // this part will work first time when save button will be clicked - if ($rootScope.IsTextAlreadySave == false) { - // getting textarea style properties - $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(); - - // deleting previous text area - - $("#canvas").removeLayer('TextArea_' + $rootScope.resetText).drawLayers(); - $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers(); - - // Text After Saving in Rectangle - $('#canvas').drawText({ - layer: true, - draggable: true, - name: 'TextAreaNew_' + $rootScope.resetText, - groups: ['TextAreaNew_' + $rootScope.resetText], - dragGroups: ['TextAreaNew_' + $rootScope.resetText], - fillStyle: $rootScope.fontColor, - fontStyle: $rootScope.fontWeight + " " + $rootScope.fontStyle, - fontSize: $rootScope.fontSizes, - fontFamily: $rootScope.fontFamily, - align: $rootScope.textAlignmt, - strokeWidth: 0, - text: $rootScope.textArea, - x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y, - maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width, - maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height, - add: function (layer) { - // alert(layer.maxWidth); - $rootScope.TextPropertyArray.push({ Text1: '', Align: '', FontColor: '', FontSize: '', FontStyle: '', FontFamily: '' }); - $rootScope.TextPropertyArray.push({ Text1: layer.text, Align: layer.align, FontColor: layer.fillStyle, FontSize: layer.fontSize, FontStyle: layer.fontStyle, FontFamily: layer.fontFamily, TextDecoration: $rootScope.underlineText }); - } - }) - // Draw rectangle - .drawRect({ - name: 'TextArea1_' + $rootScope.resetText, - layer: true, - draggable: true, - groups: ['TextAreaNew_' + $rootScope.resetText], - dragGroups: ['TextAreaNew_' + $rootScope.resetText], - opacity: $rootScope.shapestyleOpacity, - strokeStyle: $rootScope.shapestyleborderColor, - strokeWidth: $rootScope.shapestyleborderWidth, - x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y, - width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width, - height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height, - click: function (layer) { - $rootScope.shapeTypeText = "textAreaRect"; - - var layerNameSplit = layer.name; - var splitedName = layerNameSplit.split("_"); - var textValName = "TextAreaNew_"; - 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(); - }, - dblclick: function (layer) { - - $rootScope.isTextAreaClosedButtonActive = false; - $rootScope.IsTextAlreadySave = true; - - var _rectLayerOnSave = layer.name; - var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_"); - var TextAreaRectName = "TextAreaNew_"; - var TextAreaRectNameConcatenated = TextAreaRectName.concat(_rectLayerOnSaveSplit[1]); - - $rootScope.layerNameArr = layer.name; - $rootScope.rectTextArr = TextAreaRectNameConcatenated; - // $rootScope.modifySavedText.push({ TextName: '', RectText: ''}); - // $rootScope.modifySavedText.push({ TextName: layer.name, RectText: TextAreaRectNameConcatenated }); - - $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y }); - var _rectLayerOnSaveSplitInt; - //if (_rectLayerOnSaveSplit[1] >= 3) - // _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1] - 2); - //else - // _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1]); - - _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1]); - - var b = $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].Text1; - $("#text_area").val(b); - var fontStyleProp = $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontStyle; - var fontWeightProp = fontStyleProp.split(" "); - - $("#text_area").css("font-size", $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontSize); - $("#text_area").css("font-weight", fontWeightProp[0]); - $("#text_area").css("font-style", fontWeightProp[1]); - $("#text_area").css("text-align", $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].Align); - $("#text_area").css("color", $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontColor); - $("#text_area").css("font-family", $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontFamily); - $("#text_area").css("text-decoration", $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].TextDecoration); - $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontColor }); - // $(".ActiveDefaultColorAnnotation").css({ "background-color": $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontColor + "!important" }); - // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation"); - - - //adding text text decoration active class in text edit pop-up - - if ($rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].TextDecoration == "underline") { - - $("#text-underline").addClass("ActiveFormattingButtonClass"); - - } - - else { - - $("#text-underline").removeClass("ActiveFormattingButtonClass"); - - } - - - - //adding text font weight active class in text edit pop-up - - if (fontWeightProp[0] == 700) { - - - - $("#text-bold").addClass("ActiveFormattingButtonClass"); - - } - - else { - - $("#text-bold").removeClass("ActiveFormattingButtonClass"); - - } - - //adding text font style active class in text edit pop-up - - if (fontWeightProp[1] == "italic") { - - - $("#text-italic").addClass("ActiveFormattingButtonClass"); - } - else { - $("#text-italic").removeClass("ActiveFormattingButtonClass"); - - - } - - //adding text alignment active class in text edit pop-up - - if ($rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].Align == "left") { - - $("#text-right").removeClass("ActiveFormattingButtonClass"); - - $("#text-center").removeClass("ActiveFormattingButtonClass") - - $("#text-left").addClass("ActiveFormattingButtonClass"); - - } - - else if ($rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].Align == "right") { - - - - $("#text-center").removeClass("ActiveFormattingButtonClass") - - $("#text-left").removeClass("ActiveFormattingButtonClass"); - - $("#text-right").addClass("ActiveFormattingButtonClass"); - - - - } - - else if ($rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].Align == "center") { - - $("#text-left").removeClass("ActiveFormattingButtonClass"); - - $("#text-right").removeClass("ActiveFormattingButtonClass"); - - $("#text-center").addClass("ActiveFormattingButtonClass"); - - - - } - - - _rectLayerOnSaveSplitInt = ''; b = ''; - $("#annotationTextModal").modal("toggle"); - }, - 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" }); - - $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" }); - $("#text-italic").removeClass("ActiveFormattingButtonClass"); - - $("#text-bold").removeClass("ActiveFormattingButtonClass"); - - $("#text-underline").removeClass("ActiveFormattingButtonClass"); - - $("#text-left").removeClass("ActiveFormattingButtonClass"); - - $("#text-right").removeClass("ActiveFormattingButtonClass"); - - $("#text-center").removeClass("ActiveFormattingButtonClass"); - - - } - - // this part will work second time when save button will be clicked - else { - - // getting textarea style properties - var _modifiedText = $("#text_area").val(); - var _modifiedFontSize = $("#text_area").css("font-size"); - var _modifiedFontWeight = $("#text_area").css("font-weight"); - var _modifiedFontStyle = $("#text_area").css("font-style"); - var _modifiedTextAlign = $("#text_area").css("text-align"); - var _modifiedFontColor = $("#text_area").css("color"); - var _modifiedFontFamily = $("#text_area").css("font-family"); - var _modifiedFontDecoration = $("#text_area").css("text-decoration"); - - // deleting previous textarea - - // var a = $rootScope.modifySavedTextIndexNumber; - // alert(a); - // alert($rootScope.modifySavedText.length); - // alert($rootScope.modifySavedText[a].RectText); - - $("#canvas").removeLayer($rootScope.layerNameArr).drawLayers(); - $("#canvas").removeLayer($rootScope.rectTextArr).drawLayers(); - - $rootScope.resetTextRectSave = $rootScope.ObjectIndexSave++; - $rootScope.resetTextSave = $rootScope.ObjectIndexSave++; - - // generating new text area - $('#canvas').drawText({ - layer: true, - draggable: true, - name: 'TextAreaAfterEdit_' + $rootScope.resetTextSave, - groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave], - dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave], - fillStyle: _modifiedFontColor, - fontStyle: _modifiedFontWeight + " " + _modifiedFontStyle, - fontSize: _modifiedFontSize, - fontFamily: _modifiedFontFamily, - align: _modifiedTextAlign, - strokeWidth: 0, - text: _modifiedText, - x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y, - maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width, - maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height - - }) - // Draw rect as wide as the text - .drawRect({ - name: 'TextAreaAfterEditRect_' + $rootScope.resetTextSave, - layer: true, - draggable: true, - groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave], - dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave], - opacity: $rootScope.shapestyleOpacity, - strokeStyle: $rootScope.shapestyleborderColor, - strokeWidth: $rootScope.shapestyleborderWidth, - x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y, - width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width, - height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height, - click: function (layer) { - $rootScope.shapeTypeText = "textAreaRect"; - var layerNameSplit = layer.name; - var splitedName = layerNameSplit.split("_"); - var textValName = "TextAreaAfterEdit_"; - 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(); - - }, - dblclick: function (layer) { - - $rootScope.isTextAreaClosedButtonActive = false; - $rootScope.IsTextAlreadySave = true; - var _rectLayerOnSave = layer.name; - var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_"); - var RectNameAfterEdit = "TextAreaAfterEdit_"; - var RectNameAfterEditResult = RectNameAfterEdit.concat(_rectLayerOnSaveSplit[1]); - $rootScope.modifySavedTextIndexNumber = _rectLayerOnSaveSplit[1]; - - - - // $rootScope.modifySavedText.push({ TextName: '', RectText: '' }); - // $rootScope.modifySavedText.push({ TextName: layer.name, RectText: RectNameAfterEditResult }); - - $rootScope.layerNameArr = layer.name; - $rootScope.rectTextArr = RectNameAfterEditResult; - - - $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y }); - $("#text_area").val(_modifiedText); - $("#text_area").css("font-size", _modifiedFontSize); - $("#text_area").css("font-weight", _modifiedFontWeight); - $("#text_area").css("font-style", _modifiedFontStyle); - $("#text_area").css("text-align", _modifiedTextAlign); - $("#text_area").css("color", _modifiedFontColor); - $("#text_area").css("font-family", _modifiedFontFamily); - $("#text_area").css("text-decoration", _modifiedFontDecoration); - $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": _modifiedFontColor }); - // $(".ActiveDefaultColorAnnotation").css({ "background-color": _modifiedFontColor + "!important" }); - // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation"); - - //adding text text decoration active class in text edit pop-up - if (_modifiedFontDecoration == "underline") { - $("#text-underline").addClass("ActiveFormattingButtonClass"); - } - else { - $("#text-underline").removeClass("ActiveFormattingButtonClass"); - } - - //adding text font weight active class in text edit pop-up - if (_modifiedFontWeight == 700) { - - $("#text-bold").addClass("ActiveFormattingButtonClass"); - } - else { - - $("#text-bold").removeClass("ActiveFormattingButtonClass"); - - } - - //adding text font style active class in text edit pop-up - if (_modifiedFontStyle == "italic") { - - $("#text-italic").addClass("ActiveFormattingButtonClass"); - } - else { - $("#text-italic").removeClass("ActiveFormattingButtonClass"); - - } - - //adding text alignment active class in text edit pop-up - if (_modifiedTextAlign == "left") { - $("#text-right").removeClass("ActiveFormattingButtonClass"); - $("#text-center").removeClass("ActiveFormattingButtonClass") - $("#text-left").addClass("ActiveFormattingButtonClass"); - } - else if (_modifiedTextAlign == "right") { - - $("#text-center").removeClass("ActiveFormattingButtonClass") - $("#text-left").removeClass("ActiveFormattingButtonClass"); - $("#text-right").addClass("ActiveFormattingButtonClass"); - - } - else if (_modifiedTextAlign == "center") { - $("#text-left").removeClass("ActiveFormattingButtonClass"); - $("#text-right").removeClass("ActiveFormattingButtonClass"); - $("#text-center").addClass("ActiveFormattingButtonClass"); - - } - - - $("#annotationTextModal").modal("toggle"); - }, - 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(); - - } - }); - // $rootScope.modifySavedText = []; - - } - } - - // deleting text area on close button - $rootScope.closeModal = function () { - - - if ($rootScope.isTextAreaClosedButtonActive == true) { - $("#canvas").removeLayer('TextArea_' + $rootScope.resetText).drawLayers(); - $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers(); - - } - - } function OnPaintCanvasMouseMove(event) { @@ -7540,38 +6434,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo - $(document).keydown(function (event) { - - // predefined function for detecting keyboard key - if (event.which == 46) { - - if ($rootScope.shapeTypePin == "Pin") { - - - $("#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(); - } - - - } - - }); + //body highlight options functinality $scope.LoadBodySystemData = function () { diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js index 37bccd2..6243f52 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js +++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js @@ -48,6 +48,22 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", $rootScope.menuLabExer; $rootScope.menuLabExer = 0; + + $rootScope.fontSizes; + $rootScope.fontWeight; + $rootScope.fontStyle; + $rootScope.textAlignmt; + $rootScope.fontColor; + $rootScope.underlineText; + $rootScope.textArea; + $rootScope.fontFamily; + $rootScope.TextPropertyArray = []; + $rootScope.modifySavedText = []; + $rootScope.TextRectangleArr = []; + $rootScope.rectDimension = []; + + + $rootScope.$on("$locationChangeSuccess", function () { if (($location.url() == "/da-body-view") || ($location.url() == "/clinical-illustrations-detail") || ($location.url() == "/clinical-animations-detail")) { @@ -208,20 +224,26 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", $('.btnCursor').removeClass('activebtncolor'); $(".btn-annotation").removeClass("activebtncolor"); } - + $rootScope.CIAnotationIdentifyModeOff = false; $rootScope.OnIdentifyClick = function () { $("#OnIdentify").addClass("annotationtoolbartab"); $("#DrawMode").removeClass("annotationtoolbartab"); // $rootScope.isIdetifyClicked = true; // $rootScope.isDrawingToolSelected = false; - $("#canvasPaint").css("display", "none"); - $("#canvas").css("display", "none"); + // debugger; + if ($rootScope.CIAnotationIdentifyModeOff == true) { + $('.btnCursor').removeClass('activebtncolor'); - // $("#canvasPaint").css("z-index", "0"); - // $("#canvas").css("z-index", "0"); - $('.btnCursor').removeClass('activebtncolor'); + } else { + $("#canvasPaint").css("display", "none"); + $("#canvas").css("display", "none"); + // $("#canvasPaint").css("z-index", "0"); + // $("#canvas").css("z-index", "0"); + $('.btnCursor').removeClass('activebtncolor'); + + } } @@ -419,7 +441,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", $rootScope.shapestyleborderWidth = 2; $rootScope.shapestyleborderStyles = "solid"; $rootScope.shapestyle = function (id) { - + // debugger; document.getElementById('modelbackground').style.display = "none"; document.getElementById('modeleditstyle').style.display = "none"; @@ -492,6 +514,1214 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", //----End------------- + //--Common code of Annotation Toolbar for CI and DA------- + $rootScope.LineFn = function (canvasId, LineNumber, shapestyleborderColor, shapestyleborderWidth, offsetX1, offsetY1, x, y) + { + $(canvasId).addLayer({ + name: 'Line_' + LineNumber, + layer: true, + type: 'line', + draggable: true, + strokeStyle: shapestyleborderColor, + strokeWidth: shapestyleborderWidth, + rounded: true, + x1: offsetX1, y1:offsetY1, + x2: x, y2:y, + + click: function (layer) { + $rootScope.canvasLayerNameCollection = []; + $rootScope.canvasLayerNameCollection.push(layer.name); + $(canvasId).setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + radius: 3 + } + }).drawLayers(); + + + }, + mouseout: function (layer) { + $rootScope.canvasLayerNameCollection = []; + $(canvasId).setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 0, + radius: 0 + } + + }).drawLayers(); + + }, + mouseover: function (layer) { + + + $(canvasId).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'); + } + + $rootScope.RectangleFn = function (canvasId, RectNumber, shapestyleFillColor, shapestyleborderColor, shapestyleOpacity, shapestyleborderWidth, offsetX1, offsetY1, x,y) { + $(canvasId).addLayer({ + layer: true, + name: 'Rect_' + RectNumber, + fillStyle: shapestyleFillColor, + type: 'rectangle', + draggable: true, + strokeStyle: shapestyleborderColor, + opacity: shapestyleOpacity, + strokeWidth: shapestyleborderWidth, + x: offsetX1, y: offsetY1, + width: x - offsetX1, + height: y - offsetY1, + + resizeFromCenter: false, + + dblclick: function () { + // $rootScope.backOpacity(); + + }, + + click: function (layer) { + $rootScope.canvasLayerNameCollection = []; + $rootScope.canvasLayerNameCollection.push(layer.name); + $(canvasId).setLayer(layer.name, { + handle: { + type: 'rectangle', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + width: 5, height: 5, + cornerRadius: 3 + } + }).drawLayers(); + + }, + mouseout: function (layer) { + $rootScope.canvasLayerNameCollection = []; + $(canvasId).setLayer(layer.name, { + handle: { + type: 'rectangle', + fillStyle: 'pink', + strokeStyle: 'yellow', + strokeWidth: 0, + width: 0, height: 0, + cornerRadius: 0 + } + + }).drawLayers(); + + }, + mouseover: function (layer) { + + + $(canvasId).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'); + + } + + $rootScope.CircleFn = function (canvasId, CircleNumber, shapestyleOpacity, shapestyleborderColor, shapestyleborderWidth, shapestyleFillColor, offsetX1, offsetY1, x, y) { + + $(canvasId).addLayer({ + layer: true, + name: 'Circle_' + CircleNumber, + type: 'ellipse', + opacity: shapestyleOpacity, + draggable: true, + strokeStyle: shapestyleborderColor, + strokeWidth: shapestyleborderWidth, + fillStyle: shapestyleFillColor, + x: offsetX1, y:offsetY1, + width: (x - offsetX1) * 2, height: (y - offsetY1) * 2, + // Place a handle at each side and each corner + handlePlacement: 'both', + + + + click: function (layer) { + + $rootScope.canvasLayerNameCollection = []; + $rootScope.canvasLayerNameCollection.push(layer.name); + $(canvasId).setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + radius: 3 + } + }).drawLayers(); + + }, + mouseout: function (layer) { + $rootScope.canvasLayerNameCollection = []; + + $(canvasId).setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 0, + // width: 0, height: 0, + radius: 0 + } + + }).drawLayers(); + + }, + mouseover: function (layer) { + + + $(canvasId).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'); + } + + $rootScope.ArrowFn = function (canvasId, ArrowNumber, shapestyleborderColor, shapestyleborderWidth, offsetX1, offsetY1, x, y) { + + $('#canvas').drawLine({ + layer: true, + name: 'Arrow_' + ArrowNumber, + draggable: true, + strokeStyle: shapestyleborderColor, + strokeWidth: shapestyleborderWidth, + rounded: true, + startArrow: true, + arrowRadius: 7, + arrowAngle: 90, + x1: offsetX1, y1: offsetY1, + x2: x, y2: y, + + click: function (layer) { + $rootScope.canvasLayerNameCollection = []; + $rootScope.canvasLayerNameCollection.push(layer.name); + $(canvasId).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 = []; + $(canvasId).setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 0, + // width: 0, height: 0, + radius: 0 + } + + }).drawLayers(); + + }, + mouseover: function (layer) { + + + $(canvasId).setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + // width: 5, height: 5, + radius: 3 + } + }).drawLayers(); + + } + + }); + $('.btnCursor').trigger('click'); + $(".btn-annotation").removeClass("activebtncolor"); + $('.btnCursor').addClass('activebtncolor'); + } + + $rootScope.PinFn = function (canvasId, PinNumber, offsetX1, offsetY1, x, y, PinArcNumber) { + var radial = $('#canvas').createGradient({ + x1: 50, y1: 50, + x2: 50, y2: 50, + r1: 10, r2: 30, + c1: 'rgba(100, 50, 0,0)', + c2: 'grey' + }); + $(canvasId).drawLine({ + draggable: true, + layer: true, + name: "Pin_" + PinNumber, + groups: ["Pin_" + PinNumber], + dragGroups: ["Pin_" + PinNumber], + strokeStyle: 'black', + strokeWidth: 2, + x1: offsetX1, y1: offsetY1, + x2: x, y2: y, + + click: function (layer) { + + $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]); + + $rootScope.canvasLayerNameCollection.push({ pinName: layer.name, ArcName: pinResult }); + + $(canvasId).setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + // width: 5, height: 5, + radius: 3 + } + }).drawLayers(); + + + }, + mouseout: function (layer) { + + $rootScope.canvasLayerNameCollection = []; + $(canvasId).setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 0, + // width: 0, height: 0, + radius: 0 + } + + }).drawLayers(); + + }, + mouseover: function (layer) { + + + $(canvasId).setLayer(layer.name, { + handle: { + type: 'arc', + fillStyle: '#fff', + strokeStyle: '#c33', + strokeWidth: 2, + // width: 5, height: 5, + radius: 3 + } + }).drawLayers(); + + } + }).drawArc({ + draggable: true, + name: "ArcPin_" + PinArcNumber, + // name: "Pin_" + $rootScope.resetPin, + layer: true, + groups: ["Pin_" + PinNumber], + dragGroups: ["Pin_" + PinNumber], + strokeStyle: 'grey', + strokeWidth: 2, + fillStyle: radial, + x: offsetX1, y: offsetY1, + radius: 5, + //handle: { + // type: 'arc', + // fillStyle: '#fff', + // strokeStyle: '#c33', + // strokeWidth: 2, + // radius: 3 + //}, + + add: function (layer) { + + $rootScope.PinArcNumber = layer.name; + // $scope.arr = []; + + + }, + + }).drawLayers(); + $('.btnCursor').trigger('click'); + $(".btn-annotation").removeClass("activebtncolor"); + $('.btnCursor').addClass('activebtncolor'); + } + + $rootScope.TextAreaFn = function (canvasId, TextNumber, offsetX1, offsetY1, resetTextRect, shapestyleOpacity, shapestyleborderColor, shapestyleborderWidth, shapestyleFillColor,x,y) { + + + + + $('#canvas').drawText({ + layer: true, + draggable: true, + // opacity: $rootScope.shapestyleOpacity, + name: 'TextArea_' + $rootScope.TextNumber, + groups: ['TextArea_' + $rootScope.TextNumber], + dragGroups: ['TextArea_' + $rootScope.TextNumber], + fillStyle: '#36c', + strokeWidth: 0, + x: $rootScope.offsetX1, y: $rootScope.offsetY1, + fontSize: '14pt', + align: "left", + fontFamily: 'Verdana, sans-serif', + text: '', + add: function (layer) { + + $rootScope.TextID = layer.name; + } + + + }) + // Draw rect as wide as the text + .drawRect({ + layer: true, + name: "TextRect_" + $rootScope.TextNumber, + dragGroups: ['shapes'], + opacity: $rootScope.shapestyleOpacity, + strokeStyle: $rootScope.shapestyleborderColor, + strokeWidth: $rootScope.shapestyleborderWidth, + fillStyle: $rootScope.shapestyleFillColor, + x: $rootScope.offsetX1, y: $rootScope.offsetY1, + width: $rootScope.x - $rootScope.offsetX1, + height: $rootScope.y - $rootScope.offsetY1, + add: function (layer) { + + $rootScope.TextAreaRectID = layer.name; + $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y }); + + }, + 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(); + + }, + dblclick: function (layer) { + + + var RectNameArray = (layer.name).split("_"); + + var TextAreaRectangleName = "TextArea_"; + var TextAreaRectNameConcat = TextAreaRectangleName.concat(RectNameArray[1]); + $rootScope.TextAreaRectID = layer.name; + $rootScope.TextID = TextAreaRectNameConcat; + + $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y }); + $("#annotationTextModal").modal("toggle"); + + $("#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" }); + $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" }); + // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation"); + + $("#text-italic").removeClass("ActiveFormattingButtonClass"); + + $("#text-bold").removeClass("ActiveFormattingButtonClass"); + + $("#text-underline").removeClass("ActiveFormattingButtonClass"); + + $("#text-left").removeClass("ActiveFormattingButtonClass"); + + $("#text-right").removeClass("ActiveFormattingButtonClass"); + + $("#text-center").removeClass("ActiveFormattingButtonClass"); + + }, + 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'); + $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" }); + + $("#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" }); + + $("#text-italic").removeClass("ActiveFormattingButtonClass"); + + $("#text-bold").removeClass("ActiveFormattingButtonClass"); + + $("#text-underline").removeClass("ActiveFormattingButtonClass"); + + $("#text-left").removeClass("ActiveFormattingButtonClass"); + + $("#text-right").removeClass("ActiveFormattingButtonClass"); + + $("#text-center").removeClass("ActiveFormattingButtonClass"); + + $(".btn-annotation").removeClass("activebtncolor"); + + $('.btnCursor').addClass('activebtncolor'); + + + + } + + + + $rootScope.clicked = true; + $rootScope.offsetX1 = 0; + $rootScope.offsetY1 = 0; + $rootScope.x = 0; + $rootScope.y = 0; + $rootScope.mousePressed = false; + $rootScope.lastX; $rootScope.lastY; + var ctx; + $rootScope.OnPaintCanvasMouseDown = function (event) { + + var canvasElement = document.getElementById("canvas"); + var ctx = canvasElement.getContext("2d"); + + // var x = event.clientX; + // var y = event.clientY; + $rootScope.offsetX1 = 0; + $rootScope.offsetY1 = 0; + $rootScope.offsetX1 = event.offsetX; + $rootScope.offsetY1 = event.offsetY; + + ctx.clearRect(0, 0, 2277, 3248); + $rootScope.clicked = true; + + // alert("x:"+$rootScope.offsetX1 + " y:" + $rootScope.offsetY1); + } + + $rootScope.rectNumber = 0; + $rootScope.LineNumber = 0; + $rootScope.CircleNumber = 0; + $rootScope.ArrowNumber = 0; + $rootScope.PinNumber = 0; + $rootScope.PinArcNumber = 0; + $rootScope.ObjectIndex = 0; + $rootScope.ArcObjectIndex = 0; + $rootScope.PinObjectIndex = 0; + $rootScope.TextNumber = 0; + $rootScope.resetTextSave = 0; + $rootScope.ObjectIndexSave = 0; + + var arrayRect = {}; + + var storeLine = ''; + //$rootScope.canvasLayerNameCollection1 = []; + $rootScope.OnPaintCanvasMouseUp = function (event) { + + if (!$rootScope.clicked) { + return; + } + $rootScope.clicked = false; + $rootScope.x = 0; + $rootScope.y = 0; + $rootScope.x = parseInt(event.clientX - ($("#canvas").offset().left)); + $rootScope.y = parseInt(event.clientY - ($("#canvas").offset().top)); + + var canvasElement = document.getElementById("canvas"); + var ctx = canvasElement.getContext("2d"); + + var canvasPaintElement = document.getElementById("canvasPaint"); + var PaintCanvasctx = canvasPaintElement.getContext("2d"); + + + switch ($rootScope.shapeType) { + + case "cursor": + // ctx.clearRect(0, 0, 2277, 3248); + ctx.beginPath(); + PaintCanvasctx.beginPath(); + + + break; + + case "Line": + //$rootScope.canvasLayerNameCollection = []; + $rootScope.LineNumber = $rootScope.ObjectIndex++; + + $rootScope.LineFn('#canvas', $rootScope.LineNumber, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y) + + break; + + case "Rectangle": + $rootScope.rectNumber = $rootScope.ObjectIndex++; + $rootScope.RectangleFn('#canvas', $rootScope.rectNumber, $rootScope.shapestyleFillColor, $rootScope.shapestyleborderColor, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y); + + break; + + case "Circle": + // alert($rootScope.shapestyleborderWidth); + $rootScope.CircleNumber = $rootScope.ObjectIndex++; + + $rootScope.CircleFn('#canvas', $rootScope.CircleNumber, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.shapestyleFillColor, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y); + break; + case "Arrow": + $rootScope.ArrowNumber = $rootScope.ObjectIndex++; + + $rootScope.ArrowFn('#canvas', $rootScope.ArrowNumber, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y); + + // $scope.resetRect += 1; + break; + case "Pin": + $rootScope.PinNumber = $rootScope.PinObjectIndex++; + $rootScope.PinArcNumber = $rootScope.ArcObjectIndex++; + $rootScope.PinFn('#canvas', $rootScope.PinNumber, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y, $rootScope.PinArcNumber); + + break; + case "TextArea": + $rootScope.IsTextAlreadySave = false; + $("#text_area").val(''); + // Draw text + $rootScope.resetTextRect = $rootScope.ObjectIndex++; + $rootScope.TextNumber = $rootScope.ObjectIndex++; + $rootScope.TextAreaFn('#canvas', $rootScope.TextNumber, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.resetTextRect, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.shapestyleFillColor, $rootScope.x, $rootScope.y); + break; + + case "DrawPolygon": + + break; + + } + //} + + } + + + + + + + ///----- + + $rootScope.saveText = function () { + + // this part will work first time when save button will be clicked + if ($rootScope.IsTextAlreadySave == false) { + // getting textarea style properties + $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(); + + // deleting previous text area + + + $("#canvas").removeLayer($rootScope.TextID).drawLayers(); + $("#canvas").removeLayer($rootScope.TextAreaRectID).drawLayers(); + + + // $("#canvas").removeLayer('TextArea_' + $rootScope.TextNumber).drawLayers(); + // $("#canvas").removeLayer("TextRect_" + $rootScope.TextNumber).drawLayers(); + + // Text After Saving in Rectangle + $rootScope.resetTextRect = $rootScope.ObjectIndex++; + $('#canvas').drawText({ + layer: true, + draggable: true, + name: 'TextAreaNew_' + $rootScope.resetTextRect, + groups: ['TextAreaNew_' + $rootScope.resetTextRect], + dragGroups: ['TextAreaNew_' + $rootScope.resetTextRect], + fillStyle: $rootScope.fontColor, + fontStyle: $rootScope.fontWeight + " " + $rootScope.fontStyle, + fontSize: $rootScope.fontSizes, + fontFamily: $rootScope.fontFamily, + align: $rootScope.textAlignmt, + strokeWidth: 0, + text: $rootScope.textArea, + x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y, + maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width, + maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height, + add: function (layer) { + + //$rootScope.TextPropertyArray.push({ Text1: '', Align: '', FontColor: '', FontSize: '', FontStyle: '', FontFamily: '' }); + $rootScope.TextPropertyArray.push({ layerName: layer.name, Rect_Text: layer.text, Align: layer.align, FontColor: layer.fillStyle, FontSize: layer.fontSize, FontStyle: layer.fontStyle, FontFamily: layer.fontFamily, TextDecoration: $rootScope.underlineText }); + } + }) + // Draw rectangle + .drawRect({ + name: 'TextArea1_' + $rootScope.resetTextRect, + layer: true, + draggable: true, + groups: ['TextAreaNew_' + $rootScope.resetTextRect], + dragGroups: ['TextAreaNew_' + $rootScope.resetTextRect], + opacity: $rootScope.shapestyleOpacity, + strokeStyle: $rootScope.shapestyleborderColor, + strokeWidth: $rootScope.shapestyleborderWidth, + x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y, + width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width, + height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height, + click: function (layer) { + $rootScope.shapeTypeText = "textAreaRect"; + + var layerNameSplit = layer.name; + var splitedName = layerNameSplit.split("_"); + var textValName = "TextAreaNew_"; + 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(); + }, + dblclick: function (layer) { + + $rootScope.isTextAreaClosedButtonActive = false; + $rootScope.IsTextAlreadySave = true; + + var _rectLayerOnSave = layer.name; + var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_"); + var TextAreaRectName = "TextAreaNew_"; + var TextAreaRectNameConcatenated = TextAreaRectName.concat(_rectLayerOnSaveSplit[1]); + // alert(TextAreaRectNameConcatenated); + //if (_rectLayerOnSaveSplit[1]%2 == 0) + //{ + // _rectLayerOnSaveSplit[1] = _rectLayerOnSaveSplit[1] - 1; + + //} + //else + //{ + + // _rectLayerOnSaveSplit[1] = _rectLayerOnSaveSplit[1]; + //} + + $rootScope.layerNameArr = layer.name; + $rootScope.rectTextArr = TextAreaRectNameConcatenated; + + + $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y }); + // var _rectLayerOnSaveSplitInt; + + + // _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1]); + + //alert(_rectLayerOnSaveSplitInt); + // alert($rootScope.TextPropertyArray.length); + + + for (var i = 0; i <= $rootScope.TextPropertyArray.length - 1; i++) { + if ($rootScope.TextPropertyArray[i].layerName == TextAreaRectNameConcatenated) { + + var textArrVal = $rootScope.TextPropertyArray[i].Rect_Text; + $("#text_area").val(textArrVal); + var fontStyleProp = $rootScope.TextPropertyArray[i].FontStyle; + var fontWeightProp = fontStyleProp.split(" "); + + $("#text_area").css("font-size", $rootScope.TextPropertyArray[i].FontSize); + $("#text_area").css("font-weight", fontWeightProp[0]); + $("#text_area").css("font-style", fontWeightProp[1]); + $("#text_area").css("text-align", $rootScope.TextPropertyArray[i].Align); + $("#text_area").css("color", $rootScope.TextPropertyArray[i].FontColor); + $("#text_area").css("font-family", $rootScope.TextPropertyArray[i].FontFamily); + $("#text_area").css("text-decoration", $rootScope.TextPropertyArray[i].TextDecoration); + $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": $rootScope.TextPropertyArray[i].FontColor }); + + + + // $(".ActiveDefaultColorAnnotation").css({ "background-color": $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontColor + "!important" }); + // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation"); + + + //adding text text decoration active class in text edit pop-up + + + + + if ($rootScope.TextPropertyArray[i].TextDecoration == "underline") { + + $("#text-underline").addClass("ActiveFormattingButtonClass"); + + } + + else { + + $("#text-underline").removeClass("ActiveFormattingButtonClass"); + + } + + + + //adding text font weight active class in text edit pop-up + + if (fontWeightProp[0] == 700) { + + + + $("#text-bold").addClass("ActiveFormattingButtonClass"); + + } + + else { + + $("#text-bold").removeClass("ActiveFormattingButtonClass"); + + } + + //adding text font style active class in text edit pop-up + + if (fontWeightProp[1] == "italic") { + + + $("#text-italic").addClass("ActiveFormattingButtonClass"); + } + else { + $("#text-italic").removeClass("ActiveFormattingButtonClass"); + + + } + + //adding text alignment active class in text edit pop-up + + if ($rootScope.TextPropertyArray[i].Align == "left") { + + $("#text-right").removeClass("ActiveFormattingButtonClass"); + + $("#text-center").removeClass("ActiveFormattingButtonClass") + + $("#text-left").addClass("ActiveFormattingButtonClass"); + + } + + else if ($rootScope.TextPropertyArray[i].Align == "right") { + + + + $("#text-center").removeClass("ActiveFormattingButtonClass") + + $("#text-left").removeClass("ActiveFormattingButtonClass"); + + $("#text-right").addClass("ActiveFormattingButtonClass"); + + + + } + + else if ($rootScope.TextPropertyArray[i].Align == "center") { + + $("#text-left").removeClass("ActiveFormattingButtonClass"); + + $("#text-right").removeClass("ActiveFormattingButtonClass"); + + $("#text-center").addClass("ActiveFormattingButtonClass"); + + + + } + + + + } + else { + // alert("no"); + + } + + } + + + + + + // _rectLayerOnSaveSplitInt = ''; + textArrVal = ''; + $("#annotationTextModal").modal("toggle"); + + + + + }, + 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" }); + + $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" }); + $("#text-italic").removeClass("ActiveFormattingButtonClass"); + + $("#text-bold").removeClass("ActiveFormattingButtonClass"); + + $("#text-underline").removeClass("ActiveFormattingButtonClass"); + + $("#text-left").removeClass("ActiveFormattingButtonClass"); + + $("#text-right").removeClass("ActiveFormattingButtonClass"); + + $("#text-center").removeClass("ActiveFormattingButtonClass"); + + + } + + // this part will work second time when save button will be clicked + else { + + // getting textarea style properties + var _modifiedText = $("#text_area").val(); + var _modifiedFontSize = $("#text_area").css("font-size"); + var _modifiedFontWeight = $("#text_area").css("font-weight"); + var _modifiedFontStyle = $("#text_area").css("font-style"); + var _modifiedTextAlign = $("#text_area").css("text-align"); + var _modifiedFontColor = $("#text_area").css("color"); + var _modifiedFontFamily = $("#text_area").css("font-family"); + var _modifiedFontDecoration = $("#text_area").css("text-decoration"); + + // deleting previous textarea + + + $("#canvas").removeLayer($rootScope.layerNameArr).drawLayers(); + $("#canvas").removeLayer($rootScope.rectTextArr).drawLayers(); + + $rootScope.resetTextRectSave = $rootScope.ObjectIndexSave++; + $rootScope.resetTextSave = $rootScope.ObjectIndexSave++; + + // generating new text area + $('#canvas').drawText({ + layer: true, + draggable: true, + name: 'TextAreaAfterEdit_' + $rootScope.resetTextSave, + groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave], + dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave], + fillStyle: _modifiedFontColor, + fontStyle: _modifiedFontWeight + " " + _modifiedFontStyle, + fontSize: _modifiedFontSize, + fontFamily: _modifiedFontFamily, + align: _modifiedTextAlign, + strokeWidth: 0, + text: _modifiedText, + x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y, + maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width, + maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height + + }) + // Draw rect as wide as the text + .drawRect({ + name: 'TextAreaAfterEditRect_' + $rootScope.resetTextSave, + layer: true, + draggable: true, + groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave], + dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave], + opacity: $rootScope.shapestyleOpacity, + strokeStyle: $rootScope.shapestyleborderColor, + strokeWidth: $rootScope.shapestyleborderWidth, + x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y, + width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width, + height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height, + click: function (layer) { + $rootScope.shapeTypeText = "textAreaRect"; + var layerNameSplit = layer.name; + var splitedName = layerNameSplit.split("_"); + var textValName = "TextAreaAfterEdit_"; + 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(); + + }, + dblclick: function (layer) { + + $rootScope.isTextAreaClosedButtonActive = false; + $rootScope.IsTextAlreadySave = true; + var _rectLayerOnSave = layer.name; + var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_"); + var RectNameAfterEdit = "TextAreaAfterEdit_"; + var RectNameAfterEditResult = RectNameAfterEdit.concat(_rectLayerOnSaveSplit[1]); + $rootScope.modifySavedTextIndexNumber = _rectLayerOnSaveSplit[1]; + + $rootScope.layerNameArr = layer.name; + $rootScope.rectTextArr = RectNameAfterEditResult; + + $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y }); + $("#text_area").val(_modifiedText); + $("#text_area").css("font-size", _modifiedFontSize); + $("#text_area").css("font-weight", _modifiedFontWeight); + $("#text_area").css("font-style", _modifiedFontStyle); + $("#text_area").css("text-align", _modifiedTextAlign); + $("#text_area").css("color", _modifiedFontColor); + $("#text_area").css("font-family", _modifiedFontFamily); + $("#text_area").css("text-decoration", _modifiedFontDecoration); + $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": _modifiedFontColor }); + // $(".ActiveDefaultColorAnnotation").css({ "background-color": _modifiedFontColor + "!important" }); + // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation"); + + //adding text text decoration active class in text edit pop-up + if (_modifiedFontDecoration == "underline") { + $("#text-underline").addClass("ActiveFormattingButtonClass"); + } + else { + $("#text-underline").removeClass("ActiveFormattingButtonClass"); + } + + //adding text font weight active class in text edit pop-up + if (_modifiedFontWeight == 700) { + + $("#text-bold").addClass("ActiveFormattingButtonClass"); + } + else { + + $("#text-bold").removeClass("ActiveFormattingButtonClass"); + + } + + //adding text font style active class in text edit pop-up + if (_modifiedFontStyle == "italic") { + + $("#text-italic").addClass("ActiveFormattingButtonClass"); + } + else { + $("#text-italic").removeClass("ActiveFormattingButtonClass"); + + } + + //adding text alignment active class in text edit pop-up + if (_modifiedTextAlign == "left") { + $("#text-right").removeClass("ActiveFormattingButtonClass"); + $("#text-center").removeClass("ActiveFormattingButtonClass") + $("#text-left").addClass("ActiveFormattingButtonClass"); + } + else if (_modifiedTextAlign == "right") { + + $("#text-center").removeClass("ActiveFormattingButtonClass") + $("#text-left").removeClass("ActiveFormattingButtonClass"); + $("#text-right").addClass("ActiveFormattingButtonClass"); + + } + else if (_modifiedTextAlign == "center") { + $("#text-left").removeClass("ActiveFormattingButtonClass"); + $("#text-right").removeClass("ActiveFormattingButtonClass"); + $("#text-center").addClass("ActiveFormattingButtonClass"); + + } + + + $("#annotationTextModal").modal("toggle"); + }, + 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(); + + } + }); + + } + } + //---- + + $rootScope.BindCanvasDrawingListners = function (event) { + + $rootScope.clicked = true; + // OnPaintCanvasMouseDown(event); + + var annotationCanvas = document.getElementById('canvas'); + if (annotationCanvas != null || annotationCanvas != undefined) { + annotationCanvas.addEventListener('mousedown', $rootScope.OnPaintCanvasMouseDown, false); + annotationCanvas.addEventListener('mouseup', $rootScope.OnPaintCanvasMouseUp, false); + } + // alert("doclick"); + }; + + + $(document).keydown(function (event) { + + // predefined function for detecting keyboard key + if (event.which == 46) { + + if ($rootScope.shapeTypePin == "Pin") { + + + $("#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(); + } + + + } + + }); + + + $rootScope.closeModal = function () { + + + if ($rootScope.isTextAreaClosedButtonActive == true) { + $("#canvas").removeLayer('TextArea_' + $rootScope.TextNumber).drawLayers(); + $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers(); + + } + + } + //-- End ---------------------------- + + $rootScope.AddClick = function (x, y, dragging) { $rootScope.clickX.push(x); $rootScope.clickY.push(y); diff --git a/400-SOURCECODE/AIAHTML5.Web/app/views/ci/clinical-illustrations-detail.html b/400-SOURCECODE/AIAHTML5.Web/app/views/ci/clinical-illustrations-detail.html index 7c8044b..a454e6a 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/views/ci/clinical-illustrations-detail.html +++ b/400-SOURCECODE/AIAHTML5.Web/app/views/ci/clinical-illustrations-detail.html @@ -1,4 +1,6 @@ 
-
+
+ +