@oicl/openbridge-webcomponents 0.0.12 → 0.0.14

package/src/automation/end-point-line/end-point-line.stories.ts

@@ -0,0 +1,32 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcEndPointLine} from './end-point-line';
+import './end-point-line';
+import {crossDecorator} from '../../storybook-util';
+
+const meta: Meta<typeof ObcEndPointLine> = {
+  title: 'Line/End point line',
+  tags: ['autodocs'],
+  component: 'obc-end-point-line',
+  decorators: [crossDecorator],
+  argTypes: {
+    medium: {
+      options: ['normal', 'empty', 'water'],
+      control: {type: 'radio'},
+    },
+    lineType: {
+      options: ['fluid', 'electric', 'air', 'connector'],
+      control: {type: 'radio'},
+    },
+    direction: {
+      options: ['top', 'right', 'bottom', 'left'],
+      control: {type: 'radio'},
+    },
+  },
+} satisfies Meta<ObcEndPointLine>;
+
+export default meta;
+type Story = StoryObj<ObcEndPointLine>;
+
+export const Primary: Story = {
+  args: {},
+};

package/src/automation/end-point-line/end-point-line.ts

@@ -0,0 +1,107 @@
+import {LitElement, css, html} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {LineMedium, LineType, lineColor, lineWidth} from '..';
+export enum EndPointDirection {
+  top = 'top',
+  right = 'right',
+  bottom = 'bottom',
+  left = 'left',
+}
+
+@customElement('obc-end-point-line')
+export class ObcEndPointLine extends LitElement {
+  @property({type: String}) medium: LineMedium = LineMedium.normal;
+  @property({type: String}) direction: EndPointDirection =
+    EndPointDirection.top;
+  @property({type: String}) lineType: LineType = LineType.fluid;
+
+  override render() {
+    let rotation = 0;
+    if (this.direction === EndPointDirection.top) {
+      rotation = 180;
+    } else if (this.direction === EndPointDirection.right) {
+      rotation = 270;
+    } else if (this.direction === EndPointDirection.bottom) {
+      rotation = 0;
+    } else if (this.direction === EndPointDirection.left) {
+      rotation = 90;
+    }
+
+    if (this.lineType === LineType.connector) {
+      throw new Error(
+        'Connector line type is not supported for end-point line'
+      );
+    }
+
+    const color = lineColor(this.medium);
+    const width = lineWidth(this.lineType) + 1;
+    const h = width / 2;
+    let terminalWidth: number;
+    if (this.lineType === LineType.electric) {
+      terminalWidth = 15;
+    } else if (this.lineType === LineType.air) {
+      terminalWidth = 22;
+    } else if (this.lineType === LineType.fluid) {
+      terminalWidth = 16;
+    } else {
+      throw new Error('Invalid line type');
+    }
+    terminalWidth -= 1;
+
+    return html`
+      <svg
+        class="line"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        transform="rotate(${rotation})"
+        class="${this.direction}"
+      >
+        <path
+          d="M${12 - h} 25 V${12 + h}h-${(terminalWidth - width) /
+          2}v-${width}h${terminalWidth}v${width}h-${(terminalWidth - width) /
+          2}V25Z"
+          fill="var(${color.inner})"
+          stroke="var(${color.outer})"
+        />
+      </svg>
+    `;
+  }
+
+  static override styles = css`
+    :host {
+      display: block;
+      line-height: 0;
+    }
+
+    svg {
+      position: relative;
+
+      &.top,
+      &.bottom {
+        left: -12px;
+      }
+
+      &.bottom {
+        top: -24px;
+      }
+
+      &.left,
+      &.right {
+        top: -12px;
+      }
+
+      &.right {
+        left: -24px;
+      }
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-end-point-line': ObcEndPointLine;
+  }
+}

package/src/automation/horizontal-line/horizontal-line.stories.ts

@@ -1,11 +1,13 @@
 import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcHorizontalLine} from './horizontal-line';
 import './horizontal-line';
+import {crossDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcHorizontalLine> = {
   title: 'Line/Horizontal line',
   tags: ['autodocs'],
   component: 'obc-horizontal-line',
+  decorators: [crossDecorator],
   argTypes: {
     medium: {
       options: ['normal', 'empty', 'water'],

package/src/automation/horizontal-line/horizontal-line.ts

@@ -1,19 +1,11 @@
 import {LitElement, html, css} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
-import {
-  LineMedium,
-  LineMediumType,
-  lineColor,
-  LineType,
-  LineTypeType,
-  lineWidth,
-} from '../index';
+import {LineMedium, lineColor, LineType, lineWidth} from '../index';
 
 @customElement('obc-horizontal-line')
 export class ObcHorizontalLine extends LitElement {
-  @property({type: String}) medium: LineMediumType = LineMedium.normal;
-  @property({type: String, attribute: 'line-type'}) lineType: LineTypeType =
-    LineType.fluid;
+  @property({type: String}) medium: LineMedium = LineMedium.normal;
+  @property({type: String}) lineType: LineType = LineType.fluid;
   @property({type: Number}) length: number = 1;
 
   override render() {
@@ -86,9 +78,10 @@ export class ObcHorizontalLine extends LitElement {
       display: block;
       line-height: 0;
     }
-    .line {
+    svg {
       position: relative;
       left: -0.5px;
+      top: -12px;
     }
   `;
 }

package/src/automation/index.ts

@@ -4,7 +4,6 @@ export enum LineMedium {
   water = 'water',
   air = 'air',
 }
-export type LineMediumType = keyof typeof LineMedium;
 
 export enum LineType {
   fluid = 'fluid',
@@ -12,9 +11,8 @@ export enum LineType {
   air = 'air',
   connector = 'connector',
 }
-export type LineTypeType = keyof typeof LineType;
 
-export function lineColor(medium: LineMediumType): {
+export function lineColor(medium: LineMedium): {
   inner: string;
   outer: string;
 } {
@@ -27,7 +25,7 @@ export function lineColor(medium: LineMediumType): {
   return {inner: innerColor, outer: '--automation-pipe-tertiary-color'};
 }
 
-export function lineWidth(lineType: LineTypeType): number {
+export function lineWidth(lineType: LineType): number {
   if (lineType === LineType.electric) {
     return 2;
   } else if (lineType === LineType.connector) {

package/src/automation/line-cross/line-cross.stories.ts

@@ -0,0 +1,28 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcLineCross} from './line-cross';
+import './line-cross';
+import {crossDecorator} from '../../storybook-util';
+
+const meta: Meta<typeof ObcLineCross> = {
+  title: 'Line/Cross',
+  tags: ['autodocs'],
+  component: 'obc-line-cross',
+  decorators: [crossDecorator],
+  argTypes: {
+    medium: {
+      options: ['normal', 'empty', 'water'],
+      control: {type: 'radio'},
+    },
+    lineType: {
+      options: ['fluid', 'electric', 'air', 'connector'],
+      control: {type: 'radio'},
+    },
+  },
+} satisfies Meta<ObcLineCross>;
+
+export default meta;
+type Story = StoryObj<ObcLineCross>;
+
+export const Primary: Story = {
+  args: {},
+};

package/src/automation/line-cross/line-cross.ts

@@ -0,0 +1,123 @@
+import {LitElement, css, html} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {LineMedium, LineType, lineColor, lineWidth} from '..';
+
+@customElement('obc-line-cross')
+export class ObcLineCross extends LitElement {
+  @property({type: String}) medium: LineMedium = LineMedium.normal;
+  @property({type: String}) lineType: LineType = LineType.fluid;
+
+  override render() {
+    if (this.lineType === LineType.connector) {
+      return html`
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M11.5 1.83333V0H12.5V1.83333H11.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M11.5 7.33333V3.66667H12.5V7.33333H11.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M11.5 11V9.16667H12.5V11H11.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M0 12.5H2V11.5H0V12.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M4 12.5H8V11.5H4V12.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M10 12.5H14V11.5H10V12.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M16 12.5H20V11.5H16V12.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M22 12.5H24V11.5H22V12.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M11.5 13V14.8333H12.5V13H11.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M11.5 16.6667V20.3333H12.5V16.6667H11.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M11.5 22.1667V24H12.5V22.1667H11.5Z"
+            fill="var(--element-neutral-color)"
+          />
+        </svg>
+      `;
+    }
+
+    const color = lineColor(this.medium);
+    const width = lineWidth(this.lineType) + 1;
+    const h = width / 2;
+
+    let r: number;
+    if (this.lineType === LineType.electric) {
+      r = 4.5;
+    } else if (this.lineType === LineType.air) {
+      r = 10;
+    } else if (this.lineType === LineType.fluid) {
+      r = 6;
+    } else {
+      throw new Error('Invalid line type');
+    }
+
+    return html`
+      <svg
+        class="line"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M-1 ${12 - h} H${12 - r} A${r} ${r} 0 0 1 ${12 - h} ${12 -
+          r} V${-1}
+            h${width} V${12 - r} A${r} ${r} 0 0 1 ${12 + r} ${12 - h} H25
+            V${12 + h} H${12 + r} A${r} ${r} 0 0 1 ${12 + h} ${12 + r} V25
+            h-${width} V${12 + r} A${r} ${r} 0 0 1 ${12 - r} ${12 + h} H-1 Z"
+          fill="var(${color.inner})"
+          stroke="var(${color.outer})"
+        />
+      </svg>
+    `;
+  }
+
+  static override styles = css`
+    :host {
+      display: block;
+      line-height: 0;
+    }
+
+    svg {
+      position: relative;
+      top: -12px;
+      left: -12px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-line-cross': ObcLineCross;
+  }
+}

package/src/automation/line-overlap/line-overlap.stories.ts

@@ -0,0 +1,29 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcLineOverlap} from './line-overlap';
+import './line-overlap';
+import {crossDecorator} from '../../storybook-util';
+
+const meta: Meta<typeof ObcLineOverlap> = {
+  title: 'Line/Overlap',
+  tags: ['autodocs'],
+  component: 'obc-line-overlap',
+  args: {},
+  decorators: [crossDecorator],
+  argTypes: {
+    medium: {
+      options: ['normal', 'empty', 'water'],
+      control: {type: 'radio'},
+    },
+    lineType: {
+      options: ['fluid', 'electric', 'air', 'connector'],
+      control: {type: 'radio'},
+    },
+  },
+} satisfies Meta<ObcLineOverlap>;
+
+export default meta;
+type Story = StoryObj<ObcLineOverlap>;
+
+export const Primary: Story = {
+  args: {},
+};

package/src/automation/line-overlap/line-overlap.ts

@@ -0,0 +1,75 @@
+import {LitElement, css, html} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {LineMedium, LineType, lineColor, lineWidth} from '..';
+
+@customElement('obc-line-overlap')
+export class ObcLineOverlap extends LitElement {
+  @property({type: String}) medium: LineMedium = LineMedium.normal;
+  @property({type: String}) lineType: LineType = LineType.fluid;
+
+  override render() {
+    if (this.lineType === LineType.connector) {
+      throw new Error('Connector line type not supported for line overlap');
+    }
+
+    const color = lineColor(this.medium);
+    const width = lineWidth(this.lineType) + 1;
+    const h = width / 2;
+
+    return html`
+      <svg
+        class="line"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          mask="url(#clip)"
+          d="M${12 - h} -1V25h${width}V-1z"
+          fill="var(${color.inner})"
+          stroke="var(${color.outer})"
+        />
+
+        <path
+          d="M-1 ${12 - h}H25v${width}H-1z"
+          fill="var(${color.inner})"
+          stroke="var(${color.outer})"
+        />
+
+        <defs>
+          <mask id="clip">
+            <rect x="0" y="0" width="24" height="24" fill="white" />
+            <rect
+              x="0"
+              y="${12 - 2 - h}"
+              width="24"
+              height="${width + 4}"
+              fill="black"
+            />
+          </mask>
+        </defs>
+      </svg>
+    `;
+  }
+
+  static override styles = css`
+    :host {
+      display: block;
+      line-height: 0;
+    }
+
+    svg {
+      position: relative;
+      left: -12px;
+      top: -12px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-line-overlap': ObcLineOverlap;
+  }
+}

package/src/automation/line.stories.ts

@@ -3,6 +3,8 @@ import {ObcVerticalLine} from './vertical-line';
 import './vertical-line/vertical-line';
 import './horizontal-line/horizontal-line';
 import './corner-line/corner-line';
+import './end-point-line/end-point-line';
+import './three-way-line/three-way-line';
 import {LineMedium, LineType} from './index';
 import {html} from 'lit';
 
@@ -28,9 +30,15 @@ const meta: Meta = {
           height: 400px;
         }
 
+        #end1 {
+          position: absolute;
+          top: calc(24px * 6);
+          left: calc(24px * 0);
+        }
+
         #line1 {
           position: absolute;
-          top: calc(24px * 1);
+          top: calc(24px * 0.5);
           left: calc(24px * 0);
         }
 
@@ -43,7 +51,7 @@ const meta: Meta = {
         #line2 {
           position: absolute;
           top: calc(24px * 0);
-          left: calc(24px * 1);
+          left: calc(24px * 0.5);
         }
         #corner-2-3 {
           position: absolute;
@@ -53,41 +61,58 @@ const meta: Meta = {
 
         #line3 {
           position: absolute;
-          top: calc(24px * 1);
+          top: calc(24px * 0.5);
+          left: calc(24px * 6);
+        }
+        #three-way {
+          position: absolute;
+          top: calc(24px * 3);
           left: calc(24px * 6);
         }
       </style>
       <div class="canvas">
+        <obc-end-point-line
+          medium=${args.medium}
+          lineType=${args.lineType}
+          direction="top"
+          id="end1"
+        ></obc-end-point-line>
         <obc-vertical-line
           medium=${args.medium}
-          line-type=${args.lineType}
-          length="5"
+          lineType=${args.lineType}
+          length="5.5"
           id="line1"
         ></obc-vertical-line>
         <obc-corner-line
           medium=${args.medium}
-          line-type=${args.lineType}
+          lineType=${args.lineType}
           direction="bottom-right"
           id="corner-1-2"
         ></obc-corner-line>
         <obc-horizontal-line
           medium=${args.medium}
-          line-type=${args.lineType}
+          lineType=${args.lineType}
           length="5"
           id="line2"
         ></obc-horizontal-line>
         <obc-corner-line
           medium=${args.medium}
-          line-type=${args.lineType}
+          lineType=${args.lineType}
           direction="bottom-left"
           id="corner-2-3"
         ></obc-corner-line>
         <obc-vertical-line
           medium=${args.medium}
-          line-type=${args.lineType}
+          lineType=${args.lineType}
           length="2"
           id="line3"
         ></obc-vertical-line>
+        <obc-three-way-line
+          medium=${args.medium}
+          lineType=${args.lineType}
+          direction="left"
+          id="three-way"
+        ></obc-three-way-line>
       </div>
     `;
   },

package/src/automation/three-way-line/three-way-line.stories.ts

@@ -0,0 +1,32 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcThreeWayLine} from './three-way-line';
+import './three-way-line';
+import {crossDecorator} from '../../storybook-util';
+
+const meta: Meta<typeof ObcThreeWayLine> = {
+  title: 'Line/Three way line',
+  tags: ['autodocs'],
+  component: 'obc-three-way-line',
+  decorators: [crossDecorator],
+  argTypes: {
+    medium: {
+      options: ['normal', 'empty', 'water'],
+      control: {type: 'radio'},
+    },
+    lineType: {
+      options: ['fluid', 'electric', 'air', 'connector'],
+      control: {type: 'radio'},
+    },
+    direction: {
+      options: ['top', 'right', 'bottom', 'left'],
+      control: {type: 'radio'},
+    },
+  },
+} satisfies Meta<ObcThreeWayLine>;
+
+export default meta;
+type Story = StoryObj<ObcThreeWayLine>;
+
+export const Primary: Story = {
+  args: {},
+};