I'm trying to display a previously saved drawing in Fabric.js, and then turn it into a view only, no editing mode. Here's what I have:
canvas1.loadFromJSON(cavasData, canvas1.renderAll.bind(canvas1));
canvas1.isDrawingMode = false;
canvas1.deactivateAll();
canvas1.selection = false;
But it isn't untouchable. Displays fine, but objects are still select-able and change-able.
When loading from json you should disable object selection,
canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
object.set('selectable', false);
});
FIDDLE
The easiest and most stable way is to set pointer-events css property on a parent HTML Element:
.locked {
pointer-events: none;
}
To set this property from javascript:
let canvasElement = document.getElementsByClassName("canvas-container")[0]
canvasElement.classList.add("locked")
To unlock canvas:
canvasElement.classList.remove("locked")
Related
I want to disable all the controls on the Stimulsoft report toolbar. in the documentation, I have found options like
var options = new Stimulsoft.Viewer.StiViewerOptions();
options.toolbar.visible = false; // to hide toolbar
options.toolbar.showOpenButton = false; // to hide open button
var viewer = new Stimulsoft.Viewer.StiViewer(options, 'StiViewer', false);
viewer.report = report;
viewer.renderHtml('viewer');
But I don't want this behavior of toolbar or its specific controls being hidden, I just want controls to be disabled and visible.
I couldn't find any solution for it in the documentation of stimulsoft. so I just gave it a fix by disabling the pointer-events using CSS.
Array.prototype.map.call(document.querySelectorAll(".stiJsViewerToolBarTable td"), (element) => {
const smlButton = element.querySelector('div')
if (smlButton) smlButton.style = "margin-right:3px; margin-left:1px;";
element.style = "opacity: 0.8; pointer-events: none; cursor: not-allowed !important;"
})
I want to use image-maps inside fancybox 3. Goal is to display mountain panoramas, where the user could point on a summit and get name and data. The usual recommendation is to use a SVG based image map for this like in this pen. Due to the size of the images the fancybox zoom functionality is important.
While fancybox will display SVGs as an image like in this pen it is not possible to use the <image> tag with an external source inside the SVG file. Even worse: SVG files used as source of an <img> tag would not show the map functionality (see this question).
I tried to replace the <img> tag in fancybox with an <object> tag using the SVG file as data attribute. This shows the image with the map functionality correctly but fancybox won't zoom it any more.
So eventually the question boils down to how I can make an <object> (or an inline SVG or an iframe) zoomable just like an image in fancybox 3.
I'm open to other solutions as well. I only want to use fancybox to keep the appearance and usage the same as other image galleries on the same page. I'd even use an old style <map>, where I would change the coords using jquery to have it responsive. I tried that, attaching the map manually in developer tools as well as programmatically in afterLoad event handler, but apparently this doesn't work in fancybox 3 either.
The areas are polygons, so using positioned div's as overlays is no solution.
Edit: I just discovered that I can replace <img> with a <canvas> in fancybox without loosing the zoom and drag functionality. So in theory it would be possible to use canvas paths and isPointInPath() methode. Unfortunately I need more than one path, which requires the Path2D object, which is not available in IE...
Since all options discussed in the question turned out to be not feasible and I found the pnpoly point in polygon algorithm, I did the whole thing on my own. I put the coordinates as percentages (in order to be size-independent) in an array of javascript objects like so:
var maps = {
alpen : [
{type:'poly',name:'Finsteraarhorn (4274m)',vertx:[56.48,56.08,56.06,56.46], verty:[28.5,28.75,40.25,40.25]},
{type:'rect',name:'Fiescherhörner (4049m)',coords:[58.08,29.5,59.26,43.5]},
{type:'poly',name:'Eiger (3970m)',vertx:[61.95,61.31,61.31,60.5,60.5], verty:[43,35.25,30.25,30.25,45.5]}
]
}; // maps
Since the pnpoly function requires the vertices for x and y separately I provide the coordinates this way already.
The Id of the map is stored in a data attribute in the source link:
<a href="/img/bilder/Alpen.jpg" data-type='image' data-Id='alpen' data-fancybox="img" data-caption="<h5>panorama of the alps from the black forest Belchen at sunset</h5>">
<img src="/_pano/bilder/Alpen.jpg">
</a>
CSS for the tooltip:
.my-tooltip {
color: #ccc;
background: rgba(30,30,30,.6);
position: absolute;
padding: 5px;
text-align: left;
border-radius: 5px;
font-size: 12px;
}
pnpoly and pnrect are provided as simple functions, the handling of that all is done in the afterShow event handler:
// PNPoly algorithm checkes whether point in polygon
function pnpoly(vertx, verty, testx, testy) {
var i, j, c = false;
var nvert = vertx.length;
for(i=0, j=nvert-1; i<nvert; j=i++) {
if (((verty[i] > testy) != (verty[j] > testy)) &&
(testx < (vertx[j] - vertx[i]) * (testy - verty[i]) / (verty[j] - verty[i]) + vertx[i])) {
c = !c;
}
}
return c;
}
// checks whether point in rectangle
function pnrect(coords,testx,testy) {
return ((testx >= coords[0]) && (testx <= coords[2]) && (testy >= coords[1]) && (testy <= coords[3]));
}
$("[data-fancybox]").fancybox({
afterShow: function( instance, slide ) {
var map = maps[$(slide.opts.\$orig).data('id')]; // Get map name from source link data-ID
if (map && map.length) { // if map present
$(".fancybox-image")
.after("<span class='my-tooltip' style='display: none'></span>") // append tooltip after image
.mousemove(function(event) { // create mousemove event handler
var offset = $(this).offset(); // get image offset, since mouse coords are global
var perX = ((event.pageX - offset.left)*100)/$(this).width(); // calculate mouse coords in image as percentages
var perY = ((event.pageY - offset.top)*100)/$(this).height();
var found = false;
var i;
for (i = 0; i < map.length; i++) { // loop over map entries
if (found = (map[i].type == 'poly') // depending on area type
?pnpoly(map[i].vertx, map[i].verty, perX, perY) // look whether coords are in polygon
:pnrect(map[i].coords, perX, perY)) // or coords are in rectangle
break; // if found stop looping
} // for (i = 0; i < map.length; i++)
if (found) {
$(".my-tooltip")
.css({bottom: 'calc(15px + '+ (100 - perY) + '%'}) // tooltip 15px above mouse coursor
.css((perX < 50) // depending on which side we are
?{right:'', left: perX + '%'} // tooltip left of mouse cursor
:{right: (100 - perX) + '%', left:''}) // or tooltip right of mouse cursor
.text(map[i].name) // set tooltip text
.show(); // show tooltip
} else {
$(".my-tooltip").hide(); // if nothing found: hide.
}
});
} else { // if (map && map.length) // if no map present
$(".fancybox-image").off('mousemove'); // remove event mousemove handler
$(".my-tooltip").remove(); // remove tooltip
} // else if (map && map.length)
} // function( instance, slide )
});
Things left to do: Find a solution for touch devices, f.e. provide a button to show all tooltips (probably rotated 90°).
As soon as the page is online I'll provide a link here to see it working...
I'm using fabrics v2.4.3 in an angular 6 project.
In my project I want to move and resize some objects (a fabric.Group) both by mouse and by properties editing through a form.
The problem is on the second method.
I put an object into the canvas, and I selected it by mouse. Now I'm subscribed to the form valueChanges to apply in real time the new props of the selected object.
this.subscription = this.form.valueChanges.subscribe((value)=>{
this.panelView.setConfig(value);
})
This is the setConfig method:
setConfig(config:PanelParameters){
this.config = config;
let param = {
top: this.config.y,
left: this.config.x,
width: this.view.width, //this.config.width,
height: this.view.height,
scaleX: this.config.width/this.view.width,
scaleY: this.config.height/this.view.height,
fill : this.config.background_color
}
this.view.set(param)
for(let obj of this.view.getObjects()){
if( obj instanceof fabric.Rect){
obj.set({
fill: this.config.background_color
})
}else if( obj instanceof fabric.Text ){
obj.set({
fill: this.config.title_text_color
})
}
}
this.canvas.requestRenderAll();
}
Now into the canvas the object are rendered correctly but if I try to select it
I have to click onto the old object area.
What I'm doing wrong?
You're missing a call to this.view.setCoords().
In fabric.js, mouse interactions are evaluated against an object's oCoords. When you programmatically set object's properties that should result in a change of coordinates, you have to explicitly call setCoords() to recalculate them. See When to call setCoords.
I am testing the <webview> element in Chrome and I have gone through the documentation but I cannot figure out why the Webview is not resizing when the parent window does.
Index.Html
<body>
<webview src="http://website.com" style="width:1010px; height:700px" minwidth="1010" minheight="700" autosize="on""></webview>
<script src="index.js"></script>
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
'bounds': {
'width': 1010,
'height': 700
}});});
Index.js
$(function() {
function resizeWebView() {
$('webview').get(0).width = $(window).width();
$('webview').get(0).height = $(window).height();
}
$(window).resize(resizeWebView);
resizeWebView();
});
I tried also removing the autosize=on as recommended but it does not work.
Another question how to disable the main window (Embedder) from resizing.
Thanks
You should use the chrome.app.window.onBoundsChanged API on the window object returned by chrome.app.window.create. Simple implementation:
background.js
var appWin = null;
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create(
'index.html',
{'bounds': {'width': 1010, 'height': 700}},
onWindowCreated
);
});
function onWindowCreated(win) {
appWin = win;
// Resize the webview when the window resizes.
appWin.onBoundsChanged.addListener(onBoundsChanged);
// Initialize the webview size once on launch.
onBoundsChanged();
}
function onBoundsChanged() {
var webview = document.querySelector('webview');
var bounds = appWin.getBounds();
webview.style.height = bounds.height + 'px';
webview.style.width = bounds.width + 'px';
}
index.js
// Nothing here
See a much more elaborate object-oriented example with multiple windows and persisting/reusing the last window size set by the user here: https://github.com/GoogleChrome/chrome-app-samples/tree/master/url-handler.
As to your second question, it would be good if you asked it separately, but nevertheless: just set the resizable parameter of chrome.app.window.create to false:
...
chrome.app.window.create(
'index.html',
{
'bounds': {'width': 1010, 'height': 700},
'resizable': false
},
...
I set out to achieve something similar and the following approach is how I implemented it.
index.html
<webview src="http://website.com" style="width:1010px; height:700px"></webview>
background.js
The code you have here looks correct.
index.js
I approached this in a slightly different way by using the window.onresize event to handle the resize. Please keep in mind that resize event is fired after the screen has been resized and may seem to create a slightly laggy feel.
window.onresize = setWebview;
function setWebview() {
var webview = document.querySelector('webview');
var webviewWidth = document.documentElement.clientWidth;
var webviewHeight = document.documentElement.clientHeight;
webview.style.width = webviewWidth + 'px';
webview.style.height = webviewHeight + 'px';
}
I also call the setWebview(); function in the onLoad or something of the sorts for the initial setting of the webview.
So that is my approach, looking at your index.js I think you may be having an issue in that you are trying to set the width and height of the <webview> when in fact you need to be setting the style width and height, so maybe the following would have worked;
$('webview').get(0).style.width = $(window).width();
$('webview').get(0).style.height = $(window).height();
Notice that I added in .style before .width and .height
Hope that helps..
I don't know if this is a new thing but I did exactly this with CSS:
webview {
height: 100%;
width: 100%;
}
Easy as pie!
I have a view with a grid from where I launch a different view in a new window. The parent view needs to pass data to the child view and it cannot be passed as a query string since it is pretty large. I cannot use a native modal. I am just using window.open and have not created a custom modal context.Things that I have tried
1. Tried populating hidden field elements in the new window using something like the code below
var popup = window.open('/#/viewname');
popup.onload=function(){document.findbyid('hiddenfield')= newvalue };
I am using a splash page to display loading in durandal , onload of the new window the router is still navigating and I get the splash page document
2. Tried requiring the parent view in the child view and then grabbing the parent view data using something like the code below
define(['viewmodels/parent'],function ('parent'){
function activate(){
localvariablevalue= parent.observable;
}
return{
activate:activate
}
});
I get parent.observable as undefined. More than likely it is out of context as this is a new window.
3.Tried a singleton global.js file and requiring it in both parent and child but I think that is also losing context as I get undefined even with that approach
Any ideas on how to achieve this.. if it can be achieved using v 1.2 ? If it can be achieved by creating a custom Modal context then can someone give some pointers on how to define the addContext function for a new window .
By using window.open an independent instance of a #/viewname SPA gets created that has no relation to the first SPA. If you really have to open a new window than you'd need to look into other ways to exchange information between windows like e.g. localstorage.
But you're probably better off rethinking the requirements and see if you can't achieve the goal with modals instead.
Edit based on comment: That has nothing to do with Durandal loosing context, it's about window.open not opening in the same session. see e.g. window.open doesn't open in same session
Edit2 As an alternative you might use the param #/viewname in the second windows vm.activate to retrieve the data either from the server directly (if applicable) or via webstorage e.g. localstorage or sessionstorage from the first browser.
Edit3 I did a quick test do see if that can be accomplished using window.open alone. Tested in Firefox/Firebug. I would still recommend to checkout the links to webstorage to ensure that this is working cross browser.
Go to http://dfiddle.github.io/dFiddle-1.2/#/, open up a console and create a global var:
window.myVar = {complex: true};
create a new window
var myWindow = window.open('http://dfiddle.github.io/dFiddle-1.2/#/view-composition');
go back first console and create a property myvar on myWindow
myWindow.myVar = myVar;
change to the console of the second window and check
myVar // output {complex: true}
The alternative that I was suggesting uses the unique hash value that you pass in to the second window and then either retrieves the complex data (that can be added as query string) as part of the activate callback. The data could be stored on the server or via webstorage.
Rainer thanks for trying to help out. The following code will generate maximised modals. At this stage I am resigning to this solution and passing my data as activation in showModal. It is an exact copy of the default modal context with minor css variations.But posting it if it helps someone out.
1. CSS
.modalHostMax {
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
position: fixed;
opacity: 0;
-webkit-backface-visibility: hidden;
-webkit-transition: opacity 0.1s linear;
-moz-transition: opacity 0.1s linear;
-o-transition: opacity 0.1s linear;
transition: opacity 0.1s linear;
}
.modalMax {
width: 100%;
height: 100%;
}
2.New modal context
var addContext = function (contextName) {
modalDialog.addContext(contextName, {
blockoutOpacity: .2,
removeDelay: 200,
addHost: function (modal) {
var body = $('body');
var blockout = $('<div class="modalBlockout"></div>')
.css({ 'z-index': modalDialog.getNextZIndex(), 'opacity': this.blockoutOpacity })
.appendTo(body);
var host = $('<div class="modalHostMax"></div>')
.css({ 'z-index': modalDialog.getNextZIndex() })
.appendTo(body);
modal.host = host.get(0);
modal.blockout = blockout.get(0);
if (!modalDialog.isModalOpen()) {
modal.oldBodyMarginRight = $("body").css("margin-right");
var html = $("html");
var oldBodyOuterWidth = body.outerWidth(true);
var oldScrollTop = html.scrollTop();
$("html").css("overflow-y", "hidden");
var newBodyOuterWidth = $("body").outerWidth(true);
body.css("margin-right", (newBodyOuterWidth - oldBodyOuterWidth + parseInt(modal.oldBodyMarginRight)) + "px");
html.scrollTop(oldScrollTop); // necessary for Firefox
$("#simplemodal-overlay").css("width", newBodyOuterWidth + "px");
}
},
removeHost: function (modal) {
$(modal.host).css('opacity', 0);
$(modal.blockout).css('opacity', 0);
setTimeout(function () {
$(modal.host).remove();
$(modal.blockout).remove();
}, this.removeDelay);
if (!modalDialog.isModalOpen()) {
var html = $("html");
var oldScrollTop = html.scrollTop(); // necessary for Firefox.
html.css("overflow-y", "").scrollTop(oldScrollTop);
$("body").css("margin-right", modal.oldBodyMarginRight);
}
},
afterCompose: function (parent, newChild, settings) {
var $child = $(newChild);
var width = $child.width();
var height = $child.height();
$child.attr('class', 'modalMax');
$(settings.model.modal.host).css('opacity', 1);
if ($(newChild).hasClass('autoclose')) {
$(settings.model.modal.blockout).click(function () {
settings.model.modal.close();
});
}
$('.autofocus', newChild).each(function () {
$(this).focus();
});
}
});
};
3. In your target view make sure that the container min-height is set to $(document).height()
4. To use just set custom context by calling addContext('yourcontextname').Then create your modal - app.showModal('viewname',{data},'yourcontextname')