MANIPULATING GRAPHICAL OBJECTS

• US 20120081389A1
• Filed: 10/01/2010
• Published: 04/05/2012
• Est. Priority Date: 10/01/2010
• Status: Active Grant

• Current Assignee: Lucid Software, Inc.
• Original Assignee: Lucidchart, LLC
• Inventors: Dilts, Benjamin N.
• Granted Patent: US 9,019,275 B2
• Time in Patent Office: Days
• US Class Current: 345/619
• CPC Class Codes: G06F 16/9558 Details of hyperlinks; Management of linked annotations
• CPC Class Codes: G06F 16/986 Document structures and storage, e.g. HTML extensions
• CPC Class Codes: G06F 3/04812 Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
• CPC Class Codes: G06F 3/0482 Interaction with lists of selectable items, e.g. menus
• CPC Class Codes: G06F 3/0486 Drag-and-drop
• CPC Class Codes: G06T 11/206 Drawing of charts or graphs
• CPC Class Codes: G06T 11/60 Editing figures and text; Combining figures or text
• CPC Class Codes: G09G 2340/12 Overlay of images, i.e. displayed pixel being the result of switching between the corresponding input pixels
• CPC Class Codes: G09G 5/377 for mixing or overlaying two or more graphic patterns G09G5/02, G09G5/397 take precedence

Abstract

In one example, a method for rendering graphical objects on a display includes rendering each of a plurality of graphical objects within respective layers. The plurality of graphical objects includes first, second and third graphical objects. The second graphical object is directly linked to the first graphical object and the third graphical object is directly linked to the second graphical object. The method additionally includes receiving user input manipulating one of the graphical objects in a manner that affects a directly linked graphical object. The method additionally includes re-rendering the manipulated graphical object and the directly linked graphical object without re-rendering graphical objects that are not directly linked to the manipulated graphical object.

Claims

1. A method for rendering graphical objects on a display, the method comprising:

rendering each of a plurality of graphical objects within respective layers, the plurality of graphical objects including first, second and third graphical objects, the second graphical object being directly linked to the first graphical object and the third graphical object being directly linked to the second graphical object;

receiving user input manipulating one of the graphical objects in a manner that affects a directly linked graphical object; and

re-rendering the manipulated graphical object and the directly linked graphical object without re-rendering graphical objects that are not directly linked to the manipulated graphical object.

2. The method of claim 1, further comprising providing a runtime script in a web page loaded by a web browser executing on a client device, the runtime script including computer-executable instructions executable by the client device to perform the method of claim 1.

3. The method of claim 1, wherein at least one of the plurality of graphical objects is rendered by reference to the respective layer within which the at least one of the plurality of graphical objects is contained, and wherein receiving user input manipulating the at least one of the plurality of graphical objects causes a re-rendering of the respective layer.

4. The method of claim 1, wherein each layer is larger in size than the graphical object it contains and includes at least one of a resizing control, a translation control, and a connection control, the method further comprising:

receiving user input causing a mouse cursor displayed on the display to hover over an area of a layer corresponding to a particular control; and

highlighting the particular control.

5. The method of claim 1, wherein the first graphical object is rendered in a first layer including a first connection point and the second graphical object is rendered in a second layer including a second connection point, the method further comprising:

prior to rendering the third graphical object, receiving user input initiating creation of the third graphical object beginning from the first connection point; and

receiving user input terminating the third graphical object at the second connection point, the third graphical object comprising a connector linked to the first graphical object at the first connection point and to the second graphical object at the second connection point.

6. The method of claim 5, further comprising, prior to receiving user input terminating the third graphical object at the second connection point:

providing a visual indication on the display of an ability to link the connector to the second graphical object at the second connection point;

receiving user input including confirmation that the user desires to link the connector to the second graphical object at the second connection point; and

linking the connector to the second graphical object at the second connection point.

7. The method of claim 5, wherein the user input initiating creation of the third graphical object beginning from the first connection point represents a user action of selecting the first connection point without previously manually selecting a connector drawing mode.

8. The method of claim 1, wherein the first graphical object is rendered in a first layer including a first connection point, the first graphical object is rendered prior to rendering the second graphical object and the second graphical object is rendered prior to rendering the third graphical object, the method further comprising:

prior to rendering the second graphical object, receiving user input initiating creation of the second graphical object beginning from the first connection point, the second graphical object comprising a connector having a first end connected to the first connection point and a second end opposite the first end;

receiving user input identifying a terminal location of the second end of the connector;

in response to receiving the user input identifying a terminal location of the second end of the connector, presenting on the display a set of representations of graphical objects for use as the third graphical object; and

receiving user input including a selection of a representation of the third graphical object from the set of graphical objects, the third graphical object being rendered in a second layer including a second connection point,

wherein the second graphical object is linked to the first graphical object at the first connection point and to the third graphical object at the second connection point.

9. An article of manufacture comprising a physical computer readable storage medium having instructions stored thereon that are executable by a computing device to perform the method of claim 1.

10. A method of representing and rendering graphical objects, the method comprising:

separating information for rendering a graphical object into a plurality of sets defining attributes of the graphical object, the graphical object configured to render within a local graphics context of a layer;

creating the layer at a particular position of a viewport having a global graphics context defining a global coordinate frame;

translating and scaling the local graphics context to match the global graphics context; and

rendering the graphical object at the particular position of the viewport within the layer using the global coordinate frame.

11. The method of claim 10, wherein the plurality of sets include a set defining an outline of the graphical object and wherein a size of the layer is larger than the defined outline of the graphical object.

12. The method of claim 11, wherein the set defining an outline of the graphical object defines one or more of a color of a line making up the outline, a weight of the line making up the outline, a gradient of the line making up the outline, a shape of an area bounded by the outline, a fill color of the area bounded by the outline or a transparency level of the fill color.

13. The method of claim 10, wherein the plurality of sets include a set defining a rich text area of the graphical object.

14. The method of claim 13, wherein the set defining a rich text area of the graphical object defines one or more of:

a bounding box within which rich text is rendered or a canonical representation of the rich text.

15. The method of claim 14, wherein the canonical representation of the rich text comprises an Extensible Markup Language (“

XML”

) representation of the rich text.

16. The method of claim 13, further comprising:

translating the canonical representation to rich text;

receiving user input effective to edit the rich text through a rich-text editor; and

translating the edited rich text to an edited canonical representation.

17. The method of claim 10, wherein rendering the graphical object comprises separately rendering the attributes of the graphical object defined by the plurality of sets.

18. The method of claim 17, further comprising:

caching the separately rendered attributes of the graphical object defined by the plurality of sets; and

in response to receiving user input modifying a particular attribute defined by a particular set re-rendering the particular attribute defined by the particular set without re-rendering other attributes defined by other sets included in the plurality of sets.

19. An article of manufacture comprising a physical computer readable storage medium having instructions stored thereon that are executable by a computing device to perform the method of claim 10.

20. A method of demonstrating the operation of an application, the method comprising:

receiving, from one or more input devices connected to a computing device, user input effective to initiate a demonstration of an application, the application being executable by the computing device;

initiating the demonstration by generating input for the application based on simulated user actions; and

executing the application using the generated input, including;

creating and rendering a plurality of graphical objects on a display connected to the computing device in response to first generated input; and

in response to second generated input effective to manipulate one or more of the plurality of graphical objects, updating and re-rendering on the display one or more of the plurality of graphical objects affected by the manipulation substantially in real time as the manipulation occurs while continuously displaying all of the plurality of graphical objects unaffected by the manipulation.

21. The method of claim 20, further comprising:

presenting an indication on the display that the demonstration is finished; and

allowing a user to edit the plurality of graphical objects created during the demonstration.

22. The method of claim 20, wherein the plurality of graphical objects are rendered within a browser window, the method further comprising:

detecting a size of the window; and

prior to creating and rendering the plurality of graphical objects on the display, scaling the plurality of graphical objects based on the detected size of the window.

23. A method for rendering graphical objects on a display, the method comprising:

receiving user input causing a first graphical object to be drawn on a display, said first graphical object being rendered in a first layer;

receiving user input causing a second graphical object to be drawn on the display, said second graphical object being rendered in a second layer different from the first layer, the first and second graphical objects being simultaneously visible on the display;

receiving user input causing a connector to be drawn on the display, the connector connecting the first and second graphical objects and being rendered in a third layer different from the first and second layers;

receiving user input manipulating the first graphical object connected by the connector to the second graphical object; and

continuously updating and rendering the first graphical object, second graphical object and connector in response to and during the manipulating substantially in real time,

wherein during the continuous updating and rendering, the first graphical object in the first layer is redrawn and the connector in the third layer is redrawn without redrawing the second graphical object in the second layer.

24. A method for rendering graphical information on a display, the method comprising:

storing data for rendering a graphical object in an intermediate data structure including a plurality of information items defining attributes of the graphical object;

rendering the attributes of the graphical object based on the plurality of information items;

displaying the graphical object on a display based on the rendered attributes;

receiving user input that causes at least some of the plurality of information items to change; and

based on the changed information items, re-rendering some, but not all, of the attributes of the graphical object.

25. The method of claim 24, wherein re-rendering some, but not all, of the attributes of the graphical object includes:

determining whether each of the attributes of the graphical object is affected by the changed information items; and

re-rendering only the attributes of the graphical object determined to be affected by the changed information items.

26. The method of claim 24, wherein re-rendering some, but not all, of the attributes of the graphical object includes re-rendering an outline of the object without re-rendering a rich text area of the object.

27. The method of claim 24, wherein re-rendering some, but not all, of the attributes of the graphical object includes re-rendering a rich text area of the object without re-rendering an outline of the object.