I am creating diagram dynamically.Let's say we have three rectangle shapes Activity1,Activity2 and Activity3 and we connect
Activity1 to Activity2 ,
Activity2 to Activity3 ,
Activity3 to Activity1
here we have a loop back on Activity3 to Activity1
(https://imgur.com/vLkJ1jp)
Doing so hides the link from Activity3 to Activity1 behind the Activity2
Is there any automatic path creation between shapes or i have to manually describe vertices for lines
Desired Result:
(https://imgur.com/a/WrZ0L73)
I just resolved it using
router: { name: 'manhattan' }
...
var link = new joint.shapes.standard.Link({ connector: { name: 'rounded' }, router: { name: 'manhattan' } });
link.source(element1);
link.target(element2);
link.addTo(graph);
...
Related
I have a Popover containing a list + "Add item" button, so the user can dynamically add items to the list (after 3 items the list gets overflow). The problem starts if the Popover open in the bottom of the window and contain less than 3 items, then the user clicks the "Add item" button, the Popover gets more height thus part of it is outside of the window.
I want to force the Popover to update and gets the right position (Modifiers, ResizeObserver..) but I can't find the right way to make it work.
Any suggestions?
For example:
const observeReferenceModifier = {
name: 'observeReferenceModifier',
enabled: true,
phase: 'write',
effect: ({ state, instance }) => {
const RO_PROP = '__popperjsRO__';
const { reference } = state.elements;
reference[RO_PROP] = new ResizeObserver(entries => {
console.log('size-updated: ', reference.id);
instance.update();
});
reference[RO_PROP].observe(reference);
return () => {
console.log('unobserve: ', reference);
reference[RO_PROP].disconnect();
delete reference[RO_PROP];
};
},
};
I want to create a card, once clicked on, it rotates 180°.
So I want to create a card component, that has a plane for the back side and a plane for the front side.
Once clicked on the card-entity, it rotates both planes, so that is looks like the card is turning around.
So here's what I got so far:
custom component: Card, gets added X-times.
A cursor detects a mouseEnter, then I want to card to rotate.
On mouseLeave, the card rotates back to the original state.
So, how can I achieve this the best?
Multiple meshes in a custom component or something?
AFRAME.registerComponent('card', {
schema: {
material: {type:'selector'},
hoverMaterial: {type: 'selector'},
card: {type: 'selector'}
},
multiple: true,
element: null,
init: function () {
console.log("Card loaded");
var data = this.data;
this.el.setAttribute('material', 'src', data.material);
this.el.addEventListener('mouseenter', this.onMouseEnter.bind(this));
this.el.addEventListener('mouseleave', this.onMouseLeave.bind(this));
},
onMouseEnter: function() {
this.el.removeEventListener('mouseenter', this.onMouseEnter.bind(this));
this.el.setAttribute('material', 'src', this.data.hoverMaterial);
this.el.setAttribute('rotation', '0 180 0');
},
onMouseLeave: function () {
//this.el.addEventListener('mouseenter', this.onMouseEnter.bind(this));
this.el.setAttribute('material', 'src', this.data.material);
this.el.setAttribute('rotation', '0 0 0');
},
update: function (oldData) {
},
remove: function () {
this.el.removeObject3D('mesh');
}
});
Create a custom component that appends two child entities to itself with the appropriate orientations and materials - for front and back sides.
You could also add a transparent plane mesh to the component, to enable raycasting.
Reference to the HTML node is this.el and you can manipulate it like a regular HTML node.
Code sample:
AFRAME.registerComponent('card', {
// ...
addChildren: function () {
this.frontFace = document.createElement('a-entity');
this.backFace = document.createElement('a-entity');
// ...
this.el.appendChild(this.frontFace);
this.el.appendChild(this.backFace);
}
// ...
For the input use either a cursor component or the raycaster component itself. Note that you have to have a mesh on the component you are trying to use in raycasting.
I'm trying to build a custom Typeahead Form Element. I have predefined multiple datasets to draw autocomplete suggestions from. When users add my field to a form, I want them to be able to select one or more of these datasets through checkboxes.
Orchard does not seem to have any Shape like this out of the box. By looking at other Form Elements in Orchard.DynamicForms and the SelectList Shape defined in Orchard.Forms.Shapes.EditorShapes.cs, I was able to piece together this working code for the Driver:
public class TypeaheadFieldElementDriver : FormsElementDriver<TypeaheadField> {
private readonly ITokenizer _tokenizer;
private readonly IEnumerable<IDataSet> _dataSets;
public TypeaheadFieldElementDriver(IFormsBasedElementServices formsServices, ITokenizer tokenizer, IEnumerable<IDataSet> _dataSets)
: base(formsServices)
{
_tokenizer = tokenizer;
this._dataSets = _dataSets;
}
...
protected override void DescribeForm(DescribeContext context) {
context.Form("TypeaheadField", factory =>
{
var shape = (dynamic)factory;
var form = shape.Fieldset(
Id: "TypeaheadField",
_Value: shape.Textbox(
Id: "Value",
Name: "Value",
Title: "Value",
Classes: new[] { "text", "medium", "tokenized" },
Description: T("The value of this typeahead field.")),
_DataSetIds: shape.SelectList(
Id: "DataSetIds",
Name: "DataSetIds",
Title: "Remote Datasets",
Multiple: true,
Description: T("The remote datasets to fetch suggestions from.")));
foreach (var dataSet in _dataSets)
{
form._DataSetIds.Items.Add(new SelectListItem { Text = T(dataSet.Description).Text, Value = dataSet.Id });
}
return form;
});
...
}
}
This successfully renders a multiple select field and sort of works for my purposes but I'm not able to completely unselect every option because the one that was selected keeps getting posted. For this reason and just general ease of use, I would prefer to render a list of checkboxes instead but I'm not sure how to proceed.
This error occurs when using my custom menu designed to clear a range of cells from 7 sheets within the same document. The code is as follows:
function onOpen() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var menubuttons = [{name: "Clear Dock 1", functionName: "clearRange1()"},
{name: "Clear Dock 2", functionName: "clearRange2()"},
{name: "Clear Dock 3", functionName: "clearRange3()"},
{name: "Clear Dock 4", functionName: "clearRange4()"},
{name: "Clear Dock 5", functionName: "clearRange5()"},
{name: "Clear Dock 6", functionName: "clearRange6()"},
{name: "Clear Dock 7", functionName: "clearRange7()"}
];
function clearRange1() {
var sheet = SpreadsheetApp.getActive().getSheetByName('Dock 1');
sheet.getRange('b2:j49').clearContent();
}
function clearRange2() {
var sheet = SpreadsheetApp.getActive().getSheetByName('Dock 2');
sheet.getRange('b2:j49').clearContent();
}
function clearRange3() {
var sheet = SpreadsheetApp.getActive().getSheetByName('Dock 3');
sheet.getRange('b2:j49').clearContent();
}
function clearRange4() {
var sheet = SpreadsheetApp.getActive().getSheetByName('Dock 4');
sheet.getRange('b2:j49').clearContent();
}
function clearRange5() {
var sheet = SpreadsheetApp.getActive().getSheetByName('Dock 5');
sheet.getRange('b2:j49').clearContent();
}
function clearRange6() {
var sheet = SpreadsheetApp.getActive().getSheetByName('Dock 6');
sheet.getRange('b2:j49').clearContent();
}
function clearRange7() {
var sheet = SpreadsheetApp.getActive().getSheetByName('Dock 7');
sheet.getRange('b2:j49').clearContent();
}}
I am very new to coding and I am eager to learn as I am developing a shipping/receiving schedule for my workplace. My code may contain a lot of errors and thus any corrections would be awesome :).
The issue persists whenever I press the buttons on my custom menu, as it gives me the error: "Script function not found: clearRange1() For more information, see https://developers.google.com/apps-script/reference/base/menu#addItem(String,String)", consistently. Any help would be greatly appreciated.
Thank you,
firstly I don't know how you got a custom menu unless you've omitted your code for that.
Below details how you would need to format to get a custom menu.
Secondly your functions should be separate from all the other functions. So an onOpen() function will close } , then you'll start another function which is separate. See below for the example you can expand upon :)
function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('Custom Menu')
.addItem('Clear Dock 1', 'clearRange1')
.addItem('Clear Dock 2', 'clearRange2')
.addItem('Clear Dock 3', 'clearRange3')
.addItem('Clear Dock 4', 'clearRange4')
.addItem('Clear Dock 5', 'clearRange5')
.addItem('Clear Dock 6', 'clearRange6')
.addItem('Clear Dock 7', 'clearRange7')
.addToUi();
}
//you can put this outside your functions if you want it to work for all of them
var ss = SpreadsheetApp.getActive();
function clearRange1() {
var sheet = ss.getSheetByName('Sheet3');
sheet.getRange('B2:J49').clearContent();
}
In my chrome extension I'm adding two context items "Get link" and "Get Image". The main difference being when setting them both up they have the "context" of link and image respectively. But when right clicking on an image that is acting as a link you get the option of both:
when either of those are clicked the data that comes into the listener seems to be identical, I need to be able to differentiate the two to know if the context is that of an image or a link to handle them differently. Here is my code:
chrome.runtime.onInstalled.addListener(function() {
var context = "image";
var title = "Copy Image";
var id = chrome.contextMenus.create({"title": title, "contexts":[context],
"id": "context" + context});
});
chrome.runtime.onInstalled.addListener(function() {
var context = "link";
var title = "Copy link";
var id = chrome.contextMenus.create({"title": title, "contexts":[context],
"id": "context" + context});
});
chrome.contextMenus.onClicked.addListener(onClickHandler);
function onClickHandler(info, tab) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id, {action: "imageAdded", subject: info.srcUrl}, function(response) {
});
If you want know which menu item was clicked, you can get the id value of the clicked context menu item in the menuItemId property of the object passed into the onClicked handler:
function onClickHandler(info, tab) {
console.log(info.menuItemId);
//...
}
Take a look at Parameter of onClicked callback, you could differentiate the image/link via mediaType
One of 'image', 'video', or 'audio' if the context menu was activated on one of these types of elements.