88 lines
3.5 KiB
JavaScript
88 lines
3.5 KiB
JavaScript
"use strict";
|
|
|
|
/** Own map-context layouts and apply them to the rendered editor records. */
|
|
export class CmapLayoutController {
|
|
constructor(editor) {
|
|
this.editor = editor;
|
|
}
|
|
|
|
itemLayout(record) {
|
|
return {
|
|
x: Number(record.node.attr("x")),
|
|
y: Number(record.node.attr("y")),
|
|
width: Number(record.node.attr("width")),
|
|
height: Number(record.node.attr("height")),
|
|
backgroundColor: record.backgroundColor,
|
|
borderColor: record.borderColor,
|
|
textColor: record.textColor,
|
|
fontFamily: record.fontFamily,
|
|
fontSize: record.fontSize,
|
|
fontWeight: record.fontWeight,
|
|
fontStyle: record.fontStyle,
|
|
synopsisTextColor: record.synopsisTextColor,
|
|
synopsisFontFamily: record.synopsisFontFamily,
|
|
synopsisFontSize: record.synopsisFontSize,
|
|
synopsisFontWeight: record.synopsisFontWeight,
|
|
synopsisFontStyle: record.synopsisFontStyle
|
|
};
|
|
}
|
|
|
|
saveCurrentContextLayout() {
|
|
const context = this.editor.mapContextKey();
|
|
for (const record of this.editor.items.filter((item) => this.editor.isEffectiveItemVisible(item))) {
|
|
record.layouts[context] = this.itemLayout(record);
|
|
}
|
|
}
|
|
|
|
applyCurrentContextLayout() {
|
|
const context = this.editor.mapContextKey();
|
|
const visible = this.editor.items.filter((record) => this.editor.isEffectiveItemVisible(record));
|
|
let offset = { x: 0, y: 0 };
|
|
if (this.editor.activeMapRoot && !this.editor.activeMapRoot.layouts[context]) {
|
|
const rootLayout = this.itemLayout(this.editor.activeMapRoot);
|
|
offset = { x: 80 - rootLayout.x, y: 80 - rootLayout.y };
|
|
}
|
|
|
|
for (const record of visible) {
|
|
if (!record.layouts[context]) {
|
|
const current = this.itemLayout(record);
|
|
record.layouts[context] = { ...current, x: current.x + offset.x, y: current.y + offset.y };
|
|
}
|
|
const layout = record.layouts[context];
|
|
record.width = layout.width;
|
|
record.height = layout.height;
|
|
record.backgroundColor = layout.backgroundColor || record.backgroundColor;
|
|
record.borderColor = layout.borderColor || record.borderColor;
|
|
record.textColor = layout.textColor || record.textColor;
|
|
record.fontFamily = layout.fontFamily || record.fontFamily;
|
|
record.fontSize = layout.fontSize || record.fontSize;
|
|
record.fontWeight = layout.fontWeight || record.fontWeight;
|
|
record.fontStyle = layout.fontStyle || record.fontStyle;
|
|
record.synopsisTextColor = layout.synopsisTextColor || layout.textColor || record.synopsisTextColor;
|
|
record.synopsisFontFamily = layout.synopsisFontFamily || layout.fontFamily || record.synopsisFontFamily;
|
|
record.synopsisFontSize = layout.synopsisFontSize || record.synopsisFontSize;
|
|
record.synopsisFontWeight = layout.synopsisFontWeight || layout.fontWeight || record.synopsisFontWeight;
|
|
record.synopsisFontStyle = layout.synopsisFontStyle || layout.fontStyle || record.synopsisFontStyle;
|
|
record.node.attr({
|
|
x: layout.x,
|
|
y: layout.y,
|
|
width: layout.width,
|
|
height: layout.height,
|
|
content: this.editor.itemHtml(record),
|
|
backgroundColor: record.backgroundColor,
|
|
borderColor: record.borderColor,
|
|
textColor: record.textColor
|
|
});
|
|
record.node.redraw();
|
|
}
|
|
this.editor.refreshSubmapVisibility();
|
|
this.editor.refreshConnectorGeometry();
|
|
window.requestAnimationFrame(() => {
|
|
if (!this.editor.destroyed && this.editor.canvas.isConnected) {
|
|
this.editor.refreshSubmapVisibility();
|
|
this.editor.refreshConnectorGeometry();
|
|
}
|
|
});
|
|
}
|
|
}
|