npm - @fmsim/board - Versions diffs - 0.0.95 → 0.0.96 - Mend

@fmsim/board 0.0.95 → 0.0.96

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 (8) hide show

package/custom-elements.json +1322 -1322
package/dist/src/layers/movement-layer.d.ts +1 -1
package/dist/src/layers/movement-layer.js +1 -1
package/dist/src/layers/movement-layer.js.map +1 -1
package/dist/src/modeller/property-sidebar/property-sidebar.js +1 -1
package/dist/src/modeller/property-sidebar/property-sidebar.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +3 -3

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

@@ -8,7 +8,7 @@ export type PATH = {
     dstUnit: string;
     pathType: 'COMMAND' | 'JOB';
     status: 'NORMAL' | 'DELAY' | 'ALTER';
-    label: string;
+    transportCnt: number;
 };
 export type MOVEMENT = PATH[];
 export default class MovementLayer extends Layer {

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

@@ -114,7 +114,7 @@ export default class MovementLayer extends Layer {
             ctx.strokeStyle = gradient;
             ctx.fillStyle = gradient;
             ctx.lineWidth = 2;
-            this.drawArrow(ctx, srcPos, destPos, 10, path.label);
+            this.drawArrow(ctx, srcPos, destPos, 10, Number(path.transportCnt || 0) > 1 ? String(path.transportCnt) : '');
             ctx.stroke();
         });
         ctx.restore();

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

	@@ -1 +1 @@
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;CACrD,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,IAAI,CAAC,KAAK,CAAC,CAAA;YAEpD,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}\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 label: string\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, path.label)\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":"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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"]}

package/dist/src/modeller/property-sidebar/property-sidebar.js CHANGED Viewed

@@ -58,7 +58,7 @@ export class PropertySidebar extends ScopedElementsMixin(LitElement) {
         <mwc-icon name="specific" ?selected=${tabName == 'specific'}>tune</mwc-icon>
         <mwc-icon name="shape" ?selected=${tabName == 'shape'}>format_shapes</mwc-icon>
         <mwc-icon name="style" ?selected=${tabName == 'style'}>palette</mwc-icon>
-        <!-- <mwc-icon name="effect" ?selected=${tabName == 'effect'}>movie_filter</mwc-icon> -->
+        <mwc-icon name="effect" ?selected=${tabName == 'effect'}>movie_filter</mwc-icon>
         <mwc-icon name="data-binding" ?selected=${tabName == 'data-binding'}>share</mwc-icon>
         <mwc-icon name="inspector" ?selected=${tabName == 'inspector'}>visibility</mwc-icon>
       </div>

package/dist/src/modeller/property-sidebar/property-sidebar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"property-sidebar.js","sourceRoot":"","sources":["../../../../src/modeller/property-sidebar/property-sidebar.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport deepClone from 'lodash-es/cloneDeep'\n\nimport { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { PropertyDataBinding } from './data-binding/data-binding.js'\nimport { PropertyEffects } from './effects/effects.js'\nimport { SceneInspector } from './inspector/inspector'\nimport { PropertyShapes } from './shapes/shapes.js'\nimport { PropertySpecific } from './specifics/specifics.js'\nimport { PropertyStyles } from './styles/styles.js'\n\nexport class PropertySidebar extends ScopedElementsMixin(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n border-left: 1px solid var(--paper-blue-grey-100);\n width: 270px;\n display: flex;\n flex-direction: column;\n background-color: var(--property-sidebar-background-color);\n user-select: none;\n\n --input-padding: var(--padding-narrow);\n --label-font: var(--property-sidebar-fieldset-label);\n }\n\n [tab] {\n display: flex;\n background-color: rgba(0, 0, 0, 0.08);\n opacity: 0.85;\n }\n\n [tab] mwc-icon {\n flex: 1;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n color: var(--property-sidebar-tab-icon-color);\n height: 40px;\n }\n\n [tab] [selected] {\n background-color: var(--property-sidebar-background-color);\n border-left: 1px solid rgba(255, 255, 255, 0.5);\n border-right: 1px solid rgba(0, 0, 0, 0.15);\n opacity: 1;\n }\n\n [content] {\n flex: 1;\n\n overflow: hidden;\n overflow-y: auto;\n }\n\n [content] > :not([active]) {\n display: none;\n }\n `\n ]\n\n @property({ type: Object }) scene: Scene \| null = null\n @property({ type: Object }) bounds: any = {}\n @property({ type: Object }) model: Model \| null = {}\n @property({ type: Array }) selected: Component[] = []\n @property({ type: Array }) specificProps: any\n @property({ type: String }) tabName: string \| null = 'specific'\n @property({ type: Boolean }) collapsed: boolean = false\n @property({ type: Array }) fonts: any[] = []\n @property({ type: Array }) propertyEditor: any[] = []\n\n propertyTarget: Component \| null = null\n\n firstUpdated() {\n this.renderRoot.addEventListener('property-change', this._onPropertyChanged.bind(this) as EventListener)\n this.renderRoot.addEventListener('bounds-change', this._onBoundsChanged.bind(this) as EventListener)\n }\n\n updated(change: PropertyValues<this>) {\n change.has('scene') && this._onSceneChanged()\n change.has('selected') && this._onSelectedChanged(this.selected)\n change.has('collapsed') && this._onCollapsed(this.collapsed)\n }\n\n static get scopedElements() {\n return {\n 'property-shape': PropertyShapes,\n 'property-style': PropertyStyles,\n 'property-effect': PropertyEffects,\n 'property-specific': PropertySpecific,\n 'property-data-binding': PropertyDataBinding,\n 'scene-inspector': SceneInspector\n }\n }\n\n render() {\n var tabName = this.tabName ? this.tabName : 'specific'\n\n return html`\n <div\n tab\n @click=${(e: MouseEvent) => {\n this.tabName = (e.target as HTMLElement).getAttribute('name')\n }}\n >\n <mwc-icon name=\"specific\" ?selected=${tabName == 'specific'}>tune</mwc-icon>\n <mwc-icon name=\"shape\" ?selected=${tabName == 'shape'}>format_shapes</mwc-icon>\n <mwc-icon name=\"style\" ?selected=${tabName == 'style'}>palette</mwc-icon>\n <!-- <mwc-icon name=\"effect\" ?selected=${tabName == 'effect'}>movie_filter</mwc-icon> -->\n <mwc-icon name=\"data-binding\" ?selected=${tabName == 'data-binding'}>share</mwc-icon>\n <mwc-icon name=\"inspector\" ?selected=${tabName == 'inspector'}>visibility</mwc-icon>\n </div>\n\n <div content>\n ${html`\n ${{\n specific: html`\n <property-specific\n .value=${this.model}\n .scene=${this.scene}\n .selected=${this.selected}\n .props=${this.specificProps}\n .propertyEditor=${this.propertyEditor}\n ?active=${tabName == 'specific'}\n >\n </property-specific>\n `,\n shape: html`\n <property-shape\n .value=${this.model}\n .bounds=${this.bounds}\n .selected=${this.selected}\n ?active=${tabName == 'shape'}\n >\n </property-shape>\n `,\n style: html`\n <property-style\n .value=${this.model}\n .selected=${this.selected}\n .fonts=${this.fonts}\n ?active=${tabName == 'style'}\n >\n </property-style>\n `,\n effect: html`\n <property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>\n </property-effect>\n `,\n 'data-binding': html`\n <property-data-binding .scene=${this.scene} .value=${this.model} ?active=${tabName == 'data-binding'}>\n </property-data-binding>\n `,\n inspector: html`\n <scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></scene-inspector>\n `\n }[this.tabName!]}\n `}\n </div>\n `\n }\n\n _onPropertyChanged(e: CustomEvent) {\n var detail = e.detail\n\n if (this.propertyTarget) {\n / 단일 컴포넌트의 경우에 적용 /\n this.scene && this.scene.undoableChange(() => this.propertyTarget!.set(detail))\n } else {\n / 여러 컴포넌트의 경우에 적용 /\n this.scene && this.scene.undoableChange(() => this.selected.forEach(component => component.set(detail)))\n }\n }\n\n _onBoundsChanged(e: CustomEvent) {\n var detail = e.detail\n\n if (!this.scene) {\n return\n }\n\n if (this.propertyTarget) {\n / 단일 컴포넌트의 경우에 적용 /\n this.scene.undoableChange(() => {\n this.propertyTarget!.bounds = {\n ...this.propertyTarget!.bounds,\n ...detail\n }\n })\n } else {\n / 여러 컴포넌트의 경우에 적용 */\n this.scene.undoableChange(() => {\n this.selected.forEach(component => {\n component.bounds = {\n ...component.bounds,\n ...detail\n }\n })\n })\n }\n }\n\n _onChangedByScene() {\n if (this.propertyTarget) {\n this.model = {\n ...this.propertyTarget.model\n }\n this._setBounds(this.propertyTarget.bounds)\n }\n }\n\n _setPropertyTargetAsDefault() {\n if (!this.scene) {\n this._setPropertyTarget(null)\n this.specificProps = []\n this.model = null\n this.bounds = {}\n } else {\n this.scene.select('model-layer')\n }\n }\n\n _onCollapsed(collapsed: boolean) {\n !collapsed && (this.style.display = '')\n\n this.animate(\n collapsed\n ? [\n { transform: 'translateX(0)', opacity: 1, easing: 'ease-in' },\n { transform: 'translateX(100%)', opacity: 1 }\n ]\n : [\n { transform: 'translateX(100%)', opacity: 1 },\n { transform: 'translateX(0)', opacity: 1, easing: 'ease-out' }\n ],\n {\n duration: 500\n }\n ).onfinish = () => {\n collapsed && (this.style.display = 'none')\n dispatchEvent(new Event('resize'))\n }\n }\n\n async _onSceneChanged() {\n await this.updateComplete\n\n if (this.scene) this.selected = this.scene.select('model-layer')\n }\n\n async _onSelectedChanged(after: Component[]) {\n await this.updateComplete\n\n if (after.length == 1) {\n this._setPropertyTarget(after[0])\n // 컴포넌트 특성 속성(specific properties)을 먼저 바꾸고, 모델을 바꾸어준다.\n // 컴포넌트 속성에 따라 UI 컴포넌트가 준비되고, 이후에 모델값을 보여주도록 하기 위해서이다.\n this.specificProps = deepClone(this.propertyTarget!.nature.properties)\n this.model = {\n ...this.propertyTarget!.model\n }\n this._setBounds(this.propertyTarget!.bounds)\n } else if (after.length == 0) {\n // 선택이 안된 경우\n\n this._setPropertyTargetAsDefault()\n } else {\n // 다중 선택된 경우\n\n var type = after[0].model.type\n for (let i = 1; i < after.length; i++) {\n if (after[i].model.type != type) {\n type = undefined\n break\n }\n }\n\n this._setPropertyTarget(null)\n\n if (type) this.specificProps = deepClone(after[0].nature.properties)\n else this.specificProps = null\n\n this.model = {\n type: type,\n alpha: 1\n }\n this.bounds = {}\n }\n }\n\n _setPropertyTarget(newTarget: Component \| null) {\n var oldTarget = this.propertyTarget\n\n if (oldTarget) {\n oldTarget.off('change', this._onChangedByScene, this)\n }\n if (newTarget) {\n newTarget.on('change', this._onChangedByScene, this)\n }\n\n this.propertyTarget = newTarget\n }\n\n _setBounds(bounds: BOUNDS) {\n this.bounds = {\n left: bounds.left,\n top: bounds.top,\n width: Math.round(bounds.width),\n height: Math.round(bounds.height)\n }\n }\n}\n"]}
1	+ {"version":3,"file":"property-sidebar.js","sourceRoot":"","sources":["../../../../src/modeller/property-sidebar/property-sidebar.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport deepClone from 'lodash-es/cloneDeep'\n\nimport { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { PropertyDataBinding } from './data-binding/data-binding.js'\nimport { PropertyEffects } from './effects/effects.js'\nimport { SceneInspector } from './inspector/inspector'\nimport { PropertyShapes } from './shapes/shapes.js'\nimport { PropertySpecific } from './specifics/specifics.js'\nimport { PropertyStyles } from './styles/styles.js'\n\nexport class PropertySidebar extends ScopedElementsMixin(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n border-left: 1px solid var(--paper-blue-grey-100);\n width: 270px;\n display: flex;\n flex-direction: column;\n background-color: var(--property-sidebar-background-color);\n user-select: none;\n\n --input-padding: var(--padding-narrow);\n --label-font: var(--property-sidebar-fieldset-label);\n }\n\n [tab] {\n display: flex;\n background-color: rgba(0, 0, 0, 0.08);\n opacity: 0.85;\n }\n\n [tab] mwc-icon {\n flex: 1;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n color: var(--property-sidebar-tab-icon-color);\n height: 40px;\n }\n\n [tab] [selected] {\n background-color: var(--property-sidebar-background-color);\n border-left: 1px solid rgba(255, 255, 255, 0.5);\n border-right: 1px solid rgba(0, 0, 0, 0.15);\n opacity: 1;\n }\n\n [content] {\n flex: 1;\n\n overflow: hidden;\n overflow-y: auto;\n }\n\n [content] > :not([active]) {\n display: none;\n }\n `\n ]\n\n @property({ type: Object }) scene: Scene \| null = null\n @property({ type: Object }) bounds: any = {}\n @property({ type: Object }) model: Model \| null = {}\n @property({ type: Array }) selected: Component[] = []\n @property({ type: Array }) specificProps: any\n @property({ type: String }) tabName: string \| null = 'specific'\n @property({ type: Boolean }) collapsed: boolean = false\n @property({ type: Array }) fonts: any[] = []\n @property({ type: Array }) propertyEditor: any[] = []\n\n propertyTarget: Component \| null = null\n\n firstUpdated() {\n this.renderRoot.addEventListener('property-change', this._onPropertyChanged.bind(this) as EventListener)\n this.renderRoot.addEventListener('bounds-change', this._onBoundsChanged.bind(this) as EventListener)\n }\n\n updated(change: PropertyValues<this>) {\n change.has('scene') && this._onSceneChanged()\n change.has('selected') && this._onSelectedChanged(this.selected)\n change.has('collapsed') && this._onCollapsed(this.collapsed)\n }\n\n static get scopedElements() {\n return {\n 'property-shape': PropertyShapes,\n 'property-style': PropertyStyles,\n 'property-effect': PropertyEffects,\n 'property-specific': PropertySpecific,\n 'property-data-binding': PropertyDataBinding,\n 'scene-inspector': SceneInspector\n }\n }\n\n render() {\n var tabName = this.tabName ? this.tabName : 'specific'\n\n return html`\n <div\n tab\n @click=${(e: MouseEvent) => {\n this.tabName = (e.target as HTMLElement).getAttribute('name')\n }}\n >\n <mwc-icon name=\"specific\" ?selected=${tabName == 'specific'}>tune</mwc-icon>\n <mwc-icon name=\"shape\" ?selected=${tabName == 'shape'}>format_shapes</mwc-icon>\n <mwc-icon name=\"style\" ?selected=${tabName == 'style'}>palette</mwc-icon>\n <mwc-icon name=\"effect\" ?selected=${tabName == 'effect'}>movie_filter</mwc-icon>\n <mwc-icon name=\"data-binding\" ?selected=${tabName == 'data-binding'}>share</mwc-icon>\n <mwc-icon name=\"inspector\" ?selected=${tabName == 'inspector'}>visibility</mwc-icon>\n </div>\n\n <div content>\n ${html`\n ${{\n specific: html`\n <property-specific\n .value=${this.model}\n .scene=${this.scene}\n .selected=${this.selected}\n .props=${this.specificProps}\n .propertyEditor=${this.propertyEditor}\n ?active=${tabName == 'specific'}\n >\n </property-specific>\n `,\n shape: html`\n <property-shape\n .value=${this.model}\n .bounds=${this.bounds}\n .selected=${this.selected}\n ?active=${tabName == 'shape'}\n >\n </property-shape>\n `,\n style: html`\n <property-style\n .value=${this.model}\n .selected=${this.selected}\n .fonts=${this.fonts}\n ?active=${tabName == 'style'}\n >\n </property-style>\n `,\n effect: html`\n <property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>\n </property-effect>\n `,\n 'data-binding': html`\n <property-data-binding .scene=${this.scene} .value=${this.model} ?active=${tabName == 'data-binding'}>\n </property-data-binding>\n `,\n inspector: html`\n <scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></scene-inspector>\n `\n }[this.tabName!]}\n `}\n </div>\n `\n }\n\n _onPropertyChanged(e: CustomEvent) {\n var detail = e.detail\n\n if (this.propertyTarget) {\n / 단일 컴포넌트의 경우에 적용 /\n this.scene && this.scene.undoableChange(() => this.propertyTarget!.set(detail))\n } else {\n / 여러 컴포넌트의 경우에 적용 /\n this.scene && this.scene.undoableChange(() => this.selected.forEach(component => component.set(detail)))\n }\n }\n\n _onBoundsChanged(e: CustomEvent) {\n var detail = e.detail\n\n if (!this.scene) {\n return\n }\n\n if (this.propertyTarget) {\n / 단일 컴포넌트의 경우에 적용 /\n this.scene.undoableChange(() => {\n this.propertyTarget!.bounds = {\n ...this.propertyTarget!.bounds,\n ...detail\n }\n })\n } else {\n / 여러 컴포넌트의 경우에 적용 */\n this.scene.undoableChange(() => {\n this.selected.forEach(component => {\n component.bounds = {\n ...component.bounds,\n ...detail\n }\n })\n })\n }\n }\n\n _onChangedByScene() {\n if (this.propertyTarget) {\n this.model = {\n ...this.propertyTarget.model\n }\n this._setBounds(this.propertyTarget.bounds)\n }\n }\n\n _setPropertyTargetAsDefault() {\n if (!this.scene) {\n this._setPropertyTarget(null)\n this.specificProps = []\n this.model = null\n this.bounds = {}\n } else {\n this.scene.select('model-layer')\n }\n }\n\n _onCollapsed(collapsed: boolean) {\n !collapsed && (this.style.display = '')\n\n this.animate(\n collapsed\n ? [\n { transform: 'translateX(0)', opacity: 1, easing: 'ease-in' },\n { transform: 'translateX(100%)', opacity: 1 }\n ]\n : [\n { transform: 'translateX(100%)', opacity: 1 },\n { transform: 'translateX(0)', opacity: 1, easing: 'ease-out' }\n ],\n {\n duration: 500\n }\n ).onfinish = () => {\n collapsed && (this.style.display = 'none')\n dispatchEvent(new Event('resize'))\n }\n }\n\n async _onSceneChanged() {\n await this.updateComplete\n\n if (this.scene) this.selected = this.scene.select('model-layer')\n }\n\n async _onSelectedChanged(after: Component[]) {\n await this.updateComplete\n\n if (after.length == 1) {\n this._setPropertyTarget(after[0])\n // 컴포넌트 특성 속성(specific properties)을 먼저 바꾸고, 모델을 바꾸어준다.\n // 컴포넌트 속성에 따라 UI 컴포넌트가 준비되고, 이후에 모델값을 보여주도록 하기 위해서이다.\n this.specificProps = deepClone(this.propertyTarget!.nature.properties)\n this.model = {\n ...this.propertyTarget!.model\n }\n this._setBounds(this.propertyTarget!.bounds)\n } else if (after.length == 0) {\n // 선택이 안된 경우\n\n this._setPropertyTargetAsDefault()\n } else {\n // 다중 선택된 경우\n\n var type = after[0].model.type\n for (let i = 1; i < after.length; i++) {\n if (after[i].model.type != type) {\n type = undefined\n break\n }\n }\n\n this._setPropertyTarget(null)\n\n if (type) this.specificProps = deepClone(after[0].nature.properties)\n else this.specificProps = null\n\n this.model = {\n type: type,\n alpha: 1\n }\n this.bounds = {}\n }\n }\n\n _setPropertyTarget(newTarget: Component \| null) {\n var oldTarget = this.propertyTarget\n\n if (oldTarget) {\n oldTarget.off('change', this._onChangedByScene, this)\n }\n if (newTarget) {\n newTarget.on('change', this._onChangedByScene, this)\n }\n\n this.propertyTarget = newTarget\n }\n\n _setBounds(bounds: BOUNDS) {\n this.bounds = {\n left: bounds.left,\n top: bounds.top,\n width: Math.round(bounds.width),\n height: Math.round(bounds.height)\n }\n }\n}\n"]}