I am using kendo "diagram" control in my project to create sequence diagram. I am adding "textblock" control of kendo "diagram" to show some text.
however I want to show wrapped text value in "textblock" but it is not supported by kendo.
Please suggest me, if there is a way to support wrap text in "textblock" or any other alternate control of "diagram" that support same functionality of "textblock"
Thanks
Vipul
function visualTemplate(options) {
var diagram = kendo.dataviz.diagram;
var dataItem = options.dataItem;
var group = new diagram.Group();
group.append(new diagram.Rectangle({
width: 300,
height: 200,
stroke: {
width: 0
},
fill: "#e8eff7"
}));
group.append(new diagram.Rectangle({
width: 8,
height: 200,
fill: "#3399cc",
stroke: {
width: 0
}
}));
var layout = new diagram.Layout(new diagram.Rect(15, 0, 280, 200), {
alignContent: "center",
spacing: 4
});
group.append(layout);
var texts = dataItem.text.split(" ");
for (var i = 0; i < texts.length; i++) {
layout.append(new diagram.TextBlock({
text: texts[i]
}));
}
layout.reflow();
return group;
}
from release 2015.3
Related
my code is to allow sliding the same divs several times over the images, which are documents, the idea is to drag the signatures over the documents
Problems
Dragged divs are allowing to stay out of document images
Dragged divs are not being cloned, I need to drag multiple signatures
Code jsFiddle
JS Code
$(".assinaturaImagem").draggable({
containment: ".documents",
cursor: "all-scroll",
scroll: false,
//helper: "clone",
grid: [2, 2],
zIndex: 1000,
stop: function(e, ui) {
var finalxPos = ui.position.left;
var finalyPos = ui.position.top;
console.log('Stop: ' + finalxPos + ' - ' + finalyPos);
$('.assinaturaImagem').draggable().data()["ui-draggable"].cancelHelperRemoval = true;
},
helper: function (e, ui){
return $(this).clone();
}
});
$("#containerDocuments").droppable({
drop: function(e, ui) {
var xPos = ui.offset.left - $(this).offset().left;
var yPos = ui.offset.top - $(this).offset().top;
var assinaturaID = ui.draggable.attr('assinatura');
var el = ui.helper.detach();
el.css({
top: "",
left: "",
position: "absolute",
"z-index": 1000
}).appendTo(this).position({
my: "center",
at: "center",
of: e
});
}
});
I am working on a Gantt-like task display using HTML5 canvas, and the Konvajs canvas library.
Deconstructing a Gantt chart into its components leads me currently to a view as below. Here 1 is the list of tasks, 2 is the task bar area, 3 is a task bar, and 4 is a text cell.
For this question I am seeking code to construct 1 & 4. The data to be displayed will be delivered in plain JS objects with a nested list of tasks where each task has a number, name, assigned-to person name, start date, end date, days duration, and % complete.
So the requirement is to be able to construct a spreadsheet-like panel such as is seen on the left hand side of a Gantt chart.
I have something part developed which I shall post as an answer. However this seems like such as common need that I am hoping there is someone out there with code they can cut & paste into SO to lead the way.
Note: Gantt in sample image is from Vertex42.
So here is my own fumbling attempt at an approach. Can anyone improve upon it or am I going down the wrong road.
EDIT: I now have a fledgling component for drawing text into the spreadsheet-like cells, including the percent complete shading. To keep this answer uncluttered, this additional component is in this codepen.
// this is the object that defines our grid
//
var gridData = { name: 'grid1', width: 350, height: 400, rowHeight: 24, padding: 4, fill: 'azure', gridLineColor: '#ccc', header: {size: 16, fill: 'black', color: 'white' }, data: {size: 16, fill: 'azure', color: 'black' },
row: [
{ cells: // row 1
[
{ width: 50, text: 'Item', style: 'header'},
{ width: 240, text: 'Name', style: 'header'},
{ width: 60, text: 'Status', style: 'header'},
]
},
{ cells: // row 2
[
{ text: '1'},
{ text: 'Find tea pot'},
{ text: '100%'},
]
},
{ cells: // row 3
[
{ text: '2'},
{ text: 'Boil water'},
{ text: '60%'},
]
}
]
}
// From here on could be wrapped into a component that churns out grids. Maybe you pass in the id of the stage container
// and the data model you want to produce, etc.
// Set up the canvas / stage
var stage = new Konva.Stage({container: 'container1', width: 600, height: 300});
// Add a layer
var layer = new Konva.Layer({draggable: false});
stage.add(layer);
// make a main group for the grid, call it a panel. Assigning a name may be handy later
var panel = new Konva.Group({name: gridData.name});
layer.add(panel); // Add the panel to the layer
// a group has no visual properties. Add a background rect to hold the colour fill
var panelRect = new Konva.Rect({width: gridData.width, height: gridData.height, fill: gridData.fill})
panel.add(panelRect);
var topLeft = {x: 0, y: 0}; // Since we are drawing a grid, we need to compute the position of each cell
for (var i = 0; i < gridData.row.length; i = i + 1){
topLeft.x = 0; // reset x at start of each row
// iterate for each cell on the row
for (var j = 0; j < gridData.row[i].cells.length; j = j + 1){
var cell = new Konva.Rect({name: 'cellBg', // assign a name for later searching
x: topLeft.x, y: topLeft.y, // position as computed
width: gridData.row[0].cells[j].width, // use the first row from celldate to get the cell width
height: gridData.rowHeight, // grid has a uniform row height
stroke: gridData.gridLineColor, // and line colour
strokeWidth: 1, // use a set line width but you can add to the gridData object as needed.
fill: (i === 0 ? gridData.header.fill : gridData.data.fill), // use the given header text color
});
panel.add(cell);
// Add text to the cell. Note that if you wanted to be using alignments you would need to draw the text off-screen and
// get width/height of that text then use those values for positioning calculations. Once you have the rect size of the
// text, all the alignments are simple math.
var text = new Konva.Text({ x: topLeft.x + gridData.padding, // add padding to locate the text nicely into the cell
y: topLeft.y + gridData.padding,
// use the given text size
fontSize: (i === 0 ? gridData.header.size : gridData.data.size),
// use the given header text color
fill: (i === 0 ? gridData.header.color : gridData.data.color),
text: gridData.row[i].cells[j].text, // set the text value.
listening: false // stop text interfering with mouse events
});
panel.add(text);
cell.on('mouseover', function(evt){
var shape = evt.target;
$(shape).data('bgColor', shape.fill());
shape.fill('lime');
layer.draw();
})
cell.on('mouseout', function(evt){
var shape = evt.target;
shape.fill($(shape).data('bgColor'));
layer.draw();
})
topLeft.x = topLeft.x + gridData.row[0].cells[j].width; // offset the computed next cell x value by the width of the cell
}
topLeft.y = topLeft.y + gridData.rowHeight; // offset the computed next cell y value by the height of the row
}
layer.draw();
stage.draw();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<div id='container1' style="width: 300px, height: 200px; background-color: silver;"></div>
I want to know how could i convert text into uppercase in canvas using kinetic js.
Here is my code for canvas with image and text:
top_text_val = "INSERT TOP TEXT"; //Default top text on meme
bottom_text_val = "INSERT BOTTOM TEXT"; //Default bottom text on meme
var stage = new Kinetic.Stage({
container: 'meme-img',
width: 735, //width of container
height: 540, //height of container
});
var layer = new Kinetic.Layer(); //new object of kinetic layer
var imageObj = new Image(); //new image object to load image
var top_text;
var bottom_text;
//image onload event code
imageObj.onload = function() {
var image_shape = new Kinetic.Image({ //set image display dimensions
image: imageObj,
width: 735,
height: 540
});
top_text = new Kinetic.Text({ // Code to display top default text on meme image
x: 100,
y: 35,
text: top_text_val,
fontSize: 80,
fontFamily: 'Impact',
fill: '#fff',
align: "center",
stroke: 'black',
strokeWidth: 4,
});
layer.add(image_shape); // add the shape to the layer
layer.add(top_text); // add top text to the layer
stage.add(layer); // add the layer to the stage
};
if(image_link.trim().length>0) imageObj.src = image_link;
Now i want to set text and want to set text in Uppercase on keyup event of some text box. Please refer below code for same:
$('#txtTop').on('keyup',function(){
var value = $(this).val();
top_text.setText(value);
if($('#chkAllCaps').is(':checked')){
//here i need code to set uppercase text-transform
}
layer.draw();
});
I have tried text-transform also but it is not working.
Please kindly help me out.
Thanks!!
string.toUpperCase() would work in this case. The toUpperCase() method converts a string to uppercase letters and it would be better to add mouse click event on #chkAllCaps element and make a function for render.
This is jsfiddle: http://jsfiddle.net/6t7ohbnh/1/
Javascript
$('#txtTop').on('keyup', function() {
render();
});
$('#chkAllCaps').on('click', function() {
render();
});
function render(){
var value = $('#txtTop').val();
if ($('#chkAllCaps').is(':checked')) {
top_text.setText(value.toUpperCase());
}else{
top_text.setText(value);
}
layer.draw();
}
I need to move this "box" group while touching or mousemoving inside the white-part of the screen.
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'fullscreenDiv',
width: 1180,
height: 664
});
var layer = new Kinetic.Layer();
var gamepart = new Kinetic.Rect({
x: 0,
y: 0,
width: 1180,
height: 500,
stroke: 'black',
strokeWidth: 4
});
var statuspart = new Kinetic.Rect({
x: 0,
y: 500,
width: 1180,
height: 164,
fill: 'blue',
stroke: 'black',
strokeWidth: 4
});
var group = new Kinetic.Group({
draggable: true,
dragBoundFunc: function(pos) {
return {
x: pos.x,
y: this.getAbsolutePosition().y
}
}
});
window.addEventListener('keydown', function(e) {
if (e.keyCode == 37) //Left Arrow Key
moveBoxes(-10);
if (e.keyCode == 39) //Right Arrow Key
moveBoxes(10);
stage.draw();
});
function moveBoxes(pixels)
{
group.x(group.x() + pixels);
stage.draw();
}
var oldPos = null;
var touchPos = null;
gamepart.on('touchmove mousemove', moving(stage.getPointerPosition()));
function moving(mousePos){
if(!oldPos)
oldPos = stage.getPointerPosition();
touchPos = mousePos;
var x = touchPos.x - oldPos.x;
moveBoxes(x);
}
</script>
The group is containing boxes I have added.
It is working fine to move by key-arrows and the page can be found at webpage
I think you want to use function for 'touchmove mousemove' events, neither a result of function.
gamepart.on('touchmove mousemove', function() {
moving(stage.getPointerPosition())
});
I have two views displayed in a window as follows
var topView = Ti.UI.createView({
top: 0,
height: '65%',
orientation: 'vertical'
});
var botView = Ti.UI.createView({
bottom: 0,
height: '35%',
layout: 'vertical'
});
i want to animate as follows:
when a button is clicked, topView increases to hundred percent while botView decreases to 0 percent. and the reverse happens when the button is clicked.
But i haven't found a way to do it for two views.
I hope someone can help out.
Thanks -:)
EDIT:
This is what i have done so far:
var expandFlag = false;
/* create animations */
var expandAnim_map = Ti.UI.createAnimation({
height : '100%',
duration: 300
});
var expandAnim_con = Ti.UI.createAnimation({
height: '0%',
duration : 300,
bottom:0
});
var collapseAnim_map = Ti.UI.createAnimation({
height: '65%',
duration: 300,
});
var collapseAnim_con = Ti.UI.createAnimation({
height: '35%',
duration: 300,
bottom:0
});
/* create animations */
if (expandFlag) {
botView.animate(collapseAnim_con);
topView.animate(collapseAnim_map);
expandFlag = false;
} else {
topView.animate(expandAnim_map);
botView.animate(expandAnim_con);
expandFlag = true;
}
This is irregular and not beautiful, hence i'm looking for a cleaner and smoother way to do it. Thanks.
I suggest that you animate only one view in order to get a good looking animation.
You can set a higher zIndex for the top view, and then expand and reduce only that view.
var expandFlag = false;
var topView = Ti.UI.createView({
top: 0,
zIndex: 2,
height: '65%',
orientation: 'vertical'
});
var botView = Ti.UI.createView({
bottom: 0,
zIndex: 1,
height: '35%',
layout: 'vertical'
});
/* create animations */
var expandAnim_map = Ti.UI.createAnimation({
height : '100%',
duration: 300
});
var collapseAnim_map = Ti.UI.createAnimation({
height: '65%',
duration: 300,
});
/* create animations */
if (expandFlag) {+
topView.animate(collapseAnim_map);
expandFlag = false;
} else {
topView.animate(expandAnim_map);
expandFlag = true;
}