2. Odoo saas-19.1
3. web_studio
4. Chinese (Traditional Han script)

);
return domEl && domEl.isConnected;
}).catch(() => true);

if (domEl) {
domEl.click();
}
};

useSubEnv({
setAutoClick: (targetInfo, nodeDescr) => this.setAutoClick(targetInfo, nodeDescr),
});
}

get viewEditorModel() {
return this.env.viewEditorModel;
}

get viewRef() {
return this.viewEditorModel.viewRef;
}

getNearestHook(draggedEl, { x, y }) {
const viewRefEl = this.viewRef.el;
cleanHooks(viewRefEl);

const mouseToleranceRect = {
x: x - hookPositionTolerance,
y: y - hookPositionTolerance,
width: hookPositionTolerance * 2,
height: hookPositionTolerance * 2,
};

const touchingEls = touching(getHooks(viewRefEl), mouseToleranceRect);
const closestHookEl = closest(touchingEls, { x, y });

return closestHookEl;
}

openViewInForm() {
return this.action.doAction(
{
type: "ir.actions.act_window",
res_model: "ir.ui.view",
res_id: this.env.viewEditorModel.mainView.id,
views: [[false, "form"]],
target: "current",
},
{ clearBreadcrumbs: true }
);
}

openDefaultValues() {
const resModel = this.env.viewEditorModel.resModel;
this.action.doAction(
{
name: _t("Default Values"),
type: "ir.actions.act_window",
res_model: "ir.default",
target: "current",
views: [
[false, "list"],
[false, "form"],
],
domain: [["field_id.model", "=", resModel]],
},
{ clearBreadcrumbs: true }
);
}

setAutoClick(targetInfo, nodeDescr) {
if (!targetInfo) {
this.autoClick = null;
return;
}
if (targetInfo && !nodeDescr) {
this.autoClick = {
targetInfo,
};
return;
}
let nameAttr = nodeDescr.attrs?.name;
if (nodeDescr.tag === "field" && !nameAttr) {
nameAttr = nodeDescr.field_description.name;
} else if (!nameAttr) {
this.autoClick = {
targetInfo,
};
return;
}

this.autoClick = {
targetInfo,
tag: nodeDescr.tag,
attrs: { name: nameAttr },
};
}

async addField(droppedData) {
const data = droppedData;
const isExistingField = "fieldName" in data;

let newNode;
if (!isExistingField) {
newNode = await this.getNewFieldNode(data);
} else {
newNode = {
tag: "field",
attrs: { name: data.fieldName },
};

const field = this.viewEditorModel.fields[data.fieldName];
if (field.type === "monetary") {
this.setCurrencyInfos(newNode.attrs);
}
if (
field.type === "binary" &&
this.viewEditorModel.fields[data.fieldName + "_filename"]
) {
newNode.attrs["filename"] = data.fieldName + "_filename";
}
}
if (!newNode) {
return;
}
if (!isExistingField) {
this.viewEditorModel.setRenameableField(newNode.field_description?.name, true);
}

if (this.viewEditorModel.viewType === "kanban") {
newNode.attrs.display = "full";
}

if (this.viewEditorModel.viewType === "list") {
newNode.attrs.optional = "show";
}

return {
node: newNode,
};
}

async addStructure(structure, droppedData, targetInfo) {
let _operation;
if (this.addViewStructure) {
_operation = await this.addViewStructure(structure, {
droppedData,
targetInfo,
addDialog: this.addDialog.bind(this),
});
}
if (!_operation && structure === "field") {
_operation = await this.addField(droppedData);
}
if (!_operation) {
return;
}

const operation = {
target:
_operation?.target ||
targetInfo.target ||
(targetInfo.xpath
? this.viewEditorModel.getFullTarget(targetInfo.xpath)
: undefined),
position: targetInfo.position,
type: "add",
..._operation,
};
const operations = targetInfo?.getOperations?.({ operation }) || [operation];
this.setAutoClick(targetInfo, operations.at(-1).node);
for (const operation of operations.slice(0, -1)) {
this.viewEditorModel.pushOperation(operation);
}
return this.viewEditorModel.doOperation(operations.at(-1));
}

async getNewFieldNode(data) {
const string = _t("New %s", data.string);

const newNode = {
field_description: {
field_description: string,
name: randomName(

);
return domEl && domEl.isConnected;
}).catch(() => true);

if (domEl) {
domEl.click();
}
};

useSubEnv({
setAutoClick: (targetInfo, nodeDescr) => this.setAutoClick(targetInfo, nodeDescr),
});
}

get viewEditorModel() {
return this.env.viewEditorModel;
}

get viewRef() {
return this.viewEditorModel.viewRef;
}

getNearestHook(draggedEl, { x, y }) {
const viewRefEl = this.viewRef.el;
cleanHooks(viewRefEl);

const mouseToleranceRect = {
x: x - hookPositionTolerance,
y: y - hookPositionTolerance,
width: hookPositionTolerance * 2,
height: hookPositionTolerance * 2,
};

const touchingEls = touching(getHooks(viewRefEl), mouseToleranceRect);
const closestHookEl = closest(touchingEls, { x, y });

return closestHookEl;
}

openViewInForm() {
return this.action.doAction(
{
type: "ir.actions.act_window",
res_model: "ir.ui.view",
res_id: this.env.viewEditorModel.mainView.id,
views: [[false, "form"]],
target: "current",
},
{ clearBreadcrumbs: true }
);
}

openDefaultValues() {
const resModel = this.env.viewEditorModel.resModel;
this.action.doAction(
{
name: _t("Default Values"),
type: "ir.actions.act_window",
res_model: "ir.default",
target: "current",
views: [
[false, "list"],
[false, "form"],
],
domain: [["field_id.model", "=", resModel]],
},
{ clearBreadcrumbs: true }
);
}

setAutoClick(targetInfo, nodeDescr) {
if (!targetInfo) {
this.autoClick = null;
return;
}
if (targetInfo && !nodeDescr) {
this.autoClick = {
targetInfo,
};
return;
}
let nameAttr = nodeDescr.attrs?.name;
if (nodeDescr.tag === "field" && !nameAttr) {
nameAttr = nodeDescr.field_description.name;
} else if (!nameAttr) {
this.autoClick = {
targetInfo,
};
return;
}

this.autoClick = {
targetInfo,
tag: nodeDescr.tag,
attrs: { name: nameAttr },
};
}

async addField(droppedData) {
const data = droppedData;
const isExistingField = "fieldName" in data;

let newNode;
if (!isExistingField) {
newNode = await this.getNewFieldNode(data);
} else {
newNode = {
tag: "field",
attrs: { name: data.fieldName },
};

const field = this.viewEditorModel.fields[data.fieldName];
if (field.type === "monetary") {
this.setCurrencyInfos(newNode.attrs);
}
if (
field.type === "binary" &&
this.viewEditorModel.fields[data.fieldName + "_filename"]
) {
newNode.attrs["filename"] = data.fieldName + "_filename";
}
}
if (!newNode) {
return;
}
if (!isExistingField) {
this.viewEditorModel.setRenameableField(newNode.field_description?.name, true);
}

if (this.viewEditorModel.viewType === "kanban") {
newNode.attrs.display = "full";
}

if (this.viewEditorModel.viewType === "list") {
newNode.attrs.optional = "show";
}

return {
node: newNode,
};
}

async addStructure(structure, droppedData, targetInfo) {
let _operation;
if (this.addViewStructure) {
_operation = await this.addViewStructure(structure, {
droppedData,
targetInfo,
addDialog: this.addDialog.bind(this),
});
}
if (!_operation && structure === "field") {
_operation = await this.addField(droppedData);
}
if (!_operation) {
return;
}

const operation = {
target:
_operation?.target ||
targetInfo.target ||
(targetInfo.xpath
? this.viewEditorModel.getFullTarget(targetInfo.xpath)
: undefined),
position: targetInfo.position,
type: "add",
..._operation,
};
const operations = targetInfo?.getOperations?.({ operation }) || [operation];
this.setAutoClick(targetInfo, operations.at(-1).node);
for (const operation of operations.slice(0, -1)) {
this.viewEditorModel.pushOperation(operation);
}
return this.viewEditorModel.doOperation(operations.at(-1));
}

async getNewFieldNode(data) {
const string = _t("New %s", data.string);

const newNode = {
field_description: {
field_description: string,
name: randomName(

);

function copyElementOnDrag() {
let element;
let copy;

function clone(_element) {
element = _element;
copy = element.cloneNode(true);
}

function insert() {
if (element) {
element.insertAdjacentElement("beforebegin", copy);
}
}

function clean() {
if (copy) {
copy.remove();
}
copy = null;
element = null;
}

return { clone, insert, clean };
}

export class InteractiveEditor extends Component {
static template = "web_studio.InteractiveEditor";
static components = {};
static props = {
editor: true,
slots: { type: Object },
editorContainerRef: { type: Object },
rendererRef: { type: Object },
};

setup() {
this.defaultSidebar = DefaultViewSidebar;

this.action = useService("action");
this.orm = useService("orm");
this.addDialog = useOwnedDialogs();
this.notification = useService("notification");
/* DagDrop: from sidebar to View, and within the view */
const getNearestHook = this.getNearestHook.bind(this);
// Those are fine because editor defines the t-key
const prepareForDrag = this.props.editor.prepareForDrag;

const editorHookValidation = this.props.editor.isValidHook || (() => true);
const isValidHook = ({ hook, element }) => {
if (hook.dataset.hookId) {
if (!this.viewEditorModel.dropHooks[hook.dataset.hookId].accept({ element })) {
return false;
}
} else if (
!editorHookValidation({ hook, element, viewEditorModel: this.viewEditorModel })
) {
return false;
}
return true;
};

this.addViewStructure = this.props.editor.addViewStructure;
const styleNearestHook =
this.props.editor.styleNearestHook ||
((ref, hook) => {
hook.classList.add("o_web_studio_nearest_hook");
});

function removeBootStrapClasses(element) {
const bootstrapClasses = Array.from(element.classList).filter(
(c) => c.startsWith("position-") || c.startsWith("w-") || c.startsWith("h-")
);
if (!bootstrapClasses.length) {
return () => {};
}
element.classList.remove(...bootstrapClasses);
return () => {
element.classList.add(...bootstrapClasses);
};
}

let cleanUps;
const copyOnDrag = copyElementOnDrag();

const editorHighlightHooks = this.props.editor.highlightHooks;
const highlightHooks = ({ element }) => {
const hooks = getHooks(this.viewRef.el).filter((hook) =>
isValidHook({ hook, element })
);
if (editorHighlightHooks) {
return editorHighlightHooks({ element, hooks });
}
return () => {};
};
useDraggable({
ref: this.props.editorContainerRef,
elements: ".o-draggable",
onWillStartDrag: ({ element }) => {
cleanUps = [];
if (element.closest(".o_web_studio_component")) {
copyOnDrag.clone(element);
}
},
onDragStart: ({ element }) => {
cleanUps.push(removeBootStrapClasses(element));
cleanUps.push(highlightHooks({ element }));
copyOnDrag.insert();
if (prepareForDrag) {
cleanUps.push(
prepareForDrag({
element,
viewEditorModel: this.viewEditorModel,
ref: this.props.editorContainerRef,
})
);
}
},
onDrag: ({ x, y, element }) => {
cleanHooks(this.viewRef.el);
element.classList.remove("o-draggable--drop-ready");
const hook = getNearestHook(element, { x, y });
if (!hook) {
return;
}
if (!isValidHook({ hook, element })) {
return;
}
styleNearestHook(this.props.rendererRef, hook);
element.classList.add("o-draggable--drop-ready");
},
onDrop: ({ element }) => {
const targetHook = getActiveHook(this.viewRef.el);
if (!targetHook) {
return;
}
let targetInfo = pick(targetHook.dataset, "xpath", "position", "type", "infos");
if (targetHook.dataset.hookId) {
targetInfo = this.viewEditorModel.dropHooks[
targetHook.dataset.hookId
].getHookConfig({ targetInfo });
}

const droppedData = element.dataset;
const isNew = element.classList.contains("o_web_studio_component");
const structure = isNew ? droppedData.structure : "field"; // only fields can be moved
if (isNew) {
const dropInfo = droppedData.drop ? JSON.parse(droppedData.drop) : undefined;
this.addStructure(structure, dropInfo, targetInfo);
} else {
this.moveStructure(structure, droppedData, {
xpath: targetInfo.xpath,
position: targetInfo.position,
});
}
},
onDragEnd: ({ element }) => {
cleanHooks(this.viewRef.el);
if (cleanUps) {
cleanUps.forEach((c) => c());
cleanUps = null;
}
copyOnDrag.clean();
},
});

this.applyAutoClick = async () => {
if (!this.autoClick) {
return;
}

const { targetInfo, tag, attrs } = this.autoClick;

// First step: locate node in new arch
let xpathToClick = targetInfo.xpath;
if (tag) {
// We are trying to select a new node of which targetInfo could be its parent
if (targetInfo.position !== "inside") {
xpathToClick = xpathToClick.split("/").slice(0, -1).join("/");
}

const attrForXpath = Object.entries(attrs)
.filter(([, value]) => !!value)
.map(([attName, value]) =>