Как сохранить нарисованные прямоугольники и путь на странице обновления mxgraph

-4

я хочу сохранить нарисованные boxes и путь после обновления страницы.

я использую mxgraph https://jgraph.github.io/mxgraph/docs/manual.html

Вопрос: как только рисунок будет сделано, если я сделать страницу обновления он должен сохранить тот же рисунок, сохраняя чертежные данные в LocalStorage.

ПРИМЕЧАНИЕ: я хочу получить json object нарисованного canvas и восстановить его из этого object при обновлении страницы.

Ниже показано, как рисовать: https://drive.google.com/file/d/1McTMz3e8I_quOcLGt2CtaQhqif3R31qs/view

https://jgraph.github.io/mxgraph/javascript/examples/editors/images/
<!--
Copyright (c) 2006-2013, JGraph Ltd

Dynamic toolbar example for mxGraph. This example demonstrates changing the
state of the toolbar at runtime.
-->
<html>
<head>
<title>Toolbar example for mxGraph</title>

<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
</script>

<!-- Loads and initializes the library -->
<script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>

<!-- Example code -->
<script type="text/javascript">
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main()
{
// Checks if browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is
// not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Defines an icon for creating new connections in the connection handler.
// This will automatically disable the highlighting of the source vertex.
mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);

// Creates the div for the toolbar
var tbContainer = document.createElement('div');
tbContainer.style.position = 'absolute';
tbContainer.style.overflow = 'hidden';
tbContainer.style.padding = '2px';
tbContainer.style.left = '0px';
tbContainer.style.top = '0px';
tbContainer.style.width = '24px';
tbContainer.style.bottom = '0px';

document.body.appendChild(tbContainer);

// Creates new toolbar without event processing
var toolbar = new mxToolbar(tbContainer);
toolbar.enabled = false

// Creates the div for the graph
var container = document.createElement('div');
container.style.position = 'absolute';
container.style.overflow = 'hidden';
container.style.left = '24px';
container.style.top = '0px';
container.style.right = '0px';
container.style.bottom = '0px';
container.style.background = 'url("editors/images/grid.gif")';

document.body.appendChild(container);

// Workaround for Internet Explorer ignoring certain styles
if (mxClient.IS_QUIRKS)
{
document.body.style.overflow = 'hidden';
new mxDivResizer(tbContainer);
new mxDivResizer(container);
}

// Creates the model and the graph inside the container
// using the fastest rendering available on the browser
var model = new mxGraphModel();
var graph = new mxGraph(container, model);

// Enables new connections in the graph
graph.setConnectable(true);
graph.setMultigraph(false);

// Stops editing on enter or escape keypress
var keyHandler = new mxKeyHandler(graph);
var rubberband = new mxRubberband(graph);

var addVertex = function(icon, w, h, style)
{
var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
vertex.setVertex(true);

var img = addToolbarItem(graph, toolbar, vertex, icon);
img.enabled = true;

graph.getSelectionModel().addListener(mxEvent.CHANGE, function()
{
var tmp = graph.isSelectionEmpty();
mxUtils.setOpacity(img, (tmp) ? 100 : 20);
img.enabled = tmp;
});
};

addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/rectangle.gif', 100, 40, '');
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/rounded.gif', 100, 40, 'shape=rounded');
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/ellipse.gif', 40, 40, 'shape=ellipse');
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/rhombus.gif', 40, 40, 'shape=rhombus');
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/triangle.gif', 40, 40, 'shape=triangle');
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/cylinder.gif', 40, 40, 'shape=cylinder');
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/actor.gif', 30, 40, 'shape=actor');
}
}

function addToolbarItem(graph, toolbar, prototype, image)
{
// Function that is executed when the image is dropped on
// the graph. The cell argument points to the cell under
// the mousepointer if there is one.
var funct = function(graph, evt, cell, x, y)
{
graph.stopEditing(false);

var vertex = graph.getModel().cloneCell(prototype);
vertex.geometry.x = x;
vertex.geometry.y = y;

graph.addCell(vertex);
graph.setSelectionCell(vertex);
}

// Creates the image which is used as the drag icon (preview)
var img = toolbar.addMode(null, image, function(evt, cell)
{
var pt = this.graph.getPointForEvent(evt);
funct(graph, evt, cell, pt.x, pt.y);
});

// Disables dragging if element is disabled. This is a workaround
// for wrong event order in IE. Following is a dummy listener that
// is invoked as the last listener in IE.
mxEvent.addListener(img, 'mousedown', function(evt)
{
// do nothing
});

// This listener is always called first before any other listener
// in all browsers.
mxEvent.addListener(img, 'mousedown', function(evt)
{
if (img.enabled == false)
{
mxEvent.consume(evt);
}
});

mxUtils.makeDraggable(img, graph, funct);

return img;
}

</script>
</head>

<!-- Calls the main function after the page has loaded. Container is dynamically created. -->
<body onload="main();" >
</body>
</html>

спросил(а) 2019-04-24T20:08:00+03:00 10 месяцев назад
0
61

Это использует XML-кодировку mxgraph. Вы видите этот код в одном из примеров mxGraph. Хотя это не json, его очень легко превратить в json, и его можно редактировать или сохранять по своему желанию. Теперь он хранится в localStorage, как вы просили.

Добавьте следующие строки в конец вашей основной функции (после последнего вызова addVertex):

// read state on load 
if(window.localStorage.graphState){
var doc = mxUtils.parseXml(window.localStorage.graphState);
var dec = new mxCodec(doc);
dec.decode(doc.documentElement, graph.getModel());
}

// save state on change
graph.getModel().addListener('change',function(){
var codec = new mxCodec();
window.localStorage.graphState = codec.encode(
graph.getModel()
).outerHTML;
});

Обновление с использованием JSON

Обновление 2: переключился на мою собственную реализацию html2json и json2html, чтобы сделать ответ полностью автономным

Если вам нужен правильный объект JSON, вы можете конвертировать из XML в JSON и обратно. Ниже вы можете увидеть, как я преобразую и анализирую объект json, это необходимо только для сохранения его в localStorage.

Сначала добавьте эти две функции для преобразования из html/xml в json и из json обратно в html/xml:

function html2json(html){
if(html.nodeType==3){
return {
"tagName":"#text",
"content":html.textContent
}
}
var element = {
"tagName":html.tagName
};

if(html.getAttributeNames().length>0){
element.attributes = html.getAttributeNames().reduce(
function(acc,at){acc[at]=html.getAttribute(at); return acc;},
{}
);
}

if(html.childNodes.length>0){
element.children = Array.from(html.childNodes)
.filter(
function(el){
return el.nodeType!=3
||el.textContent.trim().length>0
})
.map(function(el){return html2json(el);});
}
return element;
}

function json2html(json){
var xmlDoc = document.implementation.createDocument(null, json.tagName);

var addAttributes = function(jsonNode, node){
if(jsonNode.attributes){
Object.keys(jsonNode.attributes).map(
function(name){
node.setAttribute(name,jsonNode.attributes[name]);
}
);
}
}

var addChildren = function(jsonNode,node){
if(jsonNode.children){
jsonNode.children.map(
function(jsonChildNode){
json2htmlNode(jsonChildNode,node);
}
);
}
}

var json2htmlNode = function(jsonNode,parent){
if(jsonNode.tagName=="#text"){
return xmlDoc.createTextNode(jsonNode.content);
}

var node = xmlDoc.createElement(jsonNode.tagName);

addAttributes(jsonNode,node);
addChildren(jsonNode,node);

parent.appendChild(node);
}

addAttributes(json,xmlDoc.firstElementChild);
addChildren(json,xmlDoc.firstElementChild);

return xmlDoc;
}

Затем измените мой фрагмент JavaScript сверху следующим образом, чтобы преобразовать xml в json и обратно:

// read state on load 
if(window.localStorage.graphState){
var doc = json2html(JSON.parse(localStorage.graphState));
var dec = new mxCodec(doc);
dec.decode(doc.documentElement, graph.getModel());
}

// save state on change
graph.getModel().addListener('change',function(){
var codec = new mxCodec();
window.localStorage.graphState = JSON.stringify(html2json(codec.encode(
graph.getModel()
)));
});

ответил(а) 2019-04-27T18:01:00+03:00 10 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема