ADAM / AIAHTML5

Commit bd3b8d2bc8b34522a548155d0f3f22e88a4dca41

Authored by unknown
1 parent 98e905fc

Commit changes for TextArea and Free style drawing.

Inline Side-by-side
Showing 9 changed files with 1324 additions and 437 deletions
400-SOURCECODE/AIAHTML5.Web/AIAHTML5.Web.csproj
  View file @bd3b8d2
... ... @@ -43074,6 +43074,7 @@
43074 43074 <Content Include="libs\jquery\jquery_plugin\SpeechBubble\images\bubble\topRightArrow.png" />
43075 43075 <Content Include="libs\jquery\jquery_plugin\SpeechBubble\images\other\dot.gif" />
43076 43076 <Content Include="libs\jquery\jquery_plugin\SpeechBubble\index.html" />
  43077 + <Content Include="libs\sketch.js" />
43077 43078 <Content Include="libs\videogular\vg-controls.min.js" />
43078 43079 <Content Include="libs\videogular\videogular.js" />
43079 43080 <Content Include="libs\videogular\videogular.min.js" />
... ...
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
  View file @bd3b8d2
... ... @@ -5341,6 +5341,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5341 5341  
5342 5342 $scope.$on('annotationToolEvent', function (event, data) {
5343 5343 $("#canvas").css("display", "block");
  5344 + $("#canvasPaint").css("display", "block");
  5345 +
5344 5346 $scope.doClick();
5345 5347 });
5346 5348 $scope.mousePs;
... ... @@ -5396,7 +5398,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5396 5398 $rootScope.resetPin = 0;
5397 5399 $rootScope.resetPinArc = 0;
5398 5400 $rootScope.ObjectIndex = 0;
  5401 + $rootScope.Object1Index = 0;
  5402 + $rootScope.resetText = 0;
  5403 +
5399 5404 var arrayRect = {};
  5405 +
5400 5406  
5401 5407 $scope.OnPaintCanvasMouseUp = function (event) {
5402 5408  
... ... @@ -5411,467 +5417,678 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5411 5417  
5412 5418 var canvasElement = document.getElementById("canvas");
5413 5419 var ctx = canvasElement.getContext("2d");
5414   -
5415   - switch ($rootScope.shapeType) {
  5420 + if ($rootScope.shapeType == "FreeStylePaint") {
  5421 + var canvasPaint_zIndex = $('#canvasPaint').css("z-index");
  5422 + var canvas_zIndex = $('#canvas').css("z-index");
  5423 + if (canvas_zIndex > canvasPaint_zIndex) {
  5424 + canvasPaint_zIndex = parseInt(canvas_zIndex) + 1;
5416 5425  
5417   - case "cursor":
5418   - ctx.clearRect(0, 0, 2277, 3248);
5419   - ctx.beginPath();
  5426 + }
  5427 + else {
  5428 + canvasPaint_zIndex = parseInt(canvasPaint_zIndex) + 1;
  5429 + }
  5430 + $('#canvasPaint').css("z-index", canvasPaint_zIndex);
  5431 + $('#canvasPaint').sketch({ defaultColor: "#000", defaultSize: 1 });
  5432 + }
  5433 + else {
  5434 + switch ($rootScope.shapeType) {
5420 5435  
5421   - break;
  5436 + case "cursor":
  5437 + ctx.clearRect(0, 0, 2277, 3248);
  5438 + ctx.beginPath();
5422 5439  
5423   - case "Line":
5424   -
5425   - $rootScope.resetLine = $rootScope.ObjectIndex++;
5426   - $('#canvas').addLayer({
5427   - name: 'Line_' + $rootScope.resetLine,
5428   - layer: true,
5429   - type: 'line',
5430   - draggable: true,
5431   - strokeStyle: 'black',
5432   - strokeWidth: 2,
5433   - rounded: true,
5434   - x1: $scope.offsetX1, y1: $scope.offsetY1,
5435   - x2: $scope.x, y2: $scope.y,
5436   -
5437   - click: function (layer) {
5438   - $rootScope.canvasLayerNameCollection = [];
5439   - $rootScope.canvasLayerNameCollection.push(layer.name);
5440   - $('#canvas').setLayer(layer.name, {
5441   - handle: {
5442   - type: 'arc',
5443   - fillStyle: '#fff',
5444   - strokeStyle: '#c33',
5445   - strokeWidth: 2,
5446   - radius: 3
5447   - }
5448   - }).drawLayers();
5449   -
  5440 + break;
5450 5441  
5451   - },
5452   - mouseout: function (layer) {
5453   - $rootScope.canvasLayerNameCollection = [];
5454   - $('#canvas').setLayer(layer.name, {
5455   - handle: {
5456   - type: 'arc',
5457   - fillStyle: '#fff',
5458   - strokeStyle: '#c33',
5459   - strokeWidth: 0,
5460   - radius: 0
5461   - }
  5442 + case "Line":
  5443 +
  5444 + $rootScope.resetLine = $rootScope.ObjectIndex++;
  5445 + $('#canvas').addLayer({
  5446 + name: 'Line_' + $rootScope.resetLine,
  5447 + layer: true,
  5448 + type: 'line',
  5449 + draggable: true,
  5450 + strokeStyle: 'black',
  5451 + strokeWidth: 2,
  5452 + rounded: true,
  5453 + x1: $scope.offsetX1, y1: $scope.offsetY1,
  5454 + x2: $scope.x, y2: $scope.y,
  5455 +
  5456 + click: function (layer) {
  5457 + $rootScope.canvasLayerNameCollection = [];
  5458 + $rootScope.canvasLayerNameCollection.push(layer.name);
  5459 + $('#canvas').setLayer(layer.name, {
  5460 + handle: {
  5461 + type: 'arc',
  5462 + fillStyle: '#fff',
  5463 + strokeStyle: '#c33',
  5464 + strokeWidth: 2,
  5465 + radius: 3
  5466 + }
  5467 + }).drawLayers();
  5468 +
  5469 +
  5470 + },
  5471 + mouseout: function (layer) {
  5472 + $rootScope.canvasLayerNameCollection = [];
  5473 + $('#canvas').setLayer(layer.name, {
  5474 + handle: {
  5475 + type: 'arc',
  5476 + fillStyle: '#fff',
  5477 + strokeStyle: '#c33',
  5478 + strokeWidth: 0,
  5479 + radius: 0
  5480 + }
5462 5481  
5463   - }).drawLayers();
  5482 + }).drawLayers();
5464 5483  
5465   - },
5466   - mouseover: function (layer) {
  5484 + },
  5485 + mouseover: function (layer) {
5467 5486  
5468 5487  
5469   - $('#canvas').setLayer(layer.name, {
5470   - handle: {
5471   - type: 'arc',
5472   - fillStyle: '#fff',
5473   - strokeStyle: '#c33',
5474   - strokeWidth: 2,
5475   - radius: 3
5476   - }
5477   - }).drawLayers();
  5488 + $('#canvas').setLayer(layer.name, {
  5489 + handle: {
  5490 + type: 'arc',
  5491 + fillStyle: '#fff',
  5492 + strokeStyle: '#c33',
  5493 + strokeWidth: 2,
  5494 + radius: 3
  5495 + }
  5496 + }).drawLayers();
5478 5497  
5479   - }
  5498 + }
5480 5499  
5481   - }).drawLayers();
5482   - $('.btnCursor').trigger('click');
5483   - $(".btn-annotation").removeClass("activebtncolor");
5484   - $('.btnCursor').addClass('activebtncolor');
5485   - break;
5486   -
5487   - case "Rectangle":
5488   - $rootScope.resetRect = $rootScope.ObjectIndex++;
5489   -
5490   - $('#canvas').addLayer({
5491   - layer: true,
5492   - name: 'Rect_' + $rootScope.resetRect,
5493   - fillStyle: '#fff',
5494   - type: 'rectangle',
5495   - draggable: true,
5496   - strokeStyle: 'black',
5497   - strokeWidth: 2,
5498   - x: $scope.offsetX1, y: $scope.offsetY1,
5499   - width: $scope.x - $scope.offsetX1,
5500   - height: $scope.y - $scope.offsetY1,
5501   -
5502   - resizeFromCenter: false,
5503   -
5504   -
5505   - click: function (layer) {
5506   - $rootScope.canvasLayerNameCollection = [];
5507   - $rootScope.canvasLayerNameCollection.push(layer.name);
5508   - $('#canvas').setLayer(layer.name, {
5509   - handle: {
5510   - type: 'rectangle',
5511   - fillStyle: '#fff',
5512   - strokeStyle: '#c33',
5513   - strokeWidth: 2,
5514   - width: 5, height: 5,
5515   - cornerRadius: 3
5516   - }
5517   - }).drawLayers();
  5500 + }).drawLayers();
  5501 + $('.btnCursor').trigger('click');
  5502 + $(".btn-annotation").removeClass("activebtncolor");
  5503 + $('.btnCursor').addClass('activebtncolor');
  5504 + break;
5518 5505  
5519   - },
5520   - mouseout: function (layer) {
5521   - $rootScope.canvasLayerNameCollection = [];
5522   - $('#canvas').setLayer(layer.name, {
5523   - handle: {
5524   - type: 'rectangle',
5525   - fillStyle: 'pink',
5526   - strokeStyle: 'yellow',
5527   - strokeWidth: 0,
5528   - width: 0, height: 0,
5529   - cornerRadius: 0
5530   - }
  5506 + case "Rectangle":
  5507 + $rootScope.resetRect = $rootScope.ObjectIndex++;
  5508 +
  5509 + $('#canvas').addLayer({
  5510 + layer: true,
  5511 + name: 'Rect_' + $rootScope.resetRect,
  5512 + fillStyle: '#fff',
  5513 + type: 'rectangle',
  5514 + draggable: true,
  5515 + strokeStyle: 'black',
  5516 + strokeWidth: 2,
  5517 + x: $scope.offsetX1, y: $scope.offsetY1,
  5518 + width: $scope.x - $scope.offsetX1,
  5519 + height: $scope.y - $scope.offsetY1,
  5520 +
  5521 + resizeFromCenter: false,
  5522 +
  5523 +
  5524 + click: function (layer) {
  5525 + $rootScope.canvasLayerNameCollection = [];
  5526 + $rootScope.canvasLayerNameCollection.push(layer.name);
  5527 + $('#canvas').setLayer(layer.name, {
  5528 + handle: {
  5529 + type: 'rectangle',
  5530 + fillStyle: '#fff',
  5531 + strokeStyle: '#c33',
  5532 + strokeWidth: 2,
  5533 + width: 5, height: 5,
  5534 + cornerRadius: 3
  5535 + }
  5536 + }).drawLayers();
  5537 +
  5538 + },
  5539 + mouseout: function (layer) {
  5540 + $rootScope.canvasLayerNameCollection = [];
  5541 + $('#canvas').setLayer(layer.name, {
  5542 + handle: {
  5543 + type: 'rectangle',
  5544 + fillStyle: 'pink',
  5545 + strokeStyle: 'yellow',
  5546 + strokeWidth: 0,
  5547 + width: 0, height: 0,
  5548 + cornerRadius: 0
  5549 + }
5531 5550  
5532   - }).drawLayers();
  5551 + }).drawLayers();
5533 5552  
5534   - },
5535   - mouseover: function (layer) {
  5553 + },
  5554 + mouseover: function (layer) {
5536 5555  
5537 5556  
5538   - $('#canvas').setLayer(layer.name, {
5539   - handle: {
5540   - type: 'rectangle',
5541   - fillStyle: '#fff',
5542   - strokeStyle: '#c33',
5543   - strokeWidth: 2,
5544   - width: 5, height: 5,
5545   - cornerRadius: 3
5546   - }
5547   - }).drawLayers();
  5557 + $('#canvas').setLayer(layer.name, {
  5558 + handle: {
  5559 + type: 'rectangle',
  5560 + fillStyle: '#fff',
  5561 + strokeStyle: '#c33',
  5562 + strokeWidth: 2,
  5563 + width: 5, height: 5,
  5564 + cornerRadius: 3
  5565 + }
  5566 + }).drawLayers();
5548 5567  
5549   - }
5550   - }).drawLayers();
  5568 + }
  5569 + }).drawLayers();
5551 5570  
5552 5571  
5553 5572  
5554   - $('.btnCursor').trigger('click');
5555   - $(".btn-annotation").removeClass("activebtncolor");
5556   - $('.btnCursor').addClass('activebtncolor');
  5573 + $('.btnCursor').trigger('click');
  5574 + $(".btn-annotation").removeClass("activebtncolor");
  5575 + $('.btnCursor').addClass('activebtncolor');
5557 5576  
5558   - break;
  5577 + break;
5559 5578  
5560   - case "Circle":
  5579 + case "Circle":
  5580 +
  5581 + $rootScope.resetCircle = $rootScope.ObjectIndex++;
  5582 + $('#canvas').addLayer({
  5583 + layer: true,
  5584 + name: 'Circle_' + $rootScope.resetCircle,
  5585 + type: 'ellipse',
  5586 + draggable: true,
  5587 + strokeStyle: '#000',
  5588 + strokeWidth: 2,
  5589 + fillStyle: '#FFF',
  5590 + x: $scope.offsetX1, y: $scope.offsetY1,
  5591 + width: ($scope.x - $scope.offsetX1) * 2, height: ($scope.y - $scope.offsetY1) * 2,
  5592 + // Place a handle at each side and each corner
  5593 + handlePlacement: 'both',
  5594 +
  5595 +
  5596 +
  5597 + click: function (layer) {
  5598 + $rootScope.canvasLayerNameCollection = [];
  5599 + $rootScope.canvasLayerNameCollection.push(layer.name);
  5600 + $('#canvas').setLayer(layer.name, {
  5601 + handle: {
  5602 + type: 'arc',
  5603 + fillStyle: '#fff',
  5604 + strokeStyle: '#c33',
  5605 + strokeWidth: 2,
  5606 + radius: 3
  5607 + }
  5608 + }).drawLayers();
  5609 +
  5610 + },
  5611 + mouseout: function (layer) {
  5612 + $rootScope.canvasLayerNameCollection = [];
  5613 + $('#canvas').setLayer(layer.name, {
  5614 + handle: {
  5615 + type: 'arc',
  5616 + fillStyle: '#fff',
  5617 + strokeStyle: '#c33',
  5618 + strokeWidth: 0,
  5619 + // width: 0, height: 0,
  5620 + radius: 0
  5621 + }
5561 5622  
5562   - $rootScope.resetCircle = $rootScope.ObjectIndex++;
5563   - $('#canvas').addLayer({
5564   - layer: true,
5565   - name: 'Circle_' + $rootScope.resetCircle,
5566   - type: 'ellipse',
5567   - draggable: true,
5568   - strokeStyle: '#000',
5569   - strokeWidth: 2,
5570   - fillStyle: '#FFF',
5571   - x: $scope.offsetX1, y: $scope.offsetY1,
5572   - width: ($scope.x - $scope.offsetX1) * 2, height: ($scope.y - $scope.offsetY1) * 2,
5573   - // Place a handle at each side and each corner
5574   - handlePlacement: 'both',
  5623 + }).drawLayers();
5575 5624  
  5625 + },
  5626 + mouseover: function (layer) {
5576 5627  
5577 5628  
5578   - click: function (layer) {
5579   - $rootScope.canvasLayerNameCollection = [];
5580   - $rootScope.canvasLayerNameCollection.push(layer.name);
5581   - $('#canvas').setLayer(layer.name, {
5582   - handle: {
5583   - type: 'arc',
5584   - fillStyle: '#fff',
5585   - strokeStyle: '#c33',
5586   - strokeWidth: 2,
5587   - radius: 3
5588   - }
5589   - }).drawLayers();
5590   -
5591   - },
5592   - mouseout: function (layer) {
5593   - $rootScope.canvasLayerNameCollection = [];
5594   - $('#canvas').setLayer(layer.name, {
5595   - handle: {
5596   - type: 'arc',
5597   - fillStyle: '#fff',
5598   - strokeStyle: '#c33',
5599   - strokeWidth: 0,
5600   - // width: 0, height: 0,
5601   - radius: 0
5602   - }
  5629 + $('#canvas').setLayer(layer.name, {
  5630 + handle: {
  5631 + type: 'arc',
  5632 + fillStyle: '#fff',
  5633 + strokeStyle: '#c33',
  5634 + strokeWidth: 2,
  5635 + // width: 5, height: 5,
  5636 + radius: 3
  5637 + }
  5638 + }).drawLayers();
5603 5639  
5604   - }).drawLayers();
  5640 + }
  5641 + }).drawLayers();
  5642 + $('.btnCursor').trigger('click');
  5643 + $(".btn-annotation").removeClass("activebtncolor");
  5644 + $('.btnCursor').addClass('activebtncolor');
  5645 + break;
  5646 + case "Arrow":
  5647 + $rootScope.resetArrow = $rootScope.ObjectIndex++;
  5648 +
  5649 + $('#canvas').drawLine({
  5650 + layer: true,
  5651 + name: 'Arrow_' + $rootScope.resetArrow,
  5652 + draggable: true,
  5653 + strokeStyle: '#000',
  5654 + strokeWidth: 2,
  5655 + rounded: true,
  5656 + startArrow: true,
  5657 + arrowRadius: 7,
  5658 + arrowAngle: 90,
  5659 + x1: $scope.offsetX1, y1: $scope.offsetY1,
  5660 + x2: $scope.x, y2: $scope.y,
  5661 +
  5662 + click: function (layer) {
  5663 + $rootScope.canvasLayerNameCollection = [];
  5664 + $rootScope.canvasLayerNameCollection.push(layer.name);
  5665 + $('#canvas').setLayer(layer.name, {
  5666 + handle: {
  5667 + type: 'arc',
  5668 + fillStyle: '#fff',
  5669 + strokeStyle: '#c33',
  5670 + strokeWidth: 2,
  5671 + // width: 5, height: 5,
  5672 + radius: 3
  5673 + }
  5674 + }).drawLayers();
  5675 + // $("#canvas").removeLayer(layer.name).drawLayers();
  5676 +
  5677 + },
  5678 + mouseout: function (layer) {
  5679 + $rootScope.canvasLayerNameCollection = [];
  5680 + $('#canvas').setLayer(layer.name, {
  5681 + handle: {
  5682 + type: 'arc',
  5683 + fillStyle: '#fff',
  5684 + strokeStyle: '#c33',
  5685 + strokeWidth: 0,
  5686 + // width: 0, height: 0,
  5687 + radius: 0
  5688 + }
5605 5689  
5606   - },
5607   - mouseover: function (layer) {
  5690 + }).drawLayers();
5608 5691  
  5692 + },
  5693 + mouseover: function (layer) {
5609 5694  
5610   - $('#canvas').setLayer(layer.name, {
5611   - handle: {
5612   - type: 'arc',
5613   - fillStyle: '#fff',
5614   - strokeStyle: '#c33',
5615   - strokeWidth: 2,
5616   - // width: 5, height: 5,
5617   - radius: 3
5618   - }
5619   - }).drawLayers();
5620 5695  
5621   - }
5622   - }).drawLayers();
5623   - $('.btnCursor').trigger('click');
5624   - $(".btn-annotation").removeClass("activebtncolor");
5625   - $('.btnCursor').addClass('activebtncolor');
5626   - break;
5627   - case "Arrow":
5628   - $rootScope.resetArrow = $rootScope.ObjectIndex++;
5629   -
5630   - $('#canvas').drawLine({
5631   - layer: true,
5632   - name: 'Arrow_' + $rootScope.resetArrow,
5633   - draggable: true,
5634   - strokeStyle: '#000',
5635   - strokeWidth: 2,
5636   - rounded: true,
5637   - startArrow: true,
5638   - arrowRadius: 7,
5639   - arrowAngle: 90,
5640   - x1: $scope.offsetX1, y1: $scope.offsetY1,
5641   - x2: $scope.x, y2: $scope.y,
5642   -
5643   - click: function (layer) {
5644   - $rootScope.canvasLayerNameCollection = [];
5645   - $rootScope.canvasLayerNameCollection.push(layer.name);
5646   - $('#canvas').setLayer(layer.name, {
5647   - handle: {
5648   - type: 'arc',
5649   - fillStyle: '#fff',
5650   - strokeStyle: '#c33',
5651   - strokeWidth: 2,
5652   - // width: 5, height: 5,
5653   - radius: 3
5654   - }
5655   - }).drawLayers();
5656   - // $("#canvas").removeLayer(layer.name).drawLayers();
  5696 + $('#canvas').setLayer(layer.name, {
  5697 + handle: {
  5698 + type: 'arc',
  5699 + fillStyle: '#fff',
  5700 + strokeStyle: '#c33',
  5701 + strokeWidth: 2,
  5702 + // width: 5, height: 5,
  5703 + radius: 3
  5704 + }
  5705 + }).drawLayers();
5657 5706  
5658   - },
5659   - mouseout: function (layer) {
5660   - $rootScope.canvasLayerNameCollection = [];
5661   - $('#canvas').setLayer(layer.name, {
5662   - handle: {
5663   - type: 'arc',
5664   - fillStyle: '#fff',
5665   - strokeStyle: '#c33',
5666   - strokeWidth: 0,
5667   - // width: 0, height: 0,
5668   - radius: 0
5669   - }
  5707 + }
5670 5708  
5671   - }).drawLayers();
  5709 + });
  5710 + $('.btnCursor').trigger('click');
  5711 + $(".btn-annotation").removeClass("activebtncolor");
  5712 + $('.btnCursor').addClass('activebtncolor');
5672 5713  
5673   - },
5674   - mouseover: function (layer) {
  5714 + // $scope.resetRect += 1;
  5715 + break;
  5716 + case "Pin":
  5717 +
  5718 + $rootScope.resetPin = $rootScope.ObjectIndex++;
  5719 + $rootScope.resetPinArc = $rootScope.Object1Index++;
  5720 + var radial = $('canvas').createGradient({
  5721 + x1: 50, y1: 50,
  5722 + x2: 50, y2: 50,
  5723 + r1: 10, r2: 30,
  5724 + c1: 'rgba(100, 50, 0,0)',
  5725 + c2: 'grey'
  5726 + });
  5727 + $('#canvas').drawLine({
  5728 + draggable: true,
  5729 + layer: true,
  5730 + name: "Pin_" + $rootScope.resetPin,
  5731 + groups: ["Pin_" + $rootScope.resetPin],
  5732 + dragGroups: ["Pin_" + $rootScope.resetPin],
  5733 + strokeStyle: 'black',
  5734 + strokeWidth: 2,
  5735 + x1: $scope.offsetX1, y1: $scope.offsetY1,
  5736 + x2: $scope.x, y2: $scope.y,
  5737 +
  5738 + click: function (layer) {
  5739 + // debugger;
  5740 + $rootScope.shapeTypePin = "Pin";
  5741 + $rootScope.canvasLayerNameCollection = [];
  5742 + var pinLine_layer = layer.name;
  5743 + var pinLine_layer_split = pinLine_layer.split("_");
  5744 + var pinArcName = "ArcPin_";
  5745 + var pinResult = pinArcName.concat(pinLine_layer_split[1]);
  5746 + alert(pinResult);
  5747 + // d = "ArcPin_" + pinLine_layer_split[1];
  5748 +
  5749 + $rootScope.canvasLayerNameCollection.push({pinName: layer.name ,ArcName: pinResult});
  5750 +
  5751 + $('#canvas').setLayer(layer.name, {
  5752 + handle: {
  5753 + type: 'arc',
  5754 + fillStyle: '#fff',
  5755 + strokeStyle: '#c33',
  5756 + strokeWidth: 2,
  5757 + // width: 5, height: 5,
  5758 + radius: 3
  5759 + }
  5760 + }).drawLayers();
5675 5761  
5676 5762  
5677   - $('#canvas').setLayer(layer.name, {
5678   - handle: {
5679   - type: 'arc',
5680   - fillStyle: '#fff',
5681   - strokeStyle: '#c33',
5682   - strokeWidth: 2,
5683   - // width: 5, height: 5,
5684   - radius: 3
5685   - }
5686   - }).drawLayers();
  5763 + },
  5764 + mouseout: function (layer) {
  5765 + // $rootScope.resetPinArc = "";
  5766 + // ax = "";
  5767 +
  5768 + $rootScope.canvasLayerNameCollection = [];
  5769 + $('#canvas').setLayer(layer.name, {
  5770 + handle: {
  5771 + type: 'arc',
  5772 + fillStyle: '#fff',
  5773 + strokeStyle: '#c33',
  5774 + strokeWidth: 0,
  5775 + // width: 0, height: 0,
  5776 + radius: 0
  5777 + }
5687 5778  
5688   - }
  5779 + }).drawLayers();
5689 5780  
5690   - });
5691   - $('.btnCursor').trigger('click');
5692   - $(".btn-annotation").removeClass("activebtncolor");
5693   - $('.btnCursor').addClass('activebtncolor');
5694   -
5695   - // $scope.resetRect += 1;
5696   - break;
5697   - case "Pin":
5698   -
5699   - $rootScope.resetPin = $rootScope.ObjectIndex++;
5700   - $rootScope.resetPinArc = $rootScope.ObjectIndex++;
5701   - var radial = $('canvas').createGradient({
5702   - x1: 50, y1: 50,
5703   - x2: 50, y2: 50,
5704   - r1: 10, r2: 30,
5705   - c1: 'rgba(100, 50, 0,0)',
5706   - c2: 'grey'
5707   - });
5708   - $('#canvas').drawLine({
5709   - draggable: true,
5710   - layer: true,
5711   - name: "Pin_" + $rootScope.resetPin,
5712   - groups: ['shapes'],
5713   - dragGroups: ['shapes'],
5714   - strokeStyle: 'black',
5715   - strokeWidth: 2,
5716   - x1: $scope.offsetX1, y1: $scope.offsetY1,
5717   - x2: $scope.x, y2: $scope.y,
5718   - //handle: {
5719   - // type: 'arc',
5720   - // fillStyle: '#fff',
5721   - // strokeStyle: '#c33',
5722   - // strokeWidth: 2,
5723   - // radius: 3
5724   - //},
5725   - click: function (layer) {
5726   - $rootScope.shapeType == "Pin";
5727   - alert($rootScope.shapeType);
5728   - //alert(layer.groups);
5729   - // $rootScope.canvasLayerNameCollection_pin = [];
5730   - $rootScope.canvasLayerNameCollection = [];
5731   - // $rootScope.canvasLayerNameCollection_pin.push({ a: layer.name, b: $rootScope.pinVAl });
5732   - // alert($rootScope.resetPinArc);
5733   - // alert(layer.name);
5734   - $rootScope.canvasLayerNameCollection.push({ a: layer.name }, { b: $rootScope.resetPinArc });
5735   - // alert($rootScope.canvasLayerNameCollection[0].a);
5736   - // alert($rootScope.canvasLayerNameCollection[0].b);
5737   - // alert($rootScope.canvasLayerNameCollection.b);
5738   - $('#canvas').setLayer(layer.name, {
5739   - handle: {
5740   - type: 'arc',
5741   - fillStyle: '#fff',
5742   - strokeStyle: '#c33',
5743   - strokeWidth: 2,
5744   - // width: 5, height: 5,
5745   - radius: 3
5746   - }
5747   - }).drawLayers();
5748   - // $("#canvas").removeLayer(layer.name).drawLayers();
  5781 + },
  5782 + mouseover: function (layer) {
5749 5783  
5750   - },
5751   - mouseout: function (layer) {
5752   - $rootScope.canvasLayerNameCollection = [];
5753   - $('#canvas').setLayer(layer.name, {
5754   - handle: {
5755   - type: 'arc',
5756   - fillStyle: '#fff',
5757   - strokeStyle: '#c33',
5758   - strokeWidth: 0,
5759   - // width: 0, height: 0,
5760   - radius: 0
5761   - }
5762 5784  
5763   - }).drawLayers();
  5785 + $('#canvas').setLayer(layer.name, {
  5786 + handle: {
  5787 + type: 'arc',
  5788 + fillStyle: '#fff',
  5789 + strokeStyle: '#c33',
  5790 + strokeWidth: 2,
  5791 + // width: 5, height: 5,
  5792 + radius: 3
  5793 + }
  5794 + }).drawLayers();
5764 5795  
5765   - },
5766   - mouseover: function (layer) {
  5796 + }
  5797 + }).drawArc({
  5798 + draggable: true,
  5799 + name: "ArcPin_" + $rootScope.resetPinArc,
  5800 + // name: "Pin_" + $rootScope.resetPin,
  5801 + layer: true,
  5802 + groups: ["Pin_" + $rootScope.resetPin],
  5803 + dragGroups: ["Pin_" + $rootScope.resetPin],
  5804 + strokeStyle: 'grey',
  5805 + strokeWidth: 2,
  5806 + fillStyle: radial,
  5807 + x: $scope.offsetX1, y: $scope.offsetY1,
  5808 + radius: 5,
  5809 + //handle: {
  5810 + // type: 'arc',
  5811 + // fillStyle: '#fff',
  5812 + // strokeStyle: '#c33',
  5813 + // strokeWidth: 2,
  5814 + // radius: 3
  5815 + //},
  5816 + add: function (layer) {
  5817 +
  5818 + $rootScope.resetPinArc = layer.name;
  5819 + // $scope.arr = [];
  5820 +
  5821 +
  5822 + },
  5823 +
  5824 + }).drawLayers();
  5825 + $('.btnCursor').trigger('click');
  5826 + $(".btn-annotation").removeClass("activebtncolor");
  5827 + $('.btnCursor').addClass('activebtncolor');
  5828 + break;
  5829 + case "TextArea":
  5830 +
  5831 + // Draw text
  5832 + $rootScope.resetTextRect = $rootScope.ObjectIndex++;
  5833 + $rootScope.resetText = $rootScope.ObjectIndex++;
  5834 + $('#canvas').drawText({
  5835 + layer: true,
  5836 + draggable: true,
  5837 + name: 'TextArea_' + $rootScope.resetText,
  5838 + groups: ['TextArea_' + $rootScope.resetText],
  5839 + dragGroups: ['TextArea_' + $rootScope.resetText],
  5840 + fillStyle: '#36c',
  5841 + strokeWidth: 0,
  5842 + x: $scope.offsetX1, y: $scope.offsetY1,
  5843 + fontSize: '14pt',
  5844 + align: "left",
  5845 + fontFamily: 'Verdana, sans-serif',
  5846 + text: ''
5767 5847  
5768 5848  
5769   - $('#canvas').setLayer(layer.name, {
5770   - handle: {
5771   - type: 'arc',
5772   - fillStyle: '#fff',
5773   - strokeStyle: '#c33',
5774   - strokeWidth: 2,
5775   - // width: 5, height: 5,
5776   - radius: 3
5777   - }
5778   - }).drawLayers();
5779 5849  
5780   - }
5781   - }).drawArc({
5782   - draggable: true,
5783   - name: "ArcPin_" + $rootScope.resetPin,
5784   - layer: true,
5785   - groups: ['shapes'],
5786   - dragGroups: ['shapes'],
5787   - strokeStyle: 'grey',
5788   - strokeWidth: 2,
5789   - fillStyle: radial,
5790   - x: $scope.offsetX1, y: $scope.offsetY1,
5791   - radius: 5,
5792   - //handle: {
5793   - // type: 'arc',
5794   - // fillStyle: '#fff',
5795   - // strokeStyle: '#c33',
5796   - // strokeWidth: 2,
5797   - // radius: 3
5798   - //},
5799   - add: function (layer) {
5800   - $rootScope.resetPinArc = layer.name;
5801   - // alert($rootScope.resetPinArc);
5802   - },
5803   - //click: function (layer) {
5804   -
5805   - // alert(layer.name);
5806   - // // $rootScope.canvasLayerNameCollection_pin = [];
5807   - // // $rootScope.canvasLayerNameCollection.push(layer.name);
5808   - // // $rootScope.pinVAl = layer.name;
5809   - // $rootScope.canvasLayerNameCollection = [];
5810   -
5811   - // $rootScope.canvasLayerNameCollection.push(layer.name);
5812   - // $('#canvas').setLayer(layer.name, {
5813   - // handle: {
5814   - // type: 'arc',
5815   - // fillStyle: '#fff',
5816   - // strokeStyle: '#c33',
5817   - // strokeWidth: 2,
5818   - // // width: 5, height: 5,
5819   - // radius: 3
5820   - // }
5821   - // }).drawLayers();
5822   - // // $("#canvas").removeLayer(layer.name).drawLayers();
5823   -
5824   - //},
5825   - }).drawLayers();
5826   - $('.btnCursor').trigger('click');
5827   - $(".btn-annotation").removeClass("activebtncolor");
5828   - $('.btnCursor').addClass('activebtncolor');
5829   - break;
5830   - case "TextArea":
5831   -
5832   - break;
5833   - //case "brush":
5834   - // // if ($rootScope.shapeType == "brush") {
5835   - // // alert("xxx");
5836   - // ctx.lineTo(event.pageX - ($("#canvas").offset().left), event.pageY - ($("#canvas").offset().top));
5837   - // ctx.stroke();
5838   -
5839   - // // }
5840   - // break;
5841   - case "DrawPolygon":
5842   - //alert("test");
5843   -
5844   - //ctx.beginPath();
5845   - ctx.lineTo(event.pageX - ($("#canvas").offset().left), event.pageY - ($("#canvas").offset().top));
5846   - ctx.stroke();
5847   - $('.btnCursor').trigger('click');
5848   - //$('.btnCursor').attr("background-color", "#1B92D0");
5849   - $('.btnCursor').addClass('activebtncolor');
5850   - //ctx.closePath();
5851   - // alert("test");
5852   - break;
5853   - //case "Clear":
5854   - // ctx.clearCanvas();
5855   - // alert("sdfs");
5856   - // break;
  5850 + })
  5851 + // Draw rect as wide as the text
  5852 + .drawRect({
  5853 + layer: true,
  5854 + name: "TextRect_" + $rootScope.resetTextRect,
  5855 + dragGroups: ['shapes'],
  5856 + strokeStyle: 'black',
  5857 + strokeWidth: 2,
  5858 + x: $scope.offsetX1, y: $scope.offsetY1,
  5859 + width: $scope.x - $scope.offsetX1,
  5860 + height: $scope.y - $scope.offsetY1,
  5861 + click: function (layer) {
  5862 +
  5863 + $rootScope.canvasLayerNameCollection = [];
  5864 + $rootScope.canvasLayerNameCollection.push(layer.name);
  5865 + $('#canvas').setLayer(layer.name, {
  5866 + handle: {
  5867 + type: 'rectangle',
  5868 + fillStyle: '#fff',
  5869 + strokeStyle: '#c33',
  5870 + strokeWidth: 2,
  5871 + width: 5, height: 5,
  5872 + cornerRadius: 3
  5873 + }
  5874 + }).drawLayers();
  5875 +
  5876 + },
  5877 + mouseout: function (layer) {
  5878 + $rootScope.canvasLayerNameCollection = [];
  5879 + $('#canvas').setLayer(layer.name, {
  5880 + handle: {
  5881 + type: 'rectangle',
  5882 + fillStyle: 'pink',
  5883 + strokeStyle: 'yellow',
  5884 + strokeWidth: 0,
  5885 + width: 0, height: 0,
  5886 + cornerRadius: 0
  5887 + }
  5888 +
  5889 + }).drawLayers();
  5890 +
  5891 + },
  5892 + mouseover: function (layer) {
5857 5893  
  5894 + $('#canvas').setLayer(layer.name, {
  5895 + handle: {
  5896 + type: 'rectangle',
  5897 + fillStyle: '#fff',
  5898 + strokeStyle: '#c33',
  5899 + strokeWidth: 2,
  5900 + width: 5, height: 5,
  5901 + cornerRadius: 3
  5902 + }
  5903 + }).drawLayers();
  5904 +
  5905 + }
  5906 + });
  5907 +
  5908 +
  5909 + $("#annotationTextModal").modal("toggle");
  5910 + $('.btnCursor').trigger('click');
  5911 + $(".btn-annotation").removeClass("activebtncolor");
  5912 + $('.btnCursor').addClass('activebtncolor');
  5913 + break;
  5914 +
  5915 + case "DrawPolygon":
  5916 +
  5917 + break;
  5918 +
  5919 + }
5858 5920 }
5859 5921  
  5922 + }
  5923 +
  5924 + //-- TextArea functionality of Annotation toolbar
  5925 +
  5926 + $rootScope.fontSizes;
  5927 + $rootScope.fontWeight;
  5928 + $rootScope.fontStyle;
  5929 + $rootScope.textAlignmt;
  5930 + $rootScope.fontColor;
  5931 + $rootScope.underlineText;
  5932 + $rootScope.textArea;
  5933 + $rootScope.fontFamily;
  5934 + $rootScope.saveText = function () {
  5935 +
  5936 + $rootScope.fontSizes = $("#text_area").css("font-size");
  5937 + $rootScope.fontWeight = $("#text_area").css("font-weight");
  5938 + $rootScope.fontStyle = $("#text_area").css("font-style");
  5939 + $rootScope.textAlignmt = $("#text_area").css("text-align");
  5940 + $rootScope.fontColor = $("#text_area").css("color");
  5941 + $rootScope.fontFamily = $("#text_area").css("font-family");
  5942 + $rootScope.underlineText = $("#text_area").css("text-decoration");
  5943 + $rootScope.textArea = $("#text_area").val();
  5944 + $("#canvas").removeLayer('TextArea_' + $rootScope.resetText).drawLayers();
  5945 + $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers();
  5946 +
  5947 + $('#canvas').drawText({
  5948 + layer: true,
  5949 + draggable: true,
  5950 + name:'TextArea_'+ $rootScope.resetText,
  5951 + groups: ['TextArea_' + $rootScope.resetText],
  5952 + dragGroups: ['TextArea_' + $rootScope.resetText],
  5953 + fillStyle: $rootScope.fontColor,
  5954 + fontStyle: $rootScope.fontStyle,
  5955 + fontSize: $rootScope.fontSizes,
  5956 + fontFamily: $rootScope.fontFamily,
  5957 + align: $rootScope.textAlignmt,
  5958 + strokeWidth: 0,
  5959 + text: $rootScope.textArea,
  5960 + x: $scope.offsetX1, y: $scope.offsetY1,
  5961 + maxWidth: $scope.x - $scope.offsetX1,
  5962 + maxHeight: $scope.y - $scope.offsetY1,
  5963 +
  5964 + click: function (layer) {
  5965 +
  5966 +
  5967 +
  5968 + },
  5969 + change: function (layer, props) {
  5970 +
  5971 + }
  5972 +
  5973 + })
  5974 + // Draw rect as wide as the text
  5975 + .drawRect({
  5976 + name: 'TextArea1_' + $rootScope.resetText,
  5977 + layer: true,
  5978 + draggable: true,
  5979 + groups: ['TextArea_' + $rootScope.resetText],
  5980 + dragGroups: ['TextArea_' + $rootScope.resetText],
  5981 + strokeStyle: 'black',
  5982 + strokeWidth: 2,
  5983 + x: $scope.offsetX1, y: $scope.offsetY1,
  5984 + width: $scope.x - $scope.offsetX1,
  5985 + height: $scope.y - $scope.offsetY1,
  5986 +
  5987 + click: function (layer) {
  5988 + $rootScope.shapeTypeText = "textAreaRect";
  5989 +
  5990 + var layerNameSplit = layer.name;
  5991 +
  5992 + var splitedName = layerNameSplit.split("_");
  5993 +
  5994 + var textValName = "TextArea_";
  5995 +
  5996 + var concatinateResult = textValName.concat(splitedName[1]);
  5997 +
  5998 + $rootScope.canvasLayerNameCollection = [];
  5999 + $rootScope.canvasLayerNameCollection.push({ textareaRectangle: layer.name, textareaString: concatinateResult });
  6000 +
  6001 +
  6002 +
  6003 + $('#canvas').setLayer(layer.name, {
  6004 + handle: {
  6005 + type: 'rectangle',
  6006 + fillStyle: '#fff',
  6007 + strokeStyle: '#c33',
  6008 + strokeWidth: 2,
  6009 + width: 5, height: 5,
  6010 + cornerRadius: 3
  6011 + }
  6012 + }).drawLayers();
  6013 +
  6014 + },
  6015 + mouseout: function (layer) {
  6016 +
  6017 + $rootScope.canvasLayerNameCollection = [];
  6018 + $('#canvas').setLayer(layer.name, {
  6019 + handle: {
  6020 + type: 'rectangle',
  6021 + fillStyle: 'pink',
  6022 + strokeStyle: 'yellow',
  6023 + strokeWidth: 0,
  6024 + width: 0, height: 0,
  6025 + cornerRadius: 0
  6026 + }
  6027 +
  6028 + }).drawLayers();
  6029 +
  6030 + },
  6031 + mouseover: function (layer) {
  6032 +
  6033 + $('#canvas').setLayer(layer.name, {
  6034 + handle: {
  6035 + type: 'rectangle',
  6036 + fillStyle: '#fff',
  6037 + strokeStyle: '#c33',
  6038 + strokeWidth: 2,
  6039 + width: 5, height: 5,
  6040 + cornerRadius: 3
  6041 + }
  6042 + }).drawLayers();
5860 6043  
  6044 + }
  6045 + });
  6046 + $("#text_area").val('');
  6047 +
  6048 + $("#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"});
  6049 +
5861 6050 }
5862 6051  
5863   - $(document).keydown(function (event) {
5864 6052  
5865 6053  
  6054 + function OnPaintCanvasMouseMove(event) {
  6055 +
  6056 +
  6057 + }
  6058 +
  6059 + $rootScope.FreeStylePaint = function (e) {
  6060 + // debugger;
  6061 +
  6062 + $rootScope.shapeType = "FreeStylePaint";
  6063 + canvas.addEventListener('mouseup', $scope.OnPaintCanvasMouseUp, false);
  6064 +
  6065 + }
  6066 +
  6067 + $(document).keydown(function (event) {
  6068 +
  6069 +
5866 6070 if (event.which == 46) {
  6071 + debugger;
  6072 + if ($rootScope.shapeTypePin == "Pin") {
  6073 +
5867 6074  
5868   - if ($rootScope.shapeType == "Pin") {
5869   - alert($rootScope.canvasLayerNameCollection[0].a);
5870   - alert($rootScope.canvasLayerNameCollection[1].b);
5871   - $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].a).drawLayers();
5872   - $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[1].b).drawLayers();
  6075 + $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].pinName).drawLayers();
  6076 + $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].ArcName).drawLayers();
  6077 + $rootScope.shapeTypePin = "";
  6078 +
  6079 + }
  6080 + else if ($rootScope.shapeTypeText == "textAreaRect") {
  6081 +
  6082 +
  6083 +
  6084 + $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].textareaRectangle).drawLayers();
  6085 + $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].textareaString).drawLayers();
  6086 + $rootScope.shapeTypeText = "";
  6087 +
5873 6088 }
5874 6089 else {
  6090 +
  6091 + // alert($rootScope.canvasLayerNameCollection);
5875 6092 $("#canvas").removeLayer($rootScope.canvasLayerNameCollection).drawLayers();
5876 6093 }
5877 6094  
... ... @@ -5880,10 +6097,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5880 6097  
5881 6098 });
5882 6099  
5883   - function OnPaintCanvasMouseMove(event) {
5884 6100  
5885   -
5886   - }
5887 6101  
5888 6102 //----End-----
5889 6103  
... ...
400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
  View file @bd3b8d2
... ... @@ -129,24 +129,29 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
129 129  
130 130 //----Annotation Toolbar: Jcanvas-----
131 131 $rootScope.DrawLine = function (e) {
  132 + $rootScope.switchCanvas();
132 133 $rootScope.shapeType = "Line";
133   - $("#" + e.currentTarget.id).addClass("activebtncolor");
  134 +
134 135  
135 136 $('.btnCursor').removeClass('activebtncolor');
136   - // $(".btn-annotation").removeClass("activebtncolor");
  137 + $(".btn-annotation").removeClass("activebtncolor");
  138 + $(".btn-annotation-line").addClass("activebtncolor");
137 139  
138 140  
139 141 }
140 142  
141 143  
142 144 $rootScope.DrawPin = function (e) {
  145 + $rootScope.switchCanvas();
143 146 $rootScope.shapeType = "Pin";
  147 +
144 148 $('.btnCursor').removeClass('activebtncolor');
145 149 $(".btn-annotation").removeClass("activebtncolor");
146   - $("#" + e.currentTarget.id).addClass("activebtncolor");
  150 + $(".btn-annotation-pin").addClass("activebtncolor");
147 151 }
148 152  
149 153 $rootScope.Cursor = function () {
  154 + $rootScope.switchCanvas();
150 155 $rootScope.shapeType = "cursor";
151 156  
152 157 $(".btn-annotation").removeClass("activebtncolor");
... ... @@ -155,35 +160,40 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
155 160 }
156 161  
157 162 $rootScope.DrawRectangle = function (e) {
  163 + $rootScope.switchCanvas();
158 164 $rootScope.shapeType = "Rectangle";
159 165 $('.btnCursor').removeClass('activebtncolor');
160 166 $(".btn-annotation").removeClass("activebtncolor");
161   - $("#" + e.currentTarget.id).addClass("activebtncolor");
  167 + $(".btn-annotation-rectangle").addClass("activebtncolor");
162 168 }
163 169 $rootScope.paintBrush = function () {
  170 + $rootScope.switchCanvas();
164 171 $rootScope.shapeType = "brush";
165   - //$('.btnCursor').removeClass('activebtncolor');
166   - //$(".btn-annotation").removeClass("activebtncolor");
167   - //$("#" + e.currentTarget.id).addClass("activebtncolor");
  172 +
168 173 }
169 174  
170 175 $rootScope.DrawCircle = function (e) {
  176 + $rootScope.switchCanvas();
171 177 $rootScope.shapeType = "Circle";
172 178 $('.btnCursor').removeClass('activebtncolor');
173 179 $(".btn-annotation").removeClass("activebtncolor");
174   - $("#" + e.currentTarget.id).addClass("activebtncolor");
  180 + $(".btn-annotation-circle").addClass("activebtncolor");
175 181 }
176 182  
177 183 $rootScope.DrawArrow = function (e) {
  184 + $rootScope.switchCanvas();
178 185 $rootScope.shapeType = "Arrow";
179 186 $('.btnCursor').removeClass('activebtncolor');
180 187 $(".btn-annotation").removeClass("activebtncolor");
181   - $("#" + e.currentTarget.id).addClass("activebtncolor");
  188 + $(".btn-annotation-arrow").addClass("activebtncolor");
182 189 }
183 190 $rootScope.DrawText = function () {
184   -
185   - // $("#myModal").modal("toggle");
186   - $rootScope.shapeType = "TextArea";
  191 + $rootScope.switchCanvas();
  192 +
  193 + $rootScope.shapeType = "TextArea";
  194 + $('.btnCursor').removeClass('activebtncolor');
  195 + $(".btn-annotation").removeClass("activebtncolor");
  196 + $(".btn-annotation-Text").addClass("activebtncolor");
187 197 //$('.btnCursor').removeClass('activebtncolor');
188 198 //$(".btn-annotation").removeClass("activebtncolor");
189 199 //$("#" + e.currentTarget.id).addClass("activebtncolor");
... ... @@ -191,9 +201,24 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
191 201  
192 202 $rootScope.DrawPolygon = function () {
193 203 $rootScope.shapeType = "DrawPolygon";
194   - //$('.btnCursor').removeClass('activebtncolor');
195   - //$(".btn-annotation").removeClass("activebtncolor");
196   - //$("#" + e.currentTarget.id).addClass("activebtncolor");
  204 +
  205 + }
  206 +
  207 +
  208 + $rootScope.OpacityModal = function () {
  209 +
  210 +
  211 + }
  212 + $rootScope.switchCanvas = function () {
  213 + var x = $('#canvasPaint').css("z-index");
  214 +
  215 + var y = $('#canvas').css("z-index");
  216 + if (x > y) {
  217 + y = parseInt(x) + 1;
  218 + } else {
  219 + y = parseInt(y) + 1;
  220 + }
  221 + $('#canvas').css("z-index", y);
197 222 }
198 223  
199 224 //----End-------------
... ...
400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html
  View file @bd3b8d2
... ... @@ -107,6 +107,15 @@
107 107 left: 0;
108 108 right: 0;
109 109 }
  110 +
  111 + .canvas-annotationStyle1 {
  112 + display: none;
  113 + background-color: transparent;
  114 + z-index: 12000;
  115 + position: absolute;
  116 + left: 0;
  117 + right: 0;
  118 + }
110 119 </style>
111 120 <div class=" " id="daView" ng-controller="DAController">
112 121 <div class="pos-relative leftToolBar tools pull-left">
... ... @@ -234,6 +243,7 @@
234 243 <div class="container-fluid">
235 244 <div class="row">
236 245 <div id="canvasDiv" class="col-sm-12 img-thumbnail" align="center">
  246 + <canvas id="canvasPaint" ng-click="FreeStylePaint($event)" width="2277" height="3248" class="canvas-annotationStyle1"></canvas>
237 247 <canvas id="canvas" ng-click="doClick($event)" width="2277" height="3248" class="canvas-annotationStyle"></canvas>
238 248 </div>
239 249 <!--<div id="canvasDiv" style=" width: 95% !important;top:0px;overflow:scroll;background-color:white;">-->
... ...
400-SOURCECODE/AIAHTML5.Web/index.html
  View file @bd3b8d2
... ... @@ -34,6 +34,7 @@
34 34 <link href="libs/jquery/jquery_plugin/jsPanel/jspanel/jquery.jspanel.css" rel="stylesheet" />
35 35 <link href="libs/jquery/jquery_plugin/SpeechBubble/css/bubble.css" rel="stylesheet" />
36 36 <link href="libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.css" rel="stylesheet" />
  37 + <link href="themes/default/css/bootstrap/3.3.6/jquery.minicolors.css" rel="stylesheet" />
37 38  
38 39 <!--Annotation Toolbar: Jcanvas-->
39 40 <style>
... ... @@ -407,25 +408,25 @@
407 408 <div class="" role="" aria-label="...">
408 409 <div class="" role="group" align="center">
409 410 <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btnCursor" data-toggle="tooltip" data-placement="top" title="Select Shapes(S)" ng-click="Cursor()"><img src="content/images/icon-identity.png" alt="" title=""></button>
410   - <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btn-annotation" data-toggle="tooltip" data-placement="top" title="Draw Pin" ng-click="DrawPin($event)"><img src="content/images/draw-pin.png" alt="" title=""></button>
411   - <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btn-annotation" data-toggle="tooltip" data-placement="top" title="Draw Arrow" ng-click="DrawArrow($event)"><img src="content/images/draw-arrow.png" alt="" title=""></button>
412   - <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btn-annotation" data-toggle="tooltip" data-placement="top" title="Draw Text" ng-click="DrawText($event)"><img src="content/images/draw-text.png" alt="" title=""></button>
  411 + <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btn-annotation btn-annotation-pin" data-toggle="tooltip" data-placement="top" title="Draw Pin" ng-click="DrawPin($event)"><img src="content/images/draw-pin.png" alt="" title=""></button>
  412 + <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btn-annotation btn-annotation-arrow" data-toggle="tooltip" data-placement="top" title="Draw Arrow" ng-click="DrawArrow($event)"><img src="content/images/draw-arrow.png" alt="" title=""></button>
  413 + <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btn-annotation btn-annotation-Text" data-toggle="tooltip" data-placement="top" title="Draw Text" ng-click="DrawText($event)"><img src="content/images/draw-text.png" alt="" title=""></button>
413 414 </div>
414 415 <div class="" role="group" align="center">
415   - <button type="button" class="btn btn-black-annotation btn-xs btn-annotation" data-toggle="tooltip" data-placement="top" title="Draw Line" ng-click="DrawLine($event)"><img src="content/images/draw-line.png" alt="" title=""></button>
416   - <button type="button" class="btn btn-black-annotation btn-xs btn-annotation" data-toggle="tooltip" data-placement="top" title="Draw Rectangle" ng-click="DrawRectangle($event)"><img src="content/images/draw-rec.png" alt="" title=""></button>
417   - <button type="button" class="btn btn-black-annotation btn-xs btn-annotation" data-toggle="tooltip" data-placement="top" title="Draw Circle" ng-click="DrawCircle($event)"><img src="content/images/draw-cir.png" alt="" title=""></button>
  416 + <button type="button" class="btn btn-black-annotation btn-xs btn-annotation btn-annotation-line" data-toggle="tooltip" data-placement="top" title="Draw Line" ng-click="DrawLine($event)"><img src="content/images/draw-line.png" alt="" title=""></button>
  417 + <button type="button" class="btn btn-black-annotation btn-xs btn-annotation btn-annotation-rectangle" data-toggle="tooltip" data-placement="top" title="Draw Rectangle" ng-click="DrawRectangle($event)"><img src="content/images/draw-rec.png" alt="" title=""></button>
  418 + <button type="button" class="btn btn-black-annotation btn-xs btn-annotation btn-annotation-circle" data-toggle="tooltip" data-placement="top" title="Draw Circle" ng-click="DrawCircle($event)"><img src="content/images/draw-cir.png" alt="" title=""></button>
418 419 <button type="button" class="btn btn-black-annotation btn-xs btn-annotation" data-toggle="tooltip" data-placement="top" title="Draw Polygon" ng-click="DrawPolygon($event)"><img src="content/images/draw-poly.png" alt="" title=""></button>
419 420 </div>
420 421 </div>
421 422 </div>
422 423 <div class="well-popup well">
423   - <img src="content/images/blank-shape.jpg" alt="..." class="img-rounded img-responsive">
  424 + <img src="content/images/blank-shape.jpg" alt="..." class="img-rounded img-responsive"/>
424 425 </div>
425 426 <div class="well well-popup">
426 427 <div class="" role="group" aria-label="...">
427 428 <div>
428   - <button type="button" class="btn btn-primary btn-xs pull-left btn-annotation" data-toggle="tooltip" data-placement="top" title="Paint" style="margin-right:1%;"><i class="fa fa-paint-brush"></i></button>
  429 + <button type="button" class="btn btn-primary btn-xs pull-left btn-annotation" data-toggle="tooltip" data-placement="top" title="Paint" style="margin-right:1%;" ng-click="FreeStylePaint()"><i class="fa fa-paint-brush"></i></button>
429 430 <button type="button" class="btn btn-primary btn-xs pull-left btn-annotation" data-toggle="tooltip" data-placement="top" title="Erase" ng-click="EraseDrawing()"><i class="fa fa-eraser"></i></button>&nbsp;
430 431 <div class="marginL2 pull-left"><input type="number" id="amount-2" value="25" step="1" style="width:60px;"></div>&nbsp;
431 432 <div class="pull-left" style="width:45%; margin-left:2%;">
... ... @@ -448,6 +449,102 @@
448 449 </div>
449 450 </div>
450 451  
  452 + <!--Modal For Annotation Text Box-->
  453 + <div class="modal fade" id="annotationTextModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="z-index: 1200000!important;">
  454 + <div class="modal-dialog" role="document">
  455 + <div class="modal-content">
  456 + <div class="modal-header" style="background-color: #808D43;padding:10px;border-bottom:0;">
  457 + <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
  458 + <h4 class="modal-title" id="myModalLabel" style="font-weight:bold;">Enter Text to be put in a box</h4>
  459 + </div>
  460 + <div class="modal-body">
  461 + <div class="col-xs-12" style="padding:20px 0;">
  462 + <div class="form-inline">
  463 + <select class="form-control" id="selected-font-family">
  464 + <option>Arial</option>
  465 + <option>Agency FB</option>
  466 + <option>Algerian</option>
  467 + <option>Arabic Trans</option>
  468 + <option>Arial Baltic</option>
  469 + <option>Arial Black</option>
  470 + <option>Arial CE</option>
  471 + <option>Arial CYR</option>
  472 + <option>Arial Greek</option>
  473 + <option>Arial Narrow</option>
  474 + <option>Arial Rounded</option>
  475 + <option>Arial TUR</option>
  476 +
  477 + </select>
  478 + <select class="form-control" id="selected-font-size">
  479 + <option>14</option>
  480 + <option>16</option>
  481 + <option>18</option>
  482 + <option>20</option>
  483 + <option>22</option>
  484 + <option>24</option>
  485 + <option>26</option>
  486 + <option>28</option>
  487 + <option>36</option>
  488 + <option>48</option>
  489 + <option>72</option>
  490 + </select>
  491 + <span style="vertical-align:middle;">
  492 + <span id="text-bold" style="background: #4B4B4B;padding:4px;cursor:pointer;margin-right:2px;">
  493 + <i aria-hidden="true" class="fa fa-bold" style="color: #fff"></i>
  494 + </span>
  495 + <span id="text-italic" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 2px;">
  496 + <i class="fa fa-italic" aria-hidden="true" style="color: #fff"></i>
  497 +
  498 + </span>
  499 + <span id="text-underline" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 5px;">
  500 + <i class="fa fa-underline" aria-hidden="true" style="color: #fff"></i>
  501 + </span>
  502 + </span>
  503 +
  504 + <div class="form-group" id="font-color" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
  505 +
  506 + <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" style="display:none;" value="#0088cc">
  507 + </div>
  508 +
  509 + <span style="vertical-align:middle;">
  510 + <span id="text-left" style="background: #4B4B4B;padding:4px;cursor:pointer;margin-right:2px;">
  511 + <i aria-hidden="true" class="fa fa-align-left" style="color: #fff"></i>
  512 + </span>
  513 + <span id="text-center" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 2px;">
  514 + <i class="fa fa-align-center" aria-hidden="true" style="color: #fff"></i>
  515 +
  516 +
  517 + </span>
  518 + <span id="text-right" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 5px;">
  519 + <i class="fa fa-align-right" aria-hidden="true" style="color: #fff"></i>
  520 +
  521 +
  522 + </span>
  523 + </span>
  524 +
  525 +
  526 +</div>
  527 + </div>
  528 + <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>
  529 + </div>
  530 + <div class="modal-footer">
  531 + <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  532 + <button type="button" id="saveBtn" class="btn btn-primary" data-dismiss="modal" ng-click="saveText()">Save</button>
  533 + </div>
  534 + </div>
  535 + </div>
  536 + </div>
  537 +
  538 +
  539 +
  540 +
  541 +
  542 +
  543 +
  544 + <!--List manager-->
  545 +
  546 +
  547 +
451 548 <!--List manager-->
452 549 <style>
453 550 #listManager {
... ... @@ -557,6 +654,11 @@
557 654 <button data-dismiss="modal" class="btn btn-primary" type="button"><i class="fa fa-arrow-circle-right"></i></button>
558 655 </div>
559 656 </div>
  657 +
  658 +
  659 +
  660 +
  661 +
560 662 <script>
561 663 function mytoggle() {
562 664 var div = document.getElementById("divSection");
... ... @@ -570,8 +672,8 @@
570 672  
571 673  
572 674  
573   -
574   -
  675 +
  676 +
575 677  
576 678  
577 679 <script>
... ... @@ -628,8 +730,13 @@
628 730 <script src="app/controllers/LinkController.js"></script>
629 731 <script src="app/services/DataService.js"></script>
630 732 <script src="libs/jquery/jquery_plugin/jqueryui.js"></script>
631   -
632   -
  733 + <script src="libs/colorpicker/jquery.minicolors.min.js"></script>
  734 + <script src="libs/sketch.js"></script>
  735 + <!--<script type="text/javascript">
  736 + $(function () {
  737 + $('#canvas').sketch();
  738 + });
  739 + </script>-->
633 740 <script>
634 741 $(function () {
635 742 $("#slider-range-min-2").slider({
... ... @@ -665,5 +772,103 @@
665 772 $(".annotationTollbar").draggable();
666 773 });
667 774 </script>
668   -</body>
  775 +
  776 + <script type="text/javascript">
  777 + $(function () {
  778 + var colpick = $('.demo').each(function () {
  779 + $(this).minicolors({
  780 + control: $(this).attr('data-control') || 'hue',
  781 + inline: $(this).attr('data-inline') === 'true',
  782 + letterCase: 'lowercase',
  783 + opacity: false,
  784 + change: function (hex, opacity) {
  785 + if (!hex) return;
  786 + if (opacity) hex += ', ' + opacity;
  787 + try {
  788 + console.log(hex);
  789 + $("#text_area").css("color", hex);
  790 + } catch (e) { }
  791 + $(this).select();
  792 + },
  793 + theme: 'bootstrap'
  794 + });
  795 + });
  796 +
  797 + var $inlinehex = $('#inlinecolorhex h3 small');
  798 + //alert($inlinehex);
  799 + $('#inlinecolors').minicolors({
  800 + inline: true,
  801 + theme: 'bootstrap',
  802 + change: function (hex) {
  803 + if (!hex) return;
  804 +
  805 + $inlinehex.html(hex);
  806 + }
  807 + });
  808 + });
  809 + </script>
  810 +
  811 +
  812 + <script type="text/javascript">
  813 + $(function () {
  814 +
  815 + $("#text-left").on('click', function () {
  816 +
  817 + $("#text_area").css("text-align", "left");
  818 +
  819 + });
  820 +
  821 +
  822 + $("#text-center").on('click', function () {
  823 +
  824 + $("#text_area").css("text-align", "center");
  825 +
  826 + });
  827 +
  828 +
  829 + $("#text-right").on('click', function () {
  830 +
  831 + $("#text_area").css("text-align", "right");
  832 +
  833 + });
  834 +
  835 +
  836 + $("#text-bold").on('click', function () {
  837 +
  838 + $("#text_area").css("font-weight", "bold");
  839 +
  840 + });
  841 +
  842 + $("#text-italic").on('click', function () {
  843 +
  844 + $("#text_area").css("font-style", "italic");
  845 +
  846 + });
  847 +
  848 + $("#text-underline").on('click', function () {
  849 +
  850 + $("#text_area").css("text-decoration", "underline");
  851 +
  852 + });
  853 +
  854 +
  855 + $("#selected-font-size").change(function () {
  856 +
  857 + $("#text_area").css("font-size", $(this).val()+"px");
  858 + });
  859 +
  860 + $("#selected-font-family").change(function () {
  861 +
  862 + $("#text_area").css("font-family", $(this).val());
  863 +
  864 + });
  865 +
  866 +
  867 + });
  868 +
  869 +
  870 +
  871 + </script>
  872 +
  873 + </body>
669 874 </html>
670 875 \ No newline at end of file
... ...
400-SOURCECODE/AIAHTML5.Web/libs/colorpicker/jquery.minicolors.min.js 0 → 100644
  View file @bd3b8d2
  1 +/*
  2 + * jQuery MiniColors: A tiny color picker built on jQuery
  3 + *
  4 + * Copyright Cory LaViska for A Beautiful Site, LLC. (http://www.abeautifulsite.net/)
  5 + *
  6 + * Licensed under the MIT license: http://opensource.org/licenses/MIT
  7 + *
  8 + */jQuery&&function(e){function t(t,n){var r=e('<div class="minicolors" />'),i=e.minicolors.defaults;if(t.data("minicolors-initialized"))return;n=e.extend(!0,{},i,n);r.addClass("minicolors-theme-"+n.theme).toggleClass("minicolors-with-opacity",n.opacity);n.position!==undefined&&e.each(n.position.split(" "),function(){r.addClass("minicolors-position-"+this)});t.addClass("minicolors-input").data("minicolors-initialized",!1).data("minicolors-settings",n).prop("size",7).wrap(r).after('<div class="minicolors-panel minicolors-slider-'+n.control+'">'+'<div class="minicolors-slider">'+'<div class="minicolors-picker"></div>'+"</div>"+'<div class="minicolors-opacity-slider">'+'<div class="minicolors-picker"></div>'+"</div>"+'<div class="minicolors-grid">'+'<div class="minicolors-grid-inner"></div>'+'<div class="minicolors-picker"><div></div></div>'+"</div>"+"</div>");if(!n.inline){t.after('<span class="minicolors-swatch"><span class="minicolors-swatch-color"></span></span>');t.next(".minicolors-swatch").on("click",function(e){e.preventDefault();t.focus()})}t.parent().find(".minicolors-panel").on("selectstart",function(){return!1}).end();n.inline&&t.parent().addClass("minicolors-inline");u(t,!1);t.data("minicolors-initialized",!0)}function n(e){var t=e.parent();e.removeData("minicolors-initialized").removeData("minicolors-settings").removeProp("size").removeClass("minicolors-input");t.before(e).remove()}function r(e){var t=e.parent(),n=t.find(".minicolors-panel"),r=e.data("minicolors-settings");if(!e.data("minicolors-initialized")||e.prop("disabled")||t.hasClass("minicolors-inline")||t.hasClass("minicolors-focus"))return;i();t.addClass("minicolors-focus");n.stop(!0,!0).fadeIn(r.showSpeed,function(){r.show&&r.show.call(e.get(0))})}function i(){e(".minicolors-input").each(function(){var t=e(this),n=t.data("minicolors-settings"),r=t.parent();if(n.inline)return;r.find(".minicolors-panel").fadeOut(n.hideSpeed,function(){r.hasClass("minicolors-focus")&&n.hide&&n.hide.call(t.get(0));r.removeClass("minicolors-focus")})})}function s(e,t,n){var r=e.parents(".minicolors").find(".minicolors-input"),i=r.data("minicolors-settings"),s=e.find("[class$=-picker]"),u=e.offset().left,a=e.offset().top,f=Math.round(t.pageX-u),l=Math.round(t.pageY-a),c=n?i.animationSpeed:0,h,p,d,v;if(t.originalEvent.changedTouches){f=t.originalEvent.changedTouches[0].pageX-u;l=t.originalEvent.changedTouches[0].pageY-a}f<0&&(f=0);l<0&&(l=0);f>e.width()&&(f=e.width());l>e.height()&&(l=e.height());if(e.parent().is(".minicolors-slider-wheel")&&s.parent().is(".minicolors-grid")){h=75-f;p=75-l;d=Math.sqrt(h*h+p*p);v=Math.atan2(p,h);v<0&&(v+=Math.PI*2);if(d>75){d=75;f=75-75*Math.cos(v);l=75-75*Math.sin(v)}f=Math.round(f);l=Math.round(l)}e.is(".minicolors-grid")?s.stop(!0).animate({top:l+"px",left:f+"px"},c,i.animationEasing,function(){o(r,e)}):s.stop(!0).animate({top:l+"px"},c,i.animationEasing,function(){o(r,e)})}function o(e,t){function n(e,t){var n,r;if(!e.length||!t)return null;n=e.offset().left;r=e.offset().top;return{x:n-t.offset().left+e.outerWidth()/2,y:r-t.offset().top+e.outerHeight()/2}}var r,i,s,o,u,f,l,h=e.val(),d=e.attr("data-opacity"),v=e.parent(),g=e.data("minicolors-settings"),y=v.find(".minicolors-swatch"),b=v.find(".minicolors-grid"),w=v.find(".minicolors-slider"),E=v.find(".minicolors-opacity-slider"),S=b.find("[class$=-picker]"),x=w.find("[class$=-picker]"),T=E.find("[class$=-picker]"),N=n(S,b),C=n(x,w),k=n(T,E);if(t.is(".minicolors-grid, .minicolors-slider")){switch(g.control){case"wheel":o=b.width()/2-N.x;u=b.height()/2-N.y;f=Math.sqrt(o*o+u*u);l=Math.atan2(u,o);l<0&&(l+=Math.PI*2);if(f>75){f=75;N.x=69-75*Math.cos(l);N.y=69-75*Math.sin(l)}i=p(f/.75,0,100);r=p(l*180/Math.PI,0,360);s=p(100-Math.floor(C.y*(100/w.height())),0,100);h=m({h:r,s:i,b:s});w.css("backgroundColor",m({h:r,s:i,b:100}));break;case"saturation":r=p(parseInt(N.x*(360/b.width()),10),0,360);i=p(100-Math.floor(C.y*(100/w.height())),0,100);s=p(100-Math.floor(N.y*(100/b.height())),0,100);h=m({h:r,s:i,b:s});w.css("backgroundColor",m({h:r,s:100,b:s}));v.find(".minicolors-grid-inner").css("opacity",i/100);break;case"brightness":r=p(parseInt(N.x*(360/b.width()),10),0,360);i=p(100-Math.floor(N.y*(100/b.height())),0,100);s=p(100-Math.floor(C.y*(100/w.height())),0,100);h=m({h:r,s:i,b:s});w.css("backgroundColor",m({h:r,s:i,b:100}));v.find(".minicolors-grid-inner").css("opacity",1-s/100);break;default:r=p(360-parseInt(C.y*(360/w.height()),10),0,360);i=p(Math.floor(N.x*(100/b.width())),0,100);s=p(100-Math.floor(N.y*(100/b.height())),0,100);h=m({h:r,s:i,b:s});b.css("backgroundColor",m({h:r,s:100,b:100}))}e.val(c(h,g.letterCase))}if(t.is(".minicolors-opacity-slider")){g.opacity?d=parseFloat(1-k.y/E.height()).toFixed(2):d=1;g.opacity&&e.attr("data-opacity",d)}y.find("SPAN").css({backgroundColor:h,opacity:d});a(e,h,d)}function u(e,t){var n,r,i,s,o,u,f,l=e.parent(),d=e.data("minicolors-settings"),v=l.find(".minicolors-swatch"),y=l.find(".minicolors-grid"),b=l.find(".minicolors-slider"),w=l.find(".minicolors-opacity-slider"),E=y.find("[class$=-picker]"),S=b.find("[class$=-picker]"),x=w.find("[class$=-picker]");n=c(h(e.val(),!0),d.letterCase);n||(n=c(h(d.defaultValue,!0),d.letterCase));r=g(n);t||e.val(n);if(d.opacity){i=e.attr("data-opacity")===""?1:p(parseFloat(e.attr("data-opacity")).toFixed(2),0,1);isNaN(i)&&(i=1);e.attr("data-opacity",i);v.find("SPAN").css("opacity",i);o=p(w.height()-w.height()*i,0,w.height());x.css("top",o+"px")}v.find("SPAN").css("backgroundColor",n);switch(d.control){case"wheel":u=p(Math.ceil(r.s*.75),0,y.height()/2);f=r.h*Math.PI/180;s=p(75-Math.cos(f)*u,0,y.width());o=p(75-Math.sin(f)*u,0,y.height());E.css({top:o+"px",left:s+"px"});o=150-r.b/(100/y.height());n===""&&(o=0);S.css("top",o+"px");b.css("backgroundColor",m({h:r.h,s:r.s,b:100}));break;case"saturation":s=p(5*r.h/12,0,150);o=p(y.height()-Math.ceil(r.b/(100/y.height())),0,y.height());E.css({top:o+"px",left:s+"px"});o=p(b.height()-r.s*(b.height()/100),0,b.height());S.css("top",o+"px");b.css("backgroundColor",m({h:r.h,s:100,b:r.b}));l.find(".minicolors-grid-inner").css("opacity",r.s/100);break;case"brightness":s=p(5*r.h/12,0,150);o=p(y.height()-Math.ceil(r.s/(100/y.height())),0,y.height());E.css({top:o+"px",left:s+"px"});o=p(b.height()-r.b*(b.height()/100),0,b.height());S.css("top",o+"px");b.css("backgroundColor",m({h:r.h,s:r.s,b:100}));l.find(".minicolors-grid-inner").css("opacity",1-r.b/100);break;default:s=p(Math.ceil(r.s/(100/y.width())),0,y.width());o=p(y.height()-Math.ceil(r.b/(100/y.height())),0,y.height());E.css({top:o+"px",left:s+"px"});o=p(b.height()-r.h/(360/b.height()),0,b.height());S.css("top",o+"px");y.css("backgroundColor",m({h:r.h,s:100,b:100}))}e.data("minicolors-initialized")&&a(e,n,i)}function a(e,t,n){var r=e.data("minicolors-settings"),i=e.data("minicolors-lastChange");if(!i||i.hex!==t||i.opacity!==n){e.data("minicolors-lastChange",{hex:t,opacity:n});if(r.change)if(r.changeDelay){clearTimeout(e.data("minicolors-changeTimeout"));e.data("minicolors-changeTimeout",setTimeout(function(){r.change.call(e.get(0),t,n)},r.changeDelay))}else r.change.call(e.get(0),t,n);e.trigger("change").trigger("input")}}function f(t){var n=h(e(t).val(),!0),r=b(n),i=e(t).attr("data-opacity");if(!r)return null;i!==undefined&&e.extend(r,{a:parseFloat(i)});return r}function l(t,n){var r=h(e(t).val(),!0),i=b(r),s=e(t).attr("data-opacity");if(!i)return null;s===undefined&&(s=1);return n?"rgba("+i.r+", "+i.g+", "+i.b+", "+parseFloat(s)+")":"rgb("+i.r+", "+i.g+", "+i.b+")"}function c(e,t){return t==="uppercase"?e.toUpperCase():e.toLowerCase()}function h(e,t){e=e.replace(/[^A-F0-9]/ig,"");if(e.length!==3&&e.length!==6)return"";e.length===3&&t&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]);return"#"+e}function p(e,t,n){e<t&&(e=t);e>n&&(e=n);return e}function d(e){var t={},n=Math.round(e.h),r=Math.round(e.s*255/100),i=Math.round(e.b*255/100);if(r===0)t.r=t.g=t.b=i;else{var s=i,o=(255-r)*i/255,u=(s-o)*(n%60)/60;n===360&&(n=0);if(n<60){t.r=s;t.b=o;t.g=o+u}else if(n<120){t.g=s;t.b=o;t.r=s-u}else if(n<180){t.g=s;t.r=o;t.b=o+u}else if(n<240){t.b=s;t.r=o;t.g=s-u}else if(n<300){t.b=s;t.g=o;t.r=o+u}else if(n<360){t.r=s;t.g=o;t.b=s-u}else{t.r=0;t.g=0;t.b=0}}return{r:Math.round(t.r),g:Math.round(t.g),b:Math.round(t.b)}}function v(t){var n=[t.r.toString(16),t.g.toString(16),t.b.toString(16)];e.each(n,function(e,t){t.length===1&&(n[e]="0"+t)});return"#"+n.join("")}function m(e){return v(d(e))}function g(e){var t=y(b(e));t.s===0&&(t.h=360);return t}function y(e){var t={h:0,s:0,b:0},n=Math.min(e.r,e.g,e.b),r=Math.max(e.r,e.g,e.b),i=r-n;t.b=r;t.s=r!==0?255*i/r:0;t.s!==0?e.r===r?t.h=(e.g-e.b)/i:e.g===r?t.h=2+(e.b-e.r)/i:t.h=4+(e.r-e.g)/i:t.h=-1;t.h*=60;t.h<0&&(t.h+=360);t.s*=100/255;t.b*=100/255;return t}function b(e){e=parseInt(e.indexOf("#")>-1?e.substring(1):e,16);return{r:e>>16,g:(e&65280)>>8,b:e&255}}e.minicolors={defaults:{animationSpeed:50,animationEasing:"swing",change:null,changeDelay:0,control:"hue",defaultValue:"",hide:null,hideSpeed:100,inline:!1,letterCase:"lowercase",opacity:!1,position:"bottom left",show:null,showSpeed:100,theme:"default"}};e.extend(e.fn,{minicolors:function(s,o){switch(s){case"destroy":e(this).each(function(){n(e(this))});return e(this);case"hide":i();return e(this);case"opacity":if(o===undefined)return e(this).attr("data-opacity");e(this).each(function(){u(e(this).attr("data-opacity",o))});return e(this);case"rgbObject":return f(e(this),s==="rgbaObject");case"rgbString":case"rgbaString":return l(e(this),s==="rgbaString");case"settings":if(o===undefined)return e(this).data("minicolors-settings");e(this).each(function(){var t=e(this).data("minicolors-settings")||{};n(e(this));e(this).minicolors(e.extend(!0,t,o))});return e(this);case"show":r(e(this).eq(0));return e(this);case"value":if(o===undefined)return e(this).val();e(this).each(function(){u(e(this).val(o))});return e(this);default:s!=="create"&&(o=s);e(this).each(function(){t(e(this),o)});return e(this)}}});e(document).on("mousedown.minicolors touchstart.minicolors",function(t){e(t.target).parents().add(t.target).hasClass("minicolors")||i()}).on("mousedown.minicolors touchstart.minicolors",".minicolors-grid, .minicolors-slider, .minicolors-opacity-slider",function(t){var n=e(this);t.preventDefault();e(document).data("minicolors-target",n);s(n,t,!0)}).on("mousemove.minicolors touchmove.minicolors",function(t){var n=e(document).data("minicolors-target");n&&s(n,t)}).on("mouseup.minicolors touchend.minicolors",function(){e(this).removeData("minicolors-target")}).on("mousedown.minicolors touchstart.minicolors",".minicolors-swatch",function(t){var n=e(this).parent().find(".minicolors-input");t.preventDefault();r(n)}).on("focus.minicolors",".minicolors-input",function(){var t=e(this);if(!t.data("minicolors-initialized"))return;r(t)}).on("blur.minicolors",".minicolors-input",function(){var t=e(this),n=t.data("minicolors-settings");if(!t.data("minicolors-initialized"))return;t.val(h(t.val(),!0));t.val()===""&&t.val(h(n.defaultValue,!0));t.val(c(t.val(),n.letterCase))}).on("keydown.minicolors",".minicolors-input",function(t){var n=e(this);if(!n.data("minicolors-initialized"))return;switch(t.keyCode){case 9:i();break;case 13:case 27:i();n.blur()}}).on("keyup.minicolors",".minicolors-input",function(){var t=e(this);if(!t.data("minicolors-initialized"))return;u(t,!0)}).on("paste.minicolors",".minicolors-input",function(){var t=e(this);if(!t.data("minicolors-initialized"))return;setTimeout(function(){u(t,!0)},1)})}(jQuery);
0 9 \ No newline at end of file
... ...
400-SOURCECODE/AIAHTML5.Web/libs/sketch.js 0 → 100644
  View file @bd3b8d2
  1 +var __slice = Array.prototype.slice;
  2 +(function($) {
  3 + var Sketch;
  4 + $.fn.sketch = function() {
  5 + var args, key, sketch;
  6 + key = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
  7 + if (this.length > 1) {
  8 + $.error('Sketch.js can only be called on one element at a time.');
  9 + }
  10 + sketch = this.data('sketch');
  11 + if (typeof key === 'string' && sketch) {
  12 + if (sketch[key]) {
  13 + if (typeof sketch[key] === 'function') {
  14 + return sketch[key].apply(sketch, args);
  15 + } else if (args.length === 0) {
  16 + return sketch[key];
  17 + } else if (args.length === 1) {
  18 + return sketch[key] = args[0];
  19 + }
  20 + } else {
  21 + return $.error('Sketch.js did not recognize the given command.');
  22 + }
  23 + } else if (sketch) {
  24 + return sketch;
  25 + } else {
  26 + this.data('sketch', new Sketch(this.get(0), key));
  27 + return this;
  28 + }
  29 + };
  30 + Sketch = (function() {
  31 + function Sketch(el, opts) {
  32 + this.el = el;
  33 + this.canvas = $(el);
  34 + this.context = el.getContext('2d');
  35 + this.options = $.extend({
  36 + toolLinks: true,
  37 + defaultTool: 'marker',
  38 + defaultColor: '#000000',
  39 + defaultSize: 5
  40 + }, opts);
  41 + this.painting = false;
  42 + this.color = this.options.defaultColor;
  43 + this.size = this.options.defaultSize;
  44 + this.tool = this.options.defaultTool;
  45 + this.actions = [];
  46 + this.action = [];
  47 + this.canvas.bind('click mousedown mouseup mousemove mouseleave mouseout touchstart touchmove touchend touchcancel', this.onEvent);
  48 + if (this.options.toolLinks) {
  49 + $('body').delegate("a[href=\"#" + (this.canvas.attr('id')) + "\"]", 'click', function(e) {
  50 + var $canvas, $this, key, sketch, _i, _len, _ref;
  51 + $this = $(this);
  52 + $canvas = $($this.attr('href'));
  53 + sketch = $canvas.data('sketch');
  54 + _ref = ['color', 'size', 'tool'];
  55 + for (_i = 0, _len = _ref.length; _i < _len; _i++) {
  56 + key = _ref[_i];
  57 + if ($this.attr("data-" + key)) {
  58 + sketch.set(key, $(this).attr("data-" + key));
  59 + }
  60 + }
  61 + if ($(this).attr('data-download')) {
  62 + sketch.download($(this).attr('data-download'));
  63 + }
  64 + return false;
  65 + });
  66 + }
  67 + }
  68 + Sketch.prototype.download = function(format) {
  69 + var mime;
  70 + format || (format = "png");
  71 + if (format === "jpg") {
  72 + format = "jpeg";
  73 + }
  74 + mime = "image/" + format;
  75 + return window.open(this.el.toDataURL(mime));
  76 + };
  77 + Sketch.prototype.set = function(key, value) {
  78 + this[key] = value;
  79 + return this.canvas.trigger("sketch.change" + key, value);
  80 + };
  81 + Sketch.prototype.startPainting = function() {
  82 + this.painting = true;
  83 + return this.action = {
  84 + tool: this.tool,
  85 + color: this.color,
  86 + size: parseFloat(this.size),
  87 + events: []
  88 + };
  89 + };
  90 + Sketch.prototype.stopPainting = function() {
  91 + if (this.action) {
  92 + this.actions.push(this.action);
  93 + }
  94 + this.painting = false;
  95 + this.action = null;
  96 + return this.redraw();
  97 + };
  98 + Sketch.prototype.onEvent = function(e) {
  99 + if (e.originalEvent && e.originalEvent.targetTouches) {
  100 + e.pageX = e.originalEvent.targetTouches[0].pageX;
  101 + e.pageY = e.originalEvent.targetTouches[0].pageY;
  102 + }
  103 + $.sketch.tools[$(this).data('sketch').tool].onEvent.call($(this).data('sketch'), e);
  104 + e.preventDefault();
  105 + return false;
  106 + };
  107 + Sketch.prototype.redraw = function() {
  108 + var sketch;
  109 + this.el.width = this.canvas.width();
  110 + this.context = this.el.getContext('2d');
  111 + sketch = this;
  112 + $.each(this.actions, function() {
  113 + if (this.tool) {
  114 + return $.sketch.tools[this.tool].draw.call(sketch, this);
  115 + }
  116 + });
  117 + if (this.painting && this.action) {
  118 + return $.sketch.tools[this.action.tool].draw.call(sketch, this.action);
  119 + }
  120 + };
  121 + return Sketch;
  122 + })();
  123 + $.sketch = {
  124 + tools: {}
  125 + };
  126 + $.sketch.tools.marker = {
  127 + onEvent: function(e) {
  128 + switch (e.type) {
  129 + case 'mousedown':
  130 + case 'touchstart':
  131 + this.startPainting();
  132 + break;
  133 + case 'mouseup':
  134 + case 'mouseout':
  135 + case 'mouseleave':
  136 + case 'touchend':
  137 + case 'touchcancel':
  138 + this.stopPainting();
  139 + }
  140 + if (this.painting) {
  141 + this.action.events.push({
  142 + x: e.pageX - this.canvas.offset().left,
  143 + y: e.pageY - this.canvas.offset().top,
  144 + event: e.type
  145 + });
  146 + return this.redraw();
  147 + }
  148 + },
  149 + draw: function(action) {
  150 + var event, previous, _i, _len, _ref;
  151 + this.context.lineJoin = "round";
  152 + this.context.lineCap = "round";
  153 + this.context.beginPath();
  154 + this.context.moveTo(action.events[0].x, action.events[0].y);
  155 + _ref = action.events;
  156 + for (_i = 0, _len = _ref.length; _i < _len; _i++) {
  157 + event = _ref[_i];
  158 + this.context.lineTo(event.x, event.y);
  159 + previous = event;
  160 + }
  161 + this.context.strokeStyle = action.color;
  162 + this.context.lineWidth = action.size;
  163 + return this.context.stroke();
  164 + }
  165 + };
  166 + return $.sketch.tools.eraser = {
  167 + onEvent: function(e) {
  168 + return $.sketch.tools.marker.onEvent.call(this, e);
  169 + },
  170 + draw: function(action) {
  171 + var oldcomposite;
  172 + oldcomposite = this.context.globalCompositeOperation;
  173 + this.context.globalCompositeOperation = "copy";
  174 + action.color = "rgba(0,0,0,0)";
  175 + $.sketch.tools.marker.draw.call(this, action);
  176 + return this.context.globalCompositeOperation = oldcomposite;
  177 + }
  178 + };
  179 +})(jQuery);
0 180 \ No newline at end of file
... ...
400-SOURCECODE/AIAHTML5.Web/themes/default/css/bootstrap/3.3.6/jquery.minicolors.css 0 → 100644
  View file @bd3b8d2
  1 +.minicolors {
  2 + position: relative;
  3 +}
  4 +
  5 +.minicolors-swatch {
  6 + position: absolute;
  7 + vertical-align: middle;
  8 + background: url(jquery.minicolors.png) -80px 0;
  9 + border: solid 1px #ccc;
  10 + cursor: text;
  11 + padding: 0;
  12 + margin: 0;
  13 + display: inline-block;
  14 +}
  15 +
  16 +.minicolors-swatch-color {
  17 + position: absolute;
  18 + top: 0;
  19 + left: 0;
  20 + right: 0;
  21 + bottom: 0;
  22 +}
  23 +
  24 +.minicolors input[type=hidden] + .minicolors-swatch {
  25 + width: 28px;
  26 + position: static;
  27 + cursor: pointer;
  28 +}
  29 +
  30 +/* Panel */
  31 +.minicolors-panel {
  32 + position: absolute;
  33 + width: 173px;
  34 + height: 152px;
  35 + background: white;
  36 + border: solid 1px #CCC;
  37 + box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  38 + z-index: 99999;
  39 + -moz-box-sizing: content-box;
  40 + -webkit-box-sizing: content-box;
  41 + box-sizing: content-box;
  42 + display: none;
  43 +}
  44 +
  45 +.minicolors-panel.minicolors-visible {
  46 + display: block;
  47 +}
  48 +
  49 +/* Panel positioning */
  50 +.minicolors-position-top .minicolors-panel {
  51 + top: -154px;
  52 +}
  53 +
  54 +.minicolors-position-right .minicolors-panel {
  55 + right: 0;
  56 +}
  57 +
  58 +.minicolors-position-bottom .minicolors-panel {
  59 + top: auto;
  60 +}
  61 +
  62 +.minicolors-position-left .minicolors-panel {
  63 + left: 0;
  64 +}
  65 +
  66 +.minicolors-with-opacity .minicolors-panel {
  67 + width: 194px;
  68 +}
  69 +
  70 +.minicolors .minicolors-grid {
  71 + position: absolute;
  72 + top: 1px;
  73 + left: 1px;
  74 + width: 150px;
  75 + height: 150px;
  76 + background: url(jquery.minicolors.png) -120px 0;
  77 + cursor: crosshair;
  78 +}
  79 +
  80 +.minicolors .minicolors-grid-inner {
  81 + position: absolute;
  82 + top: 0;
  83 + left: 0;
  84 + width: 150px;
  85 + height: 150px;
  86 + background: none;
  87 +}
  88 +
  89 +.minicolors-slider-saturation .minicolors-grid {
  90 + background-position: -420px 0;
  91 +}
  92 +
  93 +.minicolors-slider-saturation .minicolors-grid-inner {
  94 + background: url(jquery.minicolors.png) -270px 0;
  95 +}
  96 +
  97 +.minicolors-slider-brightness .minicolors-grid {
  98 + background-position: -570px 0;
  99 +}
  100 +
  101 +.minicolors-slider-brightness .minicolors-grid-inner {
  102 + background: black;
  103 +}
  104 +
  105 +.minicolors-slider-wheel .minicolors-grid {
  106 + background-position: -720px 0;
  107 +}
  108 +
  109 +.minicolors-slider,
  110 +.minicolors-opacity-slider {
  111 + position: absolute;
  112 + top: 1px;
  113 + left: 152px;
  114 + width: 20px;
  115 + height: 150px;
  116 + background: white url(jquery.minicolors.png) 0 0;
  117 + cursor: row-resize;
  118 +}
  119 +
  120 +.minicolors-slider-saturation .minicolors-slider {
  121 + background-position: -60px 0;
  122 +}
  123 +
  124 +.minicolors-slider-brightness .minicolors-slider {
  125 + background-position: -20px 0;
  126 +}
  127 +
  128 +.minicolors-slider-wheel .minicolors-slider {
  129 + background-position: -20px 0;
  130 +}
  131 +
  132 +.minicolors-opacity-slider {
  133 + left: 173px;
  134 + background-position: -40px 0;
  135 + display: none;
  136 +}
  137 +
  138 +.minicolors-with-opacity .minicolors-opacity-slider {
  139 + display: block;
  140 +}
  141 +
  142 +/* Pickers */
  143 +.minicolors-grid .minicolors-picker {
  144 + position: absolute;
  145 + top: 70px;
  146 + left: 70px;
  147 + width: 12px;
  148 + height: 12px;
  149 + border: solid 1px black;
  150 + border-radius: 10px;
  151 + margin-top: -6px;
  152 + margin-left: -6px;
  153 + background: none;
  154 +}
  155 +
  156 +.minicolors-grid .minicolors-picker > div {
  157 + position: absolute;
  158 + top: 0;
  159 + left: 0;
  160 + width: 8px;
  161 + height: 8px;
  162 + border-radius: 8px;
  163 + border: solid 2px white;
  164 + -moz-box-sizing: content-box;
  165 + -webkit-box-sizing: content-box;
  166 + box-sizing: content-box;
  167 +}
  168 +
  169 +.minicolors-picker {
  170 + position: absolute;
  171 + top: 0;
  172 + left: 0;
  173 + width: 18px;
  174 + height: 2px;
  175 + background: white;
  176 + border: solid 1px black;
  177 + margin-top: -2px;
  178 + -moz-box-sizing: content-box;
  179 + -webkit-box-sizing: content-box;
  180 + box-sizing: content-box;
  181 +}
  182 +
  183 +/* Inline controls */
  184 +.minicolors-inline {
  185 + display: inline-block;
  186 +}
  187 +
  188 +.minicolors-inline .minicolors-input {
  189 + display: none !important;
  190 +}
  191 +
  192 +.minicolors-inline .minicolors-panel {
  193 + position: relative;
  194 + top: auto;
  195 + left: auto;
  196 + box-shadow: none;
  197 + z-index: auto;
  198 + display: inline-block;
  199 +}
  200 +
  201 +/* Default theme */
  202 +.minicolors-theme-default .minicolors-swatch {
  203 + top: 5px;
  204 + left: 5px;
  205 + width: 18px;
  206 + height: 18px;
  207 +}
  208 +.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
  209 + left: auto;
  210 + right: 5px;
  211 +}
  212 +.minicolors-theme-default.minicolors {
  213 + width: auto;
  214 + display: inline-block;
  215 +}
  216 +.minicolors-theme-default .minicolors-input {
  217 + height: 20px;
  218 + width: auto;
  219 + display: inline-block;
  220 + padding-left: 26px;
  221 +}
  222 +.minicolors-theme-default.minicolors-position-right .minicolors-input {
  223 + padding-right: 26px;
  224 + padding-left: inherit;
  225 +}
  226 +
  227 +/* Bootstrap theme */
  228 +.minicolors-theme-bootstrap .minicolors-swatch {
  229 + top: 3px;
  230 + left: 3px;
  231 + width: 28px;
  232 + height: 28px;
  233 + border-radius: 3px;
  234 +}
  235 +.minicolors-theme-bootstrap.minicolors-position-right .minicolors-swatch {
  236 + left: auto;
  237 + right: 3px;
  238 +}
  239 +.minicolors-theme-bootstrap .minicolors-input {
  240 + padding-left: 44px;
  241 +}
  242 +.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
  243 + padding-right: 44px;
  244 + padding-left: 12px;
  245 +}
0 246 \ No newline at end of file
... ...
400-SOURCECODE/AIAHTML5.Web/themes/default/css/bootstrap/3.3.6/jquery.minicolors.png 0 → 100644
View file @bd3b8d2

75.6 KB