Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
webapp.diagram-viewer.js.textlayout.js Maven / Gradle / Ivy
window.onload = function () {
var paper = Raphael("holder");
//var curve = paper.ellipse(100, 100, 1, 1).attr({"stroke-width": 0, fill: Color.red});
var text = "Betty Botter bought some butter but, she said, the butter's bitter. If I put it in my batter, it will make my batter bitter. But a bit of better butter will make my batter better. So, she bought a bit of butter, better than her bitter butter, and she put it in her batter, and the batter was not bitter. It was better Betty Botter bought a bit better butter.";
var font = {font: "11px Arial", "font-style":"italic", opacity: 1, "fill": LABEL_COLOR, stroke: LABEL_COLOR, "stroke-width":.3};
var font = {font: "11px Arial", opacity: 1, "fill": LABEL_COLOR};
var boxWidth = 100
var AttributedStringIterator = function(text){
//this.text = this.rtrim(this.ltrim(text));
text = text.replace(/(\s)+/, " ");
this.text = this.rtrim(text);
/*
if (beginIndex < 0 || beginIndex > endIndex || endIndex > length()) {
throw new IllegalArgumentException("Invalid substring range");
}
*/
this.beginIndex = 0;
this.endIndex = this.text.length;
this.currentIndex = this.beginIndex;
//console.group("[AttributedStringIterator]");
var i = 0;
var string = this.text;
var fullPos = 0;
//console.log("string: \"" + string + "\", length: " + string.length);
this.startWordOffsets = [];
this.startWordOffsets.push(fullPos);
// TODO: remove i 1000
while (i<1000) {
var pos = string.search(/[ \t\n\f-\.\,]/);
if (pos == -1)
break;
// whitespace start
fullPos += pos;
string = string.substr(pos);
////console.log("fullPos: " + fullPos + ", pos: " + pos + ", string: ", string);
// remove whitespaces
var pos = string.search(/[^ \t\n\f-\.\,]/);
if (pos == -1)
break;
// whitespace end
fullPos += pos;
string = string.substr(pos);
////console.log("fullPos: " + fullPos);
this.startWordOffsets.push(fullPos);
i++;
}
//console.log("startWordOffsets: ", this.startWordOffsets);
//console.groupEnd();
};
AttributedStringIterator.prototype = {
getEndIndex: function(pos){
if (typeof(pos) == "undefined")
return this.endIndex;
var string = this.text.substr(pos, this.endIndex - pos);
var posEndOfLine = string.search(/[\n]/);
if (posEndOfLine == -1)
return this.endIndex;
else
return pos + posEndOfLine;
},
getBeginIndex: function(){
return this.beginIndex;
},
isWhitespace: function(pos){
var str = this.text[pos];
var whitespaceChars = " \t\n\f";
return (whitespaceChars.indexOf(str) != -1);
},
isNewLine: function(pos){
var str = this.text[pos];
var whitespaceChars = "\n";
return (whitespaceChars.indexOf(str) != -1);
},
preceding: function(pos){
//console.group("[AttributedStringIterator.preceding]");
for(var i in this.startWordOffsets) {
var startWordOffset = this.startWordOffsets[i];
if (pos < startWordOffset && i>0) {
//console.log("startWordOffset: " + this.startWordOffsets[i-1]);
//console.groupEnd();
return this.startWordOffsets[i-1];
}
}
//console.log("pos: " + pos);
//console.groupEnd();
return this.startWordOffsets[i];
},
following: function(pos){
//console.group("[AttributedStringIterator.following]");
for(var i in this.startWordOffsets) {
var startWordOffset = this.startWordOffsets[i];
if (pos < startWordOffset && i>0) {
//console.log("startWordOffset: " + this.startWordOffsets[i]);
//console.groupEnd();
return this.startWordOffsets[i];
}
}
//console.log("pos: " + pos);
//console.groupEnd();
return this.startWordOffsets[i];
},
ltrim: function(str){
var patt2=/^\s+/g;
return str.replace(patt2, "");
},
rtrim: function(str){
var patt2=/\s+$/g;
return str.replace(patt2, "");
},
getLayout: function(start, limit){
return this.text.substr(start, limit - start);
},
getCharAtPos: function(pos) {
return this.text[pos];
}
};
/*
var TextMeasurer = function(paper, text, fontAttrs){
this.text = text;
this.paper = paper;
this.fontAttrs = fontAttrs;
this.fStart = this.text.getBeginIndex();
};
TextMeasurer.prototype = {
getLineBreakIndex: function(start, maxAdvance){
var localStart = start - this.fStart;
},
getLayout: function(){
}
}
*/
var LineBreakMeasurer = function(paper, text, fontAttrs){
this.paper = paper;
this.text = new AttributedStringIterator(text);
this.fontAttrs = fontAttrs;
if (this.text.getEndIndex() - this.text.getBeginIndex() < 1) {
throw {message: "Text must contain at least one character.", code: "IllegalArgumentException"};
}
//this.measurer = new TextMeasurer(paper, this.text, this.fontAttrs);
this.limit = this.text.getEndIndex();
this.pos = this.start = this.text.getBeginIndex();
this.rafaelTextObject = this.paper.text(100, 100, this.text.text).attr(fontAttrs).attr("text-anchor", "start");
this.svgTextObject = this.rafaelTextObject[0];
};
LineBreakMeasurer.prototype = {
nextOffset: function(wrappingWidth, offsetLimit, requireNextWord) {
//console.group("[nextOffset]");
var nextOffset = this.pos;
if (this.pos < this.limit) {
if (offsetLimit <= this.pos) {
throw {message: "offsetLimit must be after current position", code: "IllegalArgumentException"};
}
var charAtMaxAdvance = this.getLineBreakIndex(this.pos, wrappingWidth);
//charAtMaxAdvance --;
//console.log("charAtMaxAdvance:", charAtMaxAdvance, ", [" + this.text.getCharAtPos(charAtMaxAdvance) + "]");
if (charAtMaxAdvance == this.limit) {
nextOffset = this.limit;
//console.log("charAtMaxAdvance == this.limit");
} else if (this.text.isNewLine(charAtMaxAdvance)) {
console.log("isNewLine");
nextOffset = charAtMaxAdvance+1;
} else if (this.text.isWhitespace(charAtMaxAdvance)) {
// TODO: find next noSpaceChar
//return nextOffset;
nextOffset = this.text.following(charAtMaxAdvance);
} else {
// Break is in a word; back up to previous break.
/*
var testPos = charAtMaxAdvance + 1;
if (testPos == this.limit) {
console.error("hbz...");
} else {
nextOffset = this.text.preceding(charAtMaxAdvance);
}
*/
nextOffset = this.text.preceding(charAtMaxAdvance);
if (nextOffset <= this.pos) {
nextOffset = Math.max(this.pos+1, charAtMaxAdvance);
}
}
}
if (nextOffset > offsetLimit) {
nextOffset = offsetLimit;
}
//console.log("nextOffset: " + nextOffset);
//console.groupEnd();
return nextOffset;
},
nextLayout: function(wrappingWidth) {
//console.groupCollapsed("[nextLayout]");
if (this.pos < this.limit) {
var requireNextWord = false;
var layoutLimit = this.nextOffset(wrappingWidth, this.limit, requireNextWord);
//console.log("layoutLimit:", layoutLimit);
if (layoutLimit == this.pos) {
//console.groupEnd();
return null;
}
var result = this.text.getLayout(this.pos, layoutLimit);
//console.log("layout: \"" + result + "\"");
// remove end of line
//var posEndOfLine = this.text.getEndIndex(this.pos);
//if (posEndOfLine < result.length)
// result = result.substr(0, posEndOfLine);
this.pos = layoutLimit;
//console.groupEnd();
return result;
} else {
//console.groupEnd();
return null;
}
},
getLineBreakIndex: function(pos, wrappingWidth) {
//console.group("[getLineBreakIndex]");
//console.log("pos:"+pos + ", text: \""+ this.text.text.replace(/\n/g, "_").substr(pos, 1) + "\"");
var bb = this.rafaelTextObject.getBBox();
var charNum = -1;
try {
var svgPoint = this.svgTextObject.getStartPositionOfChar(pos);
//var dot = this.paper.ellipse(svgPoint.x, svgPoint.y, 1, 1).attr({"stroke-width": 0, fill: Color.blue});
svgPoint.x = svgPoint.x + wrappingWidth;
//svgPoint.y = bb.y;
//console.log("svgPoint:", svgPoint);
//var dot = this.paper.ellipse(svgPoint.x, svgPoint.y, 1, 1).attr({"stroke-width": 0, fill: Color.red});
charNum = this.svgTextObject.getCharNumAtPosition(svgPoint);
} catch (e){
console.warn("getStartPositionOfChar error, pos:" + pos);
/*
var testPos = pos + 1;
if (testPos < this.limit) {
return testPos
}
*/
}
//console.log("charNum:", charNum);
if (charNum == -1) {
//console.groupEnd();
return this.text.getEndIndex(pos);
} else {
// When case there is new line between pos and charnum then use this new line
var newLineIndex = this.text.getEndIndex(pos);
if (newLineIndex < charNum ) {
console.log("newLineIndex <= charNum, newLineIndex:"+newLineIndex+", charNum:"+charNum, "\"" + this.text.text.substr(newLineIndex+1).replace(/\n/g, "↵") + "\"");
//console.groupEnd();
return newLineIndex;
}
//var charAtMaxAdvance = this.text.text.substring(charNum, charNum + 1);
var charAtMaxAdvance = this.text.getCharAtPos(charNum);
//console.log("!!charAtMaxAdvance: " + charAtMaxAdvance);
//console.groupEnd();
return charNum;
}
},
getPosition: function() {
return this.pos;
}
};
// ******
function drawMultilineText(text, x, y, boxWidth, boxHeight, options) {
var TEXT_PADDING = 3;
var width = boxWidth - (2 * TEXT_PADDING);
if (boxHeight)
var height = boxHeight - (2 * TEXT_PADDING);
var layouts = [];
var measurer = new LineBreakMeasurer(paper, text, font);
var lineHeight = measurer.rafaelTextObject.getBBox().height;
console.log("text: ", text.replace(/\n/g, "↵"));
if (height) {
var availableLinesCount = parseInt(height/lineHeight);
console.log("availableLinesCount: " + availableLinesCount);
}
var i = 1;
while (measurer.getPosition() < measurer.text.getEndIndex()) {
var layout = measurer.nextLayout(width);
//console.log("LAYOUT: " + layout + ", getPosition: " + measurer.getPosition());
if (layout != null) {
if (!availableLinesCount || i < availableLinesCount) {
layouts.push(layout);
} else {
layouts.push(fitTextToWidth(layout + "...", boxWidth));
break;
}
}
i++;
};
console.log(layouts);
measurer.rafaelTextObject.attr({"text": layouts.join("\n")});
//measurer.rafaelTextObject.attr({"text-anchor": "end"});
//measurer.rafaelTextObject.attr({"text-anchor": "middle"});
if (options)
measurer.rafaelTextObject.attr({"text-anchor": options["text-anchor"]});
var bb = measurer.rafaelTextObject.getBBox();
//measurer.rafaelTextObject.attr({"x": x + boxWidth/2});
if (options["vertical-align"] == "top")
measurer.rafaelTextObject.attr({"y": y + bb.height/2 + TEXT_PADDING});
else
measurer.rafaelTextObject.attr({"y": y + height/2});
//var bb = measurer.rafaelTextObject.getBBox();
if (measurer.rafaelTextObject.attr("text-anchor") == "middle" )
measurer.rafaelTextObject.attr("x", x + boxWidth/2 + TEXT_PADDING/2);
else if (measurer.rafaelTextObject.attr("text-anchor") == "end" )
measurer.rafaelTextObject.attr("x", x + boxWidth + TEXT_PADDING/2);
else
measurer.rafaelTextObject.attr("x", x + boxWidth/2 - bb.width/2 + TEXT_PADDING/2);
var boxStyle = {stroke: Color.LightSteelBlue2, "stroke-width": 1.0, "stroke-dasharray": "- "};
/*
var box = paper.rect(x+.0 + boxWidth/2 - bb.width/2+ TEXT_PADDING/2, y + .5 + boxHeight/2 - bb.height/2, width, height).attr(boxStyle);
box.attr("height", bb.height);
*/
//var box = paper.rect(bb.x - .5 + bb.width/2 + TEXT_PADDING, bb.y + bb.height/2, bb.width, bb.height).attr(boxStyle);
var textAreaCX = x + boxWidth/2;
var textAreaCY = y + height/2;
var dotLeftTop = paper.ellipse(x, y, 3, 3).attr({"stroke-width": 0, fill: Color.LightSteelBlue, stroke: "none"});
var dotCenter = paper.ellipse(textAreaCX, textAreaCY, 3, 3).attr({fill: Color.LightSteelBlue2, stroke: "none"});
/*
// real bbox
var bb = measurer.rafaelTextObject.getBBox();
var rect = paper.rect(bb.x+.5, bb.y + .5, bb.width, bb.height).attr({"stroke-width": 1});
*/
var boxStyle = {stroke: Color.LightSteelBlue2, "stroke-width": 1.0, "stroke-dasharray": "- "};
var rect = paper.rect(x+.5, y + .5, boxWidth, boxHeight).attr(boxStyle);
}
/*
for (var i=0; i<1; i++) {
var t = text;
//var t = "Высококвалифицирова";
var text = paper.text(300, 100, t).attr(font).attr("text-anchor", "start");
var bbText = text.getBBox();
paper.rect(300+.5, 100 + .5, bbText.width, bbText.height).attr({"stroke-width": 1});
console.log("t: ", t.replace(/\n/g, "↵"));
while (measurer.getPosition() < measurer.text.getEndIndex()) {
var layout = measurer.nextLayout(width);
//console.log("LAYOUT: " + layout + ", getPosition: " + measurer.getPosition());
if (layout != null)
layouts.push(layout);
};
measurer.rafaelTextObject.attr("text", layouts.join("\n"));
var bb = measurer.rafaelTextObject.getBBox();
var rect = paper.rect(bb.x+.5, bb.y + .5, bb.width, bb.height).attr({"stroke-width": 1});
lay.push(layouts);
console.log(layouts);
}
*/
var fitTextToWidth = function(original, width) {
var text = original;
// TODO: move attr on parameters
var attr = {font: "11px Arial", opacity: 0};
// remove length for "..."
var dots = paper.text(0, 0, "...").attr(attr).hide();
var dotsBB = dots.getBBox();
var maxWidth = width - dotsBB.width;
var textElement = paper.text(0, 0, text).attr(attr).hide();
var bb = textElement.getBBox();
// it's a little bit incorrect with "..."
while (bb.width > maxWidth && text.length > 0) {
text = text.substring(0, text.length - 1);
textElement.attr({"text": text});
bb = textElement.getBBox();
}
// remove element from paper
textElement.remove();
if (text != original) {
text = text + "...";
}
return text;
}
var x=100, y=90, height=20;
var options = {"text-anchor": "middle", "boxHeight": 150, "vertical-align": "top"};
var options = {"boxHeight": 150, "vertical-align": "top"};
drawMultilineText(text, x, y, 150, 100, options);
};
