@fmsim/board 0.0.96 → 0.0.97

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/custom-elements.json +1446 -1434
  2. package/demo/index-modeller.html +1 -1
  3. package/demo/index-player.html +1 -1
  4. package/demo/index-viewer.html +1 -1
  5. package/demo/index.html +1 -1
  6. package/dist/src/layers/movement-layer.d.ts +1 -1
  7. package/dist/src/layers/movement-layer.js +2 -1
  8. package/dist/src/layers/movement-layer.js.map +1 -1
  9. package/dist/src/modeller/property-sidebar/inspector/inspector.d.ts +1 -1
  10. package/dist/src/modeller/property-sidebar/styles/styles.d.ts +1 -0
  11. package/dist/src/modeller/property-sidebar/styles/styles.js +302 -0
  12. package/dist/src/modeller/property-sidebar/styles/styles.js.map +1 -1
  13. package/dist/tsconfig.tsbuildinfo +1 -1
  14. package/package.json +3 -3
package/demo/index-modeller.html CHANGED
@@ -2,7 +2,7 @@
2
2
  <html lang="en-GB">
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
6
6
  <style>
7
7
  body {
8
8
  margin: 0;
package/demo/index-player.html CHANGED
@@ -2,7 +2,7 @@
2
2
  <html lang="en-GB">
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
6
6
  <style>
7
7
  body {
8
8
  margin: 0;
package/demo/index-viewer.html CHANGED
@@ -2,7 +2,7 @@
2
2
  <html lang="en-GB">
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
6
6
  <style>
7
7
  body {
8
8
  margin: 0;
package/demo/index.html CHANGED
@@ -2,7 +2,7 @@
2
2
  <html lang="en-GB">
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
6
6
  <style>
7
7
  body {
8
8
  margin: 0;
package/dist/src/layers/movement-layer.d.ts CHANGED
@@ -7,7 +7,7 @@ export type PATH = {
7
7
  dstZone: string;
8
8
  dstUnit: string;
9
9
  pathType: 'COMMAND' | 'JOB';
10
- status: 'NORMAL' | 'DELAY' | 'ALTER';
10
+ status: 'NORMAL' | 'DELAY' | 'ALTER' | 'WARN';
11
11
  transportCnt: number;
12
12
  };
13
13
  export type MOVEMENT = PATH[];
package/dist/src/layers/movement-layer.js CHANGED
@@ -2,7 +2,8 @@ import { Component, Layer } from '@hatiolab/things-scene';
2
2
  const MOVEMENT_STYLES = {
3
3
  NORMAL /* NORMAL_TRANSPORT*/: ['#00B05033', '#00B050'],
4
4
  DELAY /* DELAYED_TRANSPORT*/: ['#FF000033', '#FF0000'],
5
- ALTER /* ALTER_TRANSPORT*/: ['#76717133', '#767171']
5
+ ALTER /* ALTER_TRANSPORT*/: ['#76717133', '#767171'],
6
+ WARN /* WARN_TRANSPORT*/: ['#AAAA0033', '#AAAA00']
6
7
  };
7
8
  const degreesInRadians225 = (195 * Math.PI) / 180;
8
9
  const degreesInRadians135 = (165 * Math.PI) / 180;
package/dist/src/layers/movement-layer.js.map CHANGED
@@ -1 +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}\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'\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"]}
1
+ {"version":3,"file":"movement-layer.js","sourceRoot":"","sources":["../../../src/layers/movement-layer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,MAAM,wBAAwB,CAAA;AAE5E,MAAM,eAAe,GAAgC;IACnD,MAAM,CAAC,qBAAqB,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC;IACtD,KAAK,CAAC,sBAAsB,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC;IACtD,KAAK,CAAC,oBAAoB,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC;IACpD,IAAI,CAAC,mBAAmB,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC;CACnD,CAAA;AAgBD,MAAM,mBAAmB,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,CAAA;AACjD,MAAM,mBAAmB,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,CAAA;AAEjD,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,KAAK;IAAhD;;QACE,2BAAsB,GAAG,CAAC,CAAQ,EAAE,EAAE;YACpC,IAAI,CAAC,IAAI,GAAI,CAAiB,CAAC,MAAM,CAAA;QACvC,CAAC,CAAA;QACD,0BAAqB,GAAG,CAAC,CAAQ,EAAE,EAAE;YACnC,MAAM,SAAS,GAAI,CAAiB,CAAC,MAAM,CAAA;YAC3C,MAAM,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC,KAAK,CAAA;YAEhC,IAAI,IAAI,IAAI,aAAa,EAAE;gBACzB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA,CAAC,WAAW;gBAC1B,OAAM;aACP;QACH,CAAC,CAAA;IAyJH,CAAC;IAvJC,KAAK;QACH,MAAM,OAAO,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC3B,IAAI,CAAC,IAAI,GAAI,CAAiB,CAAC,MAAM,CAAA;QACvC,CAAC,CAAA;QAED,IAAI,CAAC,sBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAChD,MAAM,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAA;QACvE,MAAM,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAA;IACvE,CAAC;IAED,OAAO;QACL,MAAM,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAA;QAC1E,MAAM,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAA;QAExE,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CAAA;IAClC,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,KAAK,CAAA;IACd,CAAC;IAED,SAAS,CAAC,GAA6B,EAAE,EAAS,EAAE,EAAS,EAAE,aAAqB,EAAE,EAAE,KAAa;QACnG,iEAAiE;QACjE,6BAA6B;QAC7B,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;QACpB,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;QACpB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;QAE9B,wBAAwB;QACxB,IAAI,IAAI,GAAG,EAAE,CAAC,CAAC,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,mBAAmB,CAAC,CAAA;QACpE,IAAI,IAAI,GAAG,EAAE,CAAC,CAAC,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,mBAAmB,CAAC,CAAA;QACpE,IAAI,IAAI,GAAG,EAAE,CAAC,CAAC,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,mBAAmB,CAAC,CAAA;QACpE,IAAI,IAAI,GAAG,EAAE,CAAC,CAAC,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,mBAAmB,CAAC,CAAA;QAEpE,2BAA2B;QAC3B,GAAG,CAAC,SAAS,EAAE,CAAA;QAEf,8BAA8B;QAC9B,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAA;QACtB,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAA;QAEtB,GAAG,CAAC,MAAM,EAAE,CAAA;QAEZ,GAAG,CAAC,SAAS,EAAE,CAAA;QAEf,wCAAwC;QACxC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAA;QACtB,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;QACtB,wCAAwC;QACxC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;QACtB,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAA;QACtB,gCAAgC;QAEhC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,CAAA;QAEnB,GAAG,CAAC,MAAM,EAAE,CAAA;QACZ,GAAG,CAAC,IAAI,EAAE,CAAA;QAEV,IAAI,KAAK,EAAE;YACT,MAAM,QAAQ,GAAG,EAAE,CAAA;YACnB,MAAM,UAAU,GAAG,OAAO,CAAA;YAE1B,GAAG,CAAC,IAAI,GAAG,QAAQ,QAAQ,MAAM,UAAU,EAAE,CAAA;YAE7C,MAAM,SAAS,GAAG,GAAG,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,KAAK,CAAA;YAE9C,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;YACrE,GAAG,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,EAAE,SAAS,GAAG,CAAC,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAA;YAEtE,GAAG,CAAC,SAAS,GAAG,OAAO,CAAA;YACvB,GAAG,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;SAC7C;IACH,CAAC;IAED,mBAAmB,CAAC,IAAU;QAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;QACtB,IAAI,GAAG,EAAE,IAAI,CAAA;QAEb,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE;YAChF,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YACzB,IAAI,GAAG,EAAE;gBACP,MAAK;aACN;SACF;QAED,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE;YAChF,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YAC1B,IAAI,IAAI,EAAE;gBACR,MAAK;aACN;SACF;QAED,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;IACpB,CAAC;IAED,MAAM,CAAC,GAA6B;QAClC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;QACtB,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,IAAI,YAAY,KAAK,IAAK,IAAI,CAAC,IAAiB,CAAC,IAAI,EAAE,CAAA;QAE9E,GAAG,CAAC,IAAI,EAAE,CAAA;QAEV,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACtB,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAA;YAClD,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;gBACjB,OAAM;aACP;YAED,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;YACzD,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;gBACxB,GAAG,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC;gBACjD,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,EAAE,IAAI,CAAC;aACrD,CAAA;YAED,GAAG,CAAC,SAAS,EAAE,CAAA;YAEf,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;YAEzD,MAAM,QAAQ,GAAG,GAAG,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAClF;YAAA,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAA;YAEhG,GAAG,CAAC,WAAW,GAAG,QAAQ,CAAA;YAC1B,GAAG,CAAC,SAAS,GAAG,QAAQ,CAAA;YACxB,GAAG,CAAC,SAAS,GAAG,CAAC,CAAA;YAEjB,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;YAE7G,GAAG,CAAC,MAAM,EAAE,CAAA;QACd,CAAC,CAAC,CAAA;QAEF,GAAG,CAAC,OAAO,EAAE,CAAA;IACf,CAAC;IAED,IAAI,QAAQ;QACV,OAAO;YACL,aAAa,EAAE;gBACb,QAAQ,EAAE;oBACR,MAAM,EAAE,IAAI,CAAC,kBAAkB;iBAChC;aACF;SACF,CAAA;IACH,CAAC;IAED,kBAAkB,CAAC,KAAU,EAAE,MAAW,EAAE,IAAS;QACnD,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,SAAS,EAAE;YAClC,IAAI,CAAC,UAAU,EAAE,CAAA;SAClB;IACH,CAAC;IAED,YAAY,CAAC,KAAiB,EAAE,MAAkB;QAChD,IAAI,CAAC,UAAU,EAAE,CAAA;IACnB,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAA","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"]}
package/dist/src/modeller/property-sidebar/inspector/inspector.d.ts CHANGED
@@ -17,7 +17,7 @@ export declare class SceneInspector extends LitElement {
17
17
  _onclick(e: MouseEvent): void;
18
18
  _ondblclick(e: MouseEvent): void;
19
19
  get extendedMap(): any;
20
- getNodeHandleClass(component: Component): "extended" | "collapsed" | "collapsespace";
20
+ getNodeHandleClass(component: Component): "collapsed" | "extended" | "collapsespace";
21
21
  isExtended(component: Component): boolean;
22
22
  toggleExtended(component: Component): void;
23
23
  toggleHidden(component: Component): void;
package/dist/src/modeller/property-sidebar/styles/styles.d.ts CHANGED
@@ -16,4 +16,5 @@ export declare class PropertyStyles extends AbstractProperty {
16
16
  fontAvailable: boolean;
17
17
  firstUpdated(): void;
18
18
  render(): import("lit-html").TemplateResult<1>;
19
+ _isLine(selected: Component[]): boolean;
19
20
  }
package/dist/src/modeller/property-sidebar/styles/styles.js CHANGED
@@ -130,10 +130,116 @@ export class PropertyStyles extends AbstractProperty {
130
130
  <option value="round"><ox-i18n msgid="label.round">round</ox-i18n></option>
131
131
  <option value="bevel"><ox-i18n msgid="label.bevel">bevel</ox-i18n></option>
132
132
  </select>
133
+
134
+ ${this._isLine(this.selected)
135
+ ? html `
136
+ <label class="property-full-label">
137
+ <ox-i18n msgid="label.begin-type">begin type</ox-i18n>
138
+ </label>
139
+ <paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type begin-no">
140
+ <!-- begin-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
141
+ <paper-listbox
142
+ value-key="begin"
143
+ @selected-changed=${(e) => this._onValueChange(e)}
144
+ slot="dropdown-content"
145
+ .selected=${begin}
146
+ attr-for-selected="name"
147
+ >
148
+ <paper-item class="begin-no" name="none"></paper-item>
149
+ <paper-item class="begin-arrow" name="arrow"></paper-item>
150
+ <paper-item class="begin-open-arrow" name="open-arrow"></paper-item>
151
+ <paper-item class="begin-stealth-arrow" name="sharp-arrow"></paper-item>
152
+ <paper-item class="begin-diamond-arrow" name="diamond"></paper-item>
153
+ <paper-item class="begin-oval-arrow" name="oval"></paper-item>
154
+ </paper-listbox>
155
+ </paper-dropdown-menu>
156
+
157
+ <label class="property-full-label">
158
+ <ox-i18n msgid="label.begin-size">begin size</ox-i18n>
159
+ </label>
160
+ <paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type begin-size1">
161
+ <!-- begin-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
162
+ <paper-listbox
163
+ value-key="beginSize"
164
+ @selected-changed=${(e) => this._onValueChange(e)}
165
+ slot="dropdown-content"
166
+ .selected=${beginSize}
167
+ attr-for-selected="name"
168
+ >
169
+ <paper-item class="begin-size1" name="size1"></paper-item>
170
+ <paper-item class="begin-size2" name="size2"></paper-item>
171
+ <paper-item class="begin-size3" name="size3"></paper-item>
172
+ <paper-item class="begin-size4" name="size4"></paper-item>
173
+ <paper-item class="begin-size5" name="size5"></paper-item>
174
+ <paper-item class="begin-size6" name="size6"></paper-item>
175
+ <paper-item class="begin-size7" name="size7"></paper-item>
176
+ <paper-item class="begin-size8" name="size8"></paper-item>
177
+ <paper-item class="begin-size9" name="size9"></paper-item>
178
+ </paper-listbox>
179
+ </paper-dropdown-menu>
180
+
181
+ <label class="property-full-label">
182
+ <ox-i18n msgid="label.end-type">end type</ox-i18n>
183
+ </label>
184
+ <paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type end-no">
185
+ <!-- end-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
186
+ <paper-listbox
187
+ value-key="end"
188
+ @selected-changed=${(e) => this._onValueChange(e)}
189
+ slot="dropdown-content"
190
+ .selected=${end}
191
+ attr-for-selected="name"
192
+ >
193
+ <paper-item class="end-no" name="none"></paper-item>
194
+ <paper-item class="end-arrow" name="arrow"></paper-item>
195
+ <paper-item class="end-open-arrow" name="open-arrow"></paper-item>
196
+ <paper-item class="end-stealth-arrow" name="sharp-arrow"></paper-item>
197
+ <paper-item class="end-diamond-arrow" name="diamond"></paper-item>
198
+ <paper-item class="end-oval-arrow" name="oval"></paper-item>
199
+ </paper-listbox>
200
+ </paper-dropdown-menu>
201
+
202
+ <label class="property-full-label">
203
+ <ox-i18n msgid="label.end-size">end size</ox-i18n>
204
+ </label>
205
+ <paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type end-size1">
206
+ <!-- end-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
207
+ <paper-listbox
208
+ value-key="endSize"
209
+ @selected-changed=${(e) => this._onValueChange(e)}
210
+ slot="dropdown-content"
211
+ .selected=${endSize}
212
+ attr-for-selected="name"
213
+ >
214
+ <paper-item class="end-size1" name="size1"></paper-item>
215
+ <paper-item class="end-size2" name="size2"></paper-item>
216
+ <paper-item class="end-size3" name="size3"></paper-item>
217
+ <paper-item class="end-size4" name="size4"></paper-item>
218
+ <paper-item class="end-size5" name="size5"></paper-item>
219
+ <paper-item class="end-size6" name="size6"></paper-item>
220
+ <paper-item class="end-size7" name="size7"></paper-item>
221
+ <paper-item class="end-size8" name="size8"></paper-item>
222
+ <paper-item class="end-size9" name="size9"></paper-item>
223
+ </paper-listbox>
224
+ </paper-dropdown-menu>
225
+ `
226
+ : html ``}
133
227
  </div>
134
228
  </fieldset>
135
229
  `;
136
230
  }
231
+ _isLine(selected) {
232
+ var isLine = false;
233
+ for (var i = 0; i < selected.length; i++) {
234
+ var comp = selected[i];
235
+ if (!comp.isLine || !comp.isLine()) {
236
+ isLine = false;
237
+ return isLine;
238
+ }
239
+ isLine = true;
240
+ }
241
+ return isLine;
242
+ }
137
243
  }
138
244
  PropertyStyles.styles = [
139
245
  PropertySharedStyle,
@@ -243,6 +349,202 @@ PropertyStyles.styles = [
243
349
  .line-type.long-dash-dot-dot .paper-input-container input {
244
350
  background-position: 50% -345px !important;
245
351
  }
352
+
353
+ .arrow-type paper-menu {
354
+ overflow: hidden;
355
+ max-width: 140px;
356
+ }
357
+ .arrow-type paper-item {
358
+ background: var(--url-icon-properties-arrow-type) 50% 0 no-repeat;
359
+ min-height: 30px;
360
+ padding: 3px 7px;
361
+ width: 30px;
362
+ float: left;
363
+ }
364
+ .arrow-type paper-item.begin-no {
365
+ background-position: 50% 16px;
366
+ }
367
+ .arrow-type paper-item.begin-arrow {
368
+ background-position: 50% -39px;
369
+ }
370
+ .arrow-type paper-item.begin-open-arrow {
371
+ background-position: 50% -89px;
372
+ }
373
+ .arrow-type paper-item.begin-stealth-arrow {
374
+ background-position: 50% -139px;
375
+ }
376
+ .arrow-type paper-item.begin-diamond-arrow {
377
+ background-position: 50% -190px;
378
+ }
379
+ .arrow-type paper-item.begin-oval-arrow {
380
+ background-position: 50% -238px;
381
+ }
382
+ .arrow-type paper-item.begin-size1 {
383
+ background-position: 50% -286px;
384
+ }
385
+ .arrow-type paper-item.begin-size2 {
386
+ background-position: 50% -336px;
387
+ }
388
+ .arrow-type paper-item.begin-size3 {
389
+ background-position: 50% -386px;
390
+ }
391
+ .arrow-type paper-item.begin-size4 {
392
+ background-position: 50% -436px;
393
+ }
394
+ .arrow-type paper-item.begin-size5 {
395
+ background-position: 50% -486px;
396
+ }
397
+ .arrow-type paper-item.begin-size6 {
398
+ background-position: 50% -536px;
399
+ }
400
+ .arrow-type paper-item.begin-size7 {
401
+ background-position: 50% -589px;
402
+ }
403
+ .arrow-type paper-item.begin-size8 {
404
+ background-position: 50% -639px;
405
+ }
406
+ .arrow-type paper-item.begin-size9 {
407
+ background-position: 50% -689px;
408
+ }
409
+ .arrow-type paper-item.end-no {
410
+ background-position: 50% 16px;
411
+ }
412
+ .arrow-type paper-item.end-arrow {
413
+ background-position: 50% -739px;
414
+ }
415
+ .arrow-type paper-item.end-open-arrow {
416
+ background-position: 50% -789px;
417
+ }
418
+ .arrow-type paper-item.end-stealth-arrow {
419
+ background-position: 50% -839px;
420
+ }
421
+ .arrow-type paper-item.end-diamond-arrow {
422
+ background-position: 50% -890px;
423
+ }
424
+ .arrow-type paper-item.end-oval-arrow {
425
+ background-position: 50% -938px;
426
+ }
427
+ .arrow-type paper-item.end-size1 {
428
+ background-position: 50% -986px;
429
+ }
430
+ .arrow-type paper-item.end-size2 {
431
+ background-position: 50% -1036px;
432
+ }
433
+ .arrow-type paper-item.end-size3 {
434
+ background-position: 50% -1086px;
435
+ }
436
+ .arrow-type paper-item.end-size4 {
437
+ background-position: 50% -1136px;
438
+ }
439
+ .arrow-type paper-item.end-size5 {
440
+ background-position: 50% -1186px;
441
+ }
442
+ .arrow-type paper-item.end-size6 {
443
+ background-position: 50% -1236px;
444
+ }
445
+ .arrow-type paper-item.end-size7 {
446
+ background-position: 50% -1289px;
447
+ }
448
+ .arrow-type paper-item.end-size8 {
449
+ background-position: 50% -1339px;
450
+ }
451
+ .arrow-type paper-item.end-size9 {
452
+ background-position: 50% -1389px;
453
+ }
454
+
455
+ .arrow-type .paper-input-container input {
456
+ background: var(--url-icon-properties-arrow-type) 110% 0 no-repeat !important;
457
+ }
458
+ .arrow-type.begin-no .paper-input-container input {
459
+ background-position: 110% 5px !important;
460
+ }
461
+ .arrow-type.begin-arrow .paper-input-container input {
462
+ background-position: 110% -50px !important;
463
+ }
464
+ .arrow-type.begin-open-arrow .paper-input-container input {
465
+ background-position: 110% -100px !important;
466
+ }
467
+ .arrow-type.begin-stealth-arrow .paper-input-container input {
468
+ background-position: 110% -150px !important;
469
+ }
470
+ .arrow-type.begin-diamond-arrow .paper-input-container input {
471
+ background-position: 110% -200px !important;
472
+ }
473
+ .arrow-type.begin-oval-arrow .paper-input-container input {
474
+ background-position: 110% -250px !important;
475
+ }
476
+ .arrow-type.begin-size1 .paper-input-container input {
477
+ background-position: 110% -298px !important;
478
+ }
479
+ .arrow-type.begin-size2 .paper-input-container input {
480
+ background-position: 110% -348px !important;
481
+ }
482
+ .arrow-type.begin-size3 .paper-input-container input {
483
+ background-position: 110% -398px !important;
484
+ }
485
+ .arrow-type.begin-size4 .paper-input-container input {
486
+ background-position: 110% -448px !important;
487
+ }
488
+ .arrow-type.begin-size5 .paper-input-container input {
489
+ background-position: 110% -498px !important;
490
+ }
491
+ .arrow-type.begin-size6 .paper-input-container input {
492
+ background-position: 110% -548px !important;
493
+ }
494
+ .arrow-type.begin-size7 .paper-input-container input {
495
+ background-position: 110% -600px !important;
496
+ }
497
+ .arrow-type.begin-size8 .paper-input-container input {
498
+ background-position: 110% -650px !important;
499
+ }
500
+ .arrow-type.begin-size9 .paper-input-container input {
501
+ background-position: 110% -700px !important;
502
+ }
503
+ .arrow-type.end-no .paper-input-container input {
504
+ background-position: 110% 5px !important;
505
+ }
506
+ .arrow-type.end-arrow .paper-input-container input {
507
+ background-position: 110% -750px !important;
508
+ }
509
+ .arrow-type.end-open-arrow .paper-input-container input {
510
+ background-position: 110% -800px !important;
511
+ }
512
+ .arrow-type.end-stealth-arrow .paper-input-container input {
513
+ background-position: 110% -850px !important;
514
+ }
515
+ .arrow-type.end-diamond-arrow .paper-input-container input {
516
+ background-position: 110% -900px !important;
517
+ }
518
+ .arrow-type.end-oval-arrow .paper-input-container input {
519
+ background-position: 110% -950px !important;
520
+ }
521
+ .arrow-type.end-size1 .paper-input-container input {
522
+ background-position: 110% -998px !important;
523
+ }
524
+ .arrow-type.end-size2 .paper-input-container input {
525
+ background-position: 110% -1048px !important;
526
+ }
527
+ .arrow-type.end-size3 .paper-input-container input {
528
+ background-position: 110% -1098px !important;
529
+ }
530
+ .arrow-type.end-size4 .paper-input-container input {
531
+ background-position: 110% -1148px !important;
532
+ }
533
+ .arrow-type.end-size5 .paper-input-container input {
534
+ background-position: 110% -1198px !important;
535
+ }
536
+ .arrow-type.end-size6 .paper-input-container input {
537
+ background-position: 110% -1248px !important;
538
+ }
539
+ .arrow-type.end-size7 .paper-input-container input {
540
+ background-position: 110% -1300px !important;
541
+ }
542
+ .arrow-type.end-size8 .paper-input-container input {
543
+ background-position: 110% -1350px !important;
544
+ }
545
+ .arrow-type.end-size9 .paper-input-container input {
546
+ background-position: 110% -1400px !important;
547
+ }
246
548
  `
247
549
  ];
248
550
  __decorate([
package/dist/src/modeller/property-sidebar/styles/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/styles/styles.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,kDAAkD,CAAA;AACzD,OAAO,kCAAkC,CAAA;AACzC,OAAO,kCAAkC,CAAA;AACzC,OAAO,2CAA2C,CAAA;AAClD,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAInD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEjE,MAAM,OAAO,cAAe,SAAQ,gBAAgB;IAApD;;QA+G8B,UAAK,GAAQ,EAAE,CAAA;QAChB,aAAQ,GAAgB,EAAE,CAAA;QAC1B,UAAK,GAAU,EAAE,CAAA;QAEnC,kBAAa,GAAY,KAAK,CAAA;IA0IzC,CAAC;IAxIC,YAAY;QACV,IAAI,CAAC,aAAa,GAAG,CAAC,cAAc,CAAC,OAAO,CAAC,+BAA+B,CAAC,CAAA;QAE7E,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM;QACJ,IAAI,EACF,KAAK,GAAG,CAAC,EACT,UAAU,EACV,QAAQ,EACR,UAAU,EACV,SAAS,EACT,IAAI,EACJ,MAAM,EACN,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,EACT,GAAG,EACH,OAAO,EACR,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAEpB,OAAO,IAAI,CAAA;;;;;8EAK+D,KAAK;;;;;;;;;YASvE,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA;;;;;;;2BAOS,UAAU;;;;eAItB;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;6DAGyC,QAAQ;;;+DAGN,UAAU;;;yDAGhB,SAAS;;;;6DAIL,IAAI;+DACF,MAAM;;;;;;;;;;4DAUT,SAAS;;;;;;;;;;8DAUP,SAAS;;;2DAGZ,WAAW;;;;;;;;;kCASpC,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;;0BAElD,QAAQ;;;;;;;;;;;;;;;;;0FAiBwD,OAAO;;;;;;;;2FAQN,QAAQ;;;;;;;KAO9F,CAAA;IACH,CAAC;;AA3PM,qBAAM,GAAG;IACd,mBAAmB;IACnB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0GF;CACF,AA7GY,CA6GZ;AAC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAgB;AAChB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDAA2B;AAC1B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;6CAAkB;AAEnC;IAAR,KAAK,EAAE;qDAA+B","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 ]\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 </div>\n </fieldset>\n `\n }\n}\n"]}
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"]}