I'm using version 2.15 of jsplumb in an Angular project and am trying to create straight connections between the elements. The code below initiates the instance
ngAfterViewInit() {
this.jsPlumbInstance = jsPlumb.getInstance({
Container: '.diagram'
});
// can I add other defaults here?
}
I create the connection like this
this.jsPlumbInstance.connect({
source,
target,
anchors: ['Bottom', 'Top'],
detachable: false,
endpoint: 'Dot'
});
which results in curvy lines between anchors. I tried to add a 'connector' property above setting it to 'straight' or ['straight'], but that leads to the 'unknown connector type 'straight' error. The docs here do not specify the syntax and the link to it is broken.
i had to set the connector on the instance
this.jsPlumbInstance = jsPlumb.getInstance({
Container: '.diagram',
Connector: 'Straight',
Endpoints: [
['Dot', { radius: 3 }],
['Dot', { radius: 3 }]
],
ConnectionsDetachable: true,
Anchors: ['Bottom', 'Top']
});
anyone knows how to make all elements draggable in the community edition?
Related
After adding an image to my collection/single type the preview image Strapi shows is not displaying see here.
I inspected the img src and the src address is correct and the url correctly takes me to where the image is stored see here.
Does anyone know why / how to get the preview image working??
I am using the following:
strapi - v4.1.3
strapi-provider-upload-azure-storage - v2.0.0
node - v16.8.0
Azure storage and CDN
I fixed this issue by adding the following to my ./config/middlewares.js file:
module.exports = [
'strapi::errors',
'strapi::cors',
'strapi::poweredBy',
'strapi::logger',
'strapi::query',
'strapi::body',
'strapi::session',
'strapi::favicon',
'strapi::public',
{
name: 'strapi::security',
config: {
contentSecurityPolicy: {
directives: {
'connect-src': ["'self'", 'https:'],
'img-src': ["'self'", 'data:', 'blob:', `${AZURE_CDN_URL}`],
'media-src': ["'self'", 'data:', 'blob:', `${AZURE_CDN_URL}`],
upgradeInsecureRequests: null,
},
},
},
},
];
I have also encountered this issue when using other cloud provider, eg. Cloudinary. I found that this is a security middleware issues, anyone facing this issue on other providers can go to https://github.com/strapi/strapi/tree/master/packages/providers
Inside each provider guide, there's a section of:
Security Middleware Configuration
Due to the default settings in the Strapi Security Middleware you will need to modify the contentSecurityPolicy settings to properly see thumbnail previews in the Media Library. You should replace strapi::security string with the object bellow instead as explained in the middleware configuration documentation.
I fixing that error by using this settings:
module.exports = ({ env }) => [
"strapi::errors",
{
name: "strapi::security",
config: {
contentSecurityPolicy: {
directives: {
'connect-src': ['self', 'http:', env("SUPABASE_URL")],
'img-src': ['self', 'data:', 'blob:', , env("SUPABASE_URL"), 'https://dl.airtable.com'],
},
},
},
},
"strapi::cors",
"strapi::poweredBy",
"strapi::logger",
"strapi::query",
"strapi::body",
"strapi::session",
"strapi::favicon",
"strapi::public",
];
into middleware.js
After restarting thumbnail preview start working properly.
Can anyone tell me what needs to be changed this test?
it('Should update settings of bar', () => {
const newSettings = {
dataset: [
{
data: [{
name: 'Category A',
value: 373,
color: '#1D5F8A',
id: 1
}],
name: ''
}
]
};
barObj.updated(newSettings);
const dataLength = barObj.settings.dataset[0].data.length;
expect(dataLength).toEqual(1);
});
I am getting this error from Jasmine and if i follow the link https://jasmine.github.io/tutorials/upgrading_to_Jasmine_4.0#matchers-cet i dont see exactly what i would need to change?
ERROR: 'DEPRECATION: The matcher factory for "toHaveBeenTriggeredOnAndWith" accepts custom equality testers, but this parameter will no longer be passed in a future release. See https://jasmine.github.io/tutorials/upgrading_to_Jasmine_4.0#matchers-cet for details. (in spec: Bar API Should update settings of bar)
I also cant find a lot of information about this message. I also dont have any custom equality matchers in the system. https://jasmine.github.io/tutorials/custom_equality
Try to update karma-jasmine package. It helped me.
I had this problem using "#metahub/karma-jasmine-jquery". You can modify the bundle in place and remove the second parameter from the `` toHaveBeenTriggeredOnAndWith" function. Or copy the module somewhere, uninstall "#metahub/karma-jasmine-jquery" and install the modified module: npm install ./#metahub/karma-jasmine-jquery
On attempting to integrate PhotoEditorSDK into an angular app for the first time, I'm seeing this error in the console.
My config is:
const container = document.getElementById('editor');
const editor = new $window.PhotoEditorSDK.UI.DesktopUI({
container: container,
license: '{ .. }',
assets: {
baseUrl: '/js/pesdk/assets' // <-- This should be the absolute path to your `assets` directory
},
editor: {
image: 'https://www.photoeditorsdk.com/assets/images/new/landingpage/platform_html5-4c8765e5.png',
},
style: {
width: 500,
height: 500,
},
});
The editor begins to load, the license call completes successfully, then I see:
react-dom.production.min.js:162 TypeError: t.addEventListener is not a function
at e._loadSource (PhotoEditorSDK.js:6)
at new e (PhotoEditorSDK.js:6)
at e.setImage (PhotoEditorSDK.js:73)
at e._setImage (PhotoEditorSDK.UI.DesktopUI.js:14)
at c (PhotoEditorSDK.UI.DesktopUI.js:14)
at e.setImage (PhotoEditorSDK.UI.DesktopUI.js:14)
at e.componentDidMount (PhotoEditorSDK.UI.DesktopUI.js:27)
at commitLifeCycles (react-dom.production.min.js:148)
at b (react-dom.production.min.js:156)
at t (react-dom.production.min.js:167)
The non-minified "development" react-dom file looks minified also, so this is a pain to debug.
Right now the image option must be an actual image object, not a string URL, that's the source of the error. So you need to first load the image, pass is it as an option and load the editor.
There is an angular demo project if you'd like to checkout:
https://github.com/imgly/pesdk-angular-demo
I'm using sap.ui.comp.filterbar.FilterBar Control on a project. Everything works fine, except when I try to hide this Control.
var oFilterBar = new sap.ui.comp.filterbar.FilterBar("filterBar",{
reset: oController.handleOnReset,
search: oController.handleOnSearch,
showRestoreOnFB: true,
showClearOnFB: true,
showRestoreButton: true,
showClearButton: true,
...
});
oFilterBar.setVisible(false);
I'm getting the following error:
Uncaught TypeError: oFilterBar.setVisible is not a function
Since this property is being inherited from sap.ui.core.Control class, this should work and I think it has nothing to do with versions either (I'm using 1.24).
It has something to do with the version.
In SAPUI5 1.28[1] the property visible was moved to sap.ui.core.Control so any Control extending it would have this property as well.
If you are using an earlier version only Control that implement this property themselves can be made invisible.
You could however extend the control you are using to include this property:
sap.ui.comp.filterbar.FilterBar.extend("my.FilterBar", {
metadata: {
properties: {
visible: {
type: "boolean",
group: "Appearance"
}
}
},
renderer: function (oRm, oControl) {
if (oControl.getVisible()) {
sap.ui.comp.filterbar.FilterBarRenderer.render(oRm, oControl);
} else {
// Handle invisibility
}
}
});
I started using the gmap3 jQuery plugin today and I'm having issues with getting a list of markers.
As long as I add all the markers manually (with addMarker or addMarkers) all works well and the:
.gmap3({action:'get', name:'marker', all:true});
gives proper list of markers.
However, if i use the action:getRoute and the addDirectionsRenderer - the markers are not 'gettable' by code pasted above.
My code for showing the directions is below - it works and shows them properly on the map. Only issue is that I cannot get any markers out of it, so I can process them after creation.
var optionDirections = {
origin: startcoord,
destination: stopcoord,
waypoints: coordsAllGoogleStyle,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
....
.gmap3({
action:'getRoute',
options: optionDirections,
callback: function(results) {
if (!results) { alert('nodata'); return; }
$(this).gmap3(
{
action:'addDirectionsRenderer',
options:{
preserveViewport: false,
draggable: false,
directions:results
}
}
);
var res = $(this).gmap3({action:'get', name:'marker', all:true});
alert('Found: '+res.length+' markers');
}
});
to make things simple, I contacted the author of this api and it kind of not support it anymore because "now people use angular"
nice is'nt it...