@fmsim/board 1.0.3 → 1.0.5

package/dist/src/layers/movement-layer.d.ts

@@ -1,4 +1,26 @@
 import { Component, Layer, POINT, Properties } from '@hatiolab/things-scene';
+export type PathType = 'COMMAND' | 'JOB';
+export type PathStatus = 'NORMAL' | 'DELAY' | 'ALTER' | 'WARN';
+export type TipType = 'none' | 'arrow' | 'open-arrow' | 'sharp-arrow' | 'diamond' | 'oval';
+export type TipSize = 'size1' | 'size2' | 'size3' | 'size4' | 'size5' | 'size6' | 'size7' | 'size8' | 'size9';
+export type LineDash = 'solid' | 'round-dot' | 'square-dot' | 'dash' | 'dash-dot' | 'long-dash' | 'long-dash-dot' | 'long-dash-dot-dot';
+export type Point = {
+    x: number;
+    y: number;
+};
+export type Path = Point[];
+export type PathStyles = {
+    strokeStyle?: string | string[];
+    alpha?: number;
+    lineWidth?: number;
+    lineDash?: LineDash;
+    lineCap?: CanvasLineCap;
+    lineJoin?: CanvasLineJoin;
+    begin?: TipType;
+    beginSize?: TipSize;
+    end?: TipType;
+    endSize?: TipSize;
+};
 export type PATH = {
     srcMachine: string;
     srcZone: string;
@@ -6,9 +28,11 @@ export type PATH = {
     dstMachine: string;
     dstZone: string;
     dstUnit: string;
-    pathType: 'COMMAND' | 'JOB';
-    status: 'NORMAL' | 'DELAY' | 'ALTER' | 'WARN';
+    pathType: PathType;
+    status: PathStatus;
     transportCnt: number;
+    label: string;
+    styles?: PathStyles;
 };
 export type MOVEMENT = PATH[];
 export default class MovementLayer extends Layer {
@@ -17,7 +41,7 @@ export default class MovementLayer extends Layer {
     ready(): void;
     dispose(): void;
     get capturable(): boolean;
-    drawArrow(ctx: CanvasRenderingContext2D, p0: POINT, p1: POINT, headLength: number | undefined, label: string): void;
+    drawArrow(ctx: CanvasRenderingContext2D, p1: POINT, p2: POINT, pathType: PathType, pathStatus: PathStatus, label: string, styles?: PathStyles): void;
     findSourceAndTarget(path: PATH): [Component?, Component?];
     render(ctx: CanvasRenderingContext2D): void;
     get eventMap(): {

package/dist/src/layers/movement-layer.js

@@ -1,3 +1,4 @@
+import isUndefined from 'lodash-es/isUndefined';
 import { Component, Layer } from '@hatiolab/things-scene';
 const MOVEMENT_STYLES = {
     NORMAL /* NORMAL_TRANSPORT*/: ['#00B05033', '#00B050'],
@@ -5,8 +6,8 @@ const MOVEMENT_STYLES = {
     ALTER /* ALTER_TRANSPORT*/: ['#76717133', '#767171'],
     WARN /* WARN_TRANSPORT*/: ['#AAAA0033', '#AAAA00']
 };
-const degreesInRadians225 = (195 * Math.PI) / 180;
-const degreesInRadians135 = (165 * Math.PI) / 180;
+const WING_FACTOR = Math.sqrt(3);
+const LINEWIDTH = 2;
 export default class MovementLayer extends Layer {
     constructor() {
         super(...arguments);
@@ -38,40 +39,38 @@ export default class MovementLayer extends Layer {
     get capturable() {
         return false;
     }
-    drawArrow(ctx, p0, p1, headLength = 10, label) {
-        // constants (could be declared as globals outside this function)
-        // calc the angle of the line
-        var dx = p1.x - p0.x;
-        var dy = p1.y - p0.y;
-        var angle = Math.atan2(dy, dx);
-        // calc arrowhead points
-        var x225 = p1.x + headLength * Math.cos(angle + degreesInRadians225);
-        var y225 = p1.y + headLength * Math.sin(angle + degreesInRadians225);
-        var x135 = p1.x + headLength * Math.cos(angle + degreesInRadians135);
-        var y135 = p1.y + headLength * Math.sin(angle + degreesInRadians135);
-        // draw line plus arrowhead
-        ctx.beginPath();
-        // draw the line from p0 to p1
-        ctx.moveTo(p0.x, p0.y);
-        ctx.lineTo(p1.x, p1.y);
-        ctx.stroke();
-        ctx.beginPath();
-        // draw partial arrowhead at 225 degrees
-        ctx.moveTo(p1.x, p1.y);
-        ctx.lineTo(x225, y225);
-        // draw partial arrowhead at 135 degrees
-        ctx.lineTo(x135, y135);
-        ctx.lineTo(p1.x, p1.y);
-        // stroke the line and arrowhead
-        ctx.setLineDash([]);
+    drawArrow(ctx, p1, p2, pathType, pathStatus, label, styles) {
+        var { begin = 'none', end = 'arrow', lineWidth = LINEWIDTH, strokeStyle } = styles || {};
+        if (strokeStyle && !Array.isArray(strokeStyle)) {
+            ctx.strokeStyle = strokeStyle;
+            ctx.fillStyle = strokeStyle;
+        }
+        else {
+            const gradient = ctx.createLinearGradient(p1.x, p1.y, p2.x, p2.y);
+            (strokeStyle || MOVEMENT_STYLES[pathStatus] || []).forEach((color, idx) => gradient.addColorStop(idx, color));
+            ctx.strokeStyle = gradient;
+            ctx.fillStyle = gradient;
+        }
+        drawEndTips(ctx, [p1, p2], styles);
         ctx.stroke();
         ctx.fill();
+        ctx.beginPath();
+        var beginPos = getTipNeckPos(begin, lineWidth, p1, p2);
+        var endPos = getTipNeckPos(end, lineWidth, p2, p1);
+        ctx.moveTo(beginPos.x, beginPos.y);
+        ctx.lineTo(endPos.x, endPos.y);
+        stroke(ctx, {
+            lineDash: pathType == 'COMMAND' ? 'dash' : 'solid',
+            ...styles
+        });
+        ctx.beginPath();
+        ctx.setLineDash([]); // reset line dash
         if (label) {
             const fontSize = 14;
             const fontFamily = 'Arial';
             ctx.font = `bold ${fontSize}px ${fontFamily}`;
             const textWidth = ctx.measureText(label).width;
-            const [x, y] = [(p0.x + p1.x) / 2 - textWidth / 2, (p0.y + p1.y) / 2];
+            const [x, y] = [(p1.x + p2.x) / 2 - textWidth / 2, (p1.y + p2.y) / 2];
             ctx.fillRect(x - 3, y - fontSize / 2 - 2, textWidth + 6, fontSize + 4);
             ctx.fillStyle = 'white';
             ctx.fillText(label, x, y + fontSize / 2 - 1);
@@ -109,13 +108,7 @@ export default class MovementLayer extends Layer {
                 dest.transcoordS2C(destCenter.x, destCenter.y, root)
             ];
             ctx.beginPath();
-            ctx.setLineDash(path.pathType == 'COMMAND' ? [5, 5] : []);
-            const gradient = ctx.createLinearGradient(srcPos.x, srcPos.y, destPos.x, destPos.y);
-            (MOVEMENT_STYLES[path.status] || []).forEach((color, idx) => gradient.addColorStop(idx, color));
-            ctx.strokeStyle = gradient;
-            ctx.fillStyle = gradient;
-            ctx.lineWidth = 2;
-            this.drawArrow(ctx, srcPos, destPos, 10, Number(path.transportCnt || 0) > 1 ? String(path.transportCnt) : '');
+            this.drawArrow(ctx, srcPos, destPos, path.pathType, path.status, path.label || (Number(path.transportCnt || 0) > 1 ? String(path.transportCnt) : ''), path.styles);
             ctx.stroke();
         });
         ctx.restore();
@@ -139,4 +132,188 @@ export default class MovementLayer extends Layer {
     }
 }
 Component.register('movement-layer', MovementLayer);
+function getTipNeckPos(tipType, lineWidth, p1, p2) {
+    if (tipType.slice(-5) != 'arrow')
+        return p1;
+    var { x, y } = p1;
+    var theta = Math.atan2(p2.y - p1.y, p2.x - p1.x);
+    var diff = lineWidth * 1.5;
+    return {
+        x: p1.x + Math.cos(theta) * diff,
+        y: p1.y + Math.sin(theta) * diff
+    };
+}
+function drawEndTips(ctx, path, style) {
+    var { lineWidth = LINEWIDTH, lineCap, alpha = 1, begin = 'none', end = 'arrow', beginSize = 'size2', endSize = 'size2' } = style || {};
+    if (begin != 'none' || end != 'none') {
+        lineWidth = Number(lineWidth) || LINEWIDTH;
+        if (!isUndefined(lineCap))
+            ctx.lineCap = lineCap;
+        if (!isUndefined(lineWidth))
+            ctx.lineWidth = lineWidth;
+        if (!isUndefined(alpha))
+            ctx.globalAlpha *= alpha;
+        // 선 그리기.
+        if (begin != 'none')
+            drawTip(ctx, path[0], path[1], lineWidth, begin, tipSize(beginSize, lineWidth));
+        if (end != 'none') {
+            let length = path.length;
+            drawTip(ctx, path[length - 1], path[length - 2], lineWidth, end, tipSize(endSize, lineWidth));
+        }
+    }
+}
+function drawTip(ctx, p1, p2, lineWidth, type, size) {
+    var { x, y } = p1;
+    var theta = Math.atan2(p2.y - y, p2.x - x);
+    ctx.beginPath();
+    ctx.translate(x, y);
+    ctx.rotate(theta);
+    switch (type) {
+        case 'oval':
+            ctx.ellipse(0, 0, size.X, size.Y, 0, 0, 2 * Math.PI);
+            ctx.fill();
+            // ctx.scale(1, 1 / arc_scale_y)
+            break;
+        case 'diamond':
+            ctx.moveTo(-size.X, 0);
+            ctx.lineTo(0, -size.Y);
+            ctx.lineTo(size.X, 0);
+            ctx.lineTo(0, size.Y);
+            ctx.fill();
+            break;
+        case 'arrow':
+            ctx.moveTo(0, 0);
+            ctx.lineTo(WING_FACTOR * size.X, -size.Y);
+            ctx.lineTo(WING_FACTOR * size.X, size.Y);
+            ctx.fill();
+            break;
+        case 'sharp-arrow':
+            ctx.moveTo(0, 0);
+            ctx.lineTo(WING_FACTOR * size.X, -size.Y);
+            ctx.lineTo(-size.X / 1.5 + WING_FACTOR * size.X, 0);
+            ctx.lineTo(WING_FACTOR * size.X, size.Y);
+            ctx.fill();
+            break;
+        case 'open-arrow':
+            ctx.moveTo(WING_FACTOR * size.X + lineWidth, -size.Y);
+            ctx.lineTo(lineWidth, 0);
+            ctx.lineTo(WING_FACTOR * size.X + lineWidth, size.Y);
+            ctx.stroke();
+            break;
+        default:
+            break;
+    }
+    ctx.rotate(-theta);
+    ctx.translate(-x, -y);
+    ctx.closePath();
+}
+function tipSize(size, lineWidth) {
+    let length = { X: lineWidth * 1.5, Y: lineWidth * 1.5 };
+    lineWidth = lineWidth * 1.2;
+    switch (size) {
+        case 'size1':
+            length.X = lineWidth;
+            length.Y = lineWidth;
+            break;
+        case 'size2':
+            length.X = lineWidth * 1.5;
+            length.Y = lineWidth;
+            break;
+        case 'size3':
+            length.X = lineWidth * 2;
+            length.Y = lineWidth;
+            break;
+        case 'size4':
+            length.X = lineWidth;
+            length.Y = lineWidth * 1.5;
+            break;
+        case 'size5':
+            length.X = lineWidth * 1.5;
+            length.Y = lineWidth * 1.5;
+            break;
+        case 'size6':
+            length.X = lineWidth * 2;
+            length.Y = lineWidth * 1.5;
+            break;
+        case 'size7':
+            length.X = lineWidth;
+            length.Y = lineWidth * 2;
+            break;
+        case 'size8':
+            length.X = lineWidth * 1.5;
+            length.Y = lineWidth * 2;
+            break;
+        case 'size9':
+            length.X = lineWidth * 2;
+            length.Y = lineWidth * 2;
+            break;
+        default:
+            length.X = lineWidth * 1.5;
+            length.Y = lineWidth * 1.5;
+            break;
+    }
+    return length;
+}
+function stroke(ctx, styles) {
+    var { lineDash: lineDashType = 'solid', lineWidth = 2, lineCap, lineJoin, alpha } = styles || {};
+    if (lineCap)
+        ctx.lineCap = lineCap;
+    let lineDash = [0, 0];
+    if (lineDash) {
+        var isRound = lineCap == 'round';
+        switch (lineDashType) {
+            case 'solid':
+                lineDash = [0, 0];
+                break;
+            case 'round-dot':
+                if (isRound)
+                    lineDash = [0, lineWidth * 2];
+                else
+                    lineDash = [lineWidth, lineWidth];
+                break;
+            case 'square-dot':
+                if (isRound)
+                    lineDash = [lineWidth, lineWidth * 2];
+                else
+                    lineDash = [lineWidth * 2, lineWidth];
+                break;
+            case 'dash':
+                if (isRound)
+                    lineDash = [lineWidth * 3, lineWidth * 2.5];
+                else
+                    lineDash = [lineWidth * 4, lineWidth * 1.5];
+                break;
+            case 'dash-dot':
+                if (isRound)
+                    lineDash = [lineWidth * 3, lineWidth * 3, 0, lineWidth * 3];
+                else
+                    lineDash = [lineWidth * 4, lineWidth * 2, lineWidth, lineWidth * 2];
+                break;
+            case 'long-dash':
+                if (isRound)
+                    lineDash = [lineWidth * 5, lineWidth * 4];
+                else
+                    lineDash = [lineWidth * 6, lineWidth * 3];
+                break;
+            case 'long-dash-dot':
+                if (isRound)
+                    lineDash = [lineWidth * 5, lineWidth * 3, 0, lineWidth * 3];
+                else
+                    lineDash = [lineWidth * 6, lineWidth * 2, lineWidth, lineWidth * 2];
+                break;
+            case 'long-dash-dot-dot':
+                if (isRound)
+                    lineDash = [lineWidth * 5, lineWidth * 2, 0, lineWidth * 2, 0, lineWidth * 2];
+                else
+                    lineDash = [lineWidth * 6, lineWidth, lineWidth, lineWidth, lineWidth, lineWidth];
+                break;
+        }
+        ctx.setLineDash(lineDash);
+    }
+    if (!isUndefined(alpha))
+        ctx.globalAlpha *= alpha;
+    if (!isUndefined(lineJoin))
+        ctx.lineJoin = lineJoin;
+    ctx.stroke();
+}
 //# sourceMappingURL=movement-layer.js.map

package/dist/src/layers/movement-layer.js.map

@@ -1 +1 @@
-{"version":3,"file":"movement-layer.js","sourceRoot":"","sources":["../../../src/layers/movement-layer.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Layer, POINT, Properties } from '@hatiolab/things-scene'\n\nconst MOVEMENT_STYLES: { [key: string]: string[] } = {\n  NORMAL /* NORMAL_TRANSPORT*/: ['#00B05033', '#00B050'],\n  DELAY /* DELAYED_TRANSPORT*/: ['#FF000033', '#FF0000'],\n  ALTER /* ALTER_TRANSPORT*/: ['#76717133', '#767171'],\n  WARN /* WARN_TRANSPORT*/: ['#AAAA0033', '#AAAA00']\n}\n\nexport type PATH = {\n  srcMachine: string\n  srcZone: string\n  srcUnit: string\n  dstMachine: string\n  dstZone: string\n  dstUnit: string\n  pathType: 'COMMAND' | 'JOB'\n  status: 'NORMAL' | 'DELAY' | 'ALTER' | 'WARN'\n  transportCnt: number\n}\n\nexport type MOVEMENT = PATH[]\n\nconst degreesInRadians225 = (195 * Math.PI) / 180\nconst degreesInRadians135 = (165 * Math.PI) / 180\n\nexport default class MovementLayer extends Layer {\n  drawInstructionHandler = (e: Event) => {\n    this.data = (e as CustomEvent).detail\n  }\n  clickComponentHandler = (e: Event) => {\n    const component = (e as CustomEvent).detail\n    const { type } = component.state\n\n    if (type == 'model-layer') {\n      this.data = [] /* clear */\n      return\n    }\n  }\n\n  ready() {\n    const handler = (e: Event) => {\n      this.data = (e as CustomEvent).detail\n    }\n\n    this.drawInstructionHandler = handler.bind(this)\n    window.addEventListener('drawInstruction', this.drawInstructionHandler)\n    window.addEventListener('clickComponent', this.clickComponentHandler)\n  }\n\n  dispose() {\n    window.removeEventListener('drawInstruction', this.drawInstructionHandler)\n    window.removeEventListener('clickComponent', this.clickComponentHandler)\n\n    super.dispose && super.dispose()\n  }\n\n  get capturable() {\n    return false\n  }\n\n  drawArrow(ctx: CanvasRenderingContext2D, p0: POINT, p1: POINT, headLength: number = 10, label: string) {\n    // constants (could be declared as globals outside this function)\n    // calc the angle of the line\n    var dx = p1.x - p0.x\n    var dy = p1.y - p0.y\n    var angle = Math.atan2(dy, dx)\n\n    // calc arrowhead points\n    var x225 = p1.x + headLength * Math.cos(angle + degreesInRadians225)\n    var y225 = p1.y + headLength * Math.sin(angle + degreesInRadians225)\n    var x135 = p1.x + headLength * Math.cos(angle + degreesInRadians135)\n    var y135 = p1.y + headLength * Math.sin(angle + degreesInRadians135)\n\n    // draw line plus arrowhead\n    ctx.beginPath()\n\n    // draw the line from p0 to p1\n    ctx.moveTo(p0.x, p0.y)\n    ctx.lineTo(p1.x, p1.y)\n\n    ctx.stroke()\n\n    ctx.beginPath()\n\n    // draw partial arrowhead at 225 degrees\n    ctx.moveTo(p1.x, p1.y)\n    ctx.lineTo(x225, y225)\n    // draw partial arrowhead at 135 degrees\n    ctx.lineTo(x135, y135)\n    ctx.lineTo(p1.x, p1.y)\n    // stroke the line and arrowhead\n\n    ctx.setLineDash([])\n\n    ctx.stroke()\n    ctx.fill()\n\n    if (label) {\n      const fontSize = 14\n      const fontFamily = 'Arial'\n\n      ctx.font = `bold ${fontSize}px ${fontFamily}`\n\n      const textWidth = ctx.measureText(label).width\n\n      const [x, y] = [(p0.x + p1.x) / 2 - textWidth / 2, (p0.y + p1.y) / 2]\n      ctx.fillRect(x - 3, y - fontSize / 2 - 2, textWidth + 6, fontSize + 4)\n\n      ctx.fillStyle = 'white'\n      ctx.fillText(label, x, y + fontSize / 2 - 1)\n    }\n  }\n\n  findSourceAndTarget(path: PATH): [Component?, Component?] {\n    const root = this.root\n    var src, dest\n\n    for (const name of [path.srcUnit, path.srcZone, path.srcMachine].filter(Boolean)) {\n      src = root.findById(name)\n      if (src) {\n        break\n      }\n    }\n\n    for (const name of [path.dstUnit, path.dstZone, path.dstMachine].filter(Boolean)) {\n      dest = root.findById(name)\n      if (dest) {\n        break\n      }\n    }\n\n    return [src, dest]\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    const root = this.root\n    const movement = (this.data instanceof Array && (this.data as MOVEMENT)) || []\n\n    ctx.save()\n\n    movement.forEach(path => {\n      const [src, dest] = this.findSourceAndTarget(path)\n      if (!src || !dest) {\n        return\n      }\n\n      const [srcCenter, destCenter] = [src.center, dest.center]\n      const [srcPos, destPos] = [\n        src.transcoordS2C(srcCenter.x, srcCenter.y, root),\n        dest.transcoordS2C(destCenter.x, destCenter.y, root)\n      ]\n\n      ctx.beginPath()\n\n      ctx.setLineDash(path.pathType == 'COMMAND' ? [5, 5] : [])\n\n      const gradient = ctx.createLinearGradient(srcPos.x, srcPos.y, destPos.x, destPos.y)\n      ;(MOVEMENT_STYLES[path.status] || []).forEach((color, idx) => gradient.addColorStop(idx, color))\n\n      ctx.strokeStyle = gradient\n      ctx.fillStyle = gradient\n      ctx.lineWidth = 2\n\n      this.drawArrow(ctx, srcPos, destPos, 10, Number(path.transportCnt || 0) > 1 ? String(path.transportCnt) : '')\n\n      ctx.stroke()\n    })\n\n    ctx.restore()\n  }\n\n  get eventMap() {\n    return {\n      'model-layer': {\n        '(self)': {\n          change: this.onchangeModelLayer\n        }\n      }\n    }\n  }\n\n  onchangeModelLayer(after: any, before: any, hint: any) {\n    if (after.scale || after.translate) {\n      this.invalidate()\n    }\n  }\n\n  onchangeData(after: Properties, before: Properties): void {\n    this.invalidate()\n  }\n}\n\nComponent.register('movement-layer', MovementLayer)\n"]}
+{"version":3,"file":"movement-layer.js","sourceRoot":"","sources":["../../../src/layers/movement-layer.ts"],"names":[],"mappings":"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","sourcesContent":["import isUndefined from 'lodash-es/isUndefined'\nimport { Component, Layer, POINT, Properties } from '@hatiolab/things-scene'\n\nconst MOVEMENT_STYLES: { [key: string]: string[] } = {\n  NORMAL /* NORMAL_TRANSPORT*/: ['#00B05033', '#00B050'],\n  DELAY /* DELAYED_TRANSPORT*/: ['#FF000033', '#FF0000'],\n  ALTER /* ALTER_TRANSPORT*/: ['#76717133', '#767171'],\n  WARN /* WARN_TRANSPORT*/: ['#AAAA0033', '#AAAA00']\n}\n\nexport type PathType = 'COMMAND' | 'JOB'\n\nexport type PathStatus = 'NORMAL' | 'DELAY' | 'ALTER' | 'WARN'\n\nexport type TipType = 'none' | 'arrow' | 'open-arrow' | 'sharp-arrow' | 'diamond' | 'oval'\n\nexport type TipSize = 'size1' | 'size2' | 'size3' | 'size4' | 'size5' | 'size6' | 'size7' | 'size8' | 'size9'\n\nexport type LineDash =\n  | 'solid'\n  | 'round-dot'\n  | 'square-dot'\n  | 'dash'\n  | 'dash-dot'\n  | 'long-dash'\n  | 'long-dash-dot'\n  | 'long-dash-dot-dot'\n\nexport type Point = {\n  x: number\n  y: number\n}\n\nexport type Path = Point[]\n\nexport type PathStyles = {\n  strokeStyle?: string | string[]\n  alpha?: number\n  lineWidth?: number\n  lineDash?: LineDash\n  lineCap?: CanvasLineCap\n  lineJoin?: CanvasLineJoin\n  begin?: TipType\n  beginSize?: TipSize\n  end?: TipType\n  endSize?: TipSize\n}\n\nexport type PATH = {\n  srcMachine: string\n  srcZone: string\n  srcUnit: string\n  dstMachine: string\n  dstZone: string\n  dstUnit: string\n  pathType: PathType\n  status: PathStatus\n  transportCnt: number\n  label: string\n  styles?: PathStyles\n}\n\nexport type MOVEMENT = PATH[]\n\nconst WING_FACTOR = Math.sqrt(3)\nconst LINEWIDTH = 2\n\nexport default class MovementLayer extends Layer {\n  drawInstructionHandler = (e: Event) => {\n    this.data = (e as CustomEvent).detail\n  }\n  clickComponentHandler = (e: Event) => {\n    const component = (e as CustomEvent).detail\n    const { type } = component.state\n\n    if (type == 'model-layer') {\n      this.data = [] /* clear */\n      return\n    }\n  }\n\n  ready() {\n    const handler = (e: Event) => {\n      this.data = (e as CustomEvent).detail\n    }\n\n    this.drawInstructionHandler = handler.bind(this)\n    window.addEventListener('drawInstruction', this.drawInstructionHandler)\n    window.addEventListener('clickComponent', this.clickComponentHandler)\n  }\n\n  dispose() {\n    window.removeEventListener('drawInstruction', this.drawInstructionHandler)\n    window.removeEventListener('clickComponent', this.clickComponentHandler)\n\n    super.dispose && super.dispose()\n  }\n\n  get capturable() {\n    return false\n  }\n\n  drawArrow(\n    ctx: CanvasRenderingContext2D,\n    p1: POINT,\n    p2: POINT,\n    pathType: PathType,\n    pathStatus: PathStatus,\n    label: string,\n    styles?: PathStyles\n  ) {\n    var { begin = 'none', end = 'arrow', lineWidth = LINEWIDTH, strokeStyle } = styles || {}\n\n    if (strokeStyle && !Array.isArray(strokeStyle)) {\n      ctx.strokeStyle = strokeStyle\n      ctx.fillStyle = strokeStyle\n    } else {\n      const gradient = ctx.createLinearGradient(p1.x, p1.y, p2.x, p2.y)\n      ;((strokeStyle as string[]) || MOVEMENT_STYLES[pathStatus] || []).forEach((color, idx) =>\n        gradient.addColorStop(idx, color)\n      )\n\n      ctx.strokeStyle = gradient\n      ctx.fillStyle = gradient\n    }\n\n    drawEndTips(ctx, [p1, p2], styles)\n    ctx.stroke()\n    ctx.fill()\n\n    ctx.beginPath()\n\n    var beginPos = getTipNeckPos(begin, lineWidth, p1, p2)\n    var endPos = getTipNeckPos(end, lineWidth, p2, p1)\n\n    ctx.moveTo(beginPos.x, beginPos.y)\n    ctx.lineTo(endPos.x, endPos.y)\n\n    stroke(ctx, {\n      lineDash: pathType == 'COMMAND' ? 'dash' : 'solid',\n      ...styles\n    })\n\n    ctx.beginPath()\n    ctx.setLineDash([]) // reset line dash\n\n    if (label) {\n      const fontSize = 14\n      const fontFamily = 'Arial'\n\n      ctx.font = `bold ${fontSize}px ${fontFamily}`\n\n      const textWidth = ctx.measureText(label).width\n\n      const [x, y] = [(p1.x + p2.x) / 2 - textWidth / 2, (p1.y + p2.y) / 2]\n      ctx.fillRect(x - 3, y - fontSize / 2 - 2, textWidth + 6, fontSize + 4)\n\n      ctx.fillStyle = 'white'\n      ctx.fillText(label, x, y + fontSize / 2 - 1)\n    }\n  }\n\n  findSourceAndTarget(path: PATH): [Component?, Component?] {\n    const root = this.root\n    var src, dest\n\n    for (const name of [path.srcUnit, path.srcZone, path.srcMachine].filter(Boolean)) {\n      src = root.findById(name)\n      if (src) {\n        break\n      }\n    }\n\n    for (const name of [path.dstUnit, path.dstZone, path.dstMachine].filter(Boolean)) {\n      dest = root.findById(name)\n      if (dest) {\n        break\n      }\n    }\n\n    return [src, dest]\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    const root = this.root\n    const movement = (this.data instanceof Array && (this.data as MOVEMENT)) || []\n\n    ctx.save()\n\n    movement.forEach(path => {\n      const [src, dest] = this.findSourceAndTarget(path)\n      if (!src || !dest) {\n        return\n      }\n\n      const [srcCenter, destCenter] = [src.center, dest.center]\n      const [srcPos, destPos] = [\n        src.transcoordS2C(srcCenter.x, srcCenter.y, root),\n        dest.transcoordS2C(destCenter.x, destCenter.y, root)\n      ]\n\n      ctx.beginPath()\n\n      this.drawArrow(\n        ctx,\n        srcPos,\n        destPos,\n        path.pathType,\n        path.status,\n        path.label || (Number(path.transportCnt || 0) > 1 ? String(path.transportCnt) : ''),\n        path.styles\n      )\n\n      ctx.stroke()\n    })\n\n    ctx.restore()\n  }\n\n  get eventMap() {\n    return {\n      'model-layer': {\n        '(self)': {\n          change: this.onchangeModelLayer\n        }\n      }\n    }\n  }\n\n  onchangeModelLayer(after: any, before: any, hint: any) {\n    if (after.scale || after.translate) {\n      this.invalidate()\n    }\n  }\n\n  onchangeData(after: Properties, before: Properties): void {\n    this.invalidate()\n  }\n}\n\nComponent.register('movement-layer', MovementLayer)\n\nfunction getTipNeckPos(tipType: TipType, lineWidth: number, p1: Point, p2: Point) {\n  if (tipType.slice(-5) != 'arrow') return p1\n\n  var { x, y } = p1\n  var theta = Math.atan2(p2.y - p1.y, p2.x - p1.x)\n  var diff = lineWidth * 1.5\n\n  return {\n    x: p1.x + Math.cos(theta) * diff,\n    y: p1.y + Math.sin(theta) * diff\n  }\n}\n\nfunction drawEndTips(ctx: CanvasRenderingContext2D, path: Path, style?: PathStyles) {\n  var {\n    lineWidth = LINEWIDTH,\n    lineCap,\n    alpha = 1,\n    begin = 'none',\n    end = 'arrow',\n    beginSize = 'size2',\n    endSize = 'size2'\n  } = style || {}\n\n  if (begin != 'none' || end != 'none') {\n    lineWidth = Number(lineWidth) || LINEWIDTH\n\n    if (!isUndefined(lineCap)) ctx.lineCap = lineCap\n    if (!isUndefined(lineWidth)) ctx.lineWidth = lineWidth\n    if (!isUndefined(alpha)) ctx.globalAlpha *= alpha\n\n    // 선 그리기.\n    if (begin != 'none') drawTip(ctx, path[0], path[1], lineWidth, begin, tipSize(beginSize, lineWidth))\n    if (end != 'none') {\n      let length = path.length\n      drawTip(ctx, path[length - 1], path[length - 2], lineWidth, end, tipSize(endSize, lineWidth))\n    }\n  }\n}\n\nfunction drawTip(\n  ctx: CanvasRenderingContext2D,\n  p1: Point,\n  p2: Point,\n  lineWidth: number,\n  type: TipType,\n  size: { X: number; Y: number }\n) {\n  var { x, y } = p1\n  var theta = Math.atan2(p2.y - y, p2.x - x)\n\n  ctx.beginPath()\n\n  ctx.translate(x, y)\n  ctx.rotate(theta)\n\n  switch (type) {\n    case 'oval':\n      ctx.ellipse(0, 0, size.X, size.Y, 0, 0, 2 * Math.PI)\n      ctx.fill()\n      // ctx.scale(1, 1 / arc_scale_y)\n      break\n    case 'diamond':\n      ctx.moveTo(-size.X, 0)\n      ctx.lineTo(0, -size.Y)\n      ctx.lineTo(size.X, 0)\n      ctx.lineTo(0, size.Y)\n      ctx.fill()\n      break\n    case 'arrow':\n      ctx.moveTo(0, 0)\n      ctx.lineTo(WING_FACTOR * size.X, -size.Y)\n      ctx.lineTo(WING_FACTOR * size.X, size.Y)\n      ctx.fill()\n      break\n    case 'sharp-arrow':\n      ctx.moveTo(0, 0)\n      ctx.lineTo(WING_FACTOR * size.X, -size.Y)\n      ctx.lineTo(-size.X / 1.5 + WING_FACTOR * size.X, 0)\n      ctx.lineTo(WING_FACTOR * size.X, size.Y)\n      ctx.fill()\n      break\n    case 'open-arrow':\n      ctx.moveTo(WING_FACTOR * size.X + lineWidth, -size.Y)\n      ctx.lineTo(lineWidth, 0)\n      ctx.lineTo(WING_FACTOR * size.X + lineWidth, size.Y)\n      ctx.stroke()\n      break\n    default:\n      break\n  }\n\n  ctx.rotate(-theta)\n  ctx.translate(-x, -y)\n\n  ctx.closePath()\n}\n\nfunction tipSize(size: TipSize, lineWidth: number) {\n  let length: { X: number; Y: number } = { X: lineWidth * 1.5, Y: lineWidth * 1.5 }\n  lineWidth = lineWidth * 1.2\n\n  switch (size) {\n    case 'size1':\n      length.X = lineWidth\n      length.Y = lineWidth\n      break\n    case 'size2':\n      length.X = lineWidth * 1.5\n      length.Y = lineWidth\n      break\n    case 'size3':\n      length.X = lineWidth * 2\n      length.Y = lineWidth\n      break\n    case 'size4':\n      length.X = lineWidth\n      length.Y = lineWidth * 1.5\n      break\n    case 'size5':\n      length.X = lineWidth * 1.5\n      length.Y = lineWidth * 1.5\n      break\n    case 'size6':\n      length.X = lineWidth * 2\n      length.Y = lineWidth * 1.5\n      break\n    case 'size7':\n      length.X = lineWidth\n      length.Y = lineWidth * 2\n      break\n    case 'size8':\n      length.X = lineWidth * 1.5\n      length.Y = lineWidth * 2\n      break\n    case 'size9':\n      length.X = lineWidth * 2\n      length.Y = lineWidth * 2\n      break\n    default:\n      length.X = lineWidth * 1.5\n      length.Y = lineWidth * 1.5\n      break\n  }\n  return length\n}\n\nfunction stroke(ctx: CanvasRenderingContext2D, styles?: PathStyles) {\n  var { lineDash: lineDashType = 'solid', lineWidth = 2, lineCap, lineJoin, alpha } = styles || {}\n\n  if (lineCap) ctx.lineCap = lineCap\n\n  let lineDash = [0, 0]\n\n  if (lineDash) {\n    var isRound = lineCap == 'round'\n\n    switch (lineDashType) {\n      case 'solid':\n        lineDash = [0, 0]\n        break\n      case 'round-dot':\n        if (isRound) lineDash = [0, lineWidth * 2]\n        else lineDash = [lineWidth, lineWidth]\n        break\n      case 'square-dot':\n        if (isRound) lineDash = [lineWidth, lineWidth * 2]\n        else lineDash = [lineWidth * 2, lineWidth]\n        break\n      case 'dash':\n        if (isRound) lineDash = [lineWidth * 3, lineWidth * 2.5]\n        else lineDash = [lineWidth * 4, lineWidth * 1.5]\n        break\n      case 'dash-dot':\n        if (isRound) lineDash = [lineWidth * 3, lineWidth * 3, 0, lineWidth * 3]\n        else lineDash = [lineWidth * 4, lineWidth * 2, lineWidth, lineWidth * 2]\n        break\n      case 'long-dash':\n        if (isRound) lineDash = [lineWidth * 5, lineWidth * 4]\n        else lineDash = [lineWidth * 6, lineWidth * 3]\n        break\n      case 'long-dash-dot':\n        if (isRound) lineDash = [lineWidth * 5, lineWidth * 3, 0, lineWidth * 3]\n        else lineDash = [lineWidth * 6, lineWidth * 2, lineWidth, lineWidth * 2]\n        break\n      case 'long-dash-dot-dot':\n        if (isRound) lineDash = [lineWidth * 5, lineWidth * 2, 0, lineWidth * 2, 0, lineWidth * 2]\n        else lineDash = [lineWidth * 6, lineWidth, lineWidth, lineWidth, lineWidth, lineWidth]\n        break\n    }\n    ctx.setLineDash(lineDash)\n  }\n\n  if (!isUndefined(alpha)) ctx.globalAlpha *= alpha\n  if (!isUndefined(lineJoin)) ctx.lineJoin = lineJoin\n\n  ctx.stroke()\n}\n"]}

package/dist/src/modeller/property-sidebar/property-shared-style.js

@@ -131,5 +131,8 @@ export const PropertySharedStyle = css `
   .icon-only-label.lineHeight {
     background-position: 100% -995px;
   }
+  .icon-only-label.letterSpacing {
+    background-position: 100% -1594px;
+  }
 `;
 //# sourceMappingURL=property-shared-style.js.map

package/dist/src/modeller/property-sidebar/property-shared-style.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-shared-style.js","sourceRoot":"","sources":["../../../../src/modeller/property-sidebar/property-shared-style.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiIrC,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css } from 'lit'\n\nexport const PropertySharedStyle = css`\n  fieldset {\n    border: none;\n    margin: 4px;\n    padding: 9px 4px 9px 4px;\n    border-bottom: var(--property-sidebar-fieldset-border);\n    color: var(--property-sidebar-fieldset-legend-color);\n    font: var(--property-sidebar-fieldset-label);\n  }\n\n  fieldset legend {\n    padding: 5px 0 0 5px;\n    color: var(--property-sidebar-fieldset-legend-color);\n    font: var(--property-sidebar-fieldset-legend);\n    text-transform: capitalize;\n  }\n\n  select,\n  input {\n    border: var(--property-sidebar-fieldset-border);\n  }\n\n  ox-input-data {\n    height: 300px;\n  }\n\n  /* property grid */\n  .property-grid {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n    align-items: center;\n  }\n\n  .property-grid > * {\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .property-grid > label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n    line-height: 2;\n  }\n\n  .property-grid > input,\n  .property-grid > table,\n  .property-grid > select,\n  .property-grid > ox-input-angle,\n  .property-grid > ox-buttons-radio,\n  .property-grid > ox-input-color,\n  [custom-editor] {\n    grid-column: span 7;\n    align-self: stretch;\n  }\n\n  .property-grid > .checkbox-row {\n    grid-column: span 10;\n  }\n\n  .property-grid > .property-full-label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n  }\n\n  .property-grid > .property-half-label {\n    grid-column: span 1;\n  }\n\n  .property-grid > .property-full-input {\n    grid-column: span 7;\n  }\n\n  .property-grid > .property-half-input {\n    grid-column: span 4;\n  }\n\n  /* checkbox-row */\n  .checkbox-row {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n    align-items: center;\n  }\n\n  .checkbox-row > input {\n    grid-column: 4 / 5;\n  }\n\n  .checkbox-row > label {\n    grid-column: span 6;\n    text-align: left;\n  }\n\n  /* image resources */\n  .icon-only-label {\n    grid-column: span 1;\n\n    background: var(--url-icon-properties-label) no-repeat;\n    float: left;\n    margin: 0;\n    align-self: stretch;\n  }\n\n  .icon-only-label.color {\n    background-position: 100% -500px;\n  }\n  .icon-only-label.font-size {\n    background-position: 100% -594px;\n  }\n  .icon-only-label.leading {\n    background-position: 100% -696px;\n  }\n  .icon-only-label.hscale {\n    background-position: 100% -296px;\n  }\n  .icon-only-label.vscale {\n    background-position: 100% -396px;\n  }\n  .icon-only-label.linewidth {\n    background-position: 100% -894px;\n  }\n  .icon-only-label.lineHeight {\n    background-position: 100% -995px;\n  }\n`\n"]}
+{"version":3,"file":"property-shared-style.js","sourceRoot":"","sources":["../../../../src/modeller/property-sidebar/property-shared-style.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoIrC,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css } from 'lit'\n\nexport const PropertySharedStyle = css`\n  fieldset {\n    border: none;\n    margin: 4px;\n    padding: 9px 4px 9px 4px;\n    border-bottom: var(--property-sidebar-fieldset-border);\n    color: var(--property-sidebar-fieldset-legend-color);\n    font: var(--property-sidebar-fieldset-label);\n  }\n\n  fieldset legend {\n    padding: 5px 0 0 5px;\n    color: var(--property-sidebar-fieldset-legend-color);\n    font: var(--property-sidebar-fieldset-legend);\n    text-transform: capitalize;\n  }\n\n  select,\n  input {\n    border: var(--property-sidebar-fieldset-border);\n  }\n\n  ox-input-data {\n    height: 300px;\n  }\n\n  /* property grid */\n  .property-grid {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n    align-items: center;\n  }\n\n  .property-grid > * {\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .property-grid > label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n    line-height: 2;\n  }\n\n  .property-grid > input,\n  .property-grid > table,\n  .property-grid > select,\n  .property-grid > ox-input-angle,\n  .property-grid > ox-buttons-radio,\n  .property-grid > ox-input-color,\n  [custom-editor] {\n    grid-column: span 7;\n    align-self: stretch;\n  }\n\n  .property-grid > .checkbox-row {\n    grid-column: span 10;\n  }\n\n  .property-grid > .property-full-label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n  }\n\n  .property-grid > .property-half-label {\n    grid-column: span 1;\n  }\n\n  .property-grid > .property-full-input {\n    grid-column: span 7;\n  }\n\n  .property-grid > .property-half-input {\n    grid-column: span 4;\n  }\n\n  /* checkbox-row */\n  .checkbox-row {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n    align-items: center;\n  }\n\n  .checkbox-row > input {\n    grid-column: 4 / 5;\n  }\n\n  .checkbox-row > label {\n    grid-column: span 6;\n    text-align: left;\n  }\n\n  /* image resources */\n  .icon-only-label {\n    grid-column: span 1;\n\n    background: var(--url-icon-properties-label) no-repeat;\n    float: left;\n    margin: 0;\n    align-self: stretch;\n  }\n\n  .icon-only-label.color {\n    background-position: 100% -500px;\n  }\n  .icon-only-label.font-size {\n    background-position: 100% -594px;\n  }\n  .icon-only-label.leading {\n    background-position: 100% -696px;\n  }\n  .icon-only-label.hscale {\n    background-position: 100% -296px;\n  }\n  .icon-only-label.vscale {\n    background-position: 100% -396px;\n  }\n  .icon-only-label.linewidth {\n    background-position: 100% -894px;\n  }\n  .icon-only-label.lineHeight {\n    background-position: 100% -995px;\n  }\n  .icon-only-label.letterSpacing {\n    background-position: 100% -1594px;\n  }\n`\n"]}

package/dist/src/modeller/property-sidebar/styles/styles.js

@@ -24,7 +24,7 @@ export class PropertyStyles extends AbstractProperty {
         this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
     }
     render() {
-        var { alpha = 1, fontFamily, fontSize, lineHeight, fontColor, bold, italic, fillStyle, lineWidth, strokeStyle, lineDash, lineCap, lineJoin, begin, beginSize, end, endSize } = this.value || {};
+        var { alpha = 1, fontFamily, fontSize, lineHeight, letterSpacing, fontColor, bold, italic, fillStyle, lineWidth, strokeStyle, lineDash, lineCap, lineJoin, begin, beginSize, end, endSize } = this.value || {};
         return html `
       <fieldset>
         <legend>
@@ -60,11 +60,16 @@ export class PropertyStyles extends AbstractProperty {
           <label class="property-half-label icon-only-label lineHeight"></label>
           <input type="number" value-key="lineHeight" .value=${lineHeight} class="property-half-input" />
 
+          <label class="property-half-label icon-only-label letterSpacing"></label>
+          <input type="number" value-key="letterSpacing" .value=${letterSpacing} class="property-half-input" />
+
           <label class="property-half-label icon-only-label color"></label>
           <ox-input-color value-key="fontColor" .value=${fontColor} class="property-half-input"> </ox-input-color>
 
-          <label class="property-half-label"></label>
-          <div class="property-half-input btn-group">
+          <label class="property-full-label">
+            <ox-i18n msgid="label.text-formatting">Text Formatting</ox-i18n>
+          </label>
+          <div class="property-full-input btn-group">
             <paper-button toggles value-key="bold" ?active=${bold} class="tbold"> </paper-button>
             <paper-button toggles value-key="italic" ?active=${italic} class="titalic"> </paper-button>
           </div>

package/dist/src/modeller/property-sidebar/styles/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/styles/styles.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@polymer/paper-dropdown-menu/paper-dropdown-menu'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/input/ox-input-range.js'\nimport '@operato/app/input/ox-input-fill-style.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nimport { Component } from '@hatiolab/things-scene'\n\nimport { AbstractProperty } from '../abstract-property.js'\nimport { PropertySharedStyle } from '../property-shared-style.js'\n\nexport class PropertyStyles extends AbstractProperty {\n  static styles = [\n    PropertySharedStyle,\n    css`\n      ox-input-range {\n        width: 100%;\n      }\n\n      .btn-group {\n        height: 24px;\n      }\n\n      .btn-group paper-button {\n        width: 30px;\n        height: 24px;\n        min-width: initial;\n        margin: 0 4px 0 0;\n        padding: 0;\n        border-radius: 0;\n        display: inline-block;\n        border-bottom: 2px solid #fff;\n\n        background: var(--url-icon-properties) no-repeat;\n        background-size: 70%;\n      }\n\n      .btn-group paper-button.tbold {\n        background-position: 50% -170px;\n      }\n\n      .btn-group paper-button.titalic {\n        background-position: 50% -205px;\n      }\n\n      .btn-group paper-button.tunderline {\n        background-position: 50% -240px;\n      }\n\n      .btn-group paper-button.tstrikethrough {\n        background-position: 50% -415px;\n      }\n\n      .btn-group paper-button[active] {\n        border-color: #f2471c;\n      }\n\n      .line-type paper-listbox {\n        overflow: hidden;\n        max-width: 100px;\n      }\n      .line-type paper-item {\n        background: var(--url-icon-properties-line-type) 50% 0 no-repeat;\n        min-height: 25px;\n        padding: 3px 9px;\n        width: 80px;\n      }\n\n      .line-type paper-item.solid {\n        background-position: 50% 10px;\n      }\n      .line-type paper-item.round-dot {\n        background-position: 50% -40px;\n      }\n      .line-type paper-item.square-dot {\n        background-position: 50% -90px;\n      }\n      .line-type paper-item.dash {\n        background-position: 50% -140px;\n      }\n      .line-type paper-item.dash-dot {\n        background-position: 50% -190px;\n      }\n      .line-type paper-item.long-dash {\n        background-position: 50% -240px;\n      }\n      .line-type paper-item.long-dash-dot {\n        background-position: 50% -290px;\n      }\n      .line-type paper-item.long-dash-dot-dot {\n        background-position: 50% -340px;\n      }\n\n      .line-type .paper-input-container input {\n        background: var(--url-icon-properties-line-type) 50% 0 no-repeat !important;\n      }\n      .line-type.solid .paper-input-container input {\n        background-position: 50% 5px !important;\n      }\n      .line-type.round-dot .paper-input-container input {\n        background-position: 50% -45px !important;\n      }\n      .line-type.square-dot .paper-input-container input {\n        background-position: 50% -85px !important;\n      }\n      .line-type.dash .paper-input-container input {\n        background-position: 50% -145px !important;\n      }\n      .line-type.dash-dot .paper-input-container input {\n        background-position: 50% -185px !important;\n      }\n      .line-type.long-dash .paper-input-container input {\n        background-position: 50% -245px !important;\n      }\n      .line-type.long-dash-dot .paper-input-container input {\n        background-position: 50% -285px !important;\n      }\n      .line-type.long-dash-dot-dot .paper-input-container input {\n        background-position: 50% -345px !important;\n      }\n\n      .arrow-type paper-menu {\n        overflow: hidden;\n        max-width: 140px;\n      }\n      .arrow-type paper-item {\n        background: var(--url-icon-properties-arrow-type) 50% 0 no-repeat;\n        min-height: 30px;\n        padding: 3px 7px;\n        width: 30px;\n        float: left;\n      }\n      .arrow-type paper-item.begin-no {\n        background-position: 50% 16px;\n      }\n      .arrow-type paper-item.begin-arrow {\n        background-position: 50% -39px;\n      }\n      .arrow-type paper-item.begin-open-arrow {\n        background-position: 50% -89px;\n      }\n      .arrow-type paper-item.begin-stealth-arrow {\n        background-position: 50% -139px;\n      }\n      .arrow-type paper-item.begin-diamond-arrow {\n        background-position: 50% -190px;\n      }\n      .arrow-type paper-item.begin-oval-arrow {\n        background-position: 50% -238px;\n      }\n      .arrow-type paper-item.begin-size1 {\n        background-position: 50% -286px;\n      }\n      .arrow-type paper-item.begin-size2 {\n        background-position: 50% -336px;\n      }\n      .arrow-type paper-item.begin-size3 {\n        background-position: 50% -386px;\n      }\n      .arrow-type paper-item.begin-size4 {\n        background-position: 50% -436px;\n      }\n      .arrow-type paper-item.begin-size5 {\n        background-position: 50% -486px;\n      }\n      .arrow-type paper-item.begin-size6 {\n        background-position: 50% -536px;\n      }\n      .arrow-type paper-item.begin-size7 {\n        background-position: 50% -589px;\n      }\n      .arrow-type paper-item.begin-size8 {\n        background-position: 50% -639px;\n      }\n      .arrow-type paper-item.begin-size9 {\n        background-position: 50% -689px;\n      }\n      .arrow-type paper-item.end-no {\n        background-position: 50% 16px;\n      }\n      .arrow-type paper-item.end-arrow {\n        background-position: 50% -739px;\n      }\n      .arrow-type paper-item.end-open-arrow {\n        background-position: 50% -789px;\n      }\n      .arrow-type paper-item.end-stealth-arrow {\n        background-position: 50% -839px;\n      }\n      .arrow-type paper-item.end-diamond-arrow {\n        background-position: 50% -890px;\n      }\n      .arrow-type paper-item.end-oval-arrow {\n        background-position: 50% -938px;\n      }\n      .arrow-type paper-item.end-size1 {\n        background-position: 50% -986px;\n      }\n      .arrow-type paper-item.end-size2 {\n        background-position: 50% -1036px;\n      }\n      .arrow-type paper-item.end-size3 {\n        background-position: 50% -1086px;\n      }\n      .arrow-type paper-item.end-size4 {\n        background-position: 50% -1136px;\n      }\n      .arrow-type paper-item.end-size5 {\n        background-position: 50% -1186px;\n      }\n      .arrow-type paper-item.end-size6 {\n        background-position: 50% -1236px;\n      }\n      .arrow-type paper-item.end-size7 {\n        background-position: 50% -1289px;\n      }\n      .arrow-type paper-item.end-size8 {\n        background-position: 50% -1339px;\n      }\n      .arrow-type paper-item.end-size9 {\n        background-position: 50% -1389px;\n      }\n\n      .arrow-type .paper-input-container input {\n        background: var(--url-icon-properties-arrow-type) 110% 0 no-repeat !important;\n      }\n      .arrow-type.begin-no .paper-input-container input {\n        background-position: 110% 5px !important;\n      }\n      .arrow-type.begin-arrow .paper-input-container input {\n        background-position: 110% -50px !important;\n      }\n      .arrow-type.begin-open-arrow .paper-input-container input {\n        background-position: 110% -100px !important;\n      }\n      .arrow-type.begin-stealth-arrow .paper-input-container input {\n        background-position: 110% -150px !important;\n      }\n      .arrow-type.begin-diamond-arrow .paper-input-container input {\n        background-position: 110% -200px !important;\n      }\n      .arrow-type.begin-oval-arrow .paper-input-container input {\n        background-position: 110% -250px !important;\n      }\n      .arrow-type.begin-size1 .paper-input-container input {\n        background-position: 110% -298px !important;\n      }\n      .arrow-type.begin-size2 .paper-input-container input {\n        background-position: 110% -348px !important;\n      }\n      .arrow-type.begin-size3 .paper-input-container input {\n        background-position: 110% -398px !important;\n      }\n      .arrow-type.begin-size4 .paper-input-container input {\n        background-position: 110% -448px !important;\n      }\n      .arrow-type.begin-size5 .paper-input-container input {\n        background-position: 110% -498px !important;\n      }\n      .arrow-type.begin-size6 .paper-input-container input {\n        background-position: 110% -548px !important;\n      }\n      .arrow-type.begin-size7 .paper-input-container input {\n        background-position: 110% -600px !important;\n      }\n      .arrow-type.begin-size8 .paper-input-container input {\n        background-position: 110% -650px !important;\n      }\n      .arrow-type.begin-size9 .paper-input-container input {\n        background-position: 110% -700px !important;\n      }\n      .arrow-type.end-no .paper-input-container input {\n        background-position: 110% 5px !important;\n      }\n      .arrow-type.end-arrow .paper-input-container input {\n        background-position: 110% -750px !important;\n      }\n      .arrow-type.end-open-arrow .paper-input-container input {\n        background-position: 110% -800px !important;\n      }\n      .arrow-type.end-stealth-arrow .paper-input-container input {\n        background-position: 110% -850px !important;\n      }\n      .arrow-type.end-diamond-arrow .paper-input-container input {\n        background-position: 110% -900px !important;\n      }\n      .arrow-type.end-oval-arrow .paper-input-container input {\n        background-position: 110% -950px !important;\n      }\n      .arrow-type.end-size1 .paper-input-container input {\n        background-position: 110% -998px !important;\n      }\n      .arrow-type.end-size2 .paper-input-container input {\n        background-position: 110% -1048px !important;\n      }\n      .arrow-type.end-size3 .paper-input-container input {\n        background-position: 110% -1098px !important;\n      }\n      .arrow-type.end-size4 .paper-input-container input {\n        background-position: 110% -1148px !important;\n      }\n      .arrow-type.end-size5 .paper-input-container input {\n        background-position: 110% -1198px !important;\n      }\n      .arrow-type.end-size6 .paper-input-container input {\n        background-position: 110% -1248px !important;\n      }\n      .arrow-type.end-size7 .paper-input-container input {\n        background-position: 110% -1300px !important;\n      }\n      .arrow-type.end-size8 .paper-input-container input {\n        background-position: 110% -1350px !important;\n      }\n      .arrow-type.end-size9 .paper-input-container input {\n        background-position: 110% -1400px !important;\n      }\n    `\n  ]\n  @property({ type: Object }) value: any = {}\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Array }) fonts: any[] = []\n\n  @state() fontAvailable: boolean = false\n\n  firstUpdated() {\n    this.fontAvailable = !sessionStorage.getItem('ThingsFactory-UseExternServer')\n\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var {\n      alpha = 1,\n      fontFamily,\n      fontSize,\n      lineHeight,\n      fontColor,\n      bold,\n      italic,\n      fillStyle,\n      lineWidth,\n      strokeStyle,\n      lineDash,\n      lineCap,\n      lineJoin,\n      begin,\n      beginSize,\n      end,\n      endSize\n    } = this.value || {}\n\n    return html`\n      <fieldset>\n        <legend>\n          <ox-i18n topic=\"board-modeller/styles/opacity\" msgid=\"label.opacity\">opacity</ox-i18n>\n        </legend>\n        <ox-input-range min=\"0\" max=\"1\" step=\"0.1\" value-key=\"alpha\" .value=${alpha} editable> </ox-input-range>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <ox-i18n topic=\"board-modeller/styles/text-style\" msgid=\"label.text-style\">text style</ox-i18n>\n        </legend>\n\n        <div class=\"property-grid\">\n          ${this.fontAvailable\n            ? html`\n                <label class=\"property-full-label\">\n                  <ox-i18n msgid=\"label.font-family\">Font Family</ox-i18n>\n                </label>\n\n                <ox-font-selector\n                  value-key=\"fontFamily\"\n                  .value=${fontFamily}\n                  class=\"property-full-input\"\n                  custom-editor\n                ></ox-font-selector>\n              `\n            : html``}\n\n          <label class=\"property-half-label icon-only-label font-size\"></label>\n          <input type=\"number\" value-key=\"fontSize\" .value=${fontSize} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label lineHeight\"></label>\n          <input type=\"number\" value-key=\"lineHeight\" .value=${lineHeight} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label color\"></label>\n          <ox-input-color value-key=\"fontColor\" .value=${fontColor} class=\"property-half-input\"> </ox-input-color>\n\n          <label class=\"property-half-label\"></label>\n          <div class=\"property-half-input btn-group\">\n            <paper-button toggles value-key=\"bold\" ?active=${bold} class=\"tbold\"> </paper-button>\n            <paper-button toggles value-key=\"italic\" ?active=${italic} class=\"titalic\"> </paper-button>\n          </div>\n        </div>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <ox-i18n topic=\"board-modeller/styles/fill-style\" msgid=\"label.fill-style\">fill style</ox-i18n>\n        </legend>\n\n        <ox-input-fill-style value-key=\"fillStyle\" .value=${fillStyle} color-only> </ox-input-fill-style>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <ox-i18n msgid=\"label.line-style\" topic=\"board-modeller/styles/line-style\"></ox-i18n>\n        </legend>\n\n        <div class=\"property-grid\">\n          <label class=\"property-half-label icon-only-label linewidth\"></label>\n          <input type=\"number\" value-key=\"lineWidth\" .value=${lineWidth} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label color\"></label>\n          <ox-input-color value-key=\"strokeStyle\" .value=${strokeStyle} class=\"property-half-input\"> </ox-input-color>\n\n          <label class=\"property-full-label\">\n            <ox-i18n msgid=\"label.line-type\">line type</ox-i18n>\n          </label>\n          <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input line-type solid\">\n            <!-- solid는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n            <paper-listbox\n              value-key=\"lineDash\"\n              @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n              slot=\"dropdown-content\"\n              .selected=${lineDash}\n              attr-for-selected=\"name\"\n            >\n              <paper-item class=\"solid\" name=\"solid\"></paper-item>\n              <paper-item class=\"round-dot\" name=\"round-dot\"></paper-item>\n              <paper-item class=\"square-dot\" name=\"square-dot\"></paper-item>\n              <paper-item class=\"dash\" name=\"dash\"></paper-item>\n              <paper-item class=\"dash-dot\" name=\"dash-dot\"></paper-item>\n              <paper-item class=\"long-dash\" name=\"long-dash\"></paper-item>\n              <paper-item class=\"long-dash-dot\" name=\"long-dash-dot\"></paper-item>\n              <paper-item class=\"long-dash-dot-dot\" name=\"long-dash-dot-dot\"></paper-item>\n            </paper-listbox>\n          </paper-dropdown-menu>\n\n          <label class=\"property-full-label\">\n            <ox-i18n msgid=\"label.cap-type\">cap type</ox-i18n>\n          </label>\n          <select class=\"property-full-input select-content\" value-key=\"lineCap\" .value=${lineCap}>\n            <option value=\"butt\"><ox-i18n msgid=\"label.square\">square</ox-i18n></option>\n            <option value=\"round\"><ox-i18n msgid=\"label.round\">round</ox-i18n></option>\n          </select>\n\n          <label class=\"property-full-label\">\n            <ox-i18n msgid=\"label.join-type\">join type</ox-i18n>\n          </label>\n          <select class=\"property-full-input select-content\" value-key=\"lineJoin\" .value=${lineJoin}>\n            <option value=\"miter\"><ox-i18n msgid=\"label.miter\">miter</ox-i18n></option>\n            <option value=\"round\"><ox-i18n msgid=\"label.round\">round</ox-i18n></option>\n            <option value=\"bevel\"><ox-i18n msgid=\"label.bevel\">bevel</ox-i18n></option>\n          </select>\n\n          ${this._isLine(this.selected)\n            ? html`\n                <label class=\"property-full-label\">\n                  <ox-i18n msgid=\"label.begin-type\">begin type</ox-i18n>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type begin-no\">\n                  <!-- begin-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"begin\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${begin}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"begin-no\" name=\"none\"></paper-item>\n                    <paper-item class=\"begin-arrow\" name=\"arrow\"></paper-item>\n                    <paper-item class=\"begin-open-arrow\" name=\"open-arrow\"></paper-item>\n                    <paper-item class=\"begin-stealth-arrow\" name=\"sharp-arrow\"></paper-item>\n                    <paper-item class=\"begin-diamond-arrow\" name=\"diamond\"></paper-item>\n                    <paper-item class=\"begin-oval-arrow\" name=\"oval\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <ox-i18n msgid=\"label.begin-size\">begin size</ox-i18n>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type begin-size1\">\n                  <!-- begin-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"beginSize\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${beginSize}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"begin-size1\" name=\"size1\"></paper-item>\n                    <paper-item class=\"begin-size2\" name=\"size2\"></paper-item>\n                    <paper-item class=\"begin-size3\" name=\"size3\"></paper-item>\n                    <paper-item class=\"begin-size4\" name=\"size4\"></paper-item>\n                    <paper-item class=\"begin-size5\" name=\"size5\"></paper-item>\n                    <paper-item class=\"begin-size6\" name=\"size6\"></paper-item>\n                    <paper-item class=\"begin-size7\" name=\"size7\"></paper-item>\n                    <paper-item class=\"begin-size8\" name=\"size8\"></paper-item>\n                    <paper-item class=\"begin-size9\" name=\"size9\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <ox-i18n msgid=\"label.end-type\">end type</ox-i18n>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type end-no\">\n                  <!-- end-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"end\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${end}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"end-no\" name=\"none\"></paper-item>\n                    <paper-item class=\"end-arrow\" name=\"arrow\"></paper-item>\n                    <paper-item class=\"end-open-arrow\" name=\"open-arrow\"></paper-item>\n                    <paper-item class=\"end-stealth-arrow\" name=\"sharp-arrow\"></paper-item>\n                    <paper-item class=\"end-diamond-arrow\" name=\"diamond\"></paper-item>\n                    <paper-item class=\"end-oval-arrow\" name=\"oval\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <ox-i18n msgid=\"label.end-size\">end size</ox-i18n>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type end-size1\">\n                  <!-- end-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"endSize\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${endSize}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"end-size1\" name=\"size1\"></paper-item>\n                    <paper-item class=\"end-size2\" name=\"size2\"></paper-item>\n                    <paper-item class=\"end-size3\" name=\"size3\"></paper-item>\n                    <paper-item class=\"end-size4\" name=\"size4\"></paper-item>\n                    <paper-item class=\"end-size5\" name=\"size5\"></paper-item>\n                    <paper-item class=\"end-size6\" name=\"size6\"></paper-item>\n                    <paper-item class=\"end-size7\" name=\"size7\"></paper-item>\n                    <paper-item class=\"end-size8\" name=\"size8\"></paper-item>\n                    <paper-item class=\"end-size9\" name=\"size9\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n              `\n            : html``}\n        </div>\n      </fieldset>\n    `\n  }\n\n  _isLine(selected: Component[]) {\n    var isLine = false\n\n    for (var i = 0; i < selected.length; i++) {\n      var comp = selected[i]\n\n      if (!comp.isLine || !comp.isLine()) {\n        isLine = false\n        return isLine\n      }\n\n      isLine = true\n    }\n\n    return isLine\n  }\n}\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/styles/styles.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@polymer/paper-dropdown-menu/paper-dropdown-menu'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/input/ox-input-range.js'\nimport '@operato/app/input/ox-input-fill-style.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nimport { Component } from '@hatiolab/things-scene'\n\nimport { AbstractProperty } from '../abstract-property.js'\nimport { PropertySharedStyle } from '../property-shared-style.js'\n\nexport class PropertyStyles extends AbstractProperty {\n  static styles = [\n    PropertySharedStyle,\n    css`\n      ox-input-range {\n        width: 100%;\n      }\n\n      .btn-group {\n        height: 24px;\n      }\n\n      .btn-group paper-button {\n        width: 30px;\n        height: 24px;\n        min-width: initial;\n        margin: 0 4px 0 0;\n        padding: 0;\n        border-radius: 0;\n        display: inline-block;\n        border-bottom: 2px solid #fff;\n\n        background: var(--url-icon-properties) no-repeat;\n        background-size: 70%;\n      }\n\n      .btn-group paper-button.tbold {\n        background-position: 50% -170px;\n      }\n\n      .btn-group paper-button.titalic {\n        background-position: 50% -205px;\n      }\n\n      .btn-group paper-button.tunderline {\n        background-position: 50% -240px;\n      }\n\n      .btn-group paper-button.tstrikethrough {\n        background-position: 50% -415px;\n      }\n\n      .btn-group paper-button[active] {\n        border-color: #f2471c;\n      }\n\n      .line-type paper-listbox {\n        overflow: hidden;\n        max-width: 100px;\n      }\n      .line-type paper-item {\n        background: var(--url-icon-properties-line-type) 50% 0 no-repeat;\n        min-height: 25px;\n        padding: 3px 9px;\n        width: 80px;\n      }\n\n      .line-type paper-item.solid {\n        background-position: 50% 10px;\n      }\n      .line-type paper-item.round-dot {\n        background-position: 50% -40px;\n      }\n      .line-type paper-item.square-dot {\n        background-position: 50% -90px;\n      }\n      .line-type paper-item.dash {\n        background-position: 50% -140px;\n      }\n      .line-type paper-item.dash-dot {\n        background-position: 50% -190px;\n      }\n      .line-type paper-item.long-dash {\n        background-position: 50% -240px;\n      }\n      .line-type paper-item.long-dash-dot {\n        background-position: 50% -290px;\n      }\n      .line-type paper-item.long-dash-dot-dot {\n        background-position: 50% -340px;\n      }\n\n      .line-type .paper-input-container input {\n        background: var(--url-icon-properties-line-type) 50% 0 no-repeat !important;\n      }\n      .line-type.solid .paper-input-container input {\n        background-position: 50% 5px !important;\n      }\n      .line-type.round-dot .paper-input-container input {\n        background-position: 50% -45px !important;\n      }\n      .line-type.square-dot .paper-input-container input {\n        background-position: 50% -85px !important;\n      }\n      .line-type.dash .paper-input-container input {\n        background-position: 50% -145px !important;\n      }\n      .line-type.dash-dot .paper-input-container input {\n        background-position: 50% -185px !important;\n      }\n      .line-type.long-dash .paper-input-container input {\n        background-position: 50% -245px !important;\n      }\n      .line-type.long-dash-dot .paper-input-container input {\n        background-position: 50% -285px !important;\n      }\n      .line-type.long-dash-dot-dot .paper-input-container input {\n        background-position: 50% -345px !important;\n      }\n\n      .arrow-type paper-menu {\n        overflow: hidden;\n        max-width: 140px;\n      }\n      .arrow-type paper-item {\n        background: var(--url-icon-properties-arrow-type) 50% 0 no-repeat;\n        min-height: 30px;\n        padding: 3px 7px;\n        width: 30px;\n        float: left;\n      }\n      .arrow-type paper-item.begin-no {\n        background-position: 50% 16px;\n      }\n      .arrow-type paper-item.begin-arrow {\n        background-position: 50% -39px;\n      }\n      .arrow-type paper-item.begin-open-arrow {\n        background-position: 50% -89px;\n      }\n      .arrow-type paper-item.begin-stealth-arrow {\n        background-position: 50% -139px;\n      }\n      .arrow-type paper-item.begin-diamond-arrow {\n        background-position: 50% -190px;\n      }\n      .arrow-type paper-item.begin-oval-arrow {\n        background-position: 50% -238px;\n      }\n      .arrow-type paper-item.begin-size1 {\n        background-position: 50% -286px;\n      }\n      .arrow-type paper-item.begin-size2 {\n        background-position: 50% -336px;\n      }\n      .arrow-type paper-item.begin-size3 {\n        background-position: 50% -386px;\n      }\n      .arrow-type paper-item.begin-size4 {\n        background-position: 50% -436px;\n      }\n      .arrow-type paper-item.begin-size5 {\n        background-position: 50% -486px;\n      }\n      .arrow-type paper-item.begin-size6 {\n        background-position: 50% -536px;\n      }\n      .arrow-type paper-item.begin-size7 {\n        background-position: 50% -589px;\n      }\n      .arrow-type paper-item.begin-size8 {\n        background-position: 50% -639px;\n      }\n      .arrow-type paper-item.begin-size9 {\n        background-position: 50% -689px;\n      }\n      .arrow-type paper-item.end-no {\n        background-position: 50% 16px;\n      }\n      .arrow-type paper-item.end-arrow {\n        background-position: 50% -739px;\n      }\n      .arrow-type paper-item.end-open-arrow {\n        background-position: 50% -789px;\n      }\n      .arrow-type paper-item.end-stealth-arrow {\n        background-position: 50% -839px;\n      }\n      .arrow-type paper-item.end-diamond-arrow {\n        background-position: 50% -890px;\n      }\n      .arrow-type paper-item.end-oval-arrow {\n        background-position: 50% -938px;\n      }\n      .arrow-type paper-item.end-size1 {\n        background-position: 50% -986px;\n      }\n      .arrow-type paper-item.end-size2 {\n        background-position: 50% -1036px;\n      }\n      .arrow-type paper-item.end-size3 {\n        background-position: 50% -1086px;\n      }\n      .arrow-type paper-item.end-size4 {\n        background-position: 50% -1136px;\n      }\n      .arrow-type paper-item.end-size5 {\n        background-position: 50% -1186px;\n      }\n      .arrow-type paper-item.end-size6 {\n        background-position: 50% -1236px;\n      }\n      .arrow-type paper-item.end-size7 {\n        background-position: 50% -1289px;\n      }\n      .arrow-type paper-item.end-size8 {\n        background-position: 50% -1339px;\n      }\n      .arrow-type paper-item.end-size9 {\n        background-position: 50% -1389px;\n      }\n\n      .arrow-type .paper-input-container input {\n        background: var(--url-icon-properties-arrow-type) 110% 0 no-repeat !important;\n      }\n      .arrow-type.begin-no .paper-input-container input {\n        background-position: 110% 5px !important;\n      }\n      .arrow-type.begin-arrow .paper-input-container input {\n        background-position: 110% -50px !important;\n      }\n      .arrow-type.begin-open-arrow .paper-input-container input {\n        background-position: 110% -100px !important;\n      }\n      .arrow-type.begin-stealth-arrow .paper-input-container input {\n        background-position: 110% -150px !important;\n      }\n      .arrow-type.begin-diamond-arrow .paper-input-container input {\n        background-position: 110% -200px !important;\n      }\n      .arrow-type.begin-oval-arrow .paper-input-container input {\n        background-position: 110% -250px !important;\n      }\n      .arrow-type.begin-size1 .paper-input-container input {\n        background-position: 110% -298px !important;\n      }\n      .arrow-type.begin-size2 .paper-input-container input {\n        background-position: 110% -348px !important;\n      }\n      .arrow-type.begin-size3 .paper-input-container input {\n        background-position: 110% -398px !important;\n      }\n      .arrow-type.begin-size4 .paper-input-container input {\n        background-position: 110% -448px !important;\n      }\n      .arrow-type.begin-size5 .paper-input-container input {\n        background-position: 110% -498px !important;\n      }\n      .arrow-type.begin-size6 .paper-input-container input {\n        background-position: 110% -548px !important;\n      }\n      .arrow-type.begin-size7 .paper-input-container input {\n        background-position: 110% -600px !important;\n      }\n      .arrow-type.begin-size8 .paper-input-container input {\n        background-position: 110% -650px !important;\n      }\n      .arrow-type.begin-size9 .paper-input-container input {\n        background-position: 110% -700px !important;\n      }\n      .arrow-type.end-no .paper-input-container input {\n        background-position: 110% 5px !important;\n      }\n      .arrow-type.end-arrow .paper-input-container input {\n        background-position: 110% -750px !important;\n      }\n      .arrow-type.end-open-arrow .paper-input-container input {\n        background-position: 110% -800px !important;\n      }\n      .arrow-type.end-stealth-arrow .paper-input-container input {\n        background-position: 110% -850px !important;\n      }\n      .arrow-type.end-diamond-arrow .paper-input-container input {\n        background-position: 110% -900px !important;\n      }\n      .arrow-type.end-oval-arrow .paper-input-container input {\n        background-position: 110% -950px !important;\n      }\n      .arrow-type.end-size1 .paper-input-container input {\n        background-position: 110% -998px !important;\n      }\n      .arrow-type.end-size2 .paper-input-container input {\n        background-position: 110% -1048px !important;\n      }\n      .arrow-type.end-size3 .paper-input-container input {\n        background-position: 110% -1098px !important;\n      }\n      .arrow-type.end-size4 .paper-input-container input {\n        background-position: 110% -1148px !important;\n      }\n      .arrow-type.end-size5 .paper-input-container input {\n        background-position: 110% -1198px !important;\n      }\n      .arrow-type.end-size6 .paper-input-container input {\n        background-position: 110% -1248px !important;\n      }\n      .arrow-type.end-size7 .paper-input-container input {\n        background-position: 110% -1300px !important;\n      }\n      .arrow-type.end-size8 .paper-input-container input {\n        background-position: 110% -1350px !important;\n      }\n      .arrow-type.end-size9 .paper-input-container input {\n        background-position: 110% -1400px !important;\n      }\n    `\n  ]\n  @property({ type: Object }) value: any = {}\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Array }) fonts: any[] = []\n\n  @state() fontAvailable: boolean = false\n\n  firstUpdated() {\n    this.fontAvailable = !sessionStorage.getItem('ThingsFactory-UseExternServer')\n\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var {\n      alpha = 1,\n      fontFamily,\n      fontSize,\n      lineHeight,\n      letterSpacing,\n      fontColor,\n      bold,\n      italic,\n      fillStyle,\n      lineWidth,\n      strokeStyle,\n      lineDash,\n      lineCap,\n      lineJoin,\n      begin,\n      beginSize,\n      end,\n      endSize\n    } = this.value || {}\n\n    return html`\n      <fieldset>\n        <legend>\n          <ox-i18n topic=\"board-modeller/styles/opacity\" msgid=\"label.opacity\">opacity</ox-i18n>\n        </legend>\n        <ox-input-range min=\"0\" max=\"1\" step=\"0.1\" value-key=\"alpha\" .value=${alpha} editable> </ox-input-range>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <ox-i18n topic=\"board-modeller/styles/text-style\" msgid=\"label.text-style\">text style</ox-i18n>\n        </legend>\n\n        <div class=\"property-grid\">\n          ${this.fontAvailable\n            ? html`\n                <label class=\"property-full-label\">\n                  <ox-i18n msgid=\"label.font-family\">Font Family</ox-i18n>\n                </label>\n\n                <ox-font-selector\n                  value-key=\"fontFamily\"\n                  .value=${fontFamily}\n                  class=\"property-full-input\"\n                  custom-editor\n                ></ox-font-selector>\n              `\n            : html``}\n\n          <label class=\"property-half-label icon-only-label font-size\"></label>\n          <input type=\"number\" value-key=\"fontSize\" .value=${fontSize} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label lineHeight\"></label>\n          <input type=\"number\" value-key=\"lineHeight\" .value=${lineHeight} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label letterSpacing\"></label>\n          <input type=\"number\" value-key=\"letterSpacing\" .value=${letterSpacing} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label color\"></label>\n          <ox-input-color value-key=\"fontColor\" .value=${fontColor} class=\"property-half-input\"> </ox-input-color>\n\n          <label class=\"property-full-label\">\n            <ox-i18n msgid=\"label.text-formatting\">Text Formatting</ox-i18n>\n          </label>\n          <div class=\"property-full-input btn-group\">\n            <paper-button toggles value-key=\"bold\" ?active=${bold} class=\"tbold\"> </paper-button>\n            <paper-button toggles value-key=\"italic\" ?active=${italic} class=\"titalic\"> </paper-button>\n          </div>\n        </div>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <ox-i18n topic=\"board-modeller/styles/fill-style\" msgid=\"label.fill-style\">fill style</ox-i18n>\n        </legend>\n\n        <ox-input-fill-style value-key=\"fillStyle\" .value=${fillStyle} color-only> </ox-input-fill-style>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <ox-i18n msgid=\"label.line-style\" topic=\"board-modeller/styles/line-style\"></ox-i18n>\n        </legend>\n\n        <div class=\"property-grid\">\n          <label class=\"property-half-label icon-only-label linewidth\"></label>\n          <input type=\"number\" value-key=\"lineWidth\" .value=${lineWidth} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label color\"></label>\n          <ox-input-color value-key=\"strokeStyle\" .value=${strokeStyle} class=\"property-half-input\"> </ox-input-color>\n\n          <label class=\"property-full-label\">\n            <ox-i18n msgid=\"label.line-type\">line type</ox-i18n>\n          </label>\n          <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input line-type solid\">\n            <!-- solid는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n            <paper-listbox\n              value-key=\"lineDash\"\n              @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n              slot=\"dropdown-content\"\n              .selected=${lineDash}\n              attr-for-selected=\"name\"\n            >\n              <paper-item class=\"solid\" name=\"solid\"></paper-item>\n              <paper-item class=\"round-dot\" name=\"round-dot\"></paper-item>\n              <paper-item class=\"square-dot\" name=\"square-dot\"></paper-item>\n              <paper-item class=\"dash\" name=\"dash\"></paper-item>\n              <paper-item class=\"dash-dot\" name=\"dash-dot\"></paper-item>\n              <paper-item class=\"long-dash\" name=\"long-dash\"></paper-item>\n              <paper-item class=\"long-dash-dot\" name=\"long-dash-dot\"></paper-item>\n              <paper-item class=\"long-dash-dot-dot\" name=\"long-dash-dot-dot\"></paper-item>\n            </paper-listbox>\n          </paper-dropdown-menu>\n\n          <label class=\"property-full-label\">\n            <ox-i18n msgid=\"label.cap-type\">cap type</ox-i18n>\n          </label>\n          <select class=\"property-full-input select-content\" value-key=\"lineCap\" .value=${lineCap}>\n            <option value=\"butt\"><ox-i18n msgid=\"label.square\">square</ox-i18n></option>\n            <option value=\"round\"><ox-i18n msgid=\"label.round\">round</ox-i18n></option>\n          </select>\n\n          <label class=\"property-full-label\">\n            <ox-i18n msgid=\"label.join-type\">join type</ox-i18n>\n          </label>\n          <select class=\"property-full-input select-content\" value-key=\"lineJoin\" .value=${lineJoin}>\n            <option value=\"miter\"><ox-i18n msgid=\"label.miter\">miter</ox-i18n></option>\n            <option value=\"round\"><ox-i18n msgid=\"label.round\">round</ox-i18n></option>\n            <option value=\"bevel\"><ox-i18n msgid=\"label.bevel\">bevel</ox-i18n></option>\n          </select>\n\n          ${this._isLine(this.selected)\n            ? html`\n                <label class=\"property-full-label\">\n                  <ox-i18n msgid=\"label.begin-type\">begin type</ox-i18n>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type begin-no\">\n                  <!-- begin-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"begin\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${begin}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"begin-no\" name=\"none\"></paper-item>\n                    <paper-item class=\"begin-arrow\" name=\"arrow\"></paper-item>\n                    <paper-item class=\"begin-open-arrow\" name=\"open-arrow\"></paper-item>\n                    <paper-item class=\"begin-stealth-arrow\" name=\"sharp-arrow\"></paper-item>\n                    <paper-item class=\"begin-diamond-arrow\" name=\"diamond\"></paper-item>\n                    <paper-item class=\"begin-oval-arrow\" name=\"oval\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <ox-i18n msgid=\"label.begin-size\">begin size</ox-i18n>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type begin-size1\">\n                  <!-- begin-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"beginSize\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${beginSize}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"begin-size1\" name=\"size1\"></paper-item>\n                    <paper-item class=\"begin-size2\" name=\"size2\"></paper-item>\n                    <paper-item class=\"begin-size3\" name=\"size3\"></paper-item>\n                    <paper-item class=\"begin-size4\" name=\"size4\"></paper-item>\n                    <paper-item class=\"begin-size5\" name=\"size5\"></paper-item>\n                    <paper-item class=\"begin-size6\" name=\"size6\"></paper-item>\n                    <paper-item class=\"begin-size7\" name=\"size7\"></paper-item>\n                    <paper-item class=\"begin-size8\" name=\"size8\"></paper-item>\n                    <paper-item class=\"begin-size9\" name=\"size9\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <ox-i18n msgid=\"label.end-type\">end type</ox-i18n>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type end-no\">\n                  <!-- end-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"end\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${end}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"end-no\" name=\"none\"></paper-item>\n                    <paper-item class=\"end-arrow\" name=\"arrow\"></paper-item>\n                    <paper-item class=\"end-open-arrow\" name=\"open-arrow\"></paper-item>\n                    <paper-item class=\"end-stealth-arrow\" name=\"sharp-arrow\"></paper-item>\n                    <paper-item class=\"end-diamond-arrow\" name=\"diamond\"></paper-item>\n                    <paper-item class=\"end-oval-arrow\" name=\"oval\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <ox-i18n msgid=\"label.end-size\">end size</ox-i18n>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type end-size1\">\n                  <!-- end-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"endSize\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${endSize}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"end-size1\" name=\"size1\"></paper-item>\n                    <paper-item class=\"end-size2\" name=\"size2\"></paper-item>\n                    <paper-item class=\"end-size3\" name=\"size3\"></paper-item>\n                    <paper-item class=\"end-size4\" name=\"size4\"></paper-item>\n                    <paper-item class=\"end-size5\" name=\"size5\"></paper-item>\n                    <paper-item class=\"end-size6\" name=\"size6\"></paper-item>\n                    <paper-item class=\"end-size7\" name=\"size7\"></paper-item>\n                    <paper-item class=\"end-size8\" name=\"size8\"></paper-item>\n                    <paper-item class=\"end-size9\" name=\"size9\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n              `\n            : html``}\n        </div>\n      </fieldset>\n    `\n  }\n\n  _isLine(selected: Component[]) {\n    var isLine = false\n\n    for (var i = 0; i < selected.length; i++) {\n      var comp = selected[i]\n\n      if (!comp.isLine || !comp.isLine()) {\n        isLine = false\n        return isLine\n      }\n\n      isLine = true\n    }\n\n    return isLine\n  }\n}\n"]}