diff options
Diffstat (limited to 'js/tools/PenTool.js')
-rwxr-xr-x | js/tools/PenTool.js | 231 |
1 files changed, 108 insertions, 123 deletions
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 98423113..0dbefd16 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js | |||
@@ -393,22 +393,7 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
393 | TranslateSelectedSubpathPerPenCanvas:{ | 393 | TranslateSelectedSubpathPerPenCanvas:{ |
394 | value: function() { | 394 | value: function() { |
395 | if (this._penCanvas!==null) { | 395 | if (this._penCanvas!==null) { |
396 | //obtain the 2D translation of the canvas due to the Selection tool...assuming this is called in Configure | 396 | this._selectedSubpath.translateSubpathPerCanvas(ElementMediator); |
397 | var penCanvasLeft = parseInt(ElementMediator.getProperty(this._penCanvas, "left"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "left")); | ||
398 | var penCanvasTop = parseInt(ElementMediator.getProperty(this._penCanvas, "top"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "top")); | ||
399 | var penCanvasWidth = parseInt(ElementMediator.getProperty(this._penCanvas, "width"));//this._penCanvas.width; | ||
400 | var penCanvasHeight = parseInt(ElementMediator.getProperty(this._penCanvas, "height"));//this._penCanvas.height; | ||
401 | var penCanvasOldX = penCanvasLeft + 0.5 * penCanvasWidth; | ||
402 | var penCanvasOldY = penCanvasTop + 0.5 * penCanvasHeight; | ||
403 | |||
404 | var translateCanvasX = penCanvasOldX - this._selectedSubpath.getCanvasX(); | ||
405 | var translateCanvasY = penCanvasOldY - this._selectedSubpath.getCanvasY(); | ||
406 | |||
407 | //update the canvasX and canvasY parameters for this subpath and also translate the subpath points (since they're stored in stage world space) | ||
408 | this._selectedSubpath.setCanvasX(translateCanvasX + this._selectedSubpath.getCanvasX()); | ||
409 | this._selectedSubpath.setCanvasY(translateCanvasY + this._selectedSubpath.getCanvasY()); | ||
410 | this._selectedSubpath.translateAnchors(translateCanvasX, translateCanvasY, 0); | ||
411 | this._selectedSubpath.createSamples(); //updates the bounding box | ||
412 | } | 397 | } |
413 | } | 398 | } |
414 | }, | 399 | }, |
@@ -444,6 +429,113 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
444 | } | 429 | } |
445 | }, | 430 | }, |
446 | 431 | ||
432 | RenderShape: { | ||
433 | value: function (w, h, midPt, planeMat, canvas) { | ||
434 | if ((Math.floor(w) === 0) || (Math.floor(h) === 0)) { | ||
435 | return; | ||
436 | } | ||
437 | |||
438 | var left = Math.round(midPt[0] - 0.5 * w); | ||
439 | var top = Math.round(midPt[1] - 0.5 * h); | ||
440 | |||
441 | if (!canvas) { | ||
442 | var newCanvas = null; | ||
443 | newCanvas = NJUtils.makeNJElement("canvas", "Subpath", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); | ||
444 | var elementModel = TagTool.makeElement(parseInt(w), parseInt(h), planeMat, midPt, newCanvas); | ||
445 | ElementMediator.addElement(newCanvas, elementModel.data, true); | ||
446 | |||
447 | // create all the GL stuff | ||
448 | var world = this.getGLWorld(newCanvas, this._useWebGL);//this.options.use3D);//this.CreateGLWorld(planeMat, midPt, newCanvas, this._useWebGL);//fillMaterial, strokeMaterial); | ||
449 | //store a reference to this newly created canvas | ||
450 | this._penCanvas = newCanvas; | ||
451 | |||
452 | var subpath = this._selectedSubpath; //new GLSubpath(); | ||
453 | subpath.setWorld(world); | ||
454 | subpath.setCanvas(newCanvas); | ||
455 | |||
456 | world.addObject(subpath); | ||
457 | world.render(); | ||
458 | //TODO this will not work if there are multiple shapes in the same canvas | ||
459 | newCanvas.elementModel.shapeModel.GLGeomObj = subpath; | ||
460 | newCanvas.elementModel.shapeModel.shapeCount++; | ||
461 | if(newCanvas.elementModel.shapeModel.shapeCount === 1) | ||
462 | { | ||
463 | newCanvas.elementModel.selection = "Subpath"; | ||
464 | newCanvas.elementModel.pi = "SubpathPi"; | ||
465 | newCanvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units; | ||
466 | var strokeColor = subpath.getStrokeColor(); | ||
467 | newCanvas.elementModel.shapeModel.stroke = strokeColor; | ||
468 | if(strokeColor) { | ||
469 | newCanvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; | ||
470 | } | ||
471 | newCanvas.elementModel.shapeModel.strokeMaterial = subpath.getStrokeMaterial(); | ||
472 | |||
473 | newCanvas.elementModel.shapeModel.GLGeomObj = subpath; | ||
474 | newCanvas.elementModel.shapeModel.useWebGl = this.options.use3D; | ||
475 | } | ||
476 | else | ||
477 | { | ||
478 | // TODO - update the shape's info only. shapeModel will likely need an array of shapes. | ||
479 | } | ||
480 | |||
481 | //if(newCanvas.elementModel.isShape) | ||
482 | if (true) | ||
483 | { | ||
484 | this.application.ninja.selectionController.selectElement(newCanvas); | ||
485 | } | ||
486 | } //if (!canvas) { | ||
487 | else { | ||
488 | |||
489 | var world = null; | ||
490 | if (canvas.elementModel.shapeModel && canvas.elementModel.shapeModel.GLWorld) { | ||
491 | world = canvas.elementModel.shapeModel.GLWorld; | ||
492 | } else { | ||
493 | world = this.getGLWorld(canvas, this._useWebGL);//this.options.use3D);//this.CreateGLWorld(planeMat, midPt, canvas, this._useWebGL);//fillMaterial, strokeMaterial); | ||
494 | } | ||
495 | |||
496 | if (this._entryEditMode !== this.ENTRY_SELECT_CANVAS){ | ||
497 | //update the left and top of the canvas element | ||
498 | var canvasArray=[canvas]; | ||
499 | w= Math.round(w); | ||
500 | h = Math.round(h); | ||
501 | ElementMediator.setProperty(canvasArray, "width", [w+"px"], "Changing", "penTool");//canvas.width = w; | ||
502 | ElementMediator.setProperty(canvasArray, "height", [h+"px"], "Changing", "penTool");//canvas.height = h; | ||
503 | |||
504 | //var bboxMid = this._selectedSubpath.getLocalBBoxMidInStageWorld(); | ||
505 | //left = Math.round(bboxMid[0] - 0.5 * w); | ||
506 | //top = Math.round(bboxMid[1] - 0.5 * h); | ||
507 | |||
508 | ElementMediator.setProperty(canvasArray, "left", [left+"px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "left", parseInt(left) + "px"); | ||
509 | ElementMediator.setProperty(canvasArray, "top", [top + "px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "top", parseInt(top) + "px"); | ||
510 | |||
511 | //update the viewport and projection to reflect the new canvas width and height (todo might be unnecessary since we don't use RDGE for now) | ||
512 | world.setViewportFromCanvas(canvas); | ||
513 | if (this._useWebGL){ | ||
514 | var cam = world.renderer.cameraManager().getActiveCamera(); | ||
515 | cam.setPerspective(world.getFOV(), world.getAspect(), world.getZNear(), world.getZFar()); | ||
516 | } | ||
517 | } | ||
518 | |||
519 | var subpath = this._selectedSubpath; | ||
520 | |||
521 | subpath.setDrawingTool(this); | ||
522 | subpath.setWorld(world); | ||
523 | |||
524 | world.addIfNewObject(subpath); | ||
525 | world.render(); | ||
526 | |||
527 | //TODO this will not work if there are multiple shapes in the same canvas | ||
528 | canvas.elementModel.shapeModel.GLGeomObj = subpath; | ||
529 | |||
530 | //if(newCanvas.elementModel.isShape) | ||
531 | if (true) | ||
532 | { | ||
533 | this.application.ninja.selectionController.selectElement(canvas); | ||
534 | } | ||
535 | } //else of if (!canvas) { | ||
536 | } //value: function (w, h, planeMat, midPt, canvas) { | ||
537 | }, //RenderShape: { | ||
538 | |||
447 | HandleLeftButtonUp: { | 539 | HandleLeftButtonUp: { |
448 | value: function (event) { | 540 | value: function (event) { |
449 | if (this._isAltDown) { | 541 | if (this._isAltDown) { |
@@ -603,113 +695,6 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
603 | } | 695 | } |
604 | }, | 696 | }, |
605 | 697 | ||
606 | RenderShape: { | ||
607 | value: function (w, h, midPt, planeMat, canvas) { | ||
608 | if ((Math.floor(w) === 0) || (Math.floor(h) === 0)) { | ||
609 | return; | ||
610 | } | ||
611 | |||
612 | var left = Math.round(midPt[0] - 0.5 * w); | ||
613 | var top = Math.round(midPt[1] - 0.5 * h); | ||
614 | |||
615 | if (!canvas) { | ||
616 | var newCanvas = null; | ||
617 | newCanvas = NJUtils.makeNJElement("canvas", "Subpath", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); | ||
618 | var elementModel = TagTool.makeElement(parseInt(w), parseInt(h), planeMat, midPt, newCanvas); | ||
619 | ElementMediator.addElement(newCanvas, elementModel.data, true); | ||
620 | |||
621 | // create all the GL stuff | ||
622 | var world = this.getGLWorld(newCanvas, this._useWebGL);//this.options.use3D);//this.CreateGLWorld(planeMat, midPt, newCanvas, this._useWebGL);//fillMaterial, strokeMaterial); | ||
623 | //store a reference to this newly created canvas | ||
624 | this._penCanvas = newCanvas; | ||
625 | |||
626 | var subpath = this._selectedSubpath; //new GLSubpath(); | ||
627 | subpath.setWorld(world); | ||
628 | subpath.setCanvas(newCanvas); | ||
629 | |||
630 | world.addObject(subpath); | ||
631 | world.render(); | ||
632 | //TODO this will not work if there are multiple shapes in the same canvas | ||
633 | newCanvas.elementModel.shapeModel.GLGeomObj = subpath; | ||
634 | newCanvas.elementModel.shapeModel.shapeCount++; | ||
635 | if(newCanvas.elementModel.shapeModel.shapeCount === 1) | ||
636 | { | ||
637 | newCanvas.elementModel.selection = "Subpath"; | ||
638 | newCanvas.elementModel.pi = "SubpathPi"; | ||
639 | newCanvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units; | ||
640 | var strokeColor = subpath.getStrokeColor(); | ||
641 | newCanvas.elementModel.shapeModel.stroke = strokeColor; | ||
642 | if(strokeColor) { | ||
643 | newCanvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; | ||
644 | } | ||
645 | newCanvas.elementModel.shapeModel.strokeMaterial = subpath.getStrokeMaterial(); | ||
646 | |||
647 | newCanvas.elementModel.shapeModel.GLGeomObj = subpath; | ||
648 | newCanvas.elementModel.shapeModel.useWebGl = this.options.use3D; | ||
649 | } | ||
650 | else | ||
651 | { | ||
652 | // TODO - update the shape's info only. shapeModel will likely need an array of shapes. | ||
653 | } | ||
654 | |||
655 | //if(newCanvas.elementModel.isShape) | ||
656 | if (true) | ||
657 | { | ||
658 | this.application.ninja.selectionController.selectElement(newCanvas); | ||
659 | } | ||
660 | } //if (!canvas) { | ||
661 | else { | ||
662 | |||
663 | var world = null; | ||
664 | if (canvas.elementModel.shapeModel && canvas.elementModel.shapeModel.GLWorld) { | ||
665 | world = canvas.elementModel.shapeModel.GLWorld; | ||
666 | } else { | ||
667 | world = this.getGLWorld(canvas, this._useWebGL);//this.options.use3D);//this.CreateGLWorld(planeMat, midPt, canvas, this._useWebGL);//fillMaterial, strokeMaterial); | ||
668 | } | ||
669 | |||
670 | if (this._entryEditMode !== this.ENTRY_SELECT_CANVAS){ | ||
671 | //update the left and top of the canvas element | ||
672 | var canvasArray=[canvas]; | ||
673 | w= Math.round(w); | ||
674 | h = Math.round(h); | ||
675 | ElementMediator.setProperty(canvasArray, "width", [w+"px"], "Changing", "penTool");//canvas.width = w; | ||
676 | ElementMediator.setProperty(canvasArray, "height", [h+"px"], "Changing", "penTool");//canvas.height = h; | ||
677 | |||
678 | //var bboxMid = this._selectedSubpath.getLocalBBoxMidInStageWorld(); | ||
679 | //left = Math.round(bboxMid[0] - 0.5 * w); | ||
680 | //top = Math.round(bboxMid[1] - 0.5 * h); | ||
681 | |||
682 | ElementMediator.setProperty(canvasArray, "left", [left+"px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "left", parseInt(left) + "px"); | ||
683 | ElementMediator.setProperty(canvasArray, "top", [top + "px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "top", parseInt(top) + "px"); | ||
684 | |||
685 | //update the viewport and projection to reflect the new canvas width and height (todo might be unnecessary since we don't use RDGE for now) | ||
686 | world.setViewportFromCanvas(canvas); | ||
687 | if (this._useWebGL){ | ||
688 | var cam = world.renderer.cameraManager().getActiveCamera(); | ||
689 | cam.setPerspective(world.getFOV(), world.getAspect(), world.getZNear(), world.getZFar()); | ||
690 | } | ||