pasting the elements multiple times in rappid js - jointjs

I am using joint js and rappid with the angular 8 and I have done most of the tasks but in using keyboard events there seems to be a issue. When I copy an element and pasted it on graph it works fine. But for the next element selected it is pasting that new element multiple times.
Here is my code.
var keyboard = this.keyboard = new joint.ui.Keyboard();
var clipboard = this.clipboard = new joint.ui.Clipboard();
selection.collection.on('reset add remove', this.onSelectionChange.bind(this));
paper.on('element:pointerdown', function(elementView: joint.dia.ElementView,evt: joint.dia.Event) {
clipboard.clear();
keyboard.on({
'ctrl+c': function(evt) {
selection.collection.reset();
//clipboard.clear();
selection.collection.add(elementView.model);
clipboard.copyElements(selection.collection, paper.model);
//console.log(clipboard);
},
'ctrl+v': function(evt) {
//console.log(clipboard);
var pastedCells = clipboard.pasteCells(graph, {
translate: { dx: 20, dy: 20 },
useLocalStorage: true
});
var elements = _.filter(pastedCells, function(cell) {
return cell.isElement();
});
//console.log(elements);
// Make sure pasted elements get selected immediately. This makes the UX better as
// the user can immediately manipulate the pasted elements.
selection.collection.reset(elements);
},
});
});
onSelectionChange() {
const { paper, selection,clipboard } = this;
const { collection } = selection;
//console.log(collection.models.child);
// collection.models.forEach(function(model: joint.dia.Element) { if(!model.collection) { clipboard.clear();}});
paper.removeTools();
joint.ui.Halo.clear(paper);
joint.ui.FreeTransform.clear(paper);
joint.ui.Inspector.close();
if(collection.first() == undefined){
clipboard.clear();
}
if (collection.length === 1) {
var primaryCell = collection.first();
var primaryCellView = paper.requireView(primaryCell);
selection.destroySelectionBox(primaryCell);
this.selectPrimaryCell(primaryCellView);
} else if (collection.length === 2) {
collection.each(function(cell) {
selection.createSelectionBox(cell);
});
}
}
selectPrimaryCell(cellView) {
var cell = cellView.model
if (cell.isElement()) {
this.selectPrimaryElement(cellView);
} else {
this.selectPrimaryLink(cellView);
}
//this.createInspector(cell);
}
selectPrimaryElement(elementView) {
var element = elementView.model;
console.log(element.collection);
new joint.ui.FreeTransform({
cellView: elementView,
allowRotation: false,
preserveAspectRatio: !!element.get('preserveAspectRatio'),
allowOrthogonalResize: element.get('allowOrthogonalResize') !== false
}).render();
}
I have different thing like resetting the clipboard , resetting the selection and resetting the keyboard but nothing seems to be working.

Related

Guidewire : Refresh List view when the button is clicked

The Listview(partial page) is not getting refreshed when I click the button. It keeps on adding the rows whenever the buttons are clicked.
Below are the functions for adding the drivers.
function getDriversFromPolicy_CA7() : CA7CommAutoDriver[] {
var drivers = this.Policy.LatestPeriod.CA7Line.Drivers // **this** Contingency Entity
var excludeDrivers = this.ExcludeDrivers_CA7.toList() // Contingency entity has a ExcludeDrivers_CA7 array
if(excludeDrivers.Empty) {
drivers?.each(\driver -> this.addToExcludeDrivers_CA7(driver) )
} else {
drivers.each(\driver -> {
if (excludeDrivers.where(\elt -> elt.LicenseNumber == driver.LicenseNumber).toList().Count == 0) {
this.addToExcludeDrivers_CA7(driver)
}
})
}
return this.ExcludeDrivers_CA7
}
function getDriversFromTransaction_CA7() : CA7CommAutoDriver[] {
var drivers = this.PolicyPeriod.CA7Line.Drivers.toList()
var excludeDrivers = this.ExcludeDrivers_CA7.toList()
if(this.ExcludeDrivers_CA7.IsEmpty) {
drivers?.each(\driver -> this.addToExcludeDrivers_CA7(driver) )
} else {
// this.ExcludeDrivers_CA7.toList().retainAll(drivers.toList())
drivers.each(\driver -> {
if (excludeDrivers.where(\elt -> elt.LicenseNumber == driver.LicenseNumber).toList().Count == 0) {
this.addToExcludeDrivers_CA7(driver)
}
})
}
return this.ExcludeDrivers_CA7
}
function removeDrivers_CA7(driver : CA7CommAutoDriver) {
this.removeFromExcludeDrivers_CA7(driver)
}
pcf screenshot for reference
UI screenshot for reference

Prevent nested lists in text-editor (froala)

I need to prevent/disable nested lists in text editor implemented in Angular. So far i wrote a hack that undos a nested list when created by the user. But if the user creates a normal list and presses the tab-key the list is shown as nested for a few milliseconds until my hack sets in back to a normal list. I need something like event.preventDefault() or stopPropagation() on tab-event keydown but unfortunately that event is not tracked for some reason. Also the froala settings with tabSpaces: falseis not showing any difference when it comes to nested list...in summary i want is: if the user creates a list and presses the tab-key that nothing happens, not even for a millisecond. Has anyone an idea about that?
Froala’s support told us, there’s no built-in way to suppress nested list creation. They result from TAB key getting hit with the caret on a list item. However we found a way to get around this using MutationObserver
Basically we move the now nested list item to his former sibling and remove the newly created list. Finally we take care of the caret position.
var observer = new MutationObserver(mutationObserverCallback);
observer.observe(editorNode, {
childList: true,
subtree: true
});
var mutationObserverCallback = function (mutationList) {
var setCaret = function (ele) {
if (ele.nextSibling) {
ele = ele.nextSibling;
}
var range = document.createRange();
var sel = window.getSelection();
range.setStart(ele, 0);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
};
var handleAddedListNode = function (listNode) {
if (! listNode.parentNode) {
return;
}
var parentListItem = listNode.parentNode.closest('li');
if (!parentListItem) {
return;
}
var idx = listNode.children.length - 1;
while (idx >= 0) {
var childNode = listNode.children[idx];
if (parentListItem.nextSibling) {
parentListItem.parentNode.insertBefore(childNode, parentListItem.nextSibling);
} else {
parentListItem.parentNode.appendChild(childNode);
}
--idx;
}
setCaret(parentListItem);
listNode.parentNode.removeChild(listNode);
};
mutationList.forEach(function (mutation) {
var addedNodes = mutation.addedNodes;
if (!addedNodes.length) {
return;
}
for (var i = 0; i < addedNodes.length; i++) {
var currentNode = addedNodes[i];
switch (currentNode.nodeName.toLowerCase()) {
case 'ol':
case 'ul':
handleAddedListNode(currentNode);
break;
// more optimizations
}
}
})
};

Phaserjs, sprite overlap, not working

I am new to Phaserjs, trying to create basic drag-drop style game.
I have created the game and add arcade physics (this.game.physics.arcade.enable(this.orange_outline);)
Currently overlap happen as soon as the edges collide.
I want to detect that my code should trigger when 50% overlap happen. is it possible in phaserjs?
var GameState = {
init:function(){
this.physics.startSystem(Phaser.Physics.ARCADE);
},
create: function () {
this.background = this.game.add.sprite(0, 0, 'background');
this.overlapHappen = false;
this.orange_outline = this.game.add.sprite(459,199,'orange_outline');
this.orange_outline.frame = 2;
this.orange_outline.anchor.setTo(.5);
this.orange_outline.customParams = {myName:'orange_outline',questionImg:'orange'};
this.orange_inner = this.game.add.sprite(150,197,'orange_inner');
this.orange_inner.anchor.setTo(.5);
this.orange_inner.customParams = {myName:'orange_inner',questionImg:'orange',targetKey:this.orange_outline,targetImg:'orange_outline'};
this.orange_inner.frame = 1;
this.orange_inner.inputEnabled = true;
this.orange_inner.input.enableDrag();
this.orange_inner.input.pixelPerfectOver = true;
this.orange_inner.events.onDragStart.add(this.onDragStart,this);
// this.game.physics.enable(this.orange_inner,Phaser.Physics.ARCADE);
this.game.physics.arcade.enable(this.orange_inner);
this.game.physics.arcade.enable(this.orange_outline);
this.orange_inner.events.onDragStop.add(this.onDragStop,this);
},
update: function () {
//this.orange.animations.play('orange_one',1)
},
onDragStart:function(sprite,pointer){
//console.log(sprite.key + " dragged")
},
onDragStop:function(sprite,pointer){
var endSprite = sprite.customParams.targetKey;
//console.log(sprite.customParams);
this.stopDrag(sprite,endSprite)
},
stopDrag:function(currentSprite,endSprite){
if (!this.game.physics.arcade.overlap(currentSprite, endSprite, function() {
var currentSpriteTarget = currentSprite.customParams.targetImg;
var endSpriteName = endSprite.customParams.myName;
if(currentSpriteTarget === endSpriteName){
currentSprite.input.draggable = false;
currentSprite.position.copyFrom(endSprite.position);
currentSprite.anchor.setTo(endSprite.anchor.x, endSprite.anchor.y);
}
console.log(currentSpriteTarget,endSpriteName);
})) {
//currentSprite.position.copyFrom(currentSprite.originalPosition);
console.log('you')
}
}
}
In stopDrag() I am detecting overlap.
You can try to get the amount of horizontal and vertical overlap amount and check if it satisfies a certain threshold. This can be done in additional overlap function callback, that is called processCallback in documentation. As an example:
if (!this.game.physics.arcade.overlap(currentSprite, endSprite, function() {
//your callback !
},function() {
if (this.game.physics.arcade.getOverlapX(currentSprite, endSprite) > currentSprite.width / 2
&& this.game.physics.arcade.getOverlapY(currentSprite, endSprite) > currentSprite.height / 2) {
//Overlaping !
return true;
} else {
//as if no overlap occured
return false;
}
},this) {
//
}
Another way to do this (other than what Hamdi Douss offers) is to resize your body to only take up 50% of the area. This will automatically ensure that collisions/overlap don't occur unless the reduced bodies touch each other.
To view your current body, use Phaser's debug methods
this.game.debug.body(someSprite, 'rgba(255,0,0,0.5)');

Flot Legend - Interactive

Was wondering if there is a plug-in already available for FLOT chart legend to be interactive like in highcharts
Providing the example out here
http://jsfiddle.net/yohanrobert/T3Dpf/1/
However, in a turn of event I tried my hand on mouseover event through jquery
$(".legendLabel").mouseover(function(){
// Unhighlight all points
console.log($(this))
plot.unhighlight();
// The X value to highlight
var value = parseInt($(this).context.innerText.replace('Series ',''))-1;
// Retrieve the data the plot is currently using
var data = plot.getData();
// Iterate over each series and all points
for (var s=0; s<data.length; s++) {
var series = data[s];
if(s==value){
for (var p=0; p<series.data.length; p++) {
plot.highlight(s, p);
}
}
}
});
Can anyone help me achieve the interactivity like in the example?
Extended togglePlot function for different plot types (we save the original plot type in the hidden property):
togglePlot = function (seriesIdx) {
var plotTypes = ['lines', 'points', 'bars'];
var someData = somePlot.getData();
var series = someData[seriesIdx];
$.each(plotTypes, function (index, plotType) {
if (series[plotType]) {
if (series[plotType].show) {
series[plotType].show = false;
series[plotType].hidden = true;
}
else if (series[plotType].hidden) {
series[plotType].show = true;
series[plotType].hidden = false;
}
}
});
somePlot.setData(someData);
somePlot.draw();
}
For highlighting a data series like in highcharts add a highlightPlot function like this (here only for line series):
highlightPlot = function (seriesIdx) {
var someData = somePlot.getData();
$.each(someData, function (index, series) {
someData[index].lines.lineWidth = (index == seriesIdx ? 4 : 2);
});
somePlot.setData(someData);
somePlot.draw();
}
I also changed the inline event handlers to jQuery event handling to make it cleaner:
$(document).on({
click: function () {
togglePlot($(this).data('index'));
return false;
},
mouseover: function () {
highlightPlot($(this).data('index'));
},
mouseout: function () {
highlightPlot(-1);
},
}, 'a.legend');
See this updated fiddle for the full example.

MOSS 2007: Adding Filter to ListView web part

I have been dropped into a sharepoint 2007 project, and i have relatively little experience with altering existing webparts.
My first task is to add a filter to two out of three columns in a list view. My Lead Dev suggests trying to add a jquery combo-box filter, and another dev suggests extending the web part and overriding some of the functionality.
What i think is a good option is to change the context menu for the list view headers, so that instead of "Show Filter Choices" bringing up a standard dropdownlist that only responds to the first letter, it would have a jquery combobox. And maybe if the business requests it, change the wording of that option.
My question to you is, what would be a good path to take on this? Also, what resources are there besides traipsing around books and blogs are there to guide an sp newbie to do this?
Thanks.
How about something like this:
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
$(document).ready(function()
{
jQuery.extend(jQuery.expr[':'], {
containsIgnoreCase: "(a.textContent||a.innerText||jQuery(a).text()||'').toLowerCase().indexOf((m[3]||'').toLowerCase())>=0"
});
$("table.ms-listviewtable tr.ms-viewheadertr").each(function()
{
if($("td.ms-vh-group", this).size() > 0)
{
return;
}
var tdset = "";
var colIndex = 0;
$(this).children("th,td").each(function()
{
if($(this).hasClass("ms-vh-icon"))
{
// attachment
tdset += "<td></td>";
}
else
{
// filterable
tdset += "<td><input type='text' class='vossers-filterfield' filtercolindex='" + colIndex + "' /></td>";
}
colIndex++;
});
var tr = "<tr class='vossers-filterrow'>" + tdset + "</tr>";
$(tr).insertAfter(this);
});
$("input.vossers-filterfield")
.css("border", "1px solid #7f9db9")
.css("width", "100%")
.css("margin", "2px")
.css("padding", "2px")
.keyup(function()
{
var inputClosure = this;
if(window.VossersFilterTimeoutHandle)
{
clearTimeout(window.VossersFilterTimeoutHandle);
}
window.VossersFilterTimeoutHandle = setTimeout(function()
{
var filterValues = new Array();
$("input.vossers-filterfield", $(inputClosure).parents("tr:first")).each(function()
{
if($(this).val() != "")
{
filterValues[$(this).attr("filtercolindex")] = $(this).val();
}
});
$(inputClosure).parents("tr.vossers-filterrow").nextAll("tr").each(function()
{
var mismatch = false;
$(this).children("td").each(function(colIndex)
{
if(mismatch) return;
if(filterValues[colIndex])
{
var val = filterValues[colIndex];
// replace double quote character with 2 instances of itself
val = val.replace(/"/g, String.fromCharCode(34) + String.fromCharCode(34));
if($(this).is(":not(:containsIgnoreCase('" + val + "'))"))
{
mismatch = true;
}
}
});
if(mismatch)
{
$(this).hide();
}
else
{
$(this).show();
}
});
}, 250);
});
});
});
It will need to be added to the page via a content editor web part.

Resources