GoJS es un control de diagrama de flujo potente, rápido y ligero que puede ayudarlo a crear diagramas de flujo en programas JavaScript y HTML5 Canvas, y simplificar enormemente sus programas JavaScript / Canvas.
Haga clic para descargar la última versión de GoJS
Recomendación de contenido relacionado
fromMaxLinks: número
Obtiene o establece el número máximo de enlaces que puede emitir este puerto. LinkingBaseTool.isValidFrom utiliza esta propiedad.
El valor no debe ser negativo. El valor predeterminado es infinito.
A menos que todo el nodo actúe como un solo puerto, este atributo debe establecerse en el GraphObject cuyo portId no es nulo. En este caso, este atributo debe establecerse en el nodo.
fromShortLength: número
Obtiene o establece la distancia desde el final del enlace desde el puerto hasta el puerto real. Los valores positivos están restringidos por fromEndSegmentLength o Link.fromEndSegmentLength. Los valores negativos harán que el enlace se expanda al puerto. El valor por defecto es cero.
Esta propiedad es útil cuando tiene enlaces gruesos y flechas afiladas. Por lo general, la forma del vínculo se extiende hasta el final de la flecha. Si la "forma" del enlace es más ancha, verá su borde detrás de la flecha. Al establecer esta propiedad en un valor positivo pequeño, la forma del vínculo puede terminar dentro del cuerpo de la flecha y solo el punto de la flecha es visible al final del vínculo.
Un valor negativo para esta propiedad también es útil cuando desea que la forma del enlace continúe ingresando al puerto, posiblemente porque parte del puerto es transparente y desea que el enlace parezca estar conectado visualmente a otros puntos del nodo.
Al determinar la ruta del enlace, el valor de Link.fromShortLength (si no es NaN) tiene prioridad sobre el valor de este puerto.
Para obtener un ejemplo de cómo utilizar este atributo, consulte Punto de conexión de enlace.
A menos que todo el nodo actúe como un solo puerto, este atributo debe establecerse en el GraphObject cuyo portId no es nulo. En este caso, este atributo debe establecerse en el nodo.
fromSpot: Spot
Obtenga o establezca la ubicación donde el enlace debe conectarse desde este puerto. El valor predeterminado es Spot.None, lo que significa que el enrutamiento del enlace debe considerar la forma del puerto y conectarse en el punto más cercano.
El valor Link.fromSpot, si no es Spot.Default, al juzgar la ruta del enlace, la prioridad del puerto es mayor que este valor. Muchos diseños predefinidos establecerán automáticamente Link.fromSpot y Link.toSpot, haciendo que este atributo y toSpot en el elemento del puerto sean ignorados. Dependiendo del diseño, es posible que pueda deshabilitar este comportamiento, por ejemplo, estableciendo ForceDirectedLayout.setsPortSpots, TreeLayout.setsPortSpot, TreeLayout.setsChildPortSpot o LayeredDigraphLayout.setsPortSpots en falso.
Para obtener un ejemplo de cómo utilizar este atributo, consulte Punto de conexión de enlace.
A menos que todo el nodo actúe como un solo puerto, este atributo debe establecerse en el GraphObject cuyo portId no es nulo. En este caso, este atributo debe establecerse en el nodo.
altura: número
Obtiene o establece la altura deseada de este GraphObject en coordenadas locales. Esto solo obtiene o establece el componente de altura del Tamaño requerido. El valor predeterminado es NaN.
El tamaño también se puede restringir estableciendo minSize y maxSize.
La altura no incluye ninguna transformación debida a la escala o el ángulo, ni tampoco el grosor de la pluma debido a Shape.strokeWidth (si es Shape). Si hay un panel que contiene un panel, el panel determinará el tamaño real.
isActionable: booleano
Esta propiedad determina si el evento de este GraphObject ocurre antes que todos los demás eventos (incluida la selección). Esto habilitará los eventos actionDown, actionMove, actionUp y actionCancel, todos manejados por ActionTool.
Si el objeto no es visible o no se puede recoger, no recibirá ningún evento de mouse / toque.
Este atributo rara vez se usa, generalmente solo cuando se implementan objetos que se usan como botones, perillas o controles deslizantes. El valor predeterminado es falso.
Panel principal: booleano
Obtiene o establece si GraphObject es el objeto "principal" de determinados tipos de Panel. Los paneles que utilizan objetos "principales" incluyen Panel.Auto, Panel.Spot y Panel.Link.
El panel que usa el objeto "principal" usará el primer objeto cuya propiedad se establezca como verdadera, de lo contrario solo usará el primer objeto (si la propiedad no está establecida).
Una vez que el objeto es un elemento del panel, no modifique este atributo.
Capa de solo lectura: Capa | nulo
Esta propiedad de solo lectura devuelve la capa contenida en GraphObject (si existe). GraphObject ordinario no puede pertenecer directamente a la capa, solo las partes pueden pertenecer directamente a la capa.
Este atributo no se puede establecer. Generalmente, la capa donde se encuentra GraphObject se puede cambiar configurando Part.layerName. Agregar una parte al diagrama de relación agregará automáticamente la parte a la capa en el diagrama de relación según el layerName.
margen ： MarginLike
Obtiene o establece el tamaño (en forma de Margen) del área en blanco alrededor de este GraphObject, que se incluye en sus coordenadas del Panel.
Se permiten valores negativos, pero pueden causar superposición con objetos adyacentes en el Panel. No puede modificar la parte superior, izquierda, derecha o inferior de este valor de propiedad; si desea cambiar el margen, debe establecer esta propiedad en otro margen. El margen predeterminado es Margen (0,0,0,0).
El definidor de propiedades acepta números en lugar de objetos de margen: proporcionar el número N resultará en el uso de margen (N, N, N, N). El captador de propiedad siempre devolverá el margen.
maxSize: Tamaño
Obtiene o establece el tamaño máximo de este GraphObject en coordenadas de contenedor (Panel o documento). Cualquier valor nuevo debe ser de tipo Size; los valores de NaN se tratan como infinitos. Si no necesita el ancho o alto máximo, use NaN o Infinity.
No puede modificar el ancho o el alto de este valor de atributo; si desea cambiar maxSize, debe establecer este atributo en otro Tamaño. El valor predeterminado es "infinito por infinito". El panel que contiene el panel determinará el tamaño real del objeto.
Límites medidos de solo lectura: Rect
Esta propiedad de solo lectura devuelve los MeasuringBounds del GraphObject en coordenadas de contenedor (Panel o documento). Esto describe el límite de transición donde se ha excluido el límite.
No debe modificar ningún atributo de Rect, es decir, el valor de este atributo.
Como ocurre con todas las propiedades de solo lectura, es poco probable que sea útil utilizar esta propiedad como fuente de enlace.
minSize: Tamaño
Obtiene o establece el tamaño mínimo de este GraphObject en coordenadas de contenedor (Panel o documento). Cualquier valor nuevo debe ser de tipo Size; los valores de NaN se tratan como 0.
No puede modificar el ancho o el alto de este valor de atributo; si desea cambiar el tamaño mínimo, debe establecer este atributo en otro tamaño. El valor predeterminado es cero por cero. El panel que contiene el panel determinará el tamaño real del objeto.
mouseDragEnter: function (e: InputEvent, thisObj: GraphObject, prevObj: GraphObject): void | nulo
Obtiene o establece la función que se ejecutará cuando el usuario mueva el mouse hacia el objeto fijo durante el arrastre de DraggingTool; esto le permite proporcionar retroalimentación durante el proceso de arrastre de acuerdo con la posición del arrastre.
Si el valor de esta propiedad es una función, se usa InputEvent, se llama a este GraphObject y a cualquier GraphObject anterior. InputEvent.targetObject estipula que GraphObject GraphObject.panel s se encuentra antes de que el mouse haga clic en el árbol visual para obtener este objeto. De forma predeterminada, este atributo es nulo.
Tenga en cuenta que para arrastrar y soltar que se originan en diferentes gráficos, el conjunto de selección del gráfico de destino no será la parte que se arrastrará. En su lugar, las partes temporales que se van a arrastrar se pueden encontrar en DraggingTool.copiedParts en la imagen de origen.
该 函数 用 Diagram.skipsUndoManager 调用 establecido temporalmente en verdadero, para que los cambios en GraphObjects no se registren en UndoManager. No es necesario que inicie y confirme ninguna transacción en esta función, porque DraggingTool ya estará realizando una. Después de llamar a esta función, el diagrama se actualizará inmediatamente.
Para obtener un ejemplo del controlador de eventos mouseDragEnter, consulte la plantilla de nodo en el editor de organigrama de muestra.
mouseDragLeave: function (e: InputEvent, thisObj: GraphObject, nextObj: GraphObject): void | nulo
Obtiene o establece la función que se ejecutará cuando el usuario mueva el mouse fuera del objeto fijo durante el arrastre de DraggingTool; esto le permite proporcionar retroalimentación durante el proceso de arrastre de acuerdo con la posición del arrastre.
Si este valor de atributo es una función, use InputEvent, este GraphObject y cualquier GraphObject nuevo donde se encuentre el mouse. InputEvent.targetObject proporciona el GraphObject que se encuentra en el punto del mouse antes de buscar en el árbol visual del GraphObject. .panel alcanza este objeto. De forma predeterminada, este atributo es nulo.
Tenga en cuenta que para arrastrar y soltar que se originan en diferentes gráficos, el conjunto de selección del gráfico de destino no será la parte que se arrastrará. En su lugar, las partes temporales que se van a arrastrar se pueden encontrar en DraggingTool.copiedParts en la imagen de origen.
Llame a esta función con Diagram.skipsUndoManager establecido temporalmente en verdadero, de modo que cualquier cambio en GraphObject no se registre en UndoManager. No es necesario que inicie y confirme ninguna transacción en esta función, porque DraggingTool ya estará ejecutando una transacción. Después de llamar a esta función, el gráfico se actualizará inmediatamente.
Para obtener un ejemplo del controlador de eventos mouseDragLeave, consulte la plantilla de nodo en el editor de organigrama de muestra.
mouseDrop: function (e: InputEvent, thisObj: GraphObject): void | nulo
Obtiene o establece la función, que se ejecuta cuando el usuario suelta la selección en el objeto cuando se arrastra DraggingTool; esto le permite personalizar el comportamiento cuando se suelta el objeto.
Si el valor de esta propiedad es una función, use InputEvent (este GraphObject) para llamarlo. InputEvent.targetObject estipula que GraphObject GraphObject.panel s se encuentra antes de que el mouse haga clic en el árbol visual para obtener este objeto. Esta función se llama en la transacción ejecutada por DraggingTool, por lo que no es necesario ejecutar una. De forma predeterminada, este atributo es nulo.
Para obtener un ejemplo del controlador de eventos mouseDrop, consulte la plantilla de nodo en el editor de organigrama de muestra.
mouseEnter: function (e: InputEvent, thisObj: GraphObject, prevObj: GraphObject): void | nulo
Obtiene o establece la función que se ejecutará cuando el usuario mueva el mouse hacia el objeto sin mantener presionado ningún botón. ToolManager utiliza este atributo.
Si el valor de esta propiedad es una función, InputEvent se usa para llamar al GraphObject donde está ahora el mouse y cualquier GraphObject anterior donde está el mouse. InputEvent.targetObject proporciona un árbol visual de GraphObject.panel dibujado por GraphObject que se encuentra en el punto del mouse antes de la búsqueda para llegar al objeto. De forma predeterminada, este atributo es nulo.
Llame a esta función con Diagram.skipsUndoManager establecido temporalmente en verdadero, de modo que cualquier cambio en GraphObject no se registre en UndoManager. No es necesario iniciar y confirmar ninguna transacción en esta función. Después de llamar a esta función, el gráfico se actualizará inmediatamente.
Por ejemplo, considere una situación en la que cuando el usuario mueve el mouse sobre un nodo, se desea mostrar los botones en los que el usuario puede hacer clic, y cuando el mouse sale del nodo, estos botones desaparecerán automáticamente. Esto se puede lograr presionando el botón para mostrar la decoración.
var nodeContextMenu =
$ (go.Adornment, "Spot",
{background: "transparent"}, // para ayudar a detectar cuándo el mouse sale del área
$ (go.Placeholder),
$ (go.Panel, "Vertical",
{ alineación: go.Spot.Right, alineaciónFocus: go.Spot.Left},
$ ("Botón",
$ (go.TextBlock, "Comando 1"),
{ clic: función (e, obj) { var nodo = obj. part.adornedPart; alert ("Command 1 on" + node.data.text); node.removeAdornment ("ContextMenuOver"); } }), $ ("Button", $ (go.TextBlock, "Command 2"), { click: function (e, obj) { var node = obj.part.adornedPart; alert ("Comando 2 en" + node.data.text);
node.removeAdornment ("ContextMenuOver");
}
})
));
Luego, en la definición de Node, podemos implementar el controlador de eventos
mouseEnter : myDiagram.nodeTemplate =
$ (go.Node,
...
{ mouseEnter: function (e , nodo) { nodeContextMenu.adornedObject = node; nodeContextMenu.mouseLeave = function (ev, cm) { node.removeAdornment ("ContextMenuOver"); } node.addAdornment ("ContextMenuOver", nodeContextMenu); } });
Observe cómo también define automáticamente el controlador de eventos mouseLeave. Cuando el mouse abandona el área de decoración o el usuario ejecuta el controlador de eventos de clic de botón, la decoración del menú contextual se eliminará.