Skip to content

Commit

Permalink
chore: replace d3.event with local event following upgrade of d3 to v…
Browse files Browse the repository at this point in the history 
…7 which removed d3.event.
  • Loading branch information
@toxophilist
toxophilist committed Jan 27, 2025
1 parent 8bd0564 commit d07ea08
Show file tree
Hide file tree
Showing 9 changed files with 111 additions and 110 deletions.
28 changes: 14 additions & 14 deletions okitweb/static/okit/js/okit_designer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -344,11 +344,11 @@ function displaySaveAsDialog(title, callback, root_dir='templates/user', placeho
.attr('name', 'template_file_name')
.attr('type', 'text')
.attr('placeholder', placeholder)
.on('keydown', (e) => {
if (d3.event.keyCode == 220) {
d3.event.preventDefault()
} else if (d3.event.keyCode == 32) {
d3.event.preventDefault()
.on('keydown', (event) => {
if (event.keyCode == 220) { // event replaces d3.event
event.preventDefault()
} else if (event.keyCode == 32) {
event.preventDefault()
}
})
.on('blur', () => {
Expand Down Expand Up @@ -391,11 +391,11 @@ function displaySaveAsDialog(title, callback, root_dir='templates/user', placeho
.attr('type', 'text')
.attr('readonly', true)
.attr('placeholder', '<Directory Path>')
.on('keydown', (e) => {
if (d3.event.keyCode == 220) {
d3.event.preventDefault()
} else if (d3.event.keyCode == 32) {
d3.event.preventDefault()
.on('keydown', (event) => {
if (event.keyCode == 220) { // event replaces d3.event
event.preventDefault()
} else if (event.keyCode == 32) {
event.preventDefault()
}
})
.on('blur', () => {
Expand Down Expand Up @@ -765,10 +765,10 @@ function loadGlobalTags() {
let tr = tbody.append('div').attr('class', 'tr')
tr.append('div').attr('class', 'td').append('label').text(key)
tr.append('div').attr('class', 'td').append('label').text(value)
tr.append('div').attr('class', 'td delete-tag action-button-background delete').on('click', () => {
tr.append('div').attr('class', 'td delete-tag action-button-background delete').on('click', (event) => {
delete okitJsonModel.freeform_tags[key];
loadGlobalTags()
d3.event.stopPropagation()
event.stopPropagation() // event replaces d3.event
})
}
}
Expand All @@ -780,11 +780,11 @@ function loadGlobalTags() {
tr.append('div').attr('class', 'td').append('label').text(namespace)
tr.append('div').attr('class', 'td').append('label').text(key)
tr.append('div').attr('class', 'td').append('label').text(value)
tr.append('div').attr('class', 'td delete-tag action-button-background delete').on('click', () => {
tr.append('div').attr('class', 'td delete-tag action-button-background delete').on('click', (event) => {
delete okitJsonModel.defined_tags[namespace][key];
if (Object.keys(okitJsonModel.defined_tags[namespace]).length === 0) {delete okitJsonModel.defined_tags[namespace];}
loadGlobalTags()
d3.event.stopPropagation()
event.stopPropagation() // event replaces d3.event
})
}
}
Expand Down
74 changes: 34 additions & 40 deletions okitweb/static/okit/js/okit_designer_drag_drop.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,50 +64,45 @@ function dragFragmentStart(evt, artefact, title) {
palette_drag_artefact = artefact;
}

function dragEnter(evt) {
evt = evt || d3.event;
dragEnterOverLeave(evt);
function dragEnter(event) {
dragEnterOverLeave(event); // event replaces d3.event
}

function dragOver(evt) {
evt = evt || d3.event;
if (evt.preventDefault) {
evt.preventDefault(); // Necessary. Allows us to drop.
function dragOver(event) {
if (event.preventDefault) { // event replaces d3.event
event.preventDefault(); // Necessary. Allows us to drop.
}
dragEnterOverLeave(evt);
dragEnterOverLeave(event);
}

function dragLeave(evt) {
evt = evt || d3.event;
function dragLeave(event) { // event replaces d3.event
}

function dragEnterOverLeave(evt) {
evt = evt || d3.event;
let type = evt.target.getAttribute('data-type');
function dragEnterOverLeave(event) {
let type = event.target.getAttribute('data-type'); // event replaces d3.event
if (palette_drag_artefact !== undefined && palette_drag_artefact.getDropTargets().indexOf(type) >= 0) {
evt.dataTransfer.dropEffect = 'copy'; // See the section on the DataTransfer object.
event.dataTransfer.dropEffect = 'copy'; // See the section on the DataTransfer object.
} else {
evt.dataTransfer.effectAllowed = "none";
evt.dataTransfer.dropEffect = "none";
event.dataTransfer.effectAllowed = "none";
event.dataTransfer.dropEffect = "none";
}
}

function dragDrop(evt) {
evt = evt || d3.event;
if (evt.stopPropagation) {
evt.stopPropagation(); // Stops some browsers from redirecting.
function dragDrop(event) {
if (event.stopPropagation) { // event replaces d3.event
event.stopPropagation(); // Stops some browsers from redirecting.
}
if (evt.preventDefault) {
evt.preventDefault(); // Necessary. Allows us to drop.
if (event.preventDefault) {
event.preventDefault(); // Necessary. Allows us to drop.
}
let palette_artefact_data = JSON.parse(evt.dataTransfer.getData('text/plain'));
let palette_artefact_data = JSON.parse(event.dataTransfer.getData('text/plain'));
let target = {
// id: evt.target.id,
id: evt.target.getAttribute('data-okit-id'),
element_id: evt.target.id,
okit_id: evt.target.getAttribute('data-okit-id'),
type: evt.target.getAttribute('data-type'),
compartment_id: evt.target.getAttribute('data-compartment-id'),
id: event.target.getAttribute('data-okit-id'),
element_id: event.target.id,
okit_id: event.target.getAttribute('data-okit-id'),
type: event.target.getAttribute('data-type'),
compartment_id: event.target.getAttribute('data-compartment-id'),
title: palette_artefact_data.title
};
let artefact = palette_drag_artefact;
Expand All @@ -123,19 +118,18 @@ function dragDrop(evt) {
return false;
}

function dragEnd(evt) {
evt = evt || d3.event;
console.info('>>>>>>> Drag End ' + evt);
function dragEnd(event) {
console.info('>>>>>>> Drag End ' + event); // event replaces d3.event
}


/*
** SVG Psudo Drag & Drop
*/

function handleConnectorDrag(e) {
function handleConnectorDrag(event) {
if (connectorStartElement) {
let mousePos = getMousePosition(d3.event);
let mousePos = getMousePosition(event); // event replaces d3.event
d3.select("#Connector")
.attr("x2", mousePos.x)
.attr("y2", mousePos.y);
Expand All @@ -146,9 +140,9 @@ const left_click = 1;
const middle_click = 2;
const right_click = 3;

function handleConnectorDragStart() {
function handleConnectorDragStart(event) {
console.info('Connector Drag Start');
if (d3.event.which == left_click) {
if (event.which == left_click) { // event replaces d3.event
let thisid = d3.select(this).attr('id');
console.info('This Id : ' + thisid);
let source_type = d3.select(this).attr('data-type');
Expand Down Expand Up @@ -259,17 +253,17 @@ function getMousePosition(evt) {
};
}

function handleContextMenu() {
function handleContextMenu(event) {
let thisid = d3.select(this).attr('id');
let okit_id = d3.select(this).attr('data-okit-id');
let artefact = d3.select(this).attr('data-type');
console.info('Right Click on ' + thisid);
d3.event.preventDefault();
d3.event.stopPropagation();
event.preventDefault(); // event replaces d3.event
event.stopPropagation();
let element = document.getElementById("context-menu");
element.classList.toggle("hidden");
element.style.top = d3.event.clientY + 'px';
element.style.left = d3.event.clientX + 'px';
element.style.top = event.clientY + 'px';
element.style.left = event.clientX + 'px';
$("#context-menu").find("*").off();
$("#right-click-delete").on('click', function() {deleteAssetFromSVG(artefact, okit_id);});
}
Expand Down
8 changes: 4 additions & 4 deletions okitweb/static/okit/js/okit_designer_properties.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,10 +193,10 @@ function loadTags(json_element) {
let tr = tbody.append('div').attr('class', 'tr')
tr.append('div').attr('class', 'td').append('label').text(key)
tr.append('div').attr('class', 'td').append('label').text(value)
tr.append('div').attr('class', 'td delete-tag action-button-background delete').on('click', () => {
tr.append('div').attr('class', 'td delete-tag action-button-background delete').on('click', (event) => {
delete json_element.freeform_tags[key];
loadTags(json_element)
d3.event.stopPropagation()
event.stopPropagation() // event replaces d3.event
})
}
}
Expand All @@ -208,11 +208,11 @@ function loadTags(json_element) {
tr.append('div').attr('class', 'td').append('label').text(namespace)
tr.append('div').attr('class', 'td').append('label').text(key)
tr.append('div').attr('class', 'td').append('label').text(value)
tr.append('div').attr('class', 'td delete-tag action-button-background delete').on('click', () => {
tr.append('div').attr('class', 'td delete-tag action-button-background delete').on('click', (event) => {
delete json_element.defined_tags[namespace][key];
if (Object.keys(json_element.defined_tags[namespace]).length === 0) {delete json_element.defined_tags[namespace];}
loadTags(json_element)
d3.event.stopPropagation()
event.stopPropagation() // event replaces d3.event
})
}
}
Expand Down
8 changes: 4 additions & 4 deletions okitweb/static/okit/properties/js/okit_properties.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,10 +264,10 @@ class OkitResourceProperties {
let tr = this.fft_tbody.append('div').attr('class', 'tr')
tr.append('div').attr('class', 'td').append('label').text(key)
tr.append('div').attr('class', 'td').append('label').text(value)
tr.append('div').attr('class', 'td delete-tag action-button-background delete').on('click', () => {
tr.append('div').attr('class', 'td delete-tag action-button-background delete').on('click', (event) => {
delete this.resource.freeform_tags[key];
self.loadFreeformTags()
d3.event.stopPropagation()
event.stopPropagation() // event replaces d3.event
})
}
}
Expand All @@ -281,11 +281,11 @@ class OkitResourceProperties {
tr.append('div').attr('class', 'td').append('label').text(namespace)
tr.append('div').attr('class', 'td').append('label').text(key)
tr.append('div').attr('class', 'td').append('label').text(value)
tr.append('div').attr('class', 'td delete-tag action-button-background delete').on('click', () => {
tr.append('div').attr('class', 'td delete-tag action-button-background delete').on('click', (event) => {
delete this.resource.defined_tags[namespace][key];
if (Object.keys(this.resource.defined_tags[namespace]).length === 0) {delete this.resource.defined_tags[namespace];}
self.loadDefinedTags()
d3.event.stopPropagation()
event.stopPropagation() // event replaces d3.event
})
}
}
Expand Down
32 changes: 16 additions & 16 deletions okitweb/static/okit/view/js/okit_view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -706,15 +706,15 @@ class OkitArtefactView {

addClickEvent(svg) {
const self = this;
svg.on("click", function() {
d3.event.preventDefault();
d3.event.stopPropagation();
svg.on("click", function(event) {
event.preventDefault(); // event replaces d3.event
event.stopPropagation();
self.loadSlidePanels();
$(jqId("context-menu")).addClass("hidden");
});
svg.on("dblclick", () => {
d3.event.preventDefault();
d3.event.stopPropagation();
svg.on("dblclick", (event) => {
event.preventDefault(); // event replaces d3.event
event.stopPropagation();
// self.loadSlidePanels();
// $(jqId("context-menu")).addClass("hidden");
// const open = $('#toggle_properties_button').hasClass('okit-bar-panel-displayed');
Expand All @@ -728,16 +728,16 @@ class OkitArtefactView {
addMouseOverEvents(svg) {
const self = this;
const display_mouseover_links = okitSettings.show_connections_on_mouseover && !okitSettings.show_all_connections && !this.resource.show_connections
svg.on('mouseenter', () => {
d3.event.stopPropagation();
d3.event.preventDefault();
svg.on('mouseenter', (event) => {
event.stopPropagation(); // event replaces d3.event
event.preventDefault();
if (okitSettings.highlight_association) {self.addAssociationHighlighting();}
if (display_mouseover_links) {this.getLinks().forEach((id) => this.drawConnection(this.id, id))}
$(jqId(self.id)).addClass('highlight-rect');
})
svg.on('mouseleave', () => {
d3.event.stopPropagation();
d3.event.preventDefault();
svg.on('mouseleave', (event) => {
event.stopPropagation(); // event replaces d3.event
event.preventDefault();
if (okitSettings.highlight_association) {self.removeAssociationHighlighting();}
if (display_mouseover_links) {this.getLinks().forEach((id) => this.removeConnection(this.id, id))}
$(jqId(self.id)).removeClass('highlight-rect');
Expand Down Expand Up @@ -770,11 +770,11 @@ class OkitArtefactView {

addContextMenu(svg) {
const self = this;
svg.on("contextmenu", function () {
d3.event.preventDefault();
d3.event.stopPropagation();
svg.on("contextmenu", function (event) {
event.preventDefault(); // event replaces d3.event
event.stopPropagation();
const canvas_position = $(jqId("canvas-div")).offset();
const position = {top: d3.event.pageY - canvas_position.top, left: d3.event.pageX - 5};
const position = {top: event.pageY - canvas_position.top, left: event.pageX - 5};
$(jqId("context-menu")).empty();
$(jqId("context-menu")).css(position);
const contextmenu = d3.select(d3Id("context-menu"));
Expand Down
3 changes: 1 addition & 2 deletions okitweb/static/okit/views/compartment/js/okit_compartment_view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,8 +119,7 @@ class OkitCompartmentJsonView extends OkitJsonView {
canvas_div.selectAll('*').remove();
// Zoom & Pan SVG
// Zoom function associated with Canvas SVG but acts on the first <g> tag
// const zoom = d3.zoom().scaleExtent([0.1, 3]).on("zoom", () => {d3.select("#canvas_root_svg g").attr("transform", d3.event.transform)});
const zoom = d3.zoom().scaleExtent([0.1, 3]).on("zoom", () => transform_group.attr("transform", d3.event.transform));
const zoom = d3.zoom().scaleExtent([0.1, 3]).on("zoom", (event) => transform_group.attr("transform", event.transform)); // event replaces d3.event
const canvas_root_svg = canvas_div.append("svg")
.attr("id", 'canvas_root_svg')
.attr("width", "100%")
Expand Down
22 changes: 12 additions & 10 deletions okitweb/static/okit/views/identity/js/okit_identity_view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,10 @@ class OkitIdentityView extends OkitJsonView {
const self = this
const user_div = parent.append('div').attr('class', 'oci-user okit-user')
.attr('title', `${user.display_name}`)
.on('click', (e) => {d3.event.stopPropagation(); $(jqId(PROPERTIES_PANEL)).load("propertysheets/user.html", () => {loadPropertiesSheet(user);})});
.on('click', (event) => {
event.stopPropagation(); // event replaces d3.event
$(jqId(PROPERTIES_PANEL)).load("propertysheets/user.html", () => {loadPropertiesSheet(user);})
});
const details_div = user_div.append('div').attr('class', 'okit-resource-details')
details_div.append('div').attr('class', 'okit-resource-title').text('User')
details_div.append('div').append('input').attr('class', 'okit-resource-display-name').attr('tabindex', -1)
Expand All @@ -49,10 +52,9 @@ class OkitIdentityView extends OkitJsonView {
user_div.append('div').attr('class', 'cancel action-button-background cancel-overlay')
.on('click', () => {group ? self.deleteUserFromGroup(user, group) : self.deleteUser(user.id)})
if (!group) {
user_div.attr('draggable', 'true').on('dragstart', () => {
d3.event.dataTransfer.setData('text/plain', user.id)
user_div.attr('draggable', 'true').on('dragstart', (event) => {
event.dataTransfer.setData('text/plain', user.id) // event replaces d3.event
})
// .on('dragend', () => {console.info('Drag End', d3.event)})
}
}

Expand Down Expand Up @@ -97,12 +99,12 @@ class OkitIdentityView extends OkitJsonView {
group.user_ids.forEach((id) => self.addUserToPanel(group_div, self.model.getUser(id), group))
group_div.append('div').attr('class', 'cancel action-button-background cancel-overlay')
.on('click', () => {self.deleteUserGroup(group.id)})
group_div.on('dragover', () => {d3.event.preventDefault()}).on('drop', () => {
const user_id = d3.event.dataTransfer.getData('text/plain')
if (!group.user_ids.includes(user_id)) group.user_ids.push(user_id)
// if (!group.user_ids.includes(user_id)) group.user_ids = [...group.user_ids, user_id]
self.draw()
})
group_div.on('dragover', (event) => {event.preventDefault()})
.on('drop', (event) => { // event replaces d3.event
const user_id = event.dataTransfer.getData('text/plain') // event replaces d3.event
if (!group.user_ids.includes(user_id)) group.user_ids.push(user_id)
self.draw()
})
}

updateGroupDisplayName(existing, updated) {
Expand Down
Loading

0 comments on commit d07ea08

Please sign in to comment.