get Active Elements of canvas not working - javascript

how can i get active Object or Active Group in below Example ?? i am using this . in this fiddle i am trying to create curved text whenever text-box value is changed . i need to get active object of canvas to apply size and all changes but active group or element not working . how can i do this ?
Fiddle ::
http://jsfiddle.net/NHs8t/8/
Below snippts of fiffle::
var act = canvas.getActiveGroup();
var obj = canvas.getActiveObject();
if(!obj)
{
console.log('object not Selected');
}else
{
console.log('Object selected');
}
if (!canvas.getActiveGroup())
{
console.log('if part executed--object not selected');
curvedText[cur] = new CurvedText(canvas, {});
curvedText[cur].center();
curvedText[cur].setText($(this).val());
cur++;
} else {
console.log('Else part executed-object selected');
act.setText($(this).val());
}

getActiveGroup seems to be buggy. getActiveObject returns the active group though, so you can go with that. Problem is you won't have access to your setText method through the group, so you'll have to keep a reference to the CurvedText instance in the group:
function CurvedText( canvas, options ){
...
this.group.curvedText = this;
}
and then
var act = canvas.getActiveObject();
act.curvedText.setText($(this).val());
like I did here.

Related

Grouping and Ungrouping Fabric.js objects

I've created a kind of 'polygon selector' or 'polygon maker' using fabric.js. Each click creates a corner of the polygon, which can be selected, moved, etc... double clicking the original point 'closes' the polygon. At this point I take all of the circles/lines that make up the polygons and group them. So far so good.
When such a group is double clicked, I would like it to ungroup and revert to movable nodes (i.e. moving the circles reshapes the polygon etc); but there's some strangeness going on - check out what happens when you move the circles, certain lines seem 'not joined' to the circles...
I've already reviewed every group/ungroup related fabric.js thread (here/there/everywhere). None seem to cover the type of 'connected' objects I have here.
The fiddle I put together to show the problem says it better than I can: http://jsfiddle.net/bhilleli/4v8mkw6q/
The broken bit of code is #:
//dbl clicked a group so lets ungroup it!
items = p._objects; // grab the items from the group you want to
// translate the group-relative coordinates to canvas relative ones
p._restoreObjectsState();
// remove the original group and add all items back to the canvas
canvas.remove(p);
for (var i = items.length - 1; i >= 0; i--) {
canvas.add(items[i]);
}
canvas.renderAll();
you can use fabric grouping tool
You can group and ungroup objects together, and manipulate them at the
same time
for example
var canvas = new fabric.Canvas('paper',{
isDrawingMode: true
});
$("#select").click(function(){
canvas.isDrawingMode = false;
});
$("#draw").click(function(){
canvas.isDrawingMode = true;
});
$("#group").on('click', function() {
var activegroup = canvas.getActiveGroup();
var objectsInGroup = activegroup.getObjects();
activegroup.clone(function(newgroup) {
canvas.discardActiveGroup();
objectsInGroup.forEach(function(object) {
canvas.remove(object);
});
canvas.add(newgroup);
});
});
$("#ungroup").click(function(){
var activeObject = canvas.getActiveObject();
if(activeObject.type=="group"){
var items = activeObject._objects;
alert(items);
activeObject._restoreObjectsState();
canvas.remove(activeObject);
for(var i = 0; i < items.length; i++) {
canvas.add(items[i]);
canvas.item(canvas.size()-1).hasControls = true;
}
canvas.renderAll();
}
});
please check following link
http://jsfiddle.net/softvar/NuE78/1/
if (!canvas.getActiveObject()) {
return;
}
if (canvas.getActiveObject().type !== 'group') {
return;
}
canvas.getActiveObject().toActiveSelection();
canvas.requestRenderAll();
From : http://fabricjs.com/manage-selection
if getActiveGroup() is not available then you can use this to group (after mouse selecting multiple objects):
toGroup() is only available if multiple objects are selected
var activeObj = canvas.getActiveObject();
var activegroup = activeObj.toGroup();
var objectsInGroup = activegroup.getObjects();
activegroup.clone(function(newgroup) {
canvas.remove(activegroup);
objectsInGroup.forEach(function(object) {
canvas.remove(object);
});
canvas.add(newgroup);
});
changes
http://fabricjs.com/v2-breaking-changes-2

Remove value from a var

I am having some problems removing parts of a var.
function hotBarClick() {
var likeCount = 0;
$.each(companies, function (key, value) {
if (value.liked) {
likeCount++;
}
if (value.liked && value.alreadyliked ==false) {
var content = value.getHtmlLogo();
matchesHtml.add(content);
this.alreadyliked = true;
}
if (value.liked == false && value.alreadyliked == true) {
var discontent = value.getHtmlLogo();
matchesHtml.remove(discontent);
this.alreadyliked = false;
}
});
I am making a app based on html and javascript. You can like/dislike companies in the neighbourhood. If you liked 5 companies or touch the "hotbar" you will see a slider(owl-carousel) with the logos of the companies you liked.
My problem is that if you liked a company first and then dislike it, i cant remove the images from the slider, that were previously shown.
var matcheshtml is the var containing this infomation. You can see that in my code i add stuff by matcheshtml.add() but i cant seem to use the .remove() method here?
How do i remove the good part?
BTW: i think discontent contains the correct value

CKEditor get table dialog class init Value in Set Up function of another element added on dialogDefinition

PLEASE READ QUESTION BEFORE READING CODE!!!
I've added a checkbox element on Dialog definition of the table dialog (it works). Now I want the checkbox to be checked by default when the table being edited has a certain class (which is usually visible on the advanced tab). According to the documentation, I should be able to do something like this in my setup function. I've tried many things and you could hopefully help me. This is my code.
CKEDITOR.on( 'dialogDefinition', function( evt )
{
var dialog = evt.data;
if(dialog.name == 'table' || dialog.name=='tableProperties')
{
// Get dialog definition.
var def = evt.data.definition;
var infoTab = def.getContents( 'info' );
infoTab.add(
{
type: 'checkbox',
id: 'myCheckBox',
label: 'Table Has Property',
setup: function()
{
//Class to look for if I successfully get the input's value
var classValueToLookFor = 'has-property';
// The current CKEditor Dialog Instance
var thisDialog = CKEDITOR.dialog.getCurrent();
// The Element whose value I want to get
var classElement = theDialog.getContentElement('advanced','advCSSClasses');
// Trying to Get Value of this class Element According to documentation
var containedClasses = theDialog.getValueOf('advanced','advCSSClasses');
// Trying to debug the value above
console.log(containedClasses); // This shows nothing
// Trying to debug InitValue which shows something according to prototype
console.log(classElement.getInitValue()); //This also shows nothing
//Checking if Element has the class I'm looking for to mark the checkbox
if(containedClasses.indexOf(classValueToLookFor) != -1)
{
//Check current checkbox since value has been found
this.setValue('checked');
}
}
onClick: function() // You can ignore this function, just put it in case you were wondering how I'm putting the has-property, might help someone else (works well) ;)
{
var checked = this.getValue();
var classValueToSet = 'has-property';
var thisDialog = CKEDITOR.dialog.getCurrent();
var containedClasses = theDialog.getValueOf('advanced','advCSSClasses');
if(checked)
{
if(containedClasses.indexOf(classValueToSet) != -1)
{
//console.log('already contains class: '+classValueToSet);
}
else
{
containedClasses += containedClasses+" "+classValueToSet;
}
}
else
{
if(containedClasses.indexOf(classValueToSet) != -1)
{
containedClasses = containedClasses.replace(classValueToSet,'');
}
else
{
//console.log('already removed class: '+classValueToSet);
}
}
thisDialog.setValueOf('advanced','advCSSClasses',containedClasses);
}
}
}
Here are some debug statements that can be helpful to add into the setup function and understand what is going on, you shouldn't need to go through all I've went through ;)
console.log('in setup function');
console.log(classElement);
console.log(classElement._);
console.log(classElement.getInitValue());
console.log(classElement.getInputElement());
var inputElement = classElement.getInputElement();
var inputElementId = inputElement.getId();
console.log($('#'+inputElementId+'.cke_dialog_ui_input_text'));
console.log(classElement.getInputElement().value);
It would be nice to test your answer before suggesting. Many of the things I've tried should work in theory, but are practically not working.
Alright, so finally after a few days of trial and error, this is what finally worked for me. Maybe it could be helpful to someone. I'm sure there should be a much cleaner way to do this. All the best to everyone.
setup: function()
{
//This current checkbox
var checkbox = this;
//the class I want to find on my table
var var classValueToLookFor = 'has-property';
//Current Dialog instance
var thisDialog = CKEDITOR.dialog.getCurrent();
//This code below gets a <td> element in the table
var startElement = thisDialog.getParentEditor().getSelection().getStartElement();
// This gets me the parent of the <td> element which is my current table instance
var parentTable = $(startElement.$.offsetParent);
//Finally check if the table has the property I'm looking for.
if(parentTable.hasClass(classValueToLookFor))
{
//Mark the checkbox
checkbox.setValue('checked');
}
}

Adobe Pro: Changing Color of FreeText Annotations with Javascript

I'm using Adobe Pro to edit PDFs in which a lot of Additions have been entered in the Form of FreeText Annotations.
Now i want to write a Script to Change the Textcolor in these to Black. It already works for Lines/Circles/... but not for the actual Text.
Here is what i have so far:
/* Bla */
var myDoc = event.target.doc;
if(!myDoc)
console.println("Failed to access document");
else
console.println("Opened Document");
//Color all Comments in Black
function colorComments(myDoc)
{
//Get a list of Comments
var commentList = myDoc.getAnnots();
if(commentList == null)
{
console.println("Failed to get Comments");
}
else
{
console.println("Found " + commentList.length + " Comments, Iterating through comments");
}
//Iterate through the comment List and change the Colors
for each(comment in commentList)
{
if(comment == null)
{
console.println("Found undefined annot!");
}
switch(comment.type)
{
case "FreeText":
{
//change stroke color
comment.strokeColor = color.black;
var contents = comment.richContents;
//Go through all spans and change the text color in each one
for each(s in contents)
{
console.println(s.text);
s.textColor = color.black;
}
break;
}
}
}
}
colorComments(myDoc);
Which prints the Contents of the Text in the Console, but the Color doesn't change at all.
It seems the "Span" object gets copied instead of referenced somewhere in my code.
Creating a array to hold the changed Spans and then assigning the array to comment.richContents seems to work fine.
case "FreeText":
{
var spans = new Array;
for each(span in comment.richContents)
{
span.textColor = color.red;
spans[spans.length] = span;
}
comment.richContents = spans;
break;
}
That works fine. (iterating over comments.richContents directly and changing the for each loop to a for loop didn't change the result though.
The answer to WHY it didn't work probably lies somewhere in the specifics of JS.

Creating a menu from and array that includes a title and a filename - Javascript/ Appcelerator

I'm not a programmer by trade but more of a tinkerer (noob)
I want to create a menu from titles contained in an array.
I have done this successfully by looping through the array and using the value at each step of the loop as a title for my buttons/tabs.
I want to add an eventlistener to each button with a link to unique pages. I had intended to do this by checking the label of the button and if it is value A then it gets a corresponding link and so on, and then assigning it to currentLink which is then referenced by theLink[t] each time it goes through the loop.
I think I nearly have it working but just lost on the dynamically adding a link bit.
Any help would be much appreciated.
Here is my code:
//function to check the label name and assign the relevant filename to be passed on
function winLink(currentTab){
if (currentTab == 'Audio'){
currentLink = 'audioPlayer.js';
pageWin.url = currentLink;
} else{
if (currentTab == 'Images'){
currentLink = 'images.js';
}
}
}
//function to change button colours according to active button
function button_colour(e){
if (clickedButton == ''){
clickedButton = e.source;
clickedButton.backgroundImage = tabBckImgSel;
} else {
clickedButton.backgroundImage = tabBckImg;
clickedButton = e.source;
clickedButton.backgroundImage = tabBckImgSel;
}
}
//Array that contains button names
var tabsArray =['Audio','Images','Video','Info','Materials','Further Reading','Map'];
//loop through array and create a holder, label and eventlistener to attach
for (var t=0;t<tabsArray.length;t++) {
//create view to act as button/tab area
viewButton[t] = Titanium.UI.createView({
borderWidth:1,
borderColor: tabBrdrColour,
width:tabWidth,
height:tabHeight,
left:leftTab + padding
});
//add the tab to the main menu view/area
menu.add(viewButton[t]);
//increment the left position for the next button to be placed to the right of the previous button
leftTab = viewButton[t].left + tabWidth;
Buttonlabel[t] = Titanium.UI.createLabel({
text: tabsArray[t],
font:{fontSize:13},
color:'#fff',
width:labelWidth,
textAlign:'center',
height:'auto'
});
viewButton[t].add(Buttonlabel[t]);
//pre declared variable to hold the title of the current label
currentTab = tabsArray[t];
//call to function to check label and set the relevant file to load
winLink(currentTab);
viewButton[t].addEventListener('singletap', function(e)
{
button_colour(e);
win.add(pageWin);
var theLink[t] = currentLink;
// alert (' Current link' + currentLink);
});
}
Would a hashtable be what you're looking for? It'll allow you to dynamically create and use those links.
http://download.oracle.com/javase/1.4.2/docs/api/java/util/HashSet.html
also I'd change this...
//function to check the label name and assign the relevant filename to be passed on
function winLink(currentTab){
if (currentTab == 'Audio'){
currentLink = 'audioPlayer.js';
pageWin.url = currentLink;
} else{
if (currentTab == 'Images'){
currentLink = 'images.js';
}
}
}
to...
//function to check the label name and assign the relevant filename to be passed on
function winLink(currentTab){
if (currentTab == 'Audio'){
currentLink = 'audioPlayer.js';
pageWin.url = currentLink;
} else if(currentTab == 'Images'){
currentLink = 'images.js';
}
}
It was bugging me :)

Categories