Commit b402dbb35657ed19366ebbd7acdbbb7aa641ae8e
1 parent
e5fea54e
Implemented Text Area Edit, Identity and draw functionality.
Showing
3 changed files
with
388 additions
and
197 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
... | ... | @@ -5628,7 +5628,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo |
5628 | 5628 | $rootScope.Object1Index = 0; |
5629 | 5629 | $rootScope.Object2Index = 0; |
5630 | 5630 | $rootScope.resetText = 0; |
5631 | - | |
5631 | + $rootScope.resetTextSave = 0; | |
5632 | + $rootScope.ObjectIndexSave = 0; | |
5632 | 5633 | var arrayRect = {}; |
5633 | 5634 | |
5634 | 5635 | |
... | ... | @@ -5837,6 +5838,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo |
5837 | 5838 | |
5838 | 5839 | |
5839 | 5840 | click: function (layer) { |
5841 | + // alert(layer.name); | |
5840 | 5842 | $rootScope.canvasLayerNameCollection = []; |
5841 | 5843 | $rootScope.canvasLayerNameCollection.push(layer.name); |
5842 | 5844 | $('#canvas').setLayer(layer.name, { |
... | ... | @@ -5852,6 +5854,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo |
5852 | 5854 | }, |
5853 | 5855 | mouseout: function (layer) { |
5854 | 5856 | $rootScope.canvasLayerNameCollection = []; |
5857 | + | |
5855 | 5858 | $('#canvas').setLayer(layer.name, { |
5856 | 5859 | handle: { |
5857 | 5860 | type: 'arc', |
... | ... | @@ -6067,7 +6070,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo |
6067 | 6070 | $('.btnCursor').addClass('activebtncolor'); |
6068 | 6071 | break; |
6069 | 6072 | case "TextArea": |
6070 | - | |
6073 | + $rootScope.isTrue = false; | |
6074 | + $("#text_area").val(''); | |
6071 | 6075 | // Draw text |
6072 | 6076 | $rootScope.resetTextRect = $rootScope.ObjectIndex++; |
6073 | 6077 | $rootScope.resetText = $rootScope.ObjectIndex++; |
... | ... | @@ -6085,9 +6089,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo |
6085 | 6089 | align: "left", |
6086 | 6090 | fontFamily: 'Verdana, sans-serif', |
6087 | 6091 | text: '' |
6088 | - | |
6089 | - | |
6090 | - | |
6092 | + | |
6091 | 6093 | }) |
6092 | 6094 | // Draw rect as wide as the text |
6093 | 6095 | .drawRect({ |
... | ... | @@ -6174,142 +6176,336 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo |
6174 | 6176 | $rootScope.underlineText; |
6175 | 6177 | $rootScope.textArea; |
6176 | 6178 | $rootScope.fontFamily; |
6179 | + $rootScope.TextAreaStyleProp = []; | |
6180 | + $rootScope.modifySavedText = []; | |
6181 | + $rootScope.TextRectangleArr = []; | |
6182 | + $rootScope.rectDimension = []; | |
6183 | + | |
6177 | 6184 | $rootScope.saveText = function () { |
6185 | + debugger; | |
6186 | + if ($rootScope.isTrue == false) { | |
6187 | + $rootScope.fontSizes = $("#text_area").css("font-size"); | |
6188 | + $rootScope.fontWeight = $("#text_area").css("font-weight"); | |
6189 | + $rootScope.fontStyle = $("#text_area").css("font-style"); | |
6190 | + $rootScope.textAlignmt = $("#text_area").css("text-align"); | |
6191 | + $rootScope.fontColor = $("#text_area").css("color"); | |
6192 | + $rootScope.fontFamily = $("#text_area").css("font-family"); | |
6193 | + $rootScope.underlineText = $("#text_area").css("text-decoration"); | |
6194 | + $rootScope.textArea = $("#text_area").val(); | |
6195 | + | |
6196 | + $("#canvas").removeLayer('TextArea_' + $rootScope.resetText).drawLayers(); | |
6197 | + $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers(); | |
6198 | + | |
6199 | + $('#canvas').drawText({ | |
6200 | + layer: true, | |
6201 | + draggable: true, | |
6202 | + name: 'TextArea_' + $rootScope.resetText, | |
6203 | + groups: ['TextArea_' + $rootScope.resetText], | |
6204 | + dragGroups: ['TextArea_' + $rootScope.resetText], | |
6205 | + fillStyle: $rootScope.fontColor, | |
6206 | + fontStyle: $rootScope.fontStyle, | |
6207 | + fontSize: $rootScope.fontSizes, | |
6208 | + fontFamily: $rootScope.fontFamily, | |
6209 | + align: $rootScope.textAlignmt, | |
6210 | + strokeWidth: 0, | |
6211 | + text: $rootScope.textArea, | |
6212 | + x: $scope.offsetX1, y: $scope.offsetY1, | |
6213 | + maxWidth: $scope.x - $scope.offsetX1, | |
6214 | + maxHeight: $scope.y - $scope.offsetY1, | |
6215 | + | |
6216 | + add: function (layer) { | |
6217 | + | |
6218 | + $rootScope.TextAreaStyleProp.push({ Text1: '', Align: '', FontColor: '', FontSize: '', FontStyle: '', FontFamily: '' }); | |
6219 | + $rootScope.TextAreaStyleProp.push({ Text1: layer.text, Align: layer.align, FontColor: layer.fillStyle, FontSize: layer.fontSize, FontStyle: layer.fontStyle, FontFamily: layer.fontFamily }); | |
6220 | + | |
6221 | + // $rootScope.TextAreaStyleProp.push({ Text: '', Align: '', FontColor: '', FontSize: '', FontStyle: '', FontFamily: '' }); | |
6222 | + // $rootScope.TextAreaStyleProp.push({ Text: layer.text, Align: layer.align, FontColor: layer.fillStyle, FontSize: layer.fontSize, FontStyle: layer.fontStyle, FontFamily: layer.fontFamily }); | |
6223 | + | |
6224 | + | |
6225 | + }, | |
6226 | + | |
6227 | + change: function (layer, props) { | |
6228 | + | |
6229 | + } | |
6230 | + | |
6231 | + }) | |
6232 | + // Draw rect as wide as the text | |
6233 | + .drawRect({ | |
6234 | + name: 'TextArea1_' + $rootScope.resetText, | |
6235 | + layer: true, | |
6236 | + draggable: true, | |
6237 | + groups: ['TextArea_' + $rootScope.resetText], | |
6238 | + dragGroups: ['TextArea_' + $rootScope.resetText], | |
6239 | + opacity: $rootScope.shapestyleOpacity, | |
6240 | + strokeStyle: $rootScope.shapestyleborderColor, | |
6241 | + strokeWidth: $rootScope.shapestyleborderWidth, | |
6242 | + | |
6243 | + x: $scope.offsetX1, y: $scope.offsetY1, | |
6244 | + width: $scope.x - $scope.offsetX1, | |
6245 | + height: $scope.y - $scope.offsetY1, | |
6246 | + add: function (layer) { | |
6247 | + | |
6248 | + }, | |
6249 | + click: function (layer) { | |
6250 | + $rootScope.shapeTypeText = "textAreaRect"; | |
6251 | + | |
6252 | + var layerNameSplit = layer.name; | |
6253 | + | |
6254 | + var splitedName = layerNameSplit.split("_"); | |
6255 | + | |
6256 | + var textValName = "TextArea_"; | |
6257 | + | |
6258 | + var concatinateResult = textValName.concat(splitedName[1]); | |
6259 | + | |
6260 | + $rootScope.canvasLayerNameCollection = []; | |
6261 | + $rootScope.canvasLayerNameCollection.push({ textareaRectangle: layer.name, textareaString: concatinateResult }); | |
6262 | + | |
6263 | + | |
6264 | + | |
6265 | + $('#canvas').setLayer(layer.name, { | |
6266 | + handle: { | |
6267 | + type: 'rectangle', | |
6268 | + fillStyle: '#fff', | |
6269 | + strokeStyle: '#c33', | |
6270 | + strokeWidth: 2, | |
6271 | + width: 5, height: 5, | |
6272 | + cornerRadius: 3 | |
6273 | + } | |
6274 | + }).drawLayers(); | |
6275 | + | |
6276 | + }, | |
6277 | + dblclick: function (layer) { | |
6278 | + // debugger; | |
6279 | + $rootScope.isTrue = true; | |
6280 | + | |
6281 | + var _rectLayerOnSave = layer.name; | |
6282 | + var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_"); | |
6283 | + var str1 = "TextArea_"; | |
6284 | + var res = str1.concat(_rectLayerOnSaveSplit[1]); | |
6285 | + | |
6286 | + $rootScope.modifySavedText.push({ TextName: layer.name, RectText: res}); | |
6287 | + $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y }); | |
6288 | + | |
6289 | + var _rectLayerOnSaveSplitInt; | |
6290 | + if (_rectLayerOnSaveSplit[1] >= 3) | |
6291 | + _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1] - 2); | |
6292 | + else | |
6293 | + _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1]); | |
6294 | + | |
6295 | + var b = $rootScope.TextAreaStyleProp[_rectLayerOnSaveSplitInt].Text1; | |
6296 | + $("#text_area").val(b); | |
6297 | + // alert($rootScope.TextAreaStyleProp[_rectLayerOnSaveSplitInt].FontSize); | |
6298 | + | |
6299 | + $("#text_area").css("font-size", $rootScope.TextAreaStyleProp[_rectLayerOnSaveSplitInt].FontSize); | |
6300 | + $("#text_area").css("font-weight", $rootScope.TextAreaStyleProp[_rectLayerOnSaveSplitInt].FontStyle); | |
6301 | + $("#text_area").css("font-style", $rootScope.TextAreaStyleProp[_rectLayerOnSaveSplitInt].FontStyle); | |
6302 | + $("#text_area").css("text-align", $rootScope.TextAreaStyleProp[_rectLayerOnSaveSplitInt].Align); | |
6303 | + $("#text_area").css("color", $rootScope.TextAreaStyleProp[_rectLayerOnSaveSplitInt].FontColor); | |
6304 | + $("#text_area").css("font-family", $rootScope.TextAreaStyleProp[_rectLayerOnSaveSplitInt].FontFamily); | |
6305 | + $("#text_area").css("text-decoration", $rootScope.underlineText); | |
6306 | + | |
6178 | 6307 | |
6179 | - $rootScope.fontSizes = $("#text_area").css("font-size"); | |
6180 | - $rootScope.fontWeight = $("#text_area").css("font-weight"); | |
6181 | - $rootScope.fontStyle = $("#text_area").css("font-style"); | |
6182 | - $rootScope.textAlignmt = $("#text_area").css("text-align"); | |
6183 | - $rootScope.fontColor = $("#text_area").css("color"); | |
6184 | - $rootScope.fontFamily = $("#text_area").css("font-family"); | |
6185 | - $rootScope.underlineText = $("#text_area").css("text-decoration"); | |
6186 | - $rootScope.textArea = $("#text_area").val(); | |
6187 | - $("#canvas").removeLayer('TextArea_' + $rootScope.resetText).drawLayers(); | |
6188 | - $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers(); | |
6189 | - // alert($rootScope.fontColor); | |
6190 | - $('#canvas').drawText({ | |
6191 | - layer: true, | |
6192 | - draggable: true, | |
6193 | - name: 'TextArea_' + $rootScope.resetText, | |
6194 | - groups: ['TextArea_' + $rootScope.resetText], | |
6195 | - dragGroups: ['TextArea_' + $rootScope.resetText], | |
6196 | - fillStyle: $rootScope.fontColor, | |
6197 | - fontStyle: $rootScope.fontStyle, | |
6198 | - fontSize: $rootScope.fontSizes, | |
6199 | - fontFamily: $rootScope.fontFamily, | |
6200 | - align: $rootScope.textAlignmt, | |
6201 | - strokeWidth: 0, | |
6202 | - text: $rootScope.textArea, | |
6203 | - x: $scope.offsetX1, y: $scope.offsetY1, | |
6204 | - maxWidth: $scope.x - $scope.offsetX1, | |
6205 | - maxHeight: $scope.y - $scope.offsetY1, | |
6206 | - | |
6207 | - click: function (layer) { | |
6308 | + _rectLayerOnSaveSplitInt = ''; b = ''; | |
6309 | + $("#annotationTextModal").modal("toggle"); | |
6310 | + | |
6311 | + }, | |
6312 | + mouseout: function (layer) { | |
6313 | + | |
6314 | + $rootScope.canvasLayerNameCollection = []; | |
6315 | + $('#canvas').setLayer(layer.name, { | |
6316 | + handle: { | |
6317 | + type: 'rectangle', | |
6318 | + fillStyle: 'pink', | |
6319 | + strokeStyle: 'yellow', | |
6320 | + strokeWidth: 0, | |
6321 | + width: 0, height: 0, | |
6322 | + cornerRadius: 0 | |
6323 | + } | |
6324 | + | |
6325 | + }).drawLayers(); | |
6326 | + // $rootScope.textss = ''; | |
6327 | + | |
6328 | + }, | |
6329 | + mouseover: function (layer) { | |
6330 | + | |
6331 | + $('#canvas').setLayer(layer.name, { | |
6332 | + handle: { | |
6333 | + type: 'rectangle', | |
6334 | + fillStyle: '#fff', | |
6335 | + strokeStyle: '#c33', | |
6336 | + strokeWidth: 2, | |
6337 | + width: 5, height: 5, | |
6338 | + cornerRadius: 3 | |
6339 | + } | |
6340 | + }).drawLayers(); | |
6208 | 6341 | |
6342 | + } | |
6343 | + }); | |
6344 | + $("#text_area").val(''); | |
6345 | + $("#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" }); | |
6209 | 6346 | |
6347 | + } | |
6348 | + else { | |
6349 | + // debugger; | |
6350 | + | |
6210 | 6351 | |
6211 | - }, | |
6212 | - change: function (layer, props) { | |
6352 | + var _modifiedText = $("#text_area").val(); | |
6353 | + var _modifiedFontSize = $("#text_area").css("font-size"); | |
6354 | + var _modifiedFontWeight = $("#text_area").css("font-weight"); | |
6355 | + var _modifiedFontStyle = $("#text_area").css("font-style"); | |
6356 | + var _modifiedTextAlign = $("#text_area").css("text-align"); | |
6357 | + var _modifiedFontColor = $("#text_area").css("color"); | |
6358 | + var _modifiedFontFamily = $("#text_area").css("font-family"); | |
6359 | + var _modifiedFontDecoration = $("#text_area").css("text-decoration"); | |
6360 | + | |
6361 | + $("#canvas").removeLayer($rootScope.modifySavedText[0].RectText).drawLayers(); | |
6362 | + $("#canvas").removeLayer($rootScope.modifySavedText[0].TextName).drawLayers(); | |
6363 | + | |
6364 | + $rootScope.resetTextRectSave = $rootScope.ObjectIndexSave++; | |
6365 | + $rootScope.resetTextSave = $rootScope.ObjectIndexSave++; | |
6366 | + // alert($rootScope.resetText); | |
6367 | + // alert('TextArea12_' + $rootScope.resetTextSave); | |
6368 | + $('#canvas').drawText({ | |
6369 | + layer: true, | |
6370 | + draggable: true, | |
6371 | + name: 'TextArea12_' + $rootScope.resetTextSave, | |
6372 | + groups: ['TextArea12_' + $rootScope.resetTextSave], | |
6373 | + dragGroups: ['TextArea12_' + $rootScope.resetTextSave], | |
6374 | + fillStyle: _modifiedFontColor, | |
6375 | + fontStyle: _modifiedFontStyle, | |
6376 | + fontSize: _modifiedFontSize, | |
6377 | + fontFamily: _modifiedFontFamily, | |
6378 | + align: _modifiedTextAlign, | |
6379 | + strokeWidth: 0, | |
6380 | + text: _modifiedText, | |
6381 | + x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y, | |
6382 | + maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width, | |
6383 | + maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height, | |
6384 | + | |
6385 | + add: function (layer) { | |
6213 | 6386 | |
6214 | - } | |
6387 | + | |
6215 | 6388 | |
6216 | - }) | |
6217 | - // Draw rect as wide as the text | |
6218 | - .drawRect({ | |
6219 | - name: 'TextArea1_' + $rootScope.resetText, | |
6220 | - layer: true, | |
6221 | - draggable: true, | |
6222 | - groups: ['TextArea_' + $rootScope.resetText], | |
6223 | - dragGroups: ['TextArea_' + $rootScope.resetText], | |
6224 | - opacity: $rootScope.shapestyleOpacity, | |
6225 | - // strokeStyle: 'black', | |
6226 | - // strokeWidth: 2, | |
6227 | - strokeStyle: $rootScope.shapestyleborderColor, | |
6228 | - strokeWidth: $rootScope.shapestyleborderWidth, | |
6229 | - // fillStyle: $rootScope.shapestyleFillColor, | |
6230 | - x: $scope.offsetX1, y: $scope.offsetY1, | |
6231 | - width: $scope.x - $scope.offsetX1, | |
6232 | - height: $scope.y - $scope.offsetY1, | |
6233 | - | |
6234 | - click: function (layer) { | |
6235 | - $rootScope.shapeTypeText = "textAreaRect"; | |
6236 | - | |
6237 | - var layerNameSplit = layer.name; | |
6238 | - | |
6239 | - var splitedName = layerNameSplit.split("_"); | |
6240 | - | |
6241 | - var textValName = "TextArea_"; | |
6242 | - | |
6243 | - var concatinateResult = textValName.concat(splitedName[1]); | |
6244 | - | |
6245 | - $rootScope.canvasLayerNameCollection = []; | |
6246 | - $rootScope.canvasLayerNameCollection.push({ textareaRectangle: layer.name, textareaString: concatinateResult }); | |
6247 | - | |
6248 | - | |
6249 | - | |
6250 | - $('#canvas').setLayer(layer.name, { | |
6251 | - handle: { | |
6252 | - type: 'rectangle', | |
6253 | - fillStyle: '#fff', | |
6254 | - strokeStyle: '#c33', | |
6255 | - strokeWidth: 2, | |
6256 | - width: 5, height: 5, | |
6257 | - cornerRadius: 3 | |
6258 | - } | |
6259 | - }).drawLayers(); | |
6260 | - | |
6261 | - }, | |
6262 | - dblclick: function () { | |
6263 | - $("#text_area").css("font-size", $rootScope.fontSizes); | |
6264 | - $("#text_area").css("font-weight", $rootScope.fontWeight); | |
6265 | - $("#text_area").css("font-style", $rootScope.fontStyle); | |
6266 | - $("#text_area").css("text-align", $rootScope.textAlignmt); | |
6267 | - $("#text_area").css("color", $rootScope.fontColor); | |
6268 | - $("#text_area").css("font-family", $rootScope.fontFamily); | |
6269 | - $("#text_area").css("text-decoration", $rootScope.underlineText); | |
6270 | - | |
6271 | - $("#text_area").val($rootScope.textArea); | |
6272 | - | |
6273 | - $("#annotationTextModal").modal("toggle"); | |
6274 | - | |
6275 | - }, | |
6276 | - mouseout: function (layer) { | |
6277 | - | |
6278 | - $rootScope.canvasLayerNameCollection = []; | |
6279 | - $('#canvas').setLayer(layer.name, { | |
6280 | - handle: { | |
6281 | - type: 'rectangle', | |
6282 | - fillStyle: 'pink', | |
6283 | - strokeStyle: 'yellow', | |
6284 | - strokeWidth: 0, | |
6285 | - width: 0, height: 0, | |
6286 | - cornerRadius: 0 | |
6287 | - } | |
6288 | - | |
6289 | - }).drawLayers(); | |
6290 | - | |
6291 | - }, | |
6292 | - mouseover: function (layer) { | |
6293 | - | |
6294 | - $('#canvas').setLayer(layer.name, { | |
6295 | - handle: { | |
6296 | - type: 'rectangle', | |
6297 | - fillStyle: '#fff', | |
6298 | - strokeStyle: '#c33', | |
6299 | - strokeWidth: 2, | |
6300 | - width: 5, height: 5, | |
6301 | - cornerRadius: 3 | |
6302 | - } | |
6303 | - }).drawLayers(); | |
6389 | + }, | |
6390 | + | |
6391 | + change: function (layer, props) { | |
6392 | + | |
6393 | + } | |
6394 | + | |
6395 | + }) | |
6396 | + // Draw rect as wide as the text | |
6397 | + .drawRect({ | |
6398 | + name: 'TextArea13_' + $rootScope.resetTextSave, | |
6399 | + layer: true, | |
6400 | + draggable: true, | |
6401 | + groups: ['TextArea12_' + $rootScope.resetTextSave], | |
6402 | + dragGroups: ['TextArea12_' + $rootScope.resetTextSave], | |
6403 | + opacity: $rootScope.shapestyleOpacity, | |
6404 | + strokeStyle: $rootScope.shapestyleborderColor, | |
6405 | + strokeWidth: $rootScope.shapestyleborderWidth, | |
6406 | + x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y, | |
6407 | + width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width, | |
6408 | + height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height, | |
6409 | + | |
6410 | + click: function (layer) { | |
6411 | + $rootScope.shapeTypeText = "textAreaRect"; | |
6412 | + | |
6413 | + var layerNameSplit = layer.name; | |
6414 | + | |
6415 | + var splitedName = layerNameSplit.split("_"); | |
6416 | + | |
6417 | + var textValName = "TextArea12_"; | |
6418 | + | |
6419 | + var concatinateResult = textValName.concat(splitedName[1]); | |
6420 | + | |
6421 | + $rootScope.canvasLayerNameCollection = []; | |
6422 | + $rootScope.canvasLayerNameCollection.push({ textareaRectangle: layer.name, textareaString: concatinateResult }); | |
6423 | + | |
6424 | + | |
6425 | + | |
6426 | + $('#canvas').setLayer(layer.name, { | |
6427 | + handle: { | |
6428 | + type: 'rectangle', | |
6429 | + fillStyle: '#fff', | |
6430 | + strokeStyle: '#c33', | |
6431 | + strokeWidth: 2, | |
6432 | + width: 5, height: 5, | |
6433 | + cornerRadius: 3 | |
6434 | + } | |
6435 | + }).drawLayers(); | |
6436 | + | |
6437 | + }, | |
6438 | + dblclick: function (layer) { | |
6439 | + | |
6440 | + $rootScope.isTrue = true; | |
6441 | + | |
6442 | + var _rectLayerOnSave = layer.name; | |
6443 | + var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_"); | |
6444 | + var str1 = "TextArea12_"; | |
6445 | + var res = str1.concat(_rectLayerOnSaveSplit[1]); | |
6446 | + | |
6447 | + $rootScope.modifySavedText.push({ TextName: layer.name, RectText: res }); | |
6448 | + $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y }); | |
6449 | + | |
6450 | + $("#text_area").val(_modifiedText); | |
6451 | + $("#text_area").css("font-size", _modifiedFontSize); | |
6452 | + $("#text_area").css("font-weight", _modifiedFontWeight); | |
6453 | + $("#text_area").css("font-style", _modifiedFontStyle); | |
6454 | + $("#text_area").css("text-align", _modifiedTextAlign); | |
6455 | + $("#text_area").css("color", _modifiedFontColor); | |
6456 | + $("#text_area").css("font-family", _modifiedFontFamily); | |
6457 | + $("#text_area").css("text-decoration", _modifiedFontDecoration); | |
6458 | + | |
6459 | + | |
6460 | + $("#annotationTextModal").modal("toggle"); | |
6461 | + | |
6462 | + }, | |
6463 | + mouseout: function (layer) { | |
6464 | + | |
6465 | + $rootScope.canvasLayerNameCollection = []; | |
6466 | + $('#canvas').setLayer(layer.name, { | |
6467 | + handle: { | |
6468 | + type: 'rectangle', | |
6469 | + fillStyle: 'pink', | |
6470 | + strokeStyle: 'yellow', | |
6471 | + strokeWidth: 0, | |
6472 | + width: 0, height: 0, | |
6473 | + cornerRadius: 0 | |
6474 | + } | |
6475 | + | |
6476 | + }).drawLayers(); | |
6477 | + | |
6478 | + }, | |
6479 | + mouseover: function (layer) { | |
6480 | + | |
6481 | + $('#canvas').setLayer(layer.name, { | |
6482 | + handle: { | |
6483 | + type: 'rectangle', | |
6484 | + fillStyle: '#fff', | |
6485 | + strokeStyle: '#c33', | |
6486 | + strokeWidth: 2, | |
6487 | + width: 5, height: 5, | |
6488 | + cornerRadius: 3 | |
6489 | + } | |
6490 | + }).drawLayers(); | |
6304 | 6491 | |
6305 | - } | |
6306 | - }); | |
6307 | - $("#text_area").val(''); | |
6492 | + } | |
6493 | + }); | |
6494 | + $rootScope.modifySavedText = []; | |
6308 | 6495 | |
6309 | - $("#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" }); | |
6496 | + } | |
6497 | + } | |
6310 | 6498 | |
6311 | - } | |
6499 | + $rootScope.closeModal = function () { | |
6500 | + debugger; | |
6501 | + | |
6502 | + | |
6503 | + | |
6504 | + $("#canvas").removeLayer('TextArea_' + $rootScope.resetText).drawLayers(); | |
6505 | + $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers(); | |
6506 | + | |
6312 | 6507 | |
6508 | + } | |
6313 | 6509 | |
6314 | 6510 | |
6315 | 6511 | function OnPaintCanvasMouseMove(event) { | ... | ... |
400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
... | ... | @@ -253,7 +253,8 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", |
253 | 253 | $('.btnCursor').removeClass('activebtncolor'); |
254 | 254 | $(".btn-annotation").removeClass("activebtncolor"); |
255 | 255 | $(".btn-annotation-Text").addClass("activebtncolor"); |
256 | - | |
256 | + // $("#text_area").val(''); | |
257 | + // $("#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" }); | |
257 | 258 | } |
258 | 259 | |
259 | 260 | $rootScope.DrawPolygon = function () { | ... | ... |
400-SOURCECODE/AIAHTML5.Web/index.html
... | ... | @@ -391,7 +391,7 @@ |
391 | 391 | </div> |
392 | 392 | <div class="modal-body"> |
393 | 393 | <div class="row"> |
394 | - <div class="col-sm-12"> | |
394 | + <div class="col-sm-12"> | |
395 | 395 | <h5>Mode</h5> |
396 | 396 | |
397 | 397 | <div class="btn-group btn-group-justified" role="group" aria-label="..."> |
... | ... | @@ -474,36 +474,36 @@ |
474 | 474 | <option>Arial Narrow</option> |
475 | 475 | <option>Arial Rounded</option> |
476 | 476 | <option>Arial TUR</option> |
477 | - | |
477 | + | |
478 | 478 | </select> |
479 | - <select class="form-control" id="selected-font-size"> | |
480 | - <option>14</option> | |
481 | - <option>16</option> | |
482 | - <option>18</option> | |
483 | - <option>20</option> | |
484 | - <option>22</option> | |
485 | - <option>24</option> | |
486 | - <option>26</option> | |
487 | - <option>28</option> | |
488 | - <option>36</option> | |
489 | - <option>48</option> | |
490 | - <option>72</option> | |
491 | - </select> | |
492 | - <span style="vertical-align:middle;"> | |
479 | + <select class="form-control" id="selected-font-size"> | |
480 | + <option>14</option> | |
481 | + <option>16</option> | |
482 | + <option>18</option> | |
483 | + <option>20</option> | |
484 | + <option>22</option> | |
485 | + <option>24</option> | |
486 | + <option>26</option> | |
487 | + <option>28</option> | |
488 | + <option>36</option> | |
489 | + <option>48</option> | |
490 | + <option>72</option> | |
491 | + </select> | |
492 | + <span style="vertical-align:middle;"> | |
493 | 493 | <span id="text-bold" style="background: #4B4B4B;padding:4px;cursor:pointer;margin-right:2px;"> |
494 | - <i aria-hidden="true" class="fa fa-bold" style="color: #fff"></i> | |
495 | - </span> | |
496 | - <span id="text-italic" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 2px;"> | |
497 | - <i class="fa fa-italic" aria-hidden="true" style="color: #fff"></i> | |
494 | + <i aria-hidden="true" class="fa fa-bold" style="color: #fff"></i> | |
495 | + </span> | |
496 | + <span id="text-italic" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 2px;"> | |
497 | + <i class="fa fa-italic" aria-hidden="true" style="color: #fff"></i> | |
498 | 498 | |
499 | - </span> | |
500 | - <span id="text-underline" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 5px;"> | |
501 | - <i class="fa fa-underline" aria-hidden="true" style="color: #fff"></i> | |
502 | - </span> | |
499 | + </span> | |
500 | + <span id="text-underline" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 5px;"> | |
501 | + <i class="fa fa-underline" aria-hidden="true" style="color: #fff"></i> | |
502 | + </span> | |
503 | 503 | </span> |
504 | 504 | |
505 | 505 | <div class="form-group" id="font-color" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;"> |
506 | - | |
506 | + | |
507 | 507 | <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" style="display:none;" value="#0088cc"> |
508 | 508 | </div> |
509 | 509 | |
... | ... | @@ -522,30 +522,24 @@ |
522 | 522 | |
523 | 523 | </span> |
524 | 524 | </span> |
525 | - | |
526 | 525 | |
527 | -</div> | |
526 | + | |
527 | + </div> | |
528 | 528 | </div> |
529 | 529 | <textarea class="form-control" id="text_area" rows="3" style="font-family: 'Verdana, sans-serif';font-size:14px; font-weight: normal; font-style: normal; color: #000; text-align: left; text-decoration: none;"></textarea> |
530 | 530 | </div> |
531 | 531 | <div class="modal-footer"> |
532 | - <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> | |
532 | + <button type="button" class="btn btn-default" ng-click="closeModal()" data-dismiss="modal">Close</button> | |
533 | 533 | <button type="button" id="saveBtn" class="btn btn-primary" data-dismiss="modal" ng-click="saveText()">Save</button> |
534 | 534 | </div> |
535 | 535 | </div> |
536 | 536 | </div> |
537 | 537 | </div> |
538 | 538 | |
539 | - | |
540 | - | |
541 | - | |
542 | 539 | |
543 | 540 | |
544 | 541 | |
545 | 542 | <!--List manager--> |
546 | - | |
547 | - | |
548 | - | |
549 | 543 | <!--List manager--> |
550 | 544 | <style> |
551 | 545 | #listManager { |
... | ... | @@ -657,7 +651,7 @@ |
657 | 651 | </div> |
658 | 652 | |
659 | 653 | <!--background disable div--> |
660 | - | |
654 | + | |
661 | 655 | <div id="modelbackground"></div> |
662 | 656 | |
663 | 657 | |
... | ... | @@ -683,7 +677,7 @@ |
683 | 677 | <div class="radio"> |
684 | 678 | <label> |
685 | 679 | <input type="radio" name="filloption" id="filloption1" value="filloption1"> |
686 | - <span class="">Texture</span> | |
680 | + <span class="">Texture</span> | |
687 | 681 | <img src="~/../content/images/common/annotation-tool-bar/pattern-picker.png" alt="" class="pattern-picker" data-toggle="modal" data-target="#pattern"> |
688 | 682 | </label> |
689 | 683 | </div> |
... | ... | @@ -691,15 +685,15 @@ |
691 | 685 | <label> |
692 | 686 | <input type="radio" name="filloption" id="filloption2" value="filloption2" checked style="margin-top:8px;"> |
693 | 687 | |
694 | - | |
688 | + | |
695 | 689 | <div class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;"> |
696 | - <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span> | |
690 | + <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span> | |
697 | 691 | <input type="text" class="form-control outerBackgroundColor" data-control="saturation" style="display:none;" value="#0088cc"> |
698 | 692 | </div> |
699 | 693 | |
700 | 694 | |
701 | 695 | <!--<span class="">Color</span> <img src="img/color-picker.png" alt="" class="color-picker">--> |
702 | - <!--<span class="demo2" data-control="hue" style="font-weight:normal;">Color</span>--> | |
696 | + <!--<span class="demo2" data-control="hue" style="font-weight:normal;">Color</span>--> | |
703 | 697 | <!--<img src="img/color-picker.png" alt="" class="color-picker">--> |
704 | 698 | </label> |
705 | 699 | </div> |
... | ... | @@ -740,8 +734,8 @@ |
740 | 734 | </div> |
741 | 735 | <div class="col-sm-6"> |
742 | 736 | <label class="marginTop5"> |
743 | - <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span> | |
744 | - <!--<span class="demo " data-control="hue" style="float:left;"> </span>--> | |
737 | + <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span> | |
738 | + <!--<span class="demo " data-control="hue" style="float:left;"> </span>--> | |
745 | 739 | |
746 | 740 | |
747 | 741 | <div class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;"> |
... | ... | @@ -791,7 +785,7 @@ |
791 | 785 | </div> |
792 | 786 | </div> |
793 | 787 | |
794 | - | |
788 | + | |
795 | 789 | |
796 | 790 | <script> |
797 | 791 | function mytoggle() { |
... | ... | @@ -874,17 +868,17 @@ |
874 | 868 | max: 60, |
875 | 869 | value: 10, |
876 | 870 | slide: function (event, ui) { |
877 | - | |
871 | + | |
878 | 872 | $("#amount-2").val(ui.value); |
879 | - | |
880 | - | |
873 | + | |
874 | + | |
881 | 875 | }, |
882 | 876 | stop: function (event, ui) { |
883 | 877 | |
884 | 878 | $("#paintLine").attr("data-size", ui.value); |
885 | 879 | |
886 | 880 | } |
887 | - | |
881 | + | |
888 | 882 | }); |
889 | 883 | //$("#slider-range-min-2").on("slidestart", function (event, ui) { |
890 | 884 | |
... | ... | @@ -896,7 +890,7 @@ |
896 | 890 | |
897 | 891 | //}); |
898 | 892 | // $("#slider-range-min-2").on("slidechange", function (event, ui) { alert("ssasa"); }); |
899 | - | |
893 | + | |
900 | 894 | $("#amount-2").val($("#slider-vertical-2").slider("value")); |
901 | 895 | |
902 | 896 | $(function () { |
... | ... | @@ -950,7 +944,7 @@ |
950 | 944 | theme: 'bootstrap', |
951 | 945 | change: function (hex) { |
952 | 946 | if (!hex) return; |
953 | - | |
947 | + | |
954 | 948 | $inlinehex.html(hex); |
955 | 949 | } |
956 | 950 | }); |
... | ... | @@ -1003,20 +997,20 @@ |
1003 | 997 | |
1004 | 998 | $("#selected-font-size").change(function () { |
1005 | 999 | |
1006 | - $("#text_area").css("font-size", $(this).val()+"px"); | |
1000 | + $("#text_area").css("font-size", $(this).val() + "px"); | |
1007 | 1001 | }); |
1008 | 1002 | |
1009 | 1003 | $("#selected-font-family").change(function () { |
1010 | - | |
1004 | + | |
1011 | 1005 | $("#text_area").css("font-family", $(this).val()); |
1012 | 1006 | |
1013 | 1007 | }); |
1014 | 1008 | |
1015 | - | |
1009 | + | |
1016 | 1010 | }); |
1017 | - | |
1018 | - | |
1019 | - | |
1011 | + | |
1012 | + | |
1013 | + | |
1020 | 1014 | </script> |
1021 | 1015 | |
1022 | 1016 | |
... | ... | @@ -1027,19 +1021,19 @@ |
1027 | 1021 | $("#borderWidthCanvasElement").change(function () { |
1028 | 1022 | |
1029 | 1023 | borderWidth = $(this).val(); |
1030 | - | |
1024 | + | |
1031 | 1025 | if (borderColor != null) { |
1032 | - | |
1026 | + | |
1033 | 1027 | $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + borderColor); |
1034 | 1028 | } else { |
1035 | - | |
1036 | - $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid"); | |
1029 | + | |
1030 | + $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid"); | |
1037 | 1031 | } |
1038 | 1032 | }); |
1039 | - | |
1033 | + | |
1040 | 1034 | |
1041 | 1035 | $('.borderColorCanvasPreview').each(function () { |
1042 | - | |
1036 | + | |
1043 | 1037 | $(this).minicolors({ |
1044 | 1038 | control: $(this).attr('data-control') || 'hue', |
1045 | 1039 | defaultValue: $(this).attr('data-defaultValue') || '', |
... | ... | @@ -1055,11 +1049,11 @@ |
1055 | 1049 | if (opacity) value += ', ' + opacity; |
1056 | 1050 | if (typeof console === 'object') { |
1057 | 1051 | console.log(value); |
1058 | - | |
1052 | + | |
1059 | 1053 | borderColor = value; |
1060 | 1054 | $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + borderColor); |
1061 | - | |
1062 | - | |
1055 | + | |
1056 | + | |
1063 | 1057 | } |
1064 | 1058 | }, |
1065 | 1059 | theme: 'bootstrap' |
... | ... | @@ -1087,7 +1081,7 @@ |
1087 | 1081 | if (typeof console === 'object') { |
1088 | 1082 | console.log(value); |
1089 | 1083 | $("#imgOpacity").parent().css("background-color", value); |
1090 | - | |
1084 | + | |
1091 | 1085 | } |
1092 | 1086 | }, |
1093 | 1087 | theme: 'bootstrap' |
... | ... | @@ -1133,7 +1127,7 @@ |
1133 | 1127 | slide: function (event, ui) { |
1134 | 1128 | |
1135 | 1129 | $(".marginTopBtm10 img.imgopacity").css("opacity", ui.value); |
1136 | - // $("#slider-value").html(ui.value); | |
1130 | + // $("#slider-value").html(ui.value); | |
1137 | 1131 | |
1138 | 1132 | } |
1139 | 1133 | |
... | ... | @@ -1153,5 +1147,5 @@ |
1153 | 1147 | |
1154 | 1148 | |
1155 | 1149 | |
1156 | - </body> | |
1150 | +</body> | |
1157 | 1151 | </html> |
1158 | 1152 | \ No newline at end of file | ... | ... |