@paperbits/core
Version:
Paperbits core components.
205 lines (195 loc) • 9.06 kB
text/typescript
import { IWidgetHandler, WidgetContext } from "@paperbits/common/editing";
import { EventManager, Events } from "@paperbits/common/events";
import { DragSession } from "@paperbits/common/ui/draggables";
import { IContextCommandSet, View, ViewManager } from "@paperbits/common/ui";
import { WidgetModel } from "@paperbits/common/widgets";
import { TableModel } from "../table/tableModel";
import { TableCellModel } from "./tableCellModel";
export class TableCellHandlers implements IWidgetHandler<TableCellModel> {
constructor(
private readonly viewManager: ViewManager,
private readonly eventManager: EventManager
) { }
public canAccept(dragSession: DragSession): boolean {
return !["section", "row", "column"].includes(dragSession.sourceBinding.name);
}
public getContextCommands(context: WidgetContext): IContextCommandSet {
const tableParentBinding = context.gridItem.getParent().getParent().binding;
const tableParentModel = tableParentBinding.model;
const tableModel = context.gridItem.getParent().binding.model;
const tableCellContextualEditor: IContextCommandSet = {
color: "#9C27B0",
hoverCommands: [],
deleteCommand: {
controlType: "toolbox-button",
tooltip: "Delete table",
color: "#607d8b",
callback: () => {
tableParentModel.widgets.remove(tableModel);
tableParentBinding.applyChanges();
this.viewManager.clearContextualCommands();
this.eventManager.dispatchEvent(Events.ContentUpdate);
}
},
selectCommands: [
{
controlType: "toolbox-button",
tooltip: "Table settings",
displayName: "Table",
callback: () => this.viewManager.openWidgetEditor(context.parentBinding)
},
{
controlType: "toolbox-splitter"
},
{
controlType: "toolbox-button",
tooltip: "Row settings",
displayName: "Row",
position: "top right",
color: "#9C27B0",
callback: () => {
const view: View = {
heading: "Table row",
component: {
name: "table-row-editor",
params: {
model: context.parentModel,
cellModel: context.model,
rowIndex: Math.floor(context.parentModel.widgets.indexOf(context.model) / context.parentModel["numOfCols"]),
onChange: (model: TableModel) => {
context.parentBinding.applyChanges();
this.eventManager.dispatchEvent(Events.ContentUpdate);
// this.viewManager.clearContextualCommands();
}
}
}
};
this.viewManager.openViewAsPopup(view);
}
},
{
controlType: "toolbox-splitter"
},
{
controlType: "toolbox-button",
tooltip: "Column settings",
displayName: "Column",
position: "top right",
color: "#9C27B0",
callback: () => {
const view: View = {
heading: "Table column",
component: {
name: "table-column-editor",
params: {
model: context.parentModel,
columnIndex: context.parentModel.widgets.indexOf(context.model),
onChange: (model: TableModel) => {
context.parentBinding.applyChanges();
this.eventManager.dispatchEvent(Events.ContentUpdate);
}
}
}
};
this.viewManager.openViewAsPopup(view);
}
},
{
controlType: "toolbox-splitter"
},
{
controlType: "toolbox-button",
tooltip: "Cell settings",
displayName: "Cell",
position: "top right",
color: "#9C27B0",
callback: () => this.viewManager.openWidgetEditor(context.binding)
},
{
controlType: "toolbox-splitter"
},
{
controlType: "toolbox-button",
tooltip: "Switch to parent",
iconClass: "paperbits-icon paperbits-arrow-up",
position: "top right",
color: "#9C27B0",
callback: () => context.gridItem.getParent().getParent().select()
}]
};
if (context.model.widgets.length !== 0) {
return tableCellContextualEditor;
}
tableCellContextualEditor.hoverCommands.push({
color: "#607d8b",
controlType: "toolbox-button",
iconClass: "paperbits-icon paperbits-simple-add",
position: "center",
tooltip: "Add widget",
component: {
name: "widget-selector",
params: {
onRequest: () => context.providers,
onSelect: (widget: WidgetModel) => {
context.model.widgets.push(widget);
context.binding.applyChanges();
this.eventManager.dispatchEvent(Events.ContentUpdate);
this.viewManager.clearContextualCommands();
}
}
}
});
tableCellContextualEditor.hoverCommands.push({
controlType: "toolbox-button",
color: "#607d8b",
iconClass: "paperbits-icon paperbits-edit-72",
position: "parent-left",
tooltip: "Edit row",
callback: () => {
const view: View = {
heading: "Table row",
component: {
name: "table-row-editor",
params: {
model: context.parentModel,
cellModel: context.model,
rowIndex: Math.floor(context.parentModel.widgets.indexOf(context.model) / context.parentModel["numOfCols"]),
onChange: (model: TableModel) => {
context.parentBinding.applyChanges();
this.eventManager.dispatchEvent(Events.ContentUpdate);
// this.viewManager.clearContextualCommands();
}
}
}
};
this.viewManager.openViewAsPopup(view);
}
});
tableCellContextualEditor.hoverCommands.push({
controlType: "toolbox-button",
color: "#607d8b",
iconClass: "paperbits-icon paperbits-edit-72",
position: "parent-top",
tooltip: "Edit column",
callback: () => {
const view: View = {
heading: "Table column",
component: {
name: "table-column-editor",
params: {
model: context.parentModel,
columnIndex: context.parentModel.widgets.indexOf(context.model),
onChange: (model: TableModel) => {
context.parentBinding.applyChanges();
this.eventManager.dispatchEvent(Events.ContentUpdate);
// this.viewManager.clearContextualCommands();
}
}
}
};
this.viewManager.openViewAsPopup(view);
}
});
return tableCellContextualEditor;
}
}