90 lines
3.3 KiB
Plaintext
90 lines
3.3 KiB
Plaintext
<% content_for :page_specific_css do %>
|
|
<%= stylesheet_link_tag "universal_table/universal-table" %>
|
|
<%= stylesheet_link_tag "mind_map/mindmap" %>
|
|
<% end %>
|
|
<%= form_for @mind_map, url: admin_mind_maps_path, html: {class: "form-horizontal main-forms", id: "mind_map_form"} do |f| %>
|
|
<%= render :partial => "form", locals: {f: f} %>
|
|
<% end %>
|
|
<script type="module">
|
|
import '/assets/mind_map/utils/custom.overrides.js'
|
|
import '/assets/mind_map/jsmind/plugins/jsmind.draggable-node.js'
|
|
import { initJsmind, getJsmindData } from '/assets/mind_map/utils/custom.main.js'
|
|
import { INITIAL_MIND } from '/assets/mind_map/utils/custom.config.js'
|
|
|
|
// 操控心智圖是否可編輯
|
|
// Control whether the mind map is editable
|
|
let isEditable = true
|
|
|
|
// 心智圖實例
|
|
// Mind map instance
|
|
let jm
|
|
|
|
// 心智圖初始數據
|
|
// Initial mind map data
|
|
let mind = INITIAL_MIND
|
|
|
|
// 心智圖自訂選項（可參考 jsmind 官方文檔）
|
|
// Custom options for the mind map (refer to the jsmind official documentation)
|
|
const options = {
|
|
container: 'jsmind_container',
|
|
editable: isEditable,
|
|
theme: 'primary',
|
|
mode: 'full',
|
|
tableUID: '<%= @table.uid %>',
|
|
text: {
|
|
addNode: "<%= t("universal_table.add_node") %>",
|
|
deleteNode: "<%= t("universal_table.delete_node") %>",
|
|
strokeColor: "<%= t("universal_table.stroke_color") %>",
|
|
bgColor: "<%= t("universal_table.bg_color") %>",
|
|
textColor: "<%= t("universal_table.text_color") %>"
|
|
},
|
|
view: {
|
|
engine: 'svg',
|
|
draggable: true,
|
|
node_overflow: 'wrap',
|
|
},
|
|
shortcut: {
|
|
mapping: {
|
|
// 避免與 Toolbar 按下 Enter 事件衝突
|
|
// Avoid conflicts with the Enter key event in the Toolbar
|
|
addbrother: 2048 + 13,
|
|
},
|
|
},
|
|
}
|
|
|
|
// 初始化心智圖並掛載實例
|
|
// Initialize the mind map and attach the instance
|
|
jm = initJsmind(mind, options, isEditable)
|
|
|
|
// 儲存當前數據
|
|
// Save the current data
|
|
// document.getElementById('save_mind_map').addEventListener('click', (e) => {
|
|
// e.preventDefault();
|
|
// e.stopPropagation();
|
|
// let data = getJsmindData(jm);
|
|
// console.log(data);
|
|
// })
|
|
|
|
// 調整可編輯狀態
|
|
// Toggle the editable state
|
|
document.getElementById('toggle_editable').addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
isEditable = !isEditable;
|
|
e.target.innerHTML = isEditable ? '<%= t("universal_table.disable_editing") %>' : '<%= t("universal_table.enable_editing") %>';
|
|
|
|
mind = getJsmindData(jm);
|
|
jm = initJsmind(mind, options, isEditable);
|
|
return false;
|
|
})
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const form = document.getElementById("mind_map_form");
|
|
const hiddenField = document.getElementById("mind_map_data_field");
|
|
form.addEventListener("submit", function (e) {
|
|
const mindMapData = getJsmindData(jm);
|
|
console.log(mindMapData);
|
|
hiddenField.value = JSON.stringify(mindMapData.data);
|
|
});
|
|
});
|
|
</script>
|