diff --git a/src/app/cartography/cartography.module.ts b/src/app/cartography/cartography.module.ts index a1cacc7c..419fa9cc 100644 --- a/src/app/cartography/cartography.module.ts +++ b/src/app/cartography/cartography.module.ts @@ -41,6 +41,7 @@ import { SelectionSelectComponent } from './components/selection-select/selectio import { DraggableSelectionComponent } from './components/draggable-selection/draggable-selection.component'; import { MapSettingsManager } from './managers/map-settings-manager'; import { DrawingResizingComponent } from './components/drawing-resizing/drawing-resizing.component'; +import { TextAddingComponent } from './components/text-adding/text-adding.component'; import { TextEditingComponent } from './components/text-editing/text-editing.component'; import { FontBBoxCalculator } from './helpers/font-bbox-calculator'; import { StylesToFontConverter } from './converters/styles-to-font-converter'; @@ -56,6 +57,7 @@ import { StylesToFontConverter } from './converters/styles-to-font-converter'; D3MapComponent, ExperimentalMapComponent, DrawingResizingComponent, + TextAddingComponent, TextEditingComponent, ...ANGULAR_MAP_DECLARATIONS, SelectionControlComponent, diff --git a/src/app/cartography/components/d3-map/d3-map.component.html b/src/app/cartography/components/d3-map/d3-map.component.html index 5cc96923..8c04ec05 100644 --- a/src/app/cartography/components/d3-map/d3-map.component.html +++ b/src/app/cartography/components/d3-map/d3-map.component.html @@ -11,5 +11,6 @@ + diff --git a/src/app/cartography/components/d3-map/d3-map.component.ts b/src/app/cartography/components/d3-map/d3-map.component.ts index 660fd2b5..abe05eb1 100644 --- a/src/app/cartography/components/d3-map/d3-map.component.ts +++ b/src/app/cartography/components/d3-map/d3-map.component.ts @@ -20,6 +20,8 @@ import { Symbol } from '../../../models/symbol'; import { GraphDataManager } from '../../managers/graph-data-manager'; import { DraggedDataEvent } from '../../events/event-source'; import { MapSettingsManager } from '../../managers/map-settings-manager'; +import { TextEditingTool } from '../../tools/text-editing-tool'; +import { TextAddingComponent } from '../text-adding/text-adding.component'; @Component({ @@ -37,6 +39,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy { @Input() height = 600; @ViewChild('svg') svgRef: ElementRef; + @ViewChild(TextAddingComponent) textAddingComponent: TextAddingComponent; private parentNativeElement: any; private svg: Selection; @@ -47,6 +50,10 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy { 'show_interface_labels': true }; + ngAfterInit(){ + console.log(this.textAddingComponent); + } + constructor( private graphDataManager: GraphDataManager, public context: Context, @@ -57,6 +64,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy { protected interfaceLabelWidget: InterfaceLabelWidget, protected selectionToolWidget: SelectionTool, protected movingToolWidget: MovingTool, + protected textEditingToolWidget: TextEditingTool, public graphLayout: GraphLayout, ) { this.parentNativeElement = element.nativeElement; @@ -81,6 +89,12 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy { this.mapChangeDetectorRef.detectChanges(); } + @Input('text-editing-tool') + set textEditingTool(value){ + this.textEditingToolWidget.setEnabled(value); + this.mapChangeDetectorRef.detectChanges(); + } + @Input('draw-link-tool') drawLinkTool: boolean; @Input('readonly') set readonly(value) { diff --git a/src/app/cartography/components/text-adding/text-adding.component.html b/src/app/cartography/components/text-adding/text-adding.component.html new file mode 100644 index 00000000..e69de29b diff --git a/src/app/cartography/components/text-adding/text-adding.component.scss b/src/app/cartography/components/text-adding/text-adding.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/cartography/components/text-adding/text-adding.component.spec.ts b/src/app/cartography/components/text-adding/text-adding.component.spec.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/app/cartography/components/text-adding/text-adding.component.ts b/src/app/cartography/components/text-adding/text-adding.component.ts new file mode 100644 index 00000000..ee9b4da8 --- /dev/null +++ b/src/app/cartography/components/text-adding/text-adding.component.ts @@ -0,0 +1,64 @@ +import { Component, OnInit } from "@angular/core"; +import { select } from 'd3-selection'; +import { Context } from "../../models/context"; + +@Component({ + selector: 'app-text-adding', + template: ``, + styleUrls: ['./text-adding.component.scss'] +}) +export class TextAddingComponent implements OnInit { + public isEnabled: boolean = true; + + constructor( + private context: Context + ){} + + ngOnInit(){ + + } + + addingTextSelected(){ + + + //let x = event.clientX - this.mapChild.context.getZeroZeroTransformationPoint().x; + //let y = event.clientY - this.mapChild.context.getZeroZeroTransformationPoint().y; + + const svgElement = select("g.canvas"); + svgElement + .append("foreignObject") + .attr("id", "temporaryText") + .attr("transform", `translate(${x},${y}) rotate(0)`) + .attr("width", '1000px') + .append("xhtml:div") + .attr("class", "temporaryTextInside") + .attr('style', () => { + const styles: string[] = []; + styles.push(`font-family: Noto Sans`) + styles.push(`font-size: 11pt`); + styles.push(`font-weight: bold`) + styles.push(`color: #000000`); + return styles.join("; "); + }) + .attr("width", 'fit-content') + .attr("height", 'max-content') + .attr('contenteditable', 'true') + .text("") + .on("focusout", () => { + let elem = document.getElementsByClassName("temporaryTextInside")[0] as HTMLElement; + let savedText = elem.innerText; + + // let drawing = this.getDrawingMock("text", savedText); + // (drawing.element as TextElement).text = savedText; + // let svgText = this.mapDrawingToSvgConverter.convert(drawing); + + // this.drawingService + // .add(this.server, this.project.project_id, x, y, svgText) + // .subscribe((serverDrawing: Drawing) => { + // var temporaryElement = document.getElementById("temporaryText") as HTMLElement; + // temporaryElement.remove(); + // this.drawingsDataSource.add(serverDrawing); + // }); + }); + } +} diff --git a/src/app/cartography/components/text-editing/text-editing.component.ts b/src/app/cartography/components/text-editing/text-editing.component.ts index 9aa96a78..8e981f86 100644 --- a/src/app/cartography/components/text-editing/text-editing.component.ts +++ b/src/app/cartography/components/text-editing/text-editing.component.ts @@ -23,6 +23,10 @@ export class TextEditingComponent implements OnInit, OnDestroy{ }); } + onTextAddingChosen() { + + } + ngOnDestroy() { this.textEditingFinished.unsubscribe(); } diff --git a/src/app/cartography/tools/text-editing-tool.ts b/src/app/cartography/tools/text-editing-tool.ts index 032f4b7e..afc33a78 100644 --- a/src/app/cartography/tools/text-editing-tool.ts +++ b/src/app/cartography/tools/text-editing-tool.ts @@ -33,7 +33,7 @@ export class TextEditingTool { .classed("editingMode", true); this.editingDrawingId = textElements[index].parentElement.parentElement.getAttribute("drawing_id"); - //simply get canvas + select(textElements[index].parentElement.parentElement.parentElement) .append("foreignObject") .attr("width", '1000px') @@ -41,7 +41,7 @@ export class TextEditingTool { .attr("height", '100px') .attr("id", "temporaryText") .attr("transform", textElements[index].parentElement.getAttribute("transform")) - .append("xhtml:div") + .append("xhtml:span") .attr("width", "fit-content") .attr("height", "fit-content") .attr("class", "temporaryTextInside") diff --git a/src/app/cartography/tools/text-editing.tools.spec.ts b/src/app/cartography/tools/text-editing.tools.spec.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html index 7eb66210..28f40f42 100644 --- a/src/app/components/project-map/project-map.component.html +++ b/src/app/components/project-map/project-map.component.html @@ -10,6 +10,7 @@ [show-interface-labels]="project.show_interface_labels" [selection-tool]="tools.selection" [moving-tool]="tools.moving" + [text-editing-tool]="tools.text_editing" [draw-link-tool]="tools.draw_link" [readonly]="inReadOnlyMode" (nodeDragged)="onNodeDragged($event)" diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index f8234f89..9e1425e2 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/src/app/components/project-map/project-map.component.ts @@ -27,7 +27,7 @@ import { MapChangeDetectorRef } from '../../cartography/services/map-change-dete import { NodeContextMenu } from '../../cartography/events/nodes'; import { MapLinkCreated } from '../../cartography/events/links'; import { NodeWidget } from '../../cartography/widgets/node'; -import { DraggedDataEvent, ResizedDataEvent, EditedDataEvent, TextEditedDataEvent } from '../../cartography/events/event-source'; +import { DraggedDataEvent, ResizedDataEvent, TextEditedDataEvent } from '../../cartography/events/event-source'; import { DrawingService } from '../../services/drawing.service'; import { MapNodeToNodeConverter } from '../../cartography/converters/map/map-node-to-node-converter'; import { NodesEventSource } from '../../cartography/events/nodes-event-source'; @@ -48,6 +48,7 @@ import { MapLinkNode } from '../../cartography/models/map/map-link-node'; import { TextElement } from '../../cartography/models/drawings/text-element'; import { FontFixer } from '../../cartography/helpers/font-fixer'; import { MapLabelToLabelConverter } from '../../cartography/converters/map/map-label-to-label-converter'; +import { select } from 'd3-selection'; @Component({ @@ -70,7 +71,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy { tools = { 'selection': true, 'moving': false, - 'draw_link': false + 'draw_link': false, + 'text_editing': true }; protected settings: Settings;