Tienda Web
Área de Clientes
MindFusion

Características de MindFusion.Diagramming para ASP.NET MVC

Una lista completa de las características más importantes del control dividida en secciones. Puede encontrar más detalles sobre las características de los componentes en la sección "Visión general de la API" en el archivo de ayuda. Si usted necesita una característica que no está soportada actualmente, puede solicitarla aquí.

General

Lado del servidor: La librería .NET immplementa un modelo de objeto de flujo-diagramación que le permite definir estructuras como árboles, diagramas de flujo y gráficos. Usted puede acceder fácilmente a cualquier elemento en su diagrama a través de las collecciones de Nodos y Enlaces. El renderizado de su diagrama de flujo como parte de una página HTML también es fácil - simplemente llame el método de la extensión DiagramView desde la vista de código MVC.

 

Lado del cliente: En el lado del cliente su diagrama es renderizado por un control JavaScript DiagramView JavaScript que dibuja su contenido en un Lienzo HTML. El usuario puede añadir nodos y enlaces simplemente dibujándolos con el ratón. Usted también puede usar el control NodeListView y crear nuevos nodos vía arratrar y soltar.

Interacción con el Usuario

Crear nuevo elemento: simplemente dibújelos con el ratón o arrátrelos y suéltelos desde el control NodeListView, es así de simple.

Modificar elementos existentes: controles aparecen alrededor de su elemento seleccionado para indicar que está listo para modificarse. Los nodos pueden modificar su tamaño horizontal o verticalmente, ser arrastrado o rotar - le toca a usted decidir cuáles acciones se permitirán y cuáles no. Usted puede modificar los enlaces de acuerdo a su Estilo y SegmentCount.

 

Selección: seleccionar un elemento se hace de la manera más intuitiva - sólo mantenga la tecla Control y haga clic en el elemento o arrastre el ratón sobre el área del elemento. Puede seleccionar tantos elementos como desee y mover todos ellos

Colocación y agrupación de elementos: MvcDiagram permite asociar un nodo a otro nodo, estableciendo una relación de maestro - subordinado entre ellos.

Contraer y expandir de las ramas de los árboles: Si un diagrama representa una estructura de árbol, la rama de un árbol a partir de un nodo se puede contraer o expandir de nuevo para ocultar o mostrar los detalles de jerarquía.

Estructura de Diagrama

Nodos de Diagrama: Usted puede elegir entre varios tipos de contenido y formas para sus nodos. Coloque en su diagrama iconos, texto, enlaces, incluso imagenes de mapa de bits especificadas via la propiedad ImageUrl. También están a su disposición más de 100 formas de nodos predefinidas incluyendo aquellas definidas en el estándar BPMN 1.2 (Business Process Modeling Notation).

 

Enlaces: Hay:

Elementos de Diagrama

Creando elementos: Los nuevos elementos son creado rápida e intuitivamente dibujando el elemento con el ratón. Si no hay ningún elemento, uno nuevo será creado. Si hay un elemento, un enlace será creado. Cuando el ratón se suelta, el nuevo elemento es añadido a las colecciones de Nodos o Enlaces, de acuerdo a su tipo. MvcDiagram también expone métodos para crear elementos programáticamente - CreateShapeNode() y CreateDiagramLink().

Eliinar elementos: Los elementos se borran tan fácil como son creados, puede pulsar el botón Del cuando un elemento está seleccionado o llamar Nodes.Remove() o Links.Remove() para eliminar mediante programación. Puede eliminar tantos elementos a la vez como los que se ha seleccionado. Llame RemoveAll para borrar todo el diagrama desde el código.

Accedienco a los elementos: Elementos, Enlaces y Nodos son colecciones que almacenan todos los elementos del diagrama en función de su tipo. Cada nodo mantiene un registro de sus enlaces entrantes y salientes. Cada enlace realiza un seguimiento de su nodo origen y el nodo de destino.

 

Seleccionar elementos: Usted puede seleccionar un elemento a la vez o muchos a la vez. Si se ha seleccionado es un elemento este se convierte en el ActiveItem de su diagrama. Si los artículos son muchos, se colocan en el objeto de Selección, que tiene dos propiedades - Enlaces y Nodos.

Encontrar elementos: Usted puede buscar un elemento por su etiqueta o propiedades Id - solo llame a los métodos FindLink, FindNode, FindLinkById o FindNodeById. También hay métodos para la búsqueda de un nodo por su ubicación - GetNodeAt y GetLinkAt.

Consultas de relación: El método de Consulta atraviesa su gráfico siguiendo conexiones nodo/enlace y relaciones padre/hijo de grupos para encontrar elementos en en relación específica con el actual. Para resultados óptimos, la consulta es ejecutada en muchos pasos. En cada paso el conjunto de resultados es construido desde el conjunto de resultados previo siguiendo la relación especificada por el selector actual.

Algoritmos de diseño Force-directed

Diseño Gráfico Spring-Embedder: Simula un sistema físico en el cual los nodos It simulates a physical system in which nodes se rechazan mutuamente, y los enlaces entre ellos actúan como resortes de confinamiento. Los gráficos procesados por Spring-Embedder tienen sus nodos distribuidos uniformemente a través del área de diagrama.

Diseño Grafico de Cuadrícula: Este algoritmo ordena los nodos en una cuadrícula, mantenimiento de nodos conectados juntos. El algoritmo se esfuerza por alcanzar un pequeño número de cruces de enlace. Se basa en un proceso iterativo cuyos pasos iniciales mezclan los nodos de la red al azar. Eso puede conducir a resultados muy diferentes cada vez que se ejecuta el algoritmo.

 

Diseño Gráfico de Recocido Simulado: En la base se encuentra un método de optimización de uso general utilizado para resolver problemas combinatorios a gran escala mediante la simulación del proceso de calefacción y refrigeración de metal para obtener un libertad de defectos. AnnealLayout asigna costos a las configuraciones de gráfico mediante la evaluación de diferentes criterios estéticos tales como la distancia entre los nodos, la longitud de los enlaces y el número de cruces de enlace.

Diseño Gráfico Circular: El diseño distribuye uniformemente nodos en la circunferencia de un círculo en las posiciones que dan como resultado el menor número de enlaces de cruce como sea posible. La propiedad Radio especifica el tamaño del círculo trazado.

Algoritmos de Diseño Basados en Topología

Diseño Gráfico Ortogonal: Cada enlace se dibuja como una cadena de alternancia de segmentos horizontales y verticales. Los nodos están colocados de una manera que facilita pocas uniones y cruces de enlaces. Este algoritmo fue diseñado para grafos planos donde los nodos tienen un máximo de cuatro enlaces de incidentes, y produce mejores resultados con este tipo de gráficos como entrada.

Enrutador Ortogonal: Este diseño ayuda a hacer que un gráfico ya dispuesto se vea aún mejor. Es útil cuando hay muchas más conexiones que nodos en un gráfico. El algoritmo se esfuerza por alcanzar ciertos criterios como cruces de enlace mínimos, preservando al mismo tiempo tanto de la configuración inicial de nodos como sea posible.

Diseño Gráfico Triangular: Coloca nodos en una cuadrícula virtual, de tal manera que si el gráfico de fuente es plano, se garantiza que todos los enlaces tengan un solo segmento y no se crucen. Si el gráfico no es plano, sus enlaces de intersección pueden ser opcionalmente segmentados y doblados con el fin de mejorar la legibilidad.

 

Diseño Topológico: En un gráfico acíclico, TopologicalLayout organiza los nodos linealmente de tal manera que cada nodo está antes que todos los nodos de destino de sus enlaces salientes. Si el gráfico no es acíclico, el algoritmo encuentra una ordenación con un número mínimo de enlaces hacia atrás, y extrae los enlaces hacia atrás por debajo de la cadena de nodos.

Diseño Gráfico de Cascada: Coloca los nodos en una cuadrícula virtual y ordena los enlaces ortogonalmente, de tal manera que si el gráfico fuente es plano todos los enlaces están garantizados de no tener más de dos curvas y que no se cruzarán. Por defecto el método de diseño ordena los nodos en filas y los segmentos de enlaces en columnas; esto puede ser cambiado estableciendo la propiedad Orientación.

Algoritmos de Diseño Basados en Semántica

Diseño de Árbol: Ideal para estructuras de datos jerárquicas, este algoritmo le da mucho control sobre el diseño. El tipo de diseño puede ser direccional o radial. Usted puede elegir cuánto espacio dejar entre los niveles del árbol y entre los nodos del mismo nivel. Para diseños direccionales el estilo de los enlaces en el árbol ordenado pueden ser rectos, ortogonales o curvados. La dirección global del árbol y la alineación pueden ser personalizados también.

Diseño de Árbol Fractal: Es un algoritmo de diseño de árbol que coloca nodos secundarios simétricamente alrededor de su nodo padre. Los nodos en el nivel más bajo están dispuestos directamente en un círculo alrededor de su padre. En los niveles superiores, los nodos ya dispuestos forman ramas que se disponen en un círculo alrededor del nuevo nodo primario. El algoritmo se repite de forma recursiva hasta que se alcanza el nivel más alto.

Diseño Gráfico de Capas: El algoritmo ordena los nodos del diagrama de capas de acuerdo con varios criterios, el más importante de los cuales es: los nodos conectados deben ser colocados muy juntos, los enlaces deben fluir en una sola dirección, si es posible, los enlaces deben cruzar el menor número de capas como sea posible, los enlaces no deben cruzar otros enlaces.

Diseño Gráfico Jerárquico: Coloca los nodos en niveles definidos por el usuario, de tal modo que si el gráfico fuente es de niveles planos, todos los enlaces están garantizados de tener un sólo segmento y no cruzarse.

 

Diseño Gráfico de Diagrama de Fujo: FlowchartLayout reconoce patrones parecidos a código de programas en el gráfico, como loops, secuencias y remificaciones if/switch, y los organiza recursivamente. Note que el método trata todos los enlaces hacia atrás como loops en el código, y espera que sean enlaces anidados - los enlaces de loop comenzando más cerca al nodo final deberían terminar más cerca del nodo inicial.

Diseño Gráfico de Diagrama de Flujo: El algoritmo funciona aplicando un conjunto personalizable de reglas para el posicionaiento local de nodos conectados relativamente unos a otros. En una escala más grande, el algoritmo mantiene grupos de nodos separados y previene que los enlaces entre los grupos se crucen con los nodos.

Diseño Swimlane: Este algoritmo organiza los diagramas de procesos en los cuales los nodos que representen actividades son colocados en swimlanes representando recursos. El índice del recurso asignado a una actividad debería ser asignado a la correspondiente propiedad LayoutTraits del nodo. El diseño puede ser aplicado a una cuadrícula de dibujo personalizado renderizada a través del evento DrawBackground, o uno compuesto de nodos de fondo bloqueados.

Diseño de mapa Árbol: Mapa Árbol representa a las jerarquías anidando nodos hijos con sus padres, donde las secciones de los nodos hojas son proporcionales con sus valores de peso.

Diseño de diagrama de flujo para decisiones: DecisionLayout ordena diagramas de flujo simples que consistan de cajas de decisión de hasta tres enlaces de salida por nodo y cajas de actividades con un solo enlace de salida por nodo.

Serialización and Exportación

Binario: Serializa su diagrama en secuencias de byte envueltas por streams .NET. Los strams pueden representar archivos, buffers de memoria, tubos de comunicación, sockets TCP, y así por el estilo. En la forma serializada su diagrama puede ser grabado en una base de datos también. Por supuesto, usted puede cargarlo posteriormente llamando el método LoadFromStream().

Serialización XML: Su diagrama puede ser guardado y cargado en XML con los métodos SaveToXml y LoadFromXml. Eventos especiales son levantados y permiten la serialización de objetos Id y Tag complejos, sin la necesidad de anular las clases de elementos.

 

Exportando el Diagrama: Exportar su diagrama en un archivo de imagen simplemente llamando al método CreateImage(). Usted también puede exportar el diagrama deflujo a los formatos DXF, PDF, SVG, WMF, SWF y Visio. Usted sólo tiene que crear una instancia del exportados que desea usar y llamar y Export() dando el nombre del archivo de salida. Todo es tan simple que usted simplemente no puede hacerlo mal.

Import: Si usted ha utilizado Visio 2013 o OpenOffice Draw para crear un diagrama, usted puede importarlos con MvcDiagram's Visio 2013 Importer o con el DrawImporter. Ambos importadores ofrecen varias sobrecargas al método de importación para que pueda escoger cómo desea que su diagrama sea importado.

Copyright © 2001-2025 MindFusion LLC. All rights reserved.
Terms of use - Contactos