Introduction

This pull request is one of the activities to support a new report type called section-report format. See Issue: Implement "New Report Type: Section Report" for the details.

Summary

This pull request adds a new editor for the section-report format proposed at the Issue: New Report Type: SectionReport.

Getting Started

Prerequisites

• Node.js >= 14.0
• npm >= 6.0

Launching the app for development

$ cd section_report/
$ npm install
$ npm run electron:serve

Examples

Some example codes (Ruby codes, templates, and output PDFs) are listed at the Issue: Implement "New Report Type: Section Report".

Policy

The section-report format specific editor

The editor we implemented only supports the section-report format and does not support the current format. This is based on the two reasons: technical and functional.

First, the technical reason is that it was difficult to add the section-report format feature to the current editor, which depends on old libraries and has very complex codebase. Therefore we implemented a new editor in a completely different architecture, which allows for future enhancements to the section-report format feature.

Secondly, the functional reasons is that adding the section-report format to the current editor would be a duplication of functionality. We can reproduce most of the layout of the current format with only the section-report format.

How to develop the original format editor and the section-report format editor

We have an idea to develop two editors in each separate directory in the current repository. The directory structure will look like this:

thinreport/thinreport-editor/
  ├── basic_report
  │   :
  │   └── README.md
  ├── section_report
  │   :
  │   └── README.md
  :
  └── README.md

section_report/ is the codebase of the section-report format editor, that has already been added in this PR.

basic_report/ is the codebase of the current format editor. The directory namings are still debatable.

Implementation Status

Here is the current implementation status based on the feature concept in Issue: New Report Type: SectionReport.

Not Implemented

• changing the paper size and the margins
  • Default paper size is A4 and the page margins are 0
• save file as
• resizing an item by dragging and dropping
• selecting multiple items
• changing properties of multiple items at once
• aligning item positions and arranging item sizes
• i18n
  • Supports Japanese only
• changing color with the color palette
• shortcut keys
  • move, delete, copy and paste item
  • save file
• property value validation
  • validating the uniqueness of ID
  • validating the format of input values
• text-block reference-id attribute
• moving and resizing sections by dragging and dropping
• moving and resizing stack-view-rows by dragging and dropping

Additional Features

• stack-view item
  • See StackView for details
• object tree pane
  • List the objects such as sections, stack-views and items in the current template as a tree structure
  • Current selected object is highlighted. You can also change the selection on the object tree pane
• A template file contains the schema-version attribute, which means the version of the format
• Schema validation based on the JSON Schema defined in schema.json when saving a file

Changes for the line-height calculation

The line-height calculation method in the original editor has a problem that the result depends on the environment such as display resolution.
Therefore, the calculation method in this editor has been changed as follows:

• The original editor
  • line-height-ratio = (height calculated from the drawn text) * line-height
• This editor
  • line-height-ratio = font-size * line-height