Can we create accessible diagrams using mxgraph? - accessibility
I am evaluating mxgraph library to create and modify diagrams on web page. Looking at the API documentation, I am not able to figure out if it is possible to achieve accessibility using mxgraph library. For e.x, is it possible to use keyboard tab navigation to select objects/elements and then drag them on the drawing area? is it possible to tab navigate on diagram elements/shapes on the drawing area and use keyboard events handlers(like launch properties panel on enter/space key press)?
There is several key handlers that you can use on the mxgraph. In this case i will use the Grapheditor as an example.
This is the EditorUI.js file and you can see some of the key handlers that he have
keyHandler.bindAction(8, false, 'delete'); // Backspace
keyHandler.bindAction(8, true, 'deleteAll'); // Backspace
keyHandler.bindAction(46, false, 'delete'); // Delete
keyHandler.bindAction(46, true, 'deleteAll'); // Ctrl+Delete
keyHandler.bindAction(72, true, 'resetView'); // Ctrl+H
keyHandler.bindAction(72, true, 'fitWindow', true); // Ctrl+Shift+H
keyHandler.bindAction(74, true, 'fitPage'); // Ctrl+J
keyHandler.bindAction(74, true, 'fitTwoPages', true); // Ctrl+Shift+J
keyHandler.bindAction(48, true, 'customZoom'); // Ctrl+0
keyHandler.bindAction(82, true, 'turn'); // Ctrl+R
keyHandler.bindAction(82, true, 'clearDefaultStyle', true); // Ctrl+Shift+R
keyHandler.bindAction(83, true, 'save'); // Ctrl+S
keyHandler.bindAction(83, true, 'saveAs', true); // Ctrl+Shift+S
keyHandler.bindAction(65, true, 'selectAll'); // Ctrl+A
keyHandler.bindAction(65, true, 'selectNone', true); // Ctrl+A
keyHandler.bindAction(73, true, 'selectVertices', true); // Ctrl+Shift+I
keyHandler.bindAction(69, true, 'selectEdges', true); // Ctrl+Shift+E
keyHandler.bindAction(69, true, 'editStyle'); // Ctrl+E
keyHandler.bindAction(66, true, 'bold'); // Ctrl+B
keyHandler.bindAction(66, true, 'toBack', true); // Ctrl+Shift+B
keyHandler.bindAction(70, true, 'toFront', true); // Ctrl+Shift+F
keyHandler.bindAction(68, true, 'duplicate'); // Ctrl+D
keyHandler.bindAction(68, true, 'setAsDefaultStyle', true); // Ctrl+Shift+D
keyHandler.bindAction(90, true, 'undo'); // Ctrl+Z
keyHandler.bindAction(89, true, 'autosize', true); // Ctrl+Shift+Y
keyHandler.bindAction(88, true, 'cut'); // Ctrl+X
keyHandler.bindAction(67, true, 'copy'); // Ctrl+C
keyHandler.bindAction(86, true, 'paste'); // Ctrl+V
keyHandler.bindAction(71, true, 'group'); // Ctrl+G
keyHandler.bindAction(77, true, 'editData'); // Ctrl+M
keyHandler.bindAction(71, true, 'grid', true); // Ctrl+Shift+G
keyHandler.bindAction(73, true, 'italic'); // Ctrl+I
keyHandler.bindAction(76, true, 'lockUnlock'); // Ctrl+L
keyHandler.bindAction(76, true, 'layers', true); // Ctrl+Shift+L
keyHandler.bindAction(80, true, 'formatPanel', true); // Ctrl+Shift+P
keyHandler.bindAction(85, true, 'underline'); // Ctrl+U
keyHandler.bindAction(85, true, 'ungroup', true); // Ctrl+Shift+U
keyHandler.bindAction(190, true, 'superscript'); // Ctrl+.
keyHandler.bindAction(188, true, 'subscript'); // Ctrl+,
keyHandler.bindKey(13, function () {
Of course you can create new key handlers using the EditorUi.prototype.createKeyHandler
You should access the grapheditor and see if that works for you
You can also take a look at the docs here
Related
Setting editable options in Timevis when using R/Shiny?
I am creating a timeline using R/Shiny timevis package. I can see in R/Shiny that you can setOptions so that the items are editable. I can see in visjs documentation that you can then set individual manipulation actions (see below).
Is there a way for me to set these options from R/Shiny using setOptions? Thanks...
timevis(groups = project_groups) %>%
setOptions(list(editable = TRUE,
...
https://visjs.github.io/vis-timeline/docs/timeline/#Editing_Items
// enable or disable all manipulation actions
var options = {
editable: true // true or false
};
// enable or disable individual manipulation actions
var options = {
editable: {
add: true, // add new items by double tapping
updateTime: true, // drag items horizontally
updateGroup: true, // drag items from one group to another
remove: true, // delete an item by tapping the delete button top right
overrideItems: false // allow these options to override item.editable
}
};
Yes you can set individual options. Here is an example: library(timevis) timevis( data.frame(start = Sys.Date(), content = "Today"), options = list(editable = list(add = TRUE, remove = FALSE)) )
What does the "Persist state history" button do?
What does this "Persist state history" button do in redux devtools? Why would the state not always be "persisted"?
This is pin button UI code:
{features.persist &&
<Button
Icon={PersistIcon}
onClick={togglePersist}
>Persist</Button>
}
See v2.15.0/src/app/containers/App.js#L95
features doc:
const composeEnhancers = composeWithDevTools({
features: {
pause: true, // start/pause recording of dispatched actions
lock: true, // lock/unlock dispatching actions and side effects
persist: true, // persist states on page reloading
export: true, // export history of actions in a file
import: 'custom', // import history of actions from a file
jump: true, // jump back and forth (time travelling)
skip: true, // skip (cancel) actions
reorder: true, // drag and drop actions in the history list
dispatch: true, // dispatch custom actions or action creators
test: true // generate tests for the selected actions
},
// other options like actionSanitizer, stateSanitizer
});
features.persist means persist states on page reloading.
Meteor tap-i18n: How to localise account package (js)?
I have setup tap-i18n to localize my meteor app. I am able to localise html template pages. But when I am trying to localize account package string it is not working.
This is what I am trying -
AccountsTemplates.configure({
defaultLayout: 'emptyLayout',
confirmPassword: false,
showLabels: false,
showPlaceholders: true,
negativeValidation: true,
positiveValidation: true,
negativeFeedback: true,
positiveFeedback: false,
onSubmitHook: onFormSubmission,
preSignUpHook: preSignup,
sendVerificationEmail: true,
enforceEmailVerification: true,
texts: {
'navSignIn': 'Sign in',
'signUpLink_pre': TAPi18n.__('not_member'),
'signUpLink_link': 'Register now',
title: {
'signUp': 'Register with Us'
}
}
});
You can see 'signUpLink_pre': TAPi18n.__('not_member'). But in UI I see 'not_member'
Here is the locale file -
{ "not_member":"Not a member yet?" }
Fullcalendar triggering multiple sources
I'm using fullcalendar v2 and the sources of the events are selectable from an ul-li menu. The initial call uses the link from the first li and I may navigate through all the months in the calendar. When I use the second link, fullcalendar retrieves the events from the previous link as well as the new link. On each new select, fullcalendar remember the event sources. How can I disable this? Here my code:
$("#chgBranch li").on("click", function (event) {
event.preventDefault(); // To prevent following the link (optional)
var urlEvents = $(this).children('a').attr('href');
var branchName = $(this).children('a').text();
$('#calendarSchedules').fullCalendar('removeEvents');
$('#calendarSchedules').fullCalendar('removeEventSource');
// refill calendar
fillEvents(urlEvents, branchName);
});
function fillEvents(urlEvents, branchName) {
// change title of potlet box
var newTitle = '<i class="fa fa-calendar"></i> Available schedules for: ' + branchName;
$('#calendarCaption').html(newTitle);
$('#calendarSchedules').fullCalendar({
year: <?= $yy ?>,
month: <?= --$mm ?>, // javascript month is 0 based
date: 1,
header: {
left: '',
center: 'title',
right: 'prev,next,today'
},
defaultView: 'month',
firstDay: 1, // monday
editable: false,
slotEventOverlap: false,
selectable: true,
selectHelper: true,
dayRender: function (view, element) {
$('.fc td.fc-sun').css('background', '#E7EFEF');
$('.fc td.fc-sat').css('background', '#E7EFEF');
},
eventClick: function (event) {
$('#dueTime').show();
$('#duedate').val(moment(event.start).format('YYYY-MM-DD'));
$('#duetime').val(moment(event.start).format('HH:mm:ss'));
$('#isPartitionable').val(event.partitionable); // user clicked on partitionable dispo or not
}
});
$('#calendarSchedules').fullCalendar('addEventSource', urlEvents);
}
// load first branch item
$('#chgBranch li a:first').trigger('click');
I think you should destroy your calendar also. Because you are initializing fullcalendar every tine on sources change from ul-li.
Try below one.
$("#chgBranch li").on("click", function (event) {
event.preventDefault(); // To prevent following the link (optional)
var urlEvents = $(this).children('a').attr('href');
var branchName = $(this).children('a').text();
$('#calendarCaption').fullCalendar( 'destroy' );
// refill calendar
fillEvents(urlEvents, branchName);
});
This will work for sure. I tried locally and works fine.
I tried it with following method which also works fine, but #Chintan method is also fine:
$('#calendarSchedules').fullCalendar('removeEvents');
$('#calendarSchedules').fullCalendar('removeEventSource', storedEventSource);
And I store the event source in a hidden field once the calendar rendered.
plupload can't show well and maybe it's style conflict
I use pluploadQueue to upload files which all the function could work well except the showing, I think maybe it's due to style confict. I want to know, does anyone have meet this issue before that?
using MVC + bootstrap modal + bootstrap dialog + plupload Queue
I can't upload picture, how to get reputaton?
var uploader1 = $("#uploader1").pluploadQueue({
// General settings
runtimes: 'html5,silverlight,flash,html4',
url: '#Url.Action("PLUpload", "Document")' + '?hasModification=true',
chunk_size: '2mb',
//Allow multiple files
max_file_count: 10,
// Specify what files to browse for
filters: {
// Maximum file size
max_file_size: '20mb',
// Specify what files to browse for
mime_types: [
{ title: "Allowed files", extensions: "#Model.PLUploadAllowedExtensions" }
]
},
// Rename files by clicking on their titles
rename: true,
// Sort files
sortable: true,
// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
dragdrop: true,
//// Views to activate
views: {
list: true,
thumbs: false, // Show thumbs
active: 'list'
},
init: {
PostInit: function () {
// Called after initialization is finished and internal event handlers bound. http://www.plupload.com/examples/events
// The uploader must in html4 only mode be initialized fully before it's hidden: http://stackoverflow.com/questions/11898082/plupload-html4-add-files-dialog-not-triggering-in-ie
// Prepare uploader
if ('#Model.HasUploadFiles' == 'True') {
$("#hasChanged").attr('value', true);
$("#uploader1").show();
} else {
$("#uploader1").hide();
}
//// Force resize function is not working. this is the fix for window size
//$('#formID').css("overflow", "hidden");
},
},
// Flash settings
flash_swf_url: '#Url.Content("~/Scripts/plupload/Moxie.swf")',
// Silverlight settings
silverlight_xap_url: '#Url.Content("~/Scripts/plupload/Moxie.xap")'
});