diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.html b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.html index 3b0998e7fb..14533b7813 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.html +++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.html @@ -1,5 +1,5 @@ - + diff --git a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts index f4bf3704de..7e4e542b47 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts +++ b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts @@ -273,7 +273,7 @@ describe('Test ng2-activiti-diagrams ', () => { let task: any = element.querySelector('diagram-user-task > diagram-task > raphael-rect'); expect(task).not.toBeNull(); - let taskText: any = element.querySelector('diagram-user-task > diagram-task > raphael-text'); + let taskText: any = element.querySelector('diagram-user-task > diagram-task > raphael-multiline-text'); expect(taskText).not.toBeNull(); expect(taskText.attributes[1].value).toEqual('Fake User task'); @@ -302,7 +302,7 @@ describe('Test ng2-activiti-diagrams ', () => { let task: any = element.querySelector('diagram-manual-task > diagram-task > raphael-rect'); expect(task).not.toBeNull(); - let taskText: any = element.querySelector('diagram-manual-task > diagram-task > raphael-text'); + let taskText: any = element.querySelector('diagram-manual-task > diagram-task > raphael-multiline-text'); expect(taskText).not.toBeNull(); expect(taskText.attributes[1].value).toEqual('Fake Manual task'); @@ -331,7 +331,7 @@ describe('Test ng2-activiti-diagrams ', () => { let task: any = element.querySelector('diagram-service-task > diagram-task > raphael-rect'); expect(task).not.toBeNull(); - let taskText: any = element.querySelector('diagram-service-task > diagram-task > raphael-text'); + let taskText: any = element.querySelector('diagram-service-task > diagram-task > raphael-multiline-text'); expect(taskText).not.toBeNull(); expect(taskText.attributes[1].value).toEqual('Fake Service task'); @@ -376,7 +376,7 @@ describe('Test ng2-activiti-diagrams ', () => { let task: any = element.querySelector('diagram-camel-task > diagram-task > raphael-rect'); expect(task).not.toBeNull(); - let taskText: any = element.querySelector('diagram-camel-task > diagram-task > raphael-text'); + let taskText: any = element.querySelector('diagram-camel-task > diagram-task > raphael-multiline-text'); expect(taskText).not.toBeNull(); expect(taskText.attributes[1].value).toEqual('Fake Camel task'); @@ -405,7 +405,7 @@ describe('Test ng2-activiti-diagrams ', () => { let task: any = element.querySelector('diagram-mule-task > diagram-task > raphael-rect'); expect(task).not.toBeNull(); - let taskText: any = element.querySelector('diagram-mule-task > diagram-task > raphael-text'); + let taskText: any = element.querySelector('diagram-mule-task > diagram-task > raphael-multiline-text'); expect(taskText).not.toBeNull(); expect(taskText.attributes[1].value).toEqual('Fake Mule task'); @@ -430,7 +430,7 @@ describe('Test ng2-activiti-diagrams ', () => { let task: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-rect'); expect(task).not.toBeNull(); - let taskText: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-text'); + let taskText: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-multiline-text'); expect(taskText).not.toBeNull(); expect(taskText.attributes[1].value).toEqual('Fake Alfresco Publish task'); @@ -460,7 +460,7 @@ describe('Test ng2-activiti-diagrams ', () => { let task: any = element.querySelector('diagram-google-drive-publish-task > diagram-task > raphael-rect'); expect(task).not.toBeNull(); - let taskText: any = element.querySelector('diagram-google-drive-publish-task > diagram-task > raphael-text'); + let taskText: any = element.querySelector('diagram-google-drive-publish-task > diagram-task > raphael-multiline-text'); expect(taskText).not.toBeNull(); expect(taskText.attributes[1].value).toEqual('Fake Google Drive Publish task'); @@ -490,7 +490,7 @@ describe('Test ng2-activiti-diagrams ', () => { let task: any = element.querySelector('diagram-rest-call-task > diagram-task > raphael-rect'); expect(task).not.toBeNull(); - let taskText: any = element.querySelector('diagram-rest-call-task > diagram-task > raphael-text'); + let taskText: any = element.querySelector('diagram-rest-call-task > diagram-task > raphael-multiline-text'); expect(taskText).not.toBeNull(); expect(taskText.attributes[1].value).toEqual('Fake Rest Call task'); @@ -520,7 +520,7 @@ describe('Test ng2-activiti-diagrams ', () => { let task: any = element.querySelector('diagram-box-publish-task > diagram-task > raphael-rect'); expect(task).not.toBeNull(); - let taskText: any = element.querySelector('diagram-box-publish-task > diagram-task > raphael-text'); + let taskText: any = element.querySelector('diagram-box-publish-task > diagram-task > raphael-multiline-text'); expect(taskText).not.toBeNull(); expect(taskText.attributes[1].value).toEqual('Fake Box Publish task'); @@ -550,7 +550,7 @@ describe('Test ng2-activiti-diagrams ', () => { let task: any = element.querySelector('diagram-receive-task > diagram-task > raphael-rect'); expect(task).not.toBeNull(); - let taskText: any = element.querySelector('diagram-receive-task > diagram-task > raphael-text'); + let taskText: any = element.querySelector('diagram-receive-task > diagram-task > raphael-multiline-text'); expect(taskText).not.toBeNull(); expect(taskText.attributes[1].value).toEqual('Fake Receive task'); @@ -579,7 +579,7 @@ describe('Test ng2-activiti-diagrams ', () => { let task: any = element.querySelector('diagram-script-task > diagram-task > raphael-rect'); expect(task).not.toBeNull(); - let taskText: any = element.querySelector('diagram-script-task > diagram-task > raphael-text'); + let taskText: any = element.querySelector('diagram-script-task > diagram-task > raphael-multiline-text'); expect(taskText).not.toBeNull(); expect(taskText.attributes[1].value).toEqual('Fake Script task'); @@ -608,7 +608,7 @@ describe('Test ng2-activiti-diagrams ', () => { let task: any = element.querySelector('diagram-business-rule-task > diagram-task > raphael-rect'); expect(task).not.toBeNull(); - let taskText: any = element.querySelector('diagram-business-rule-task > diagram-task > raphael-text'); + let taskText: any = element.querySelector('diagram-business-rule-task > diagram-task > raphael-multiline-text'); expect(taskText).not.toBeNull(); expect(taskText.attributes[1].value).toEqual('Fake BusinessRule task'); diff --git a/ng2-components/ng2-activiti-diagrams/src/components/raphael/index.ts b/ng2-components/ng2-activiti-diagrams/src/components/raphael/index.ts index fff8b99a57..8f8cba2323 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/raphael/index.ts +++ b/ng2-components/ng2-activiti-diagrams/src/components/raphael/index.ts @@ -18,6 +18,7 @@ import { RaphaelCircleDirective } from './raphael-circle.component'; import { RaphaelRectDirective } from './raphael-rect.component'; import { RaphaelTextDirective } from './raphael-text.component'; +import { RaphaelMultilineTextDirective } from './raphael-multiline-text.component'; import { RaphaelFlowArrowDirective } from './raphael-flow-arrow.component'; import { RaphaelCrossDirective } from './raphael-cross.component'; import { RaphaelPlusDirective } from './raphael-plus.component'; @@ -34,6 +35,7 @@ import { RAPHAEL_ICONS_DIRECTIVES } from './icons/index'; export * from './raphael-circle.component'; export * from './raphael-rect.component'; export * from './raphael-text.component'; +export * from './raphael-multiline-text.component'; export * from './raphael-flow-arrow.component'; export * from './raphael-cross.component'; export * from './raphael-plus.component'; @@ -45,6 +47,7 @@ export const RAPHAEL_DIRECTIVES: any[] = [ RaphaelCircleDirective, RaphaelRectDirective, RaphaelTextDirective, + RaphaelMultilineTextDirective, RaphaelFlowArrowDirective, RaphaelCrossDirective, RaphaelPlusDirective, diff --git a/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-multiline-text.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-multiline-text.component.ts new file mode 100644 index 0000000000..0b294970a0 --- /dev/null +++ b/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-multiline-text.component.ts @@ -0,0 +1,94 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Directive, OnInit, ElementRef, Input, Output, EventEmitter } from '@angular/core'; +import { Point } from './models/point'; +import { RaphaelBase } from './raphael-base'; +import { RaphaelService } from './raphael.service'; + +@Directive({ selector: 'raphael-multiline-text' }) +export class RaphaelMultilineTextDirective extends RaphaelBase implements OnInit { + @Input() + paper: any; + + @Input() + position: Point; + + @Input() + transform: string; + + @Input() + text: string; + + @Input() + elementWidth: number; + + @Output() + onError = new EventEmitter(); + + TEXT_PADDING = 3; + + constructor(public elementRef: ElementRef, + raphaelService: RaphaelService) { + super(elementRef, raphaelService); + } + + ngOnInit() { + console.log(this.elementRef); + if (this.text === null || this.text === undefined) { + this.text = ''; + } + this.draw(this.position, this.text); + } + + public draw(position: Point, text: string) { + let textPaper = this.paper.text(position.x + this.TEXT_PADDING, position.y + this.TEXT_PADDING, text).attr({ + 'text-anchor': 'middle', + 'font-family': 'Arial', + 'font-size': '11', + 'fill': '#373e48' + }); + + let formattedText = this.formatText(textPaper, text, this.elementWidth); + textPaper.attr({ + 'text': formattedText + }); + textPaper.transform(this.transform); + return textPaper; + } + + private formatText(textPaper, text, elementWidth) { + let letterWidth = textPaper.getBBox().width / text.length; + let removedLineBreaks = text.split('\n'); + let actualRowLength = 0, formattedText = []; + removedLineBreaks.forEach(senteces => { + let words = senteces.split(' '); + words.forEach(word => { + let length = word.length; + if (actualRowLength + (length * letterWidth) > elementWidth) { + formattedText.push('\n'); + actualRowLength = 0; + } + actualRowLength += length * letterWidth; + formattedText.push(word + ' '); + }); + formattedText.push('\n'); + actualRowLength = 0; + }); + return formattedText.join(''); + } +}