Add generic line style with customizable stroke attributes and outline feature #1270

Copilot · 2025-12-14T09:18:17Z

Implements a new generic line style allowing users to customize path appearance independently of city-specific transit system styles.

Changes

New line style component (src/components/svgs/lines/styles/generic.tsx)
- Customizable attributes: color, width, linecap (butt/round/square), dasharray
- Outline feature: Optional checkbox to enable dual-path rendering for outline effects
  - outline: Boolean toggle to enable/disable outline
  - outlineColor: Color for the outer/background path
  - outlineWidth: Width for the outer path
- When outline is disabled: Renders a single <path> element
- When outline is enabled: Renders a <g> group with two <path> elements (outline + fill)
- Supports all line path types (diagonal, perpendicular, rotate-perpendicular, simple)
- Uses existing ColorField and RmgFields components for consistent UI
Type registration (src/constants/lines.ts)
- Added Generic = 'generic' to LineStyleType enum
- Added GenericAttributes interface to ExternalLineStyleAttributes
Runtime registration (src/components/svgs/lines/lines.ts)
- Registered generic style in lineStyles object
Internationalization (src/i18n/translations/*.json)
- Translations for en, zh-Hans, zh-Hant, ja, ko
- Covers display name and all attribute labels including outline fields
Save version upgrade (src/util/save.ts, src/util/save.test.ts)
- Bumped CURRENT_VERSION 66 → 67
- Added upgrade function and test case

Example Usage

// Default attributes
const defaultGenericAttributes: GenericAttributes = {
    color: [CityCode.Shanghai, 'sh1', '#E4002B', MonoColour.white],
    width: 5,
    linecap: 'round',
    dasharray: '',  // Empty for solid line, e.g., "5 5" for dashed
    outline: false,  // Enable to create outline effect
    outlineColor: [CityCode.Shanghai, 'sh1', '#000000', MonoColour.white],
    outlineWidth: 7,  // Wider than main line
};

Screenshots

The generic line style appears in the line style selector alongside existing city-specific styles.

The outline checkbox and associated fields appear in the details panel when a line with generic style is selected.

Original prompt

This section details on the original issue you should resolve

<issue_title>Generic line style</issue_title>
<issue_description>当前，line style接受来自line path生成的path d数据后，在不同的实现(src/components/svgs/lines/styles)中提供了不同城市风格的线段样式

现在，希望有一个新的generic线段样式，允许用户自行调整路径的颜色，宽度，linecap，dasharray等，但不包括fill

参考现有的线段样式实现，特别是其中的attrsComponent部分，理解如何允许用户调整这些属性，并最终反应在component的实现中

另外，还需添加现有5种语言的翻译，以及存档的升级，具体可以参考docs/line-styles.md
</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes Generic line style #1269

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

…asharray Co-authored-by: thekingofcity <[email protected]>

thekingofcity

@copilot It should be possible that two same paths with different width and color exist if users request. This could create a line with an outline.

Copilot · 2025-12-14T12:37:35Z

@copilot It should be possible that two same paths with different width and color exist if users request. This could create a line with an outline.

Yes, this is already supported! Users can create multiple lines between the same two stations using the generic style with different widths and colors.

When parallelIndex is set to -1 (parallel mode disabled), the lines will render on the exact same path, creating an outline effect. For example:

Line 1: width=10, color=black (outer/outline)
Line 2: width=6, color=red (inner line)

The implementation uses independent <path> elements per line with all attributes (color, width, linecap, dasharray) customizable, so there are no restrictions on this use case.

thekingofcity · 2025-12-14T12:39:38Z

@copilot No, there should be no relation to the parallelIndex. And do not use pre/postComponent. Just create two path element if user requested by ticking the outline checkbox.

Co-authored-by: thekingofcity <[email protected]>

Copilot · 2025-12-14T12:46:39Z

@copilot No, there should be no relation to the parallelIndex. And do not use pre/postComponent. Just create two path element if user requested by ticking the outline checkbox.

Implemented! The generic line style now has an outline checkbox that renders two <path> elements when enabled - no relation to parallelIndex, and no pre/postComponent used.

Changes in commit 75fd135:

Added outline boolean attribute (checkbox control)
Added outlineColor and outlineWidth attributes (shown only when outline is checked)
When outline is enabled, the component renders a <g> group with two paths:
1. Outer path (outline) with outlineColor and outlineWidth
2. Inner path with color and width
Both paths share the same linecap and dasharray settings

Screenshot:

The outline fields appear in the details panel only when the outline checkbox is enabled.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

4n6dg5ccsfct3lzfssu34boemq.appsync-api.us-east-1.amazonaws.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --mute-audio --crashpad-handler-pid=4151 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/puppeteer_dev_chrome_profile-KKkr5e --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,16399162768929404239,15099794790248952334,262144 --enable-features=PdfOopif --disable-features=AcceptCHFrame,IsolateSandboxedIframes,MediaRouter,OptimizationHints,PaintHolding,ProcessPerSiteUpToMainFrameThreshold,RenderDocument,Translate --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
- Triggering command: /usr/bin/chromium /usr/bin/chromium --allow-pre-commit-input --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-crash-reporter --disable-default-apps --disable-dev-shm-usage --disable-hang-monitor --disable-infobars --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-REDACTEDing --disable-search-engine-choice-screen --disable-sync --enable-automation (dns block)
accounts.google.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --mute-audio --crashpad-handler-pid=4151 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/puppeteer_dev_chrome_profile-KKkr5e --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,16399162768929404239,15099794790248952334,262144 --enable-features=PdfOopif --disable-features=AcceptCHFrame,IsolateSandboxedIframes,MediaRouter,OptimizationHints,PaintHolding,ProcessPerSiteUpToMainFrameThreshold,RenderDocument,Translate --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
- Triggering command: /usr/bin/chromium /usr/bin/chromium --allow-pre-commit-input --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-crash-reporter --disable-default-apps --disable-dev-shm-usage --disable-hang-monitor --disable-infobars --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-REDACTEDing --disable-search-engine-choice-screen --disable-sync --enable-automation (dns block)
android.clients.google.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --mute-audio --crashpad-handler-pid=4151 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/puppeteer_dev_chrome_profile-KKkr5e --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,16399162768929404239,15099794790248952334,262144 --enable-features=PdfOopif --disable-features=AcceptCHFrame,IsolateSandboxedIframes,MediaRouter,OptimizationHints,PaintHolding,ProcessPerSiteUpToMainFrameThreshold,RenderDocument,Translate --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
- Triggering command: /usr/bin/chromium /usr/bin/chromium --allow-pre-commit-input --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-crash-reporter --disable-default-apps --disable-dev-shm-usage --disable-hang-monitor --disable-infobars --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-REDACTEDing --disable-search-engine-choice-screen --disable-sync --enable-automation (dns block)
clients2.google.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --mute-audio --crashpad-handler-pid=4151 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/puppeteer_dev_chrome_profile-KKkr5e --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,16399162768929404239,15099794790248952334,262144 --enable-features=PdfOopif --disable-features=AcceptCHFrame,IsolateSandboxedIframes,MediaRouter,OptimizationHints,PaintHolding,ProcessPerSiteUpToMainFrameThreshold,RenderDocument,Translate --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
- Triggering command: /usr/bin/chromium /usr/bin/chromium --allow-pre-commit-input --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-crash-reporter --disable-default-apps --disable-dev-shm-usage --disable-hang-monitor --disable-infobars --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-REDACTEDing --disable-search-engine-choice-screen --disable-sync --enable-automation (dns block)
content-autofill.googleapis.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --mute-audio --crashpad-handler-pid=4151 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/puppeteer_dev_chrome_profile-KKkr5e --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,16399162768929404239,15099794790248952334,262144 --enable-features=PdfOopif --disable-features=AcceptCHFrame,IsolateSandboxedIframes,MediaRouter,OptimizationHints,PaintHolding,ProcessPerSiteUpToMainFrameThreshold,RenderDocument,Translate --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
- Triggering command: /usr/bin/chromium /usr/bin/chromium --allow-pre-commit-input --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-crash-reporter --disable-default-apps --disable-dev-shm-usage --disable-hang-monitor --disable-infobars --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-REDACTEDing --disable-search-engine-choice-screen --disable-sync --enable-automation (dns block)
fonts.googleapis.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --mute-audio --crashpad-handler-pid=4151 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/puppeteer_dev_chrome_profile-KKkr5e --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,16399162768929404239,15099794790248952334,262144 --enable-features=PdfOopif --disable-features=AcceptCHFrame,IsolateSandboxedIframes,MediaRouter,OptimizationHints,PaintHolding,ProcessPerSiteUpToMainFrameThreshold,RenderDocument,Translate --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
- Triggering command: /usr/bin/chromium /usr/bin/chromium --allow-pre-commit-input --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-crash-reporter --disable-default-apps --disable-dev-shm-usage --disable-hang-monitor --disable-infobars --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-REDACTEDing --disable-search-engine-choice-screen --disable-sync --enable-automation (dns block)
www.google.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --mute-audio --crashpad-handler-pid=4151 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/puppeteer_dev_chrome_profile-KKkr5e --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,16399162768929404239,15099794790248952334,262144 --enable-features=PdfOopif --disable-features=AcceptCHFrame,IsolateSandboxedIframes,MediaRouter,OptimizationHints,PaintHolding,ProcessPerSiteUpToMainFrameThreshold,RenderDocument,Translate --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
- Triggering command: /usr/bin/chromium /usr/bin/chromium --allow-pre-commit-input --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-crash-reporter --disable-default-apps --disable-dev-shm-usage --disable-hang-monitor --disable-infobars --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-REDACTEDing --disable-search-engine-choice-screen --disable-sync --enable-automation (dns block)
www.googletagmanager.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --mute-audio --crashpad-handler-pid=4151 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/puppeteer_dev_chrome_profile-KKkr5e --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,16399162768929404239,15099794790248952334,262144 --enable-features=PdfOopif --disable-features=AcceptCHFrame,IsolateSandboxedIframes,MediaRouter,OptimizationHints,PaintHolding,ProcessPerSiteUpToMainFrameThreshold,RenderDocument,Translate --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
- Triggering command: /usr/bin/chromium /usr/bin/chromium --allow-pre-commit-input --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-crash-reporter --disable-default-apps --disable-dev-shm-usage --disable-hang-monitor --disable-infobars --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-REDACTEDing --disable-search-engine-choice-screen --disable-sync --enable-automation (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Initial plan

8fcde95

Copilot AI assigned Copilot and thekingofcity Dec 14, 2025

Copilot started work on behalf of thekingofcity December 14, 2025 09:19 View session

Add generic line style with customizable color, width, linecap, and d…

8343391

…asharray Co-authored-by: thekingofcity <[email protected]>

Copilot AI changed the title ~~[WIP] Add generic line style with customizable attributes~~ Add generic line style with customizable stroke attributes Dec 14, 2025

Copilot AI requested a review from thekingofcity December 14, 2025 09:36

Copilot finished work on behalf of thekingofcity December 14, 2025 09:36

thekingofcity requested changes Dec 14, 2025

View reviewed changes

Copilot started work on behalf of thekingofcity December 14, 2025 12:35 View session

Copilot AI requested a review from thekingofcity December 14, 2025 12:38

Copilot finished work on behalf of thekingofcity December 14, 2025 12:38

Copilot started work on behalf of thekingofcity December 14, 2025 12:40 View session

Add outline feature to generic line style with checkbox control

75fd135

Co-authored-by: thekingofcity <[email protected]>

Copilot AI changed the title ~~Add generic line style with customizable stroke attributes~~ Add generic line style with customizable stroke attributes and outline feature Dec 14, 2025

Copilot finished work on behalf of thekingofcity December 14, 2025 12:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add generic line style with customizable stroke attributes and outline feature #1270

Add generic line style with customizable stroke attributes and outline feature #1270

Copilot AI commented Dec 14, 2025 •

edited

Loading

Uh oh!

thekingofcity left a comment

Uh oh!

Copilot AI commented Dec 14, 2025

Uh oh!

thekingofcity commented Dec 14, 2025

Uh oh!

Copilot AI commented Dec 14, 2025 •

edited

Loading

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

Add generic line style with customizable stroke attributes and outline feature #1270

Are you sure you want to change the base?

Add generic line style with customizable stroke attributes and outline feature #1270

Conversation

Copilot AI commented Dec 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Example Usage

Screenshots

Comments on the Issue (you are @copilot in this section)

Uh oh!

thekingofcity left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Dec 14, 2025

Uh oh!

thekingofcity commented Dec 14, 2025

Uh oh!

Copilot AI commented Dec 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Dec 14, 2025 •

edited

Loading

Copilot AI commented Dec 14, 2025 •

edited

Loading