I am using go.js to making the graphs. Everything is ok, but now I want to edit the text like the color. For this i have made a textarea. And I have done this, but the issue is when i change the text for one node it changes the text for the other nodes I have selected previously. Don't know where I am wrong. Here is my code:
var info = document.getElementById("myInfo");
myDiagram.addDiagramListener("ChangedSelection", function(e1) {
var sel = e1.diagram.selection;
var str = "";
if (sel.count === 0) {
str = "Selecting nodes in the main Diagram will display information here.";
info.innerHTML = str;
return;
} else if (sel.count > 1) {
str = sel.count + " objects selected.";
info.innerHTML = str;
return;
}
// One object selected, display some information
var elem = sel.first();
var shape = elem.findObject("SHAPE");
var txtblock = elem.findObject("TEXT");
str += "<h3>Selected Node:</h3>";
str += "<p>Figure: " + shape.figure + "</p>";
str += "<p>Text: <textarea style='height:100px;' id='nodetext'> " + txtblock.text + "</textarea></p>";
var strokeColor = shape.stroke;
str += '<p style="float: left; margin-right: 10px;">Color: <input type="text" id="custom" /></p>';
info.innerHTML = str;
$(document).on('keyup','#nodetext',function(a)
{
a.preventDefault();
txtblock.text=$(this).val() ;
})
// Initialize color picker
$("#custom").spectrum({
color: strokeColor,
// Change colors by constructing a gradient
change: function(color) {
var c = color.toRgb();
var r, g, b;
var grad1 = new go.Brush(go.Brush.Linear);
r = Math.min(c.r + 10, 255);
g = Math.min(c.g + 10, 255);
b = Math.min(c.b + 10, 255);
grad1.addColorStop(0, "rgb(" + r + "," + g + "," + b + ")");
grad1.addColorStop(0.5, color.toRgbString());
r = Math.max(c.r - 30, 0);
g = Math.max(c.g - 30, 0);
b = Math.max(c.b - 30, 0);
grad1.addColorStop(1, "rgb(" + r + "," + g + "," + b + ")");
shape.fill = grad1;
shape.stroke = "rgb(" + r + "," + g + "," + b + ")";
txtblock.stroke = (r < 100 && g < 100 && b < 100) ? "white" : "black";
}
});
});
To be clear, your question is about modifying the colors of a Shape and a TextBlock, not trying to modify the TextBlock.text property.
The problem is that you are adding a "change" event handler for the Spectrum object each time the Diagram.selection collection changes. That event handler is a closure that holds a reference to the particular selected Node. As the selection changes you add a new event handler, but the old ones are still there and being called, modifying the previously selected nodes.
There are several possible solutions. I suggest that you define Spectrum's change event handler only once, not in the "ChangedSelection" DiagramEvent listener. Set it to be a function that operates on all of the selected Nodes in the Diagram, not on a particular Node. Or perhaps change the colors if there is only one Node that is selected, it that is the policy that you want.
By the way, unless your Links are not selectable, your code ought to handle the case when the user selects a Link.
Related
Let's say I have some sentences in Google Docs. Just one sentences as an example:
"My house is on fire"
I actually changed the background color so that every verb is red and every noun blue.
Now I want to make a list with all the verbs and another one with the nouns. Unfortunately getBackgroundColor() only seems to work with paragraphs and not with single words.
My idea was, to do something like this (I didn't yet have the time to think about how to do the loop, but that's not the point here anyway):
var doc = DocumentApp.getActiveDocument();
var body = doc.getBody();
var paragraphs = body.getParagraphs();
var colorVar = paragraphs[0].getText().match(/\w+/).getBackgroundColor(); // The regEx matches the first word. Next I want to get the background color.
Logger.log(colorVar);
}
The error message I get goes something like this:
"The function getBackgroundColor in the text object couldn't be found"
Thx for any help, or hints or comments!
You want to retrieve the text from a paragraph.
You want to retrieve each word and the background color of each word from the retrieved the text.
In this case, the color is the background color which is not getForegroundColor().
You want to achieve this using Google Apps Script.
If my understanding is correct, how about this answer? Please think of this as just one of several possible answers.
At first, the reason of your error is that getBackgroundColor() is the method of Class Text. In your script, getBackgroundColor() is used for the string value. By this, the error occurs.
In this answer, for achieving your goal, each character of the text retrieved from the paragraph is scanned, and each word and the background color of each word can be retrieved.
Sample script:
function myFunction() {
var doc = DocumentApp.getActiveDocument();
var body = doc.getBody();
var paragraphs = body.getParagraphs();
var textObj = paragraphs[0].editAsText();
var text = textObj.getText();
var res = [];
var temp = "";
for (var i = 0; i < text.length; i++) {
var c = text[i];
if (c != " ") {
temp += c;
} else {
if (temp != "") res.push({text: temp, color: textObj.getBackgroundColor(i - 1)});
temp = "";
}
}
Logger.log(res) // result
}
When you run the script, the text of 1st paragraph is parsed. And you can see the result with res as an object.
In this sample script, the 1st paragraph is used as a test case. So if you want to retrieve the value from other paragraph, please modify the script.
References:
getBackgroundColor()
getBackgroundColor(offset)
editAsText()
If I misunderstood your question and this was not the direction you want, I apologize.
Here's a script your welcome to take a look at. It highlights text that a user selects...even individual letters. I did it several years ago just to learn more about how documents work.
function highLightCurrentSelection() {
var conclusionStyle = {};
conclusionStyle[DocumentApp.Attribute.BACKGROUND_COLOR]='#ffffff';
conclusionStyle[DocumentApp.Attribute.FOREGROUND_COLOR]='#000000';
conclusionStyle[DocumentApp.Attribute.FONT_FAMILY]='Calibri';
conclusionStyle[DocumentApp.Attribute.FONT_SIZE]=20;
conclusionStyle[DocumentApp.Attribute.BOLD]=false;
conclusionStyle[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT]=DocumentApp.HorizontalAlignment.LEFT;
conclusionStyle[DocumentApp.Attribute.VERTICAL_ALIGNMENT]=DocumentApp.VerticalAlignment.BOTTOM;
conclusionStyle[DocumentApp.Attribute.LINE_SPACING]=1.5;
conclusionStyle[DocumentApp.Attribute.HEIGHT]=2;
conclusionStyle[DocumentApp.Attribute.LEFT_TO_RIGHT]=true;
var br = '<br />';
var selection = DocumentApp.getActiveDocument().getSelection();
var s='';
if(selection) {
s+=br + '<strong>Elements in Current Selection</strong>';
var selectedElements = selection.getRangeElements();
for(var i=0;i<selectedElements.length;i++) {
var selElem = selectedElements[i];
var el = selElem.getElement();
var isPartial = selElem.isPartial();
if(isPartial) {
var selStart = selElem.getStartOffset();
var selEnd = selElem.getEndOffsetInclusive();
s+=br + 'isPartial:true selStart=' + selStart + ' selEnd=' + selEnd ;
var bgcolor = (el.asText().getBackgroundColor(selStart)=='#ffff00')?'#ffffff':'#ffff00';
el.asText().setBackgroundColor(selStart, selEnd, bgcolor)
}else {
var selStart = selElem.getStartOffset();
var selEnd = selElem.getEndOffsetInclusive();
s+=br + 'isPartial:false selStart=' + selStart + ' selEnd=' + selEnd ;
var bgcolor = (el.asText().getBackgroundColor()=='#ffff00')?'#ffffff':'#ffff00';
el.asText().setBackgroundColor(bgcolor);
}
var elType=el.getType();
s+=br + 'selectedElement[' + i + '].getType()= ' + elType;
if(elType==DocumentApp.ElementType.TEXT) {
var txt = selElem.getElement().asText().getText().slice(selStart,selEnd+1);
var elattrs = el.getAttributes();
if(elattrs)
{
s+=br + 'Type:<strong>TEXT</strong>';
s+=br + 'Text:<span style="color:#ff0000">' + txt + '</span>';
s+=br + 'Length: ' + txt.length;
s+=br + '<div id="sel' + Number(i) + '" style="display:none;">';
for(var key in elattrs)
{
s+= br + '<strong>' + key + '</strong>' + ' = ' + elattrs[key];
s+=br + '<input type="text" value="' + elattrs[key] + '" id="elattr' + key + Number(i) + '" />';
s+=br + '<input id="elattrbtn' + Number(i) + '" type="button" value="Save Changes" onClick="setSelectedElementAttribute(\'' + key + '\',' + i + ');" />'
}
s+='</div>Show/Hide';
}
}
if(elType==DocumentApp.ElementType.PARAGRAPH) {
var txt = selElem.getElement().asParagraph().getText();
var elattrs = el.getAttributes();
if(elattrs)
{
s+=br + '<strong>PARAGRAPH Attributes</strong>';
s+=br + 'Text:<span style="color:#ff0000">' + txt + '</span> Text Length= ' + txt.length;
for(var key in elattrs)
{
s+= br + key + ' = ' + elattrs[key];
}
}
}
s+='<hr width="100%"/>';
}
//var finalP=DocumentApp.getActiveDocument().getBody().appendParagraph('Total Number of Elements: ' + Number(selectedElements.length));
//finalP.setAttributes(conclusionStyle);
}else {
s+= br + 'No Elements found in current selection';
}
s+='<input type="button" value="Toggle HighLight" onclick="google.script.run.highLightCurrentSelection();"/>';
//s+='<input type="button" value="Exit" onClick="google.script.host.close();" />';
DocumentApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('htmlToBody').append(s).setWidth(800).setHeight(450).setTitle('Selected Elements'));
}
I'm using some javascript to draw a svg path using divs as endpoints.
var thepath = $('#thepath');
var startx1 = $('#box2').position().left;
var starty1 = $('#box2').position().top;
var realDealPath = 'M ' + startx1 + ',' + starty1;
var startx2 = $('#box3').position().left;
var starty2 = $('#box3').position().top;
realDealPath += 'L' + (startx2+50) + ',' + starty2;
var startx3 = $('#box6').position().left;
var starty3 = $('#box6').position().top;
realDealPath += 'L' + startx3 + ',' + starty3;
thepath.attr('d', realDealPath);
It works great! But when I scale the browser, the svg path doesn't adjust to the new div positions. Is there a way to keep these values updated?
Thank you so much for your help! :)
// T duplicates the selected element(s).
case 116:
elementSel = document.querySelectorAll("div.selected");
var elementClone,
tmp = getBrowserWidth(),
bww = tmp[0],
bwh = tmp[1];
for (i = 0; i < elementSel.length; i++) {
elementClone = elementSel[i].cloneNode(true);
elementClone.id = "boxID" + Math.floor((1 + Math.random()) * 0x10000);
elementClone.zIndex = "+1";
var posx = getRandomInt(1, bww) - elementSel[i].offsetWidth;
var posy = getRandomInt(1, bwh) - elementSel[i].offsetHeight;
elementClone.style.left = posx + " px";
elementClone.style.top = posy + " px";
elementSel[i].appendChild(elementClone);
elementSel[i].classList.toggle("selected");
console.log("Created " + elementSel.length + " elements.");
}
I am stuck doing a school assignment. I have tried to read similar questions but I do not get any further. The problem is elementClone.style.left/.top not getting assigned new values. Why?
Related answer:
It is working for me, may be the reason is you need to change the position and float attributes.
Ok, I solved it. The problem was " px". Crappé!
Okay, that title will sound a bit crazy. I have an object, which I build from a bunch of inputs (from the user). I set them according to their value received, but sometimes they are not set at all, which makes them null. What I really want to do, it make an item generator for WoW. The items can have multiple attributes, which all look the same to the user. Here is my example:
+3 Agility
+5 Stamina
+10 Dodge
In theory, that should just grab my object's property name and key value, then output it in the same fashion. However, how do I setup that if-statement?
Here is what my current if-statement MADNESS looks like:
if(property == "agility") {
text = "+" + text + " Agility";
}
if(property == "stamina") {
text = "+" + text + " Stamina";
}
if(property == "dodge") {
text = "+" + text + " Dodge";
}
You get that point right? In WoW there are A TON of attributes, so it would suck that I would have to create an if-statement for each, because there are simply too many. It's basically repeating itself, but still using the property name all the way. Here is what my JSFiddle looks like: http://jsfiddle.net/pm2328hx/ so you can play with it yourself. Thanks!
EDIT: Oh by the way, what I want to do is something like this:
if(property == "agility" || property == "stamina" || ....) {
text = "+" + text + " " + THE_ABOVE_VARIABLE_WHICH_IS_TRUE;
}
Which is hacky as well. I definitely don't want that.
if(['agility','stamina','dodge'].indexOf(property) !== -1){
text = "+" + text + " " + property;
}
If you need the first letter capitalized :
if(['agility','stamina','dodge'].indexOf(property) !== -1){
text = "+" + text + " " + property.charAt(0).toUpperCase() + property.substr(1);
}
UPDATE per comment:
If you already have an array of all the attributes somewhere, use that instead
var myatts = [
'agility',
'stamina',
'dodge'
];
if(myatts.indexOf(property) !== -1){
text = "+" + text + " " + property.charAt(0).toUpperCase() + property.substr(1);
}
UPDATE per next comment:
If you already have an object with the attributes as keys, you can use Object.keys(), but be sure to also employ hasOwnProperty
var item = {};
item.attribute = {
agility:100,
stamina:200,
dodge:300
};
var property = "agility";
var text = "";
if(Object.keys(item.attribute).indexOf(property) !== -1){
if(item.attribute.hasOwnProperty(property)){
text = "+" + text + " " + property.charAt(0).toUpperCase() + property.substr(1);
}
}
Fiddle: http://jsfiddle.net/trex005/rk9j10bx/
UPDATE to answer intended question instead of asked question
How do I expand the following object into following string? Note: the attributes are dynamic.
Object:
var item = {};
item.attribute = {
agility:100,
stamina:200,
dodge:300
};
String:
+ 100 Agility + 200 Stamina + 300 Dodge
Answer:
var text = "";
for(var property in item.attribute){
if(item.attribute.hasOwnProperty(property)){
if(text.length > 0) text += " ";
text += "+ " + item.attribute[property] + " " + property.charAt(0).toUpperCase() + property.substr(1);
}
}
It's unclear how you're getting these values an storing them internally - but assuming you store them in a hash table:
properties = { stamina: 10,
agility: 45,
...
}
Then you could display it something like this:
var text = '';
for (var key in properties) {
// use hasOwnProperty to filter out keys from the Object.prototype
if (h.hasOwnProperty(k)) {
text = text + ' ' h[k] + ' ' + k + '<br/>';
}
}
After chat, code came out as follows:
var item = {};
item.name = "Thunderfury";
item.rarity = "legendary";
item.itemLevel = 80;
item.equip = "Binds when picked up";
item.unique = "Unique";
item.itemType = "Sword";
item.speed = 1.90;
item.slot = "One-handed";
item.damage = "36 - 68";
item.dps = 27.59;
item.attributes = {
agility:100,
stamina:200,
dodge:300
};
item.durability = 130;
item.chanceOnHit = "Blasts your enemy with lightning, dealing 209 Nature damage and then jumping to additional nearby enemies. Each jump reduces that victim's Nature resistance by 17. Affects 5 targets. Your primary target is also consumed by a cyclone, slowing its attack speed by 20% for 12 sec.";
item.levelRequirement = 60;
function build() {
box = $('<div id="box">'); //builds in memory
for (var key in item) {
if (item.hasOwnProperty(key)) {
if (key === 'attributes') {
for (var k in item.attributes) {
if (item.attributes.hasOwnProperty(k)) {
box.append('<span class="' + k + '">+' + item.attributes[k] + ' ' + k + '</span>');
}
}
} else {
box.append('<span id="' + key + '" class="' + item[key] + '">' + item[key] + '</span>');
}
}
}
$("#box").replaceWith(box);
}
build();
http://jsfiddle.net/gp0qfwfr/5/
I use an amCharts' Stock Chart with the comparison function. I use the StockLegend object for the legend and I want to customize the valueTextComparing parameter. Actually, I have this :
var stockLegend = new AmCharts.StockLegend();
stockLegend.markerType = 'bubble';
stockLegend.markerSize = 8;
stockLegend.horizontalGap = 1;
stockLegend.spacing = 100;
stockLegend.periodValueText = '[[value.close]]';
stockLegend.valueTextComparing = '[[value]] | [[percents.value]]%';
What I want is to have two different colors for [[percents.value]] switch the value is positive or negative (and add bold effect on all the valueTextComparing).
I see in the documentation a valueFunction parameter, but not the equivalent for Comparing.
Can you help me?
OK I find a way to do what I want. It's a bit cheating but it's work.
First, I use a specific character to separate the value and the percent (here the "|") :
stockLegend.periodValueText = '[[value.close]]|[[percents.value.close]]%';
stockLegend.valueTextComparing = '[[value]]|[[percents.value]]%';
After that, I created another Legend without amCharts in HTML :
<div id="graph_second_legend">
<div id="gsl_0_circle"></div>
<div id="gsl_0"></div>
<div id="gsl_1"></div>
<div id="gsl_2_circle"></div>
<div id="gsl_2"></div>
<div id="gsl_3"></div>
</div>
Then, I created a function to change this legend :
function parseLegend($){
$('.amChartsLegend text').each(function(index){
switch(index){
case 0:
var text = $(this).text();
var content = '<span class="graph_fund_label">' + text + '</span>';
$('#gsl_'+index).html(content);
break;
case 2:
var text = $(this).text();
var content = '<span class="graph_index_label">' + text + '</span>';
$('#gsl_'+index).html(content);
break;
default:
var text = $(this).text().split('|');
var negative = text[1].split('-');
var negaClass = '';
if(negative.length > 1){
negaClass = ' negative';
}
var content = '<span class="graph_vl_amount">' + text[0] + '</span> ';
content = content + '<span class="graph_vl_percent' + negaClass + '">' + text[1] + '</span>';
$('#gsl_'+index).html(content);
break;
}
});
}
And finally, I call this function when graph selection changed :
chart.addListener("zoomed", function(event){
parseLegend($);
});
And when the mouse is moving hover the graph :
$('.amChartsPanel').mouseover(function(){
setTimeout(function(){parseLegend($);}, 10);
});
$('.amChartsPanel').mouseout(function(){
setTimeout(function(){parseLegend($);}, 10);
});
$('.amChartsPanel').mousemove(function(){
setTimeout(function(){parseLegend($);}, 10);
});
$('.amChartsPanel').mouseleave(function(){
setTimeout(function(){parseLegend($);}, 10);
});
(I used a timeout because amCharts take a moment to change the Legend and the javascript events are too fast for him).