import autobind from 'autobind-decorator'; import * as seedrandom from 'seedrandom'; import Chart from 'chart.js'; import * as tinycolor from 'tinycolor2'; import { Variable, PageVar, envVarsDef, funcDefs, Block, isFnBlock } from '.'; import { version } from '../../config'; import { AiScript, utils, parse, values } from '@syuilo/aiscript'; import { createAiScriptEnv } from '../create-aiscript-env'; // https://stackoverflow.com/questions/38493564/chart-area-background-color-chartjs Chart.pluginService.register({ beforeDraw: function (chart, easing) { if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) { var ctx = chart.chart.ctx; ctx.save(); ctx.fillStyle = chart.config.options.chartArea.backgroundColor; ctx.fillRect(0, 0, chart.chart.width, chart.chart.height); ctx.restore(); } } }); type Fn = { slots: string[]; exec: (args: Record) => ReturnType; }; /** * AoiScript evaluator */ export class ASEvaluator { private variables: Variable[]; private pageVars: PageVar[]; private envVars: Record; public aiscript?: AiScript; private pageVarUpdatedCallback; public canvases: Record = {}; private opts: { randomSeed: string; visitor?: any; page?: any; url?: string; enableAiScript: boolean; }; constructor(vm: any, variables: Variable[], pageVars: PageVar[], opts: ASEvaluator['opts']) { this.variables = variables; this.pageVars = pageVars; this.opts = opts; if (this.opts.enableAiScript) { this.aiscript = new AiScript({ ...createAiScriptEnv(vm, { storageKey: 'pages:' + opts.page.id }), ...{ 'MkPages:updated': values.FN_NATIVE(([callback]) => { this.pageVarUpdatedCallback = callback; }), 'MkPages:get_canvas': values.FN_NATIVE(([id]) => { utils.assertString(id); const canvas = this.canvases[id.value]; const ctx = canvas.getContext('2d'); return values.OBJ(new Map([ ['clear_rect', values.FN_NATIVE(([x, y, width, height]) => { ctx.clearRect(x.value, y.value, width.value, height.value) })], ['fill_rect', values.FN_NATIVE(([x, y, width, height]) => { ctx.fillRect(x.value, y.value, width.value, height.value) })], ['stroke_rect', values.FN_NATIVE(([x, y, width, height]) => { ctx.strokeRect(x.value, y.value, width.value, height.value) })], ['fill_text', values.FN_NATIVE(([text, x, y, width]) => { ctx.fillText(text.value, x.value, y.value, width ? width.value : undefined) })], ['stroke_text', values.FN_NATIVE(([text, x, y, width]) => { ctx.strokeText(text.value, x.value, y.value, width ? width.value : undefined) })], ['set_line_width', values.FN_NATIVE(([width]) => { ctx.lineWidth = width.value })], ['set_font', values.FN_NATIVE(([font]) => { ctx.font = font.value })], ['set_fill_style', values.FN_NATIVE(([style]) => { ctx.fillStyle = style.value })], ['set_stroke_style', values.FN_NATIVE(([style]) => { ctx.strokeStyle = style.value })], ['begin_path', values.FN_NATIVE(() => { ctx.beginPath() })], ['close_path', values.FN_NATIVE(() => { ctx.closePath() })], ['move_to', values.FN_NATIVE(([x, y]) => { ctx.moveTo(x.value, y.value) })], ['line_to', values.FN_NATIVE(([x, y]) => { ctx.lineTo(x.value, y.value) })], ['arc', values.FN_NATIVE(([x, y, radius, startAngle, endAngle]) => { ctx.arc(x.value, y.value, radius.value, startAngle.value, endAngle.value) })], ['rect', values.FN_NATIVE(([x, y, width, height]) => { ctx.rect(x.value, y.value, width.value, height.value) })], ['fill', values.FN_NATIVE(() => { ctx.fill() })], ['stroke', values.FN_NATIVE(() => { ctx.stroke() })], ])); }), 'MkPages:chart': values.FN_NATIVE(([id, opts]) => { utils.assertString(id); utils.assertObject(opts); const canvas = this.canvases[id.value]; const color = getComputedStyle(document.documentElement).getPropertyValue('--accent'); const chart = new Chart(canvas, { type: opts.value.get('type').value, data: { labels: opts.value.get('labels').value.map(x => x.value), datasets: opts.value.get('datasets').value.map(x => ({ label: x.value.has('label') ? x.value.get('label').value : '', data: x.value.get('data').value.map(x => x.value), pointRadius: 0, lineTension: 0, borderWidth: 2, borderColor: x.value.has('color') ? x.value.get('color') : color, backgroundColor: tinycolor(x.value.has('color') ? x.value.get('color') : color).setAlpha(0.1).toRgbString(), })) }, options: { responsive: false, title: { display: opts.value.has('title'), text: opts.value.has('title') ? opts.value.get('title').value : '', fontSize: 14, }, layout: { padding: { left: 32, right: 32, top: opts.value.has('title') ? 16 : 32, bottom: 16 } }, legend: { display: opts.value.get('datasets').value.filter(x => x.value.has('label') && x.value.get('label').value).length === 0 ? false : true, position: 'bottom', labels: { boxWidth: 16, } }, tooltips: { enabled: false, }, chartArea: { backgroundColor: '#fff' }, ...(opts.value.get('type').value === 'radar' ? { scale: { ticks: { min: opts.value.has('min') ? opts.value.get('min').value : undefined, max: opts.value.has('max') ? opts.value.get('max').value : undefined, }, pointLabels: { fontSize: 12 } } } : { scales: { yAxes: [{ ticks: { min: opts.value.has('min') ? opts.value.get('min').value : undefined, max: opts.value.has('max') ? opts.value.get('max').value : undefined, } }] } }) } }); }), }}, { in: (q) => { return new Promise(ok => { vm.$root.dialog({ title: q, input: {} }).then(({ canceled, result: a }) => { ok(a); }); }); }, out: (value) => { console.log(value); }, log: (type, params) => { }, }); } const date = new Date(); this.envVars = { AI: 'kawaii', VERSION: version, URL: opts.page ? `${opts.url}/@${opts.page.user.username}/pages/${opts.page.name}` : '', LOGIN: opts.visitor != null, NAME: opts.visitor ? opts.visitor.name || opts.visitor.username : '', USERNAME: opts.visitor ? opts.visitor.username : '', USERID: opts.visitor ? opts.visitor.id : '', NOTES_COUNT: opts.visitor ? opts.visitor.notesCount : 0, FOLLOWERS_COUNT: opts.visitor ? opts.visitor.followersCount : 0, FOLLOWING_COUNT: opts.visitor ? opts.visitor.followingCount : 0, IS_CAT: opts.visitor ? opts.visitor.isCat : false, SEED: opts.randomSeed ? opts.randomSeed : '', YMD: `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`, AISCRIPT_DISABLED: !this.opts.enableAiScript, NULL: null }; } public registerCanvas(id: string, canvas: any) { this.canvases[id] = canvas; } @autobind public updatePageVar(name: string, value: any) { const pageVar = this.pageVars.find(v => v.name === name); if (pageVar !== undefined) { pageVar.value = value; if (this.pageVarUpdatedCallback) { if (this.aiscript) this.aiscript.execFn(this.pageVarUpdatedCallback, [values.STR(name), utils.jsToVal(value)]); } } else { throw new AoiScriptError(`No such page var '${name}'`); } } @autobind public updateRandomSeed(seed: string) { this.opts.randomSeed = seed; this.envVars.SEED = seed; } @autobind private interpolate(str: string, scope: Scope) { return str.replace(/{(.+?)}/g, match => { const v = scope.getState(match.slice(1, -1).trim()); return v == null ? 'NULL' : v.toString(); }); } @autobind public evaluateVars(): Record { const values: Record = {}; for (const [k, v] of Object.entries(this.envVars)) { values[k] = v; } for (const v of this.pageVars) { values[v.name] = v.value; } for (const v of this.variables) { values[v.name] = this.evaluate(v, new Scope([values])); } return values; } @autobind private evaluate(block: Block, scope: Scope): any { if (block.type === null) { return null; } if (block.type === 'number') { return parseInt(block.value, 10); } if (block.type === 'text' || block.type === 'multiLineText') { return this.interpolate(block.value || '', scope); } if (block.type === 'textList') { return this.interpolate(block.value || '', scope).trim().split('\n'); } if (block.type === 'ref') { return scope.getState(block.value); } if (block.type === 'aiScriptVar') { if (this.aiscript) { try { return utils.valToJs(this.aiscript.scope.get(block.value)); } catch (e) { return null; } } else { return null; } } if (isFnBlock(block)) { // ユーザー関数定義 return { slots: block.value.slots.map(x => x.name), exec: (slotArg: Record) => { return this.evaluate(block.value.expression, scope.createChildScope(slotArg, block.id)); } } as Fn; } if (block.type.startsWith('fn:')) { // ユーザー関数呼び出し const fnName = block.type.split(':')[1]; const fn = scope.getState(fnName); const args = {} as Record; for (let i = 0; i < fn.slots.length; i++) { const name = fn.slots[i]; args[name] = this.evaluate(block.args[i], scope); } return fn.exec(args); } if (block.args === undefined) return null; const date = new Date(); const day = `${this.opts.visitor ? this.opts.visitor.id : ''} ${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`; const funcs: { [p in keyof typeof funcDefs]: Function } = { not: (a: boolean) => !a, or: (a: boolean, b: boolean) => a || b, and: (a: boolean, b: boolean) => a && b, eq: (a: any, b: any) => a === b, notEq: (a: any, b: any) => a !== b, gt: (a: number, b: number) => a > b, lt: (a: number, b: number) => a < b, gtEq: (a: number, b: number) => a >= b, ltEq: (a: number, b: number) => a <= b, if: (bool: boolean, a: any, b: any) => bool ? a : b, for: (times: number, fn: Fn) => { const result = []; for (let i = 0; i < times; i++) { result.push(fn.exec({ [fn.slots[0]]: i + 1 })); } return result; }, add: (a: number, b: number) => a + b, subtract: (a: number, b: number) => a - b, multiply: (a: number, b: number) => a * b, divide: (a: number, b: number) => a / b, mod: (a: number, b: number) => a % b, round: (a: number) => Math.round(a), strLen: (a: string) => a.length, strPick: (a: string, b: number) => a[b - 1], strReplace: (a: string, b: string, c: string) => a.split(b).join(c), strReverse: (a: string) => a.split('').reverse().join(''), join: (texts: string[], separator: string) => texts.join(separator || ''), stringToNumber: (a: string) => parseInt(a), numberToString: (a: number) => a.toString(), splitStrByLine: (a: string) => a.split('\n'), pick: (list: any[], i: number) => list[i - 1], listLen: (list: any[]) => list.length, random: (probability: number) => Math.floor(seedrandom(`${this.opts.randomSeed}:${block.id}`)() * 100) < probability, rannum: (min: number, max: number) => min + Math.floor(seedrandom(`${this.opts.randomSeed}:${block.id}`)() * (max - min + 1)), randomPick: (list: any[]) => list[Math.floor(seedrandom(`${this.opts.randomSeed}:${block.id}`)() * list.length)], dailyRandom: (probability: number) => Math.floor(seedrandom(`${day}:${block.id}`)() * 100) < probability, dailyRannum: (min: number, max: number) => min + Math.floor(seedrandom(`${day}:${block.id}`)() * (max - min + 1)), dailyRandomPick: (list: any[]) => list[Math.floor(seedrandom(`${day}:${block.id}`)() * list.length)], seedRandom: (seed: any, probability: number) => Math.floor(seedrandom(seed)() * 100) < probability, seedRannum: (seed: any, min: number, max: number) => min + Math.floor(seedrandom(seed)() * (max - min + 1)), seedRandomPick: (seed: any, list: any[]) => list[Math.floor(seedrandom(seed)() * list.length)], DRPWPM: (list: string[]) => { const xs = []; let totalFactor = 0; for (const x of list) { const parts = x.split(' '); const factor = parseInt(parts.pop()!, 10); const text = parts.join(' '); totalFactor += factor; xs.push({ factor, text }); } const r = seedrandom(`${day}:${block.id}`)() * totalFactor; let stackedFactor = 0; for (const x of xs) { if (r >= stackedFactor && r <= stackedFactor + x.factor) { return x.text; } else { stackedFactor += x.factor; } } return xs[0].text; }, }; const fnName = block.type; const fn = (funcs as any)[fnName]; if (fn == null) { throw new AoiScriptError(`No such function '${fnName}'`); } else { return fn(...block.args.map(x => this.evaluate(x, scope))); } } } class AoiScriptError extends Error { public info?: any; constructor(message: string, info?: any) { super(message); this.info = info; // Maintains proper stack trace for where our error was thrown (only available on V8) if (Error.captureStackTrace) { Error.captureStackTrace(this, AoiScriptError); } } } class Scope { private layerdStates: Record[]; public name: string; constructor(layerdStates: Scope['layerdStates'], name?: Scope['name']) { this.layerdStates = layerdStates; this.name = name || 'anonymous'; } @autobind public createChildScope(states: Record, name?: Scope['name']): Scope { const layer = [states, ...this.layerdStates]; return new Scope(layer, name); } /** * 指定した名前の変数の値を取得します * @param name 変数名 */ @autobind public getState(name: string): any { for (const later of this.layerdStates) { const state = later[name]; if (state !== undefined) { return state; } } throw new AoiScriptError( `No such variable '${name}' in scope '${this.name}'`, { scope: this.layerdStates }); } }