Search

CN-121764463-B - Graphical file editing system and method

CN121764463BCN 121764463 BCN121764463 BCN 121764463BCN-121764463-B

Abstract

The invention discloses a graphical file editing system and a graphical file editing method. The system is deployed in an IDE plug-in form and comprises an editor expansion module integrating JBCefBrowser embedded browsers through FileEditorProvider interfaces, a file identification module scheduling corresponding editors based on file suffixes, a graphic engine rendering JSON/XML data in a classified mode based on a component metadata registry, an event processing module supporting three-stage dragging and eight-way scaling, an event driving communication module based on window. Postmessage, an operation module synchronizing files and codes through PSI interfaces, and a file template management module based on a ft template. The method comprises the steps of editor registration embedding, file identification loading, content analysis rendering, interactive event processing, data persistence synchronization and templated file creation. The invention realizes the graphic dragging editing of the structured file in the IDE, and remarkably improves the development efficiency and standardization.

Inventors

  • XU JUYUAN
  • LI KAI
  • MA QIANLI

Assignees

  • 山东省城市商业银行合作联盟有限公司

Dates

Publication Date
20260508
Application Date
20260302

Claims (10)

  1. 1. A graphical file editing system deployed in an integrated development environment IDE to operate as a plug-in, the system comprising: The editor expansion and embedding module registers a custom file editor based on FileEditorProvider expansion point interfaces of the IDE plug-in platform, and embeds a graphical user interface into an IDE editor tab area by realizing FileEditor interfaces and creating JBCefBrowser embedded browser examples as an editor core component; the file type identification and scheduling module is used for matching the type of the editor according to the file suffix name of the file to be edited in the method of the accept () of FileEditorProvider and scheduling the corresponding custom graphic editor to load the corresponding visual editing interface based on the expansion point mapping relation declared by the IDE plug-in configuration file; The graphic rendering engine comprises a component classifying unit and a dynamic rendering unit, wherein the component classifying unit classifies data nodes into a separated component, a container component, a table component and a tab component by analyzing node type fields of JSON/XML structured data based on a predefined component metadata registry; The interactive event processing module is used for realizing a dragging protocol comprising three stages of dragging start, hovering prediction and accurate throwing based on a front-end JavaScript event monitoring mechanism and state management, injecting control points in eight directions for each visual component to realize visual size adjustment, and carrying out batch processing on a plurality of components through frame selection operation; The front-end and back-end communication interface module is used for establishing an event-driven two-way communication channel based on a window.postmessage and window.dispatchevent mechanism by defining a global message processing function and an event monitor in a front-end page of the embedded browser and executing a script instruction at the rear end of the IDE through a executeJavaScript method, and encapsulating an operation instruction and a data load by using a JSON format; The file and code operation module acquires abstract syntax tree representation of the Java file through PSI program structure interface of IDE, creates code structure elements by PsiElementFactory and inserts the code structure elements into the target class, and simultaneously utilizes FileDocumentManager service to complete read-write persistence operation of the structured file; And the file template management module expands FILETEMPLATE mechanisms of the IDE, generates the initial content of the structured file conforming to the specification through the predefined ft format template file, and registers the custom creation action in a new menu of the IDE.
  2. 2. The system of claim 1, wherein a component metadata registry in the graphics rendering engine defines metadata fields for each component type, a component identifier, a rendering mode identification, a default size attribute, a list of acceptable subcomponent types, and a corresponding front-end Vue component or a real component reference.
  3. 3. The system of claim 1, wherein in the drag protocol implemented by the interactivity event handling module, a collision detection algorithm based on a mouse position and an existing component layout in the container is used in the hover prediction stage to dynamically calculate and highlight the estimated position of the component after delivery.
  4. 4. The system of claim 1, wherein the front-end and back-end communication interface module defines a JSON data payload structure comprising an event unique identifier eventId, an action type enumeration actionType, a source component identification sourceId, a destination container identification targetId, and a data object payload containing specific operating parameters.
  5. 5. The system of claim 1, wherein the file and code manipulation module, when performing PSI operations, packages code structure modification operations for execution in a writecodemmandact, runwritecodemmandact to ensure thread security and trigger code index updates of the IDE.
  6. 6. The system of claim 1, wherein the ft format template file supports a language grammar of a Velocity template, comprising variable placeholders and condition judgment logic, for dynamically generating initial content of the file based on user input.
  7. 7. A graphical file editing method applied to an IDE plug-in environment, the method comprising the steps of: The editor registration and embedding step, in the plug-in initialization stage, registering a custom editor through an implementation FileEditorProvider interface, when detecting that a specific suffix file is opened, creating an editor component containing JBCefBrowser embedded browser instance and embedding an IDE editing area; Extracting the suffix name of the target file, inquiring the editor mapping relation defined in the plug-in configuration, loading the corresponding graphical editing interface resource and initializing the visual canvas; reading the content of the structured file, converting the content into a data node tree through an analysis engine, classifying each node based on a component metadata registry, and recursively calling a corresponding rendering function to generate a visualized component tree; Monitoring drag, click and input operations of a user on a graphical interface, triggering corresponding processing logic according to an event type, updating a front-end data model and synchronizing operation intention to a rear end through an event channel; The data persistence and code synchronization step comprises responding to a file preservation instruction, serializing a front-end data model into a structured format, and preserving the structured format to a source file through FileDocumentManager, and if an associated code file exists, automatically updating a corresponding class structure through a PSI interface, wherein the specific steps include obtaining PsiFile of a target Java file through PSIMANAGER, traversing to find a target PsiClass, creating code structure elements by using PsiElementFactory, and packaging all PSI modification operations in WriteCommandAction for execution; And the step of creating the template file, namely responding to the new file request, generating an initial file structure based on the selected template file, and automatically opening a corresponding graphic editor to carry out subsequent editing.
  8. 8. The method for editing graphic files according to claim 7, wherein in the content parsing and component rendering step, a recursive depth-first traversal algorithm is adopted for rendering container type nodes, first a container shell DOM element is generated, then a rendering flow is recursively invoked for each child node thereof, and finally the child component DOM is inserted into the container.
  9. 9. The method according to claim 7, wherein in the step of data persistence and code synchronization, a saving event of the IDE is captured by global interception application activity list. Topic theme, a front-end interface is called by executeJavaScript to obtain the latest data model, and file saving and code updating operations are performed in WriteCommandAction.
  10. 10. The method according to claim 7, wherein the processing of the component size adjustment operation in the interactive response and event processing step includes monitoring mouse-down events of eight control points, recording initial positions and sizes, calculating new sizes and positions in real time during the movement of the mouse, updating the component CSS style and data model, and triggering a save check point when the mouse is released.

Description

Graphical file editing system and method Technical Field The invention relates to the technical field of Integrated Development Environment (IDE) plug-in development and file editing, in particular to a graphical file editing system and method based on an IDE plug-in platform, which are particularly suitable for a development tool plug-in for performing visual editing on structural files such as JSON, XML and the like. Background With the increasing complexity of software development, an integrated development environment (IntegratedDevelopmentEnvironment, IDE) has become an important tool for developers to write code, debug and manage projects. Modern IDE represented by IntelliJIDEA not only provides powerful code editing, grammar highlighting, intelligent prompting and version control functions, but also supports the expansion of the capability through a plug-in mechanism, thereby meeting the personalized requirements of different development scenes. At present, aiming at programming languages such as Java, kotlen and the like, a plurality of plug-ins support functions such as code generation, formatting, static analysis and the like, and development efficiency is remarkably improved. However, in certain development scenarios, such as banking counter systems, enterprise-level application configuration management, etc., developers often need to write and maintain a large number of structured files, such as JSON (JavaScriptObjectNotation) and XML (ExtensibleMarkupLanguage) format configuration files, interface description files, flow definition files, etc. Such files often have strict grammatical structures and hierarchical relationships, traditional text editors only provide grammar highlighting and basic format verification, and developers still have to manually write and adjust the file content, a process that is cumbersome and error-prone. Especially when the file structure is complex and the nesting level is deep, logical relations among nodes are difficult to intuitively understand only by text editing, and development and maintenance efficiency is further influenced. At present, although some independent visual JSON/XML editing tools exist, the visual JSON/XML editing tools usually operate as independent application programs and cannot be seamlessly integrated with IDE workflow of a developer, so that tools are required to be frequently switched in the development process, and the continuity of a development environment is damaged. In addition, in the existing IDE plug-in market, no special plug-in has emerged that can deeply incorporate the IDE underlying capabilities (e.g., program structure interface PSI), provide graphical drag editing for structured files, and support coordinated operations with code files. Thus, the prior art has the following major problems: 1. The editing mode is low-efficiency, namely, editing of the JSON, XML and other structured files is still mainly manually writing texts, and an intuitive graphical operation interface is lacked. 2. The tool integration level is poor, and an independent visual editing tool cannot be embedded into an IDE environment, so that workflow is split, and the efficiency is reduced. 3. Lacking intelligent assistance, existing editing modes are difficult to utilize code understanding capabilities (such as PSI) of IDE to realize automatic and standardized operation of file contents. 4. And the interaction experience is single, high-level graphic interaction based on dragging, zooming, batch operation and the like of the components is not supported, and the editing experience is not friendly. In view of the foregoing, there is a need for a structured document editing solution that can be integrated within an IDE environment, provide graphical editing capabilities, and be deep-converged with an IDE underlying development interface. Disclosure of Invention The invention aims to solve the problems of low efficiency, poor tool integration and lack of intelligent auxiliary and advanced interaction of a structured file editing mode in the existing IDE environment, and provides a graphical file editing system and method integrated in the IDE. By expanding the traditional text editor into an interactive interface supporting visual drag editing, visual, efficient and standardized editing of structured files such as JSON, XML and the like is realized, and the visual, efficient and standardized editing is deeply fused with code understanding and operation capability of IDE, so that development efficiency and file quality are remarkably improved. In order to achieve the above objective, the present invention provides a graphical file editing system and method. The system is deployed in the form of IDE plug-in, and the core is to construct a graphical editing framework capable of being embedded into an IDE editor area. The system dynamically matches corresponding graphical editors through the file type identification module, renders a visual interface by utilizing